|
@@ -6,6 +6,7 @@ import Editor from "../components/editor";
|
|
import {actionSnippetAdd} from "../actions/actionSnippetAdd";
|
|
import {actionSnippetAdd} from "../actions/actionSnippetAdd";
|
|
import {Link} from "react-router-dom";
|
|
import {Link} from "react-router-dom";
|
|
import {Redirect} from "react-router";
|
|
import {Redirect} from "react-router";
|
|
|
|
+import {sortableContainer, sortableElement, arrayMove} from 'react-sortable-hoc';
|
|
|
|
|
|
|
|
|
|
const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, descriptionText, filesArr, nameText,}) => {
|
|
const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, descriptionText, filesArr, nameText,}) => {
|
|
@@ -38,7 +39,7 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
|
|
return el?.type === "javascript";
|
|
return el?.type === "javascript";
|
|
})[0]?.text;
|
|
})[0]?.text;
|
|
|
|
|
|
- console.log(js);
|
|
|
|
|
|
+ console.log(files);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
@@ -55,6 +56,33 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
|
|
}, [html, css, js]);
|
|
}, [html, css, js]);
|
|
|
|
|
|
|
|
|
|
|
|
+ const SortableItem = sortableElement(({value, index}) => {
|
|
|
|
+ console.log(value);
|
|
|
|
+ return (
|
|
|
|
+ <span>{value.name || "new edit "} </span>
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const SortableList = sortableContainer(({items})=>{
|
|
|
|
+
|
|
|
|
+ console.log(items)
|
|
|
|
+
|
|
|
|
+ return(
|
|
|
|
+ <div>
|
|
|
|
+ {items?.map((value, index) => (
|
|
|
|
+ <SortableItem value={value} index={index} />
|
|
|
|
+ ))
|
|
|
|
+ }
|
|
|
|
+ </div>
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const onSortEnd = ({oldIndex, newIndex}) => {
|
|
|
|
+ let arr = arrayMove(filesArr, oldIndex, newIndex);
|
|
|
|
+ setFiles(arr)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
return (
|
|
return (
|
|
<div>
|
|
<div>
|
|
<Link to="/">
|
|
<Link to="/">
|
|
@@ -74,6 +102,12 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
|
|
<iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%" height="100%"
|
|
<iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%" height="100%"
|
|
style={{height: "280px", marginLeft: "2%",marginTop: "40px", border: "5px solid green"}}/>
|
|
style={{height: "280px", marginLeft: "2%",marginTop: "40px", border: "5px solid green"}}/>
|
|
|
|
|
|
|
|
+
|
|
|
|
+ <div style={{marginTop:"20px", textAlign:'center'}}>
|
|
|
|
+ <p onClick={()=>console.log(files)}><b>Click here </b><span>to reverse the snippets</span></p>
|
|
|
|
+ <SortableList items={files} onSortEnd={onSortEnd} />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
{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}
|