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 15:04:35 +09:00
parent ebf6e465cc
commit 3a44072e53
1 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import {
Label, Label,
Accordion, Accordion,
Icon, Icon,
List, List, Button,
ListItemProps, ListItemProps,
CheckboxProps, CheckboxProps,
} from 'semantic-ui-react'; } from 'semantic-ui-react';
@ -39,18 +39,20 @@ export interface SensorItemTreeState {
} }
interface TreeItem { interface TreeItem {
metaSensorItemList: MetaSensorItem[]; metaSensorItemList: Array<MetaSensorItem>;
metaSensorItemType: MetaSensorItemType; metaSensorItemType: MetaSensorItemType;
} }
export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorItemTreeState> { export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorItemTreeState> {
private itemMap: Map<number, TreeItem>; private itemMap: Map<number, TreeItem>;
private selectedItemMap: Map<number, Array<MetaSensorItem>>;
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.itemMap = new Map; this.itemMap = new Map;
this.selectedItemMap = new Map,
this.state = { this.state = {
categoryState: new Map(), categoryState: new Map(),
@ -73,7 +75,7 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
item.metaSensorItemList = []; item.metaSensorItemList = [];
item.metaSensorItemList.push(sensorItem); item.metaSensorItemList.push(sensorItem);
item.metaSensorItemType = this.GetMetaSensorItemType(sensorItem.metaSensorItemType.id); item.metaSensorItemType = this.GetMetaSensorItemType(sensorItem.metaSensorItemType.id);
this.itemMap.set(sensorItem.id, item); this.itemMap.set(sensorItem.metaSensorItemType.id, item);
} }
}); });
} }
@ -89,9 +91,7 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
{/*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> = _.clone(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 });
}} /> }} />
@ -99,8 +99,15 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
<List.Header> <Checkbox label={data.metaSensorItemType.name} onChange={ <List.Header> <Checkbox label={data.metaSensorItemType.name} onChange={
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => { (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState); let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState);
newItemState[key] = _.cloneDeep(this.state.itemState[key]); if (newItemState[key] === undefined) {
newItemState[key] = new Array(data.metaSensorItemList.length).fill(false);
}
newItemState[key].fill(checkProps.checked); newItemState[key].fill(checkProps.checked);
if (checkProps.checked) {
this.selectedItemMap[key] = _.clone(data.metaSensorItemList);
} else {
this.selectedItemMap[key].length = 0;
}
this.setState({ itemState: newItemState }); this.setState({ itemState: newItemState });
}} /> </List.Header> }} /> </List.Header>
<List.Description>Category</List.Description> <List.Description>Category</List.Description>
@ -116,7 +123,7 @@ 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) { if (this.state.itemState[parentKey] === undefined) {
this.state.itemState[parentKey] = new Array(metaSensorItemList.length).fill(false); this.state.itemState[parentKey] = new Array(metaSensorItemList.length).fill(false);
} }
@ -133,7 +140,20 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
<List.Item > <List.Item >
<List.Icon name='file' /> <List.Icon name='file' />
<List.Content> <List.Content>
<List.Header> <Checkbox label={item.name} checked={this.state.itemState[parentKey][idx]} /></List.Header> <List.Header> <Checkbox label={item.name} checked={this.state.itemState[parentKey][idx]} onChange={
(event: React.FormEvent<HTMLInputElement>, 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);
}
}
}} /></List.Header>
<List.Description>Sensor Item</List.Description> <List.Description>Sensor Item</List.Description>
</List.Content> </List.Content>
</List.Item> </List.Item>
@ -150,6 +170,9 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
<List selection> <List selection>
{this.ViewSensorItemType()} {this.ViewSensorItemType()}
</List> </List>
<Button label='test' onClick={() => {
console.log(this.selectedItemMap);
}} />
</Container> </Container>
); );
} }