electron-react-boilerplate4

こちらの続きです。
electron-react-boilerplate3 - C#ATIA

牛歩。
将来的に欲しいと思うものの一つが、項目をD&Dで並び替え出来る機能。

探してみるとこちらがありました。
Material-UI で並べ替え可能なリストを作る - Qiita
連日コピペばかりなのですが、こちらのreact-smooth-dndのものを
electron-react-boilerplate + Material-UI
で機能するようにしてみました。
（そのままでは動作しない為、少し修正はしています。）

まず、array-moveが不足していたので、

yarn add array-move

後に、App.tsxを以下に書き換えました。

// App.tsx typescript

import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Container, Draggable } from 'react-smooth-dnd';
import arrayMove from 'array-move';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import DragHandleIcon from '@material-ui/icons/DragHandle';

const Hello = () => {
  const [items, setItems] = useState([
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
    { id: '4', text: 'Item 4' },
  ]);

  const onDrop = ({
    removedIndex,
    addedIndex,
  }: {
    removedIndex: any;
    addedIndex: any;
  }) => {
    setItems((items) => arrayMove(items, removedIndex, addedIndex));
  };

  return (
    <List>
      <Container dragHandleSelector=".drag-handle" lockAxis="y" onDrop={onDrop}>
        {items.map(({ id, text }) => (
          <Draggable key={id}>
            <ListItem>
              <ListItemText primary={text} />
              <ListItemSecondaryAction>
                <ListItemIcon className="drag-handle">
                  <DragHandleIcon />
                </ListItemIcon>
              </ListItemSecondaryAction>
            </ListItem>
          </Draggable>
        ))}
      </Container>
    </List>
  );
};

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Hello} />
      </Switch>
    </Router>
  );
}

こんな感じになりました。ってD&Dの動作は動画じゃないと
分からないですよね。