fix merge

src/merge/SortableFiles.jsx

@@ -1,11 +1,11 @@
-import React, { PureComponent } from 'react';
+import React, { memo, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import {
   sortableContainer,
   sortableElement,
   arrayMove,
 } from 'react-sortable-hoc';
 import { basename } from 'path';
+import { Checkbox } from 'evergreen-ui';
 
 const rowStyle = {
   padding: 5, fontSize: 14, margin: '7px 0', boxShadow: '0 0 5px 0px rgba(0,0,0,0.3)', overflowY: 'auto', whiteSpace: 'nowrap',
@@ -27,46 +27,36 @@ const SortableContainer = sortableContainer(({ items }) => (
   </div>
 ));
 
-class SortableFiles extends PureComponent {
+const SortableFiles = memo(({
-  constructor(props) {
+  items: itemsProp, onChange, helperContainer, onAllStreamsChange,
-    super(props);
+}) => {
+  const [items, setItems] = useState(itemsProp);
+  const [allStreams, setAllStreams] = useState(false);
 
-    this.state = {
+  useEffect(() => onAllStreamsChange(allStreams), [allStreams, onAllStreamsChange]);
-      items: props.items,
+  useEffect(() => onChange(items), [items, onChange]);
-    };
-  }
 
-  onSortEnd = ({ oldIndex, newIndex }) => {
+  const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
-    const { items } = this.state;
-    const { onChange } = this.props;
     const newItems = arrayMove(items, oldIndex, newIndex);
-    this.setState({ items: newItems });
+    setItems(newItems);
-    onChange(newItems);
+  }, [items]);
-  };
+
-
+  return (
-  render() {
+    <div>
-    const { helperContainer } = this.props;
+      <div><b>Sort your files for merge</b></div>
-    const { items } = this.state;
+      <SortableContainer
-
+        items={items}
-    return (
+        onSortEnd={onSortEnd}
-      <div>
+        helperContainer={helperContainer}
-        <div><b>Sort your files for merge</b></div>
+        getContainer={() => helperContainer().parentNode}
-        <SortableContainer
+        helperClass="dragging-helper-class"
-          items={items}
+      />
-          onSortEnd={this.onSortEnd}
+
-          helperContainer={helperContainer}
+      <div style={{ marginTop: 10 }}>
-          getContainer={() => helperContainer().parentNode}
+        <Checkbox checked={allStreams} onChange={e => setAllStreams(e.target.checked)} label="Include all streams?" />
-          helperClass="dragging-helper-class"
-        />
       </div>
-    );
+    </div>
-  }
+  );
-}
+});
-
-SortableFiles.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  helperContainer: PropTypes.func.isRequired,
-  items: PropTypes.array.isRequired,
-};
 
 export default SortableFiles;