|
@@ -9,8 +9,54 @@ import {actionSnippetAdd} from "../actions/actionSnippetAdd";
|
|
|
|
|
|
import {sortableContainer, sortableElement, arrayMove} from 'react-sortable-hoc';
|
|
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 SortableItem = sortableElement(({value}) => <li>{value}</li>);
|
|
|
|
|
|
const SortableContainer = sortableContainer(({children}) => {
|
|
const SortableContainer = sortableContainer(({children}) => {
|
|
@@ -19,21 +65,26 @@ const SortableContainer = sortableContainer(({children}) => {
|
|
|
|
|
|
|
|
|
|
const Sortable = ({render:Tag}) => {
|
|
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 (
|
|
return (
|
|
- <Tag >
|
|
|
|
|
|
+ <Tag>
|
|
{items.map((value, index) => (
|
|
{items.map((value, index) => (
|
|
- <SortableItem key={`item-${value}`} index={index} value={value} />
|
|
|
|
|
|
+ <SortableItem key={`item-${value}`} index={index} value={value} />
|
|
))}
|
|
))}
|
|
</Tag>
|
|
</Tag>
|
|
)
|
|
)
|
|
-}
|
|
|
|
|
|
+}*/
|
|
|
|
|
|
-const Snippets = ({onSave, render:Tag}) => {
|
|
|
|
|
|
+const Snippets = ({onSave}) => {
|
|
const [files, setFiles] = useState([
|
|
const [files, setFiles] = useState([
|
|
{type: "html", text:`
|
|
{type: "html", text:`
|
|
<div id='area'>⚠ achtung ⚠</div>
|
|
<div id='area'>⚠ achtung ⚠</div>
|
|
@@ -125,13 +176,39 @@ bluek.onclick = () => {
|
|
return () => clearTimeout(timeout);
|
|
return () => clearTimeout(timeout);
|
|
}, [html, css, js]);
|
|
}, [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 (
|
|
return (
|
|
<div>
|
|
<div>
|
|
- <Sortable render={SortableContainer} />
|
|
|
|
|
|
+ <SortableList items={files} onSortEnd={onSortEnd} axis='xy' />
|
|
|
|
+
|
|
|
|
|
|
<iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
|
|
<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"}}/>
|
|
height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
|
|
|
|
|
|
|
|
+
|
|
{files.map((data, index) => (
|
|
{files.map((data, index) => (
|
|
<>
|
|
<>
|
|
<Editor onDelete={() => setFiles(files.filter((item) => item !== data))} data={data}
|
|
<Editor onDelete={() => setFiles(files.filter((item) => item !== data))} data={data}
|
|
@@ -139,6 +216,7 @@ bluek.onclick = () => {
|
|
/>
|
|
/>
|
|
</>
|
|
</>
|
|
))}
|
|
))}
|
|
|
|
+
|
|
<br />
|
|
<br />
|
|
<div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
|
|
<div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
|
|
<div>
|
|
<div>
|