drag change parent ok

exced · Dec 21, 2017 · 79ba34b · 79ba34b
1 parent d906e0e
commit 79ba34b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 30 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { Component } from 'react'
 import FileManager from './lib'
 import { Icon } from 'antd'
 
-const map = {
+const initial = {
   "0": {
     id: "0",
     title: "Root",
@@ -61,14 +61,24 @@ const renderItem = (item) => (
 )
 
 const renderPreviewItem = (item) => (
-  <div style={{ textAlign: 'center', margin: 'auto', width: 200, height: 200, border: '1px solid', borderRadius: 6, borderColor: '#ccc' }}>
-    <img src={item.children.length > 0 ? '/images/folder.png' : '/images/file.png'} alt={item.title} style={{ width: 70, height: 70, margin: 'auto', display: 'block' }} />
+  <div style={{ textAlign: 'center', margin: 'auto', marginTop: 170, width: 200, height: 200, border: '1px solid', borderRadius: 6, borderColor: '#ccc' }}>
+    <img src={item.children.length > 0 ? '/images/folder.png' : '/images/file.png'} alt={item.title} style={{ width: 70, height: 70, margin: 'auto', display: 'block', marginTop: 40 }} />
     <span style={{ width: 150, textAlign: 'left', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{item.title}</span>
   </div>
 )
 
-const App = () => (
-  <FileManager initial={map} rootId={"0"} renderItem={renderItem} renderPreviewItem={renderPreviewItem} />
-)
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      map: initial
+    }
+  }
 
-export default App
+  render() {
+    const { map } = this.state
+    return (
+      <FileManager initial={map} rootId={"0"} onChange={map => this.setState({ map })} renderItem={renderItem} renderPreviewItem={renderPreviewItem} />
+    )
+  }
+}
diff --git a/src/lib/Root.js b/src/lib/Root.js
@@ -57,12 +57,7 @@ const StyledFooter = styled(Footer) `
   background-color: white;
 `
 
-const collect = (map) => Object
-  .values(map)
-  .reduce((a, e) => ({
-    ...a,
-    [e.id]: e.children.map(id => map[id])
-  }), {})
+const assemble = (map, ids) => ids.map(id => map[id])
 
 const reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list);
@@ -72,8 +67,8 @@ const reorder = (list, startIndex, endIndex) => {
 };
 
 const reorderMap = ({ map, source, destination }) => {
-  const current = [...map[source.droppableId]];
-  const next = [...map[destination.droppableId]];
+  const current = map[source.droppableId].children;
+  const next = map[destination.droppableId].children;
   const target = current[source.index];
 
   // moving to same list
@@ -83,10 +78,15 @@ const reorderMap = ({ map, source, destination }) => {
       source.index,
       destination.index,
     );
+
     const result = {
       ...map,
-      [source.droppableId]: reordered,
+      [source.droppableId]: {
+        ...map[source.droppableId],
+        children: reordered
+      },
     };
+
     return {
       map: result,
       // not auto focusing in own list
@@ -103,8 +103,18 @@ const reorderMap = ({ map, source, destination }) => {
 
   const result = {
     ...map,
-    [source.droppableId]: current,
-    [destination.droppableId]: next,
+    [target]: {
+      ...map[target],
+      parent: destination.droppableId,
+    },
+    [source.droppableId]: {
+      ...map[source.droppableId],
+      children: current,
+    },
+    [destination.droppableId]: {
+      ...map[destination.droppableId],
+      children: next,
+    },
   };
 
   return {
@@ -117,7 +127,7 @@ export default class Board extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      map: collect(this.props.initial),
+      map: this.props.initial,
       nav: [this.props.rootId],
       selectedId: null,
       autoFocusId: null,
@@ -130,15 +140,17 @@ export default class Board extends Component {
 
   onDragEnd = (result) => {
     console.log('onDragEnd', result);
-    // dropped nowhere
+    // dropped nowhere  
     if (!result.destination) {
       return;
     }
 
-    const { map } = this.state
     const { source, destination } = result;
 
-    this.setState({ selectedId: null, ...reorderMap({ map, source, destination }) });
+    const { map, autoFocusId } = reorderMap({ map: this.state.map, source, destination })
+
+    this.setState({ selectedId: null, map, autoFocusId });
+    this.props.onChange(map) // Propagates changes
   }
 
   onClickBreadcrumb = (id) => {
@@ -172,27 +184,27 @@ export default class Board extends Component {
   render() {
     const { map, nav, autoFocusId, selectedId } = this.state;
 
-    const { initial, renderItem, renderPreviewItem } = this.props;
+    const { renderItem, renderPreviewItem } = this.props;
 
     const last = _last(nav)
 
     return (
       <div>
         <Layout style={{ minHeight: '100vh' }}>
           <StyledHeader>
-            <h4>{initial[last].title}</h4>
+            <h4>{map[last].title}</h4>
           </StyledHeader>
           <Layout>
             <StyledContent>
               <DragDropContext onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
                 <Root>
                   <HorizontalScrollContainer>
-                    {nav.map(id => map[id] &&
+                    {nav.map(id => map[id].children &&
                       <VerticalScrollContainer key={`col-${id}`}>
                         <Column
                           listId={id}
                           listType="card"
-                          data={map[id]}
+                          data={assemble(map, map[id].children)}
                           autoFocusId={autoFocusId}
                           selectedId={selectedId}
                           onClickItem={this.onClickItem}
@@ -205,13 +217,13 @@ export default class Board extends Component {
               </DragDropContext>
             </StyledContent>
             <StyledSider width={300}>
-              {selectedId && renderPreviewItem(initial[selectedId])}
+              {selectedId && renderPreviewItem(map[selectedId])}
             </StyledSider>
           </Layout>
           <StyledFooter>
             <Breadcrumb separator=">">
               {nav.map(id =>
-                <Breadcrumb.Item> <a onClick={() => this.onClickBreadcrumb(id)}>{initial[id].title}</a></Breadcrumb.Item>
+                <Breadcrumb.Item> <a onClick={() => this.onClickBreadcrumb(id)}>{map[id].title}</a></Breadcrumb.Item>
               )}
             </Breadcrumb>
           </StyledFooter>
@@ -231,6 +243,7 @@ Board.propTypes = {
     })
   ).isRequired,
   rootId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func.isRequired,
   renderItem: PropTypes.func.isRequired,
   renderPreviewItem: PropTypes.func.isRequired,
 }
diff --git a/stories/index.js b/stories/index.js
@@ -63,7 +63,7 @@ const renderItem = (item) => (
 
 const renderPreviewItem = (item) => (
   <div style={{ textAlign: 'center', margin: 'auto', width: 200, height: 200, border: '1px solid', borderRadius: 6, borderColor: '#ccc' }}>
-    <img src={item.children.length > 0 ? '/images/folder.png' : '/images/file.png'} alt={item.title} style={{ width: 70, height: 70, margin: 'auto', display: 'block' }} />
+    <img src={item.children.length > 0 ? '/images/folder.png' : '/images/file.png'} alt={item.title} style={{ width: 70, height: 70, margin: 'auto', display: 'block', marginTop: 40 }} />
     <span style={{ width: 150, textAlign: 'left', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{item.title}</span>
   </div>
 )