Commit 1e490cf1 authored by d.arizona's avatar d.arizona

drag drop

parent af7e9aed
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment