diff --git a/src/ts/@overflow/meta/react/components/SensorItemTree.tsx b/src/ts/@overflow/meta/react/components/SensorItemTree.tsx index 1dcc339..16c5257 100644 --- a/src/ts/@overflow/meta/react/components/SensorItemTree.tsx +++ b/src/ts/@overflow/meta/react/components/SensorItemTree.tsx @@ -2,7 +2,16 @@ import * as React from 'react'; import * as _ from 'lodash'; // import update from 'immutability-helper'; -import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react'; +import { + Checkbox, + Container, + Label, + Accordion, + Icon, + List, Button, + ListItemProps, + CheckboxProps, +} from 'semantic-ui-react'; import MetaSensorItemType from '../../api/model/MetaSensorItemType'; @@ -26,27 +35,29 @@ export type SensorItemTreeProps = SensorItemTreeStateProps & SensorItemTreeDispa export interface SensorItemTreeState { categoryState: Map; - itemState: Map; + itemState: Map>; } interface TreeItem { - metaSensorItemList: MetaSensorItem[]; + metaSensorItemList: Array; metaSensorItemType: MetaSensorItemType; } export class SensorItemTree extends React.Component { private itemMap: Map; + private selectedItemMap: Map>; constructor(props: any, context: any) { super(props, context); this.itemMap = new Map; + this.selectedItemMap = new Map, - this.state = { - categoryState: new Map(), - itemState: new Map(), - }; + this.state = { + categoryState: new Map(), + itemState: new Map(), + }; this.sortItemMap(); // fs.readFile('../../../../../dh.json', this.handlJSONFile); @@ -64,27 +75,41 @@ export class SensorItemTree extends React.Component { - // this.state.portState[key] = false; + // this.state.itemState[key] = new Array(data.metaSensorItemList.length).fill(false); elems.push( - + { {/*let newPortState: Map = new Map(this.state.portState);*/ } - let newCategoryState: Map = _.cloneDeep(this.state.categoryState); + let newCategoryState: Map = _.clone(this.state.categoryState); newCategoryState[key] = !newCategoryState[key]; this.setState({ categoryState: newCategoryState }); }} /> - + , checkProps: CheckboxProps) => { + let newItemState: Map> = _.clone(this.state.itemState); + if (newItemState[key] === undefined) { + newItemState[key] = new Array(data.metaSensorItemList.length).fill(false); + } + newItemState[key].fill(checkProps.checked); + if (checkProps.checked) { + this.selectedItemMap[key] = _.clone(data.metaSensorItemList); + } else { + this.selectedItemMap[key].length = 0; + } + this.setState({ itemState: newItemState }); + }} /> Category {this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''} @@ -97,21 +122,38 @@ export class SensorItemTree extends React.Component { - let checkList: boolean[] = this.state.itemState[parentKey]; elems.push( { {/*let newPortState: Map = new Map(this.state.portState);*/ } - let newItemState: Map = _.cloneDeep(this.state.itemState[parentKey]); - newItemState[idx] = !newItemState[idx]; + let newItemState: Map> = _.clone(this.state.itemState); + newItemState[parentKey][idx] = !newItemState[parentKey][idx]; this.setState({ itemState: newItemState }); }}> - + , checkProps: CheckboxProps) => { + if(this.selectedItemMap[parentKey] === undefined) { + this.selectedItemMap[parentKey] = []; + } + if (checkProps.checked) { + this.selectedItemMap[parentKey].push(item); + } else { + let index: number = this.selectedItemMap[parentKey].indexOf(item); + if(index >= 0) { + this.selectedItemMap[parentKey].splice(index, 1); + } + } + }} /> Sensor Item @@ -128,6 +170,9 @@ export class SensorItemTree extends React.Component {this.ViewSensorItemType()} +