sortableHOC сделан на 75%

React/CodePen/src/components/snippet.js

@@ -9,8 +9,54 @@ import {actionSnippetAdd}   from "../actions/actionSnippetAdd";
 
 import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';
 
+const List = () => {
+	const [listData, setListData] = useState([
+		{name:"French1", position: 0, id:0},
+		{name:"French2", position: 0, id:1},
+		{name:"French3", position: 0, id:2},
+		{name:"French4", position: 0, id:3},
+		{name:"French5", position: 0, id:4},
+		{name:"French6", position: 0, id:5}
+	]);
+
+	const SortableItem = sortableElement(({value, index}) => (
+		<div>
+			<div>{value.name}</div>
+		</div>
+	))
+
+	const SortableList = sortableContainer(({items})=>{
+		return(
+			<div>
+				{items
+					.sort((a,b) => a.position - b.position)
+					.map((value, index) => (
+						<SortableItem value={value} index={index} key={value.id} />
+					))
+				}
+			</div>
+		)
+	})
+
+	const onSortEnd = ({oldIndex, newIndex}) => {
+		let arr = arrayMove(listData, oldIndex, newIndex);
+		for(let i=0; i<arr.length; i++){
+			arr[i].position = i;
+		}
+		setListData(arr)
+	}
+
+	const listTitle = <div><b>list items</b></div>
+
+	return(
+		<>
+			<SortableList items={listData} onSortEnd={onSortEnd} axis='xy' />
+		</>
+	)
+}
 
-
+///---------------------------------------------------------=------------------
+/*
 const SortableItem = sortableElement(({value}) => <li>{value}</li>);
 
 const SortableContainer = sortableContainer(({children}) => {
@@ -19,21 +65,26 @@ const SortableContainer = sortableContainer(({children}) => {
 
 
 const Sortable = ({render:Tag}) => {
-  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'])
-  useEffect((oldIndex, newIndex)=>{
-    setItems(items=> arrayMove(items, oldIndex, newIndex))
-  },[items])
+  	const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'])
+
+  	const onSortEnd = ({oldIndex, newIndex}) => {
+		let arr = arrayMove(items, oldIndex, newIndex);
+		for(let i=0; i<arr.length; i++){
+			arr[i].position = i;
+		}
+		setItems(arr)
+	}
 
   return (
-      <Tag >
+      <Tag>
         {items.map((value, index) => (
-          <SortableItem key={`item-${value}`} index={index} value={value} />
+          	<SortableItem key={`item-${value}`} index={index} value={value} />
         ))}
       </Tag>
   )
-}
+}*/
 
-const Snippets = ({onSave, render:Tag}) => {
+const Snippets = ({onSave}) => {
     const [files, setFiles] = useState([
         {type: "html", text:`
 <div id='area'>⚠ achtung ⚠</div> 
@@ -125,13 +176,39 @@ bluek.onclick = () => {
         return () => clearTimeout(timeout);
     }, [html, css, js]);
 
+    const SortableItem = sortableElement(({value, index}) => (
+		<div>
+			<div>{value.name}</div>
+		</div>
+	))
+
+	const SortableList = sortableContainer(({items})=>{
+		return(
+			<div>
+				{items
+					.map((value, index) => (
+						<SortableItem value={value} index={index} />
+					))
+				}
+			</div>
+		)
+	})
+
+	const onSortEnd = ({oldIndex, newIndex}) => {
+		let arr = arrayMove(files, oldIndex, newIndex);
+		setFiles(arr)
+	}
+
+
   return (
     <div>
-        <Sortable render={SortableContainer} />
+      <SortableList items={files} onSortEnd={onSortEnd} axis='xy' />
+
 
         <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
                 height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
 
+
         {files.map((data, index) => (
             <>
                 <Editor onDelete={() => setFiles(files.filter((item) => item !== data))} data={data}
@@ -139,6 +216,7 @@ bluek.onclick = () => {
                 />
             </>
         ))}
+
         <br />
         <div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
           <div>