drag drop

src/container/MasterData/formReportItems/VisualReportItems.js

@@ -4,8 +4,6 @@ import { TextField, List, ListSubheader, Typography, Collapse } from '@material-
 import MinimizeIcon from '@material-ui/icons/Minimize';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
-import TreeView from '@material-ui/lab/TreeView';
-import TreeItem from '@material-ui/lab/TreeItem';
 import Nestable from 'react-nestable';
 
 const useStyles = makeStyles((theme) => ({
@@ -73,7 +71,8 @@ export default class VisualReportItems extends Component {
                     ]
                 },
             ],
-            arrayCollapse: []
+            arrayCollapse: [],
+            defaultCollapsed: false
         }
     }
 
@@ -94,32 +93,30 @@ export default class VisualReportItems extends Component {
         }
     }
 
-    renderItem = ({ item, index }) => {
-        return(item.text)
-        // if (item.children.length > 0) {
-        //     return (
-        //         <TreeView
-        //             defaultCollapseIcon={<RemoveIcon />}
-        //             defaultExpandIcon={< AddIcon/>}
-        //             >
-        //                 {item.children.length > 0 &&
-        //                     <TreeItem nodeId={item.id} style={{margin: 10}} label={item.text}>
-        //                         {item.children.map((items,indexs) => {
-        //                             return (
-        //                                 <TreeItem nodeId={items.id} style={{margin: 10}} label={items.text}/>
-        //                             )
-        //                         })}
-        //                     </TreeItem>
-        //                     // :
-        //                     // <TreeItem nodeId={item.id} style={{margin: 10}} label={item.text}/>
-        //                 }
-        //         </TreeView>
-        //     )
-        // } else {
-        //     return (
-        //         <TreeItem nodeId={item.id} style={{margin: 10}} label={item.text}/>
-        //     )
-        // }
+    onDefaultCollapsed = () => this.setState({
+        defaultCollapsed: !this.state.defaultCollapsed
+    });
+
+    collapse = (collapseCase) => {
+        let arrayCollapse = this.state.arrayCollapse
+        let index = arrayCollapse.findIndex((val) => val.id === collapseCase)
+        if (arrayCollapse.includes(collapseCase)) {
+            arrayCollapse.splice(index, 1)
+        } else {
+            arrayCollapse.push(collapseCase)
+        }
+        if (this.refNestable) {
+            this.refNestable.collapse(arrayCollapse.length > 0? arrayCollapse : 'NONE');
+        }
+    };
+
+    renderItem = ({ item, collapseIcon }) => {
+        return (
+            <div>
+                {collapseIcon ? (this.state.arrayCollapse.includes(item.id)? <AddIcon/> : <RemoveIcon/>) : null}
+                <button type="button" onClick={() => this.collapse(item.id)}>{item.text}</button>     
+            </div>
+        )
     };
 
     render() {
@@ -141,7 +138,6 @@ export default class VisualReportItems extends Component {
                                             style={{ width: 250 }}
                                             select
                                             label="Item Laporan"
-                                            // onChange={handleChange}
                                             helperText=""
                                             SelectProps={{
                                                 native: true,
@@ -177,7 +173,6 @@ export default class VisualReportItems extends Component {
                                             style={{ width: 250  }}
                                             select
                                             label="Perusahaan"
-                                            // onChange={handleChange}
                                             helperText=""
                                             SelectProps={{
                                                 native: true,
@@ -210,7 +205,9 @@ export default class VisualReportItems extends Component {
                                     <div className="margin-top-30px">
                                     <Nestable
                                         items={this.state.items}
+                                        collapsed={this.state.defaultCollapsed}
                                         renderItem={this.renderItem}
+                                        ref={el => this.refNestable = el}
                                         onChange={(e) => this.setState({items: e})}
                                     />
                                 </div>