overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed tree

Browse Source
This commit is contained in:
snoop 2017-07-26 14:17:16 +09:00
parent c471b8b3fb
commit ebf6e465cc
1 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/ts/@overflow/meta/react/components/SensorItemTree.tsx
View File

@ -2,7 +2,16 @@ import * as React from 'react';
import * as _ from 'lodash'; import * as _ from 'lodash';
// import update from 'immutability-helper'; // import update from 'immutability-helper';
import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react'; import {
Checkbox,
Container,
Label,
Accordion,
Icon,
List,
ListItemProps,
CheckboxProps,
} from 'semantic-ui-react';
import MetaSensorItemType from '../../api/model/MetaSensorItemType'; import MetaSensorItemType from '../../api/model/MetaSensorItemType';
@ -26,7 +35,7 @@ export type SensorItemTreeProps = SensorItemTreeStateProps & SensorItemTreeDispa
export interface SensorItemTreeState { export interface SensorItemTreeState {
categoryState: Map<number, boolean>; categoryState: Map<number, boolean>;
itemState: Map<number, boolean[]>; itemState: Map<number, Array<boolean>>;
} }
interface TreeItem { interface TreeItem {
@ -71,20 +80,29 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
public ViewSensorItemType(): JSX.Element[] { public ViewSensorItemType(): JSX.Element[] {
let elems: JSX.Element[] = new Array(); let elems: JSX.Element[] = new Array();
this.itemMap.forEach((data: TreeItem, key: number) => { this.itemMap.forEach((data: TreeItem, key: number) => {
// this.state.portState[key] = false; // this.state.itemState[key] = new Array(data.metaSensorItemList.length).fill(false);
elems.push( elems.push(
<List.Item key={key} > <List.Item key={key + 1} >
<List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'} onClick={() => { <List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'} onClick={() => {
{/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ } {/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
let newCategoryState: Map<number, boolean> = _.cloneDeep(this.state.categoryState); let newCategoryState: Map<number, boolean> = _.clone(this.state.categoryState);
newCategoryState[key] = !newCategoryState[key]; newCategoryState[key] = !newCategoryState[key];
this.setState({ categoryState: newCategoryState }); this.setState({ categoryState: newCategoryState });
}} /> }} />
<List.Content> <List.Content>
<List.Header> <Checkbox label={data.metaSensorItemType.name} /> </List.Header> <List.Header> <Checkbox label={data.metaSensorItemType.name} onChange={
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState);
newItemState[key] = _.cloneDeep(this.state.itemState[key]);
newItemState[key].fill(checkProps.checked);
this.setState({ itemState: newItemState });
}} /> </List.Header>
<List.Description>Category</List.Description> <List.Description>Category</List.Description>
{this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''} {this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''}
</List.Content> </List.Content>
@ -97,21 +115,25 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
public ViewSensorItem(metaSensorItemList: MetaSensorItem[], parentKey: number): JSX.Element[] { public ViewSensorItem(metaSensorItemList: MetaSensorItem[], parentKey: number): JSX.Element[] {
let elems: JSX.Element[] = new Array(); let elems: JSX.Element[] = new Array();
if(this.state.itemState[parentKey] === undefined) {
this.state.itemState[parentKey] = new Array(metaSensorItemList.length).fill(false);
}
metaSensorItemList.map((item: MetaSensorItem, idx: number) => { metaSensorItemList.map((item: MetaSensorItem, idx: number) => {
let checkList: boolean[] = this.state.itemState[parentKey];
elems.push( elems.push(
<List.List key={String(parentKey) + String(idx)} onClick={() => { <List.List key={String(parentKey) + String(idx)} onClick={() => {
{/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ } {/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
let newItemState: Map<number, boolean[]> = _.cloneDeep(this.state.itemState[parentKey]); let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState);
newItemState[idx] = !newItemState[idx]; newItemState[parentKey][idx] = !newItemState[parentKey][idx];
this.setState({ itemState: newItemState }); this.setState({ itemState: newItemState });
}}> }}>
<List.Item > <List.Item >
<List.Icon name='file' /> <List.Icon name='file' />
<List.Content> <List.Content>
<List.Header> <Checkbox label={item.name} checked={checkList[idx]} /></List.Header> <List.Header> <Checkbox label={item.name} checked={this.state.itemState[parentKey][idx]} /></List.Header>
<List.Description>Sensor Item</List.Description> <List.Description>Sensor Item</List.Description>
</List.Content> </List.Content>
</List.Item> </List.Item>