Навигация по списку материалов с помощью клавиш со стрелками - PullRequest
Новая
       8

Навигация по списку материалов с помощью клавиш со стрелками

0 голосов
/ 25 ноября 2018

Я использую материал-интерфейс для создания электронного приложения.Некоторые экраны являются мастер-деталями, и я использую список, чтобы показать обзор.Я хотел бы сделать возможным перемещение по этому списку с помощью клавиш со стрелками.Есть ли встроенная опция для этого?

Если она не встроена, каков лучший способ сделать это?

Обновление: Я сделал свой собственный компоненттеперь.Не уверен, что это лучшее решение, но, кажется, работает: 

export default function NavigateList(props) {
    const { children, data, ...other } = props;
    const elements = data.map((val, i) => children(val, i));

    function gotoPrevElement() {
        const selected = elements.findIndex(e => e.props.selected);
        if (selected > 0) {
            const el = elements[selected - 1];
            el.props.onClick(data[selected - 1]);
        }
    }
    function gotoNextElement() {
        const selected = elements.findIndex(e => e.props.selected);
        if (selected > -1 && selected < elements.length - 1) {
            const el = elements[selected + 1];
            el.props.onClick(data[selected + 1]);
        }
    }

    function handleKey(e) {
        if (e.key === "ArrowDown") {
            gotoNextElement();
        }
        if (e.key === "ArrowUp") {
            gotoPrevElement();
        }
    }

    return (
        <List onKeyDown={handleKey} {...other}>
            {elements}
        </List>
    );
}

Вот пример, как его можно использовать: 

<NavigateList data={people}>
    {(p, i) => (
        <ListItem
            button
            key={i}
            selected={checkIfSelected(p)}
            onClick={e => setSelected(p)}
        >
            <ListItemText
                primary={p.primary}
                secondary={p.secondary}
            />
        </ListItem>
    )}
</NavigateList>

1 Ответ

0 голосов
/ 25 ноября 2018

Вы можете использовать Список для главного интерфейса и Карта для подробного интерфейса.

Ваш родительский компонент будет обрабатывать List изменения выбораот вашего главного интерфейса и отвечайте за отправку правильных подробных данных в Card.

Вот пример того, как эта структура будет выглядеть с использованием компонентов Material-UI: 

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentDetailIndex: 0,
            numOfListItems: 10,
            detailData: [
                {...},
                {...},
                ...
            ]
        };
    }

    changeDetailIndex = (newIndex) => {
        this.setState({ currentDetailIndex: newIndex });
    }

    moveUp = () => {
        if (this.state.currentDetailIndex > 0) {
            this.setState({ currentDetailIndex: this.state.currentDetailIndex - 1 });
        }
    }

    moveDown = () => {
        if (this.state.currentDetailIndex < this.state.numOfListItems - 1) {
            this.setState({ currentDetailIndex: this.state.currentDetailIndex + 1 });
        }
    }

    onKeyPressed = (e) => {
        if (e.keyCode == '38') {
            // up arrow
            this.moveUp();
        }
        else if (e.keyCode == '40') {
            // down arrow
            this.moveDown();
        }
    }

    render() {
        return (
            <div>
                <List component="nav" onKeyDown={this.onKeyPressed}>
                    <ListItem onClick={() => { this.changeDetailIndex(someIndex); }}>'s... 
                </List>
                <Card>
                    <CardContent>
                        <SomeDetailComponent data={this.state.detailData[this.state.currentDetailIndex]} />
                    </CardContent>
                </Card>
            </div>
        );
    };
}
...