From c471b8b3fb92ab98614f9501c414db888bc54c6c Mon Sep 17 00:00:00 2001 From: insanity Date: Wed, 26 Jul 2017 13:39:09 +0900 Subject: [PATCH 1/5] probe setup --- .../probe/react/components/ProbeDown.tsx | 117 ++++++++++++++++-- 1 file changed, 104 insertions(+), 13 deletions(-) diff --git a/src/ts/@overflow/probe/react/components/ProbeDown.tsx b/src/ts/@overflow/probe/react/components/ProbeDown.tsx index 1709549..e5db489 100644 --- a/src/ts/@overflow/probe/react/components/ProbeDown.tsx +++ b/src/ts/@overflow/probe/react/components/ProbeDown.tsx @@ -4,8 +4,8 @@ import { Menu, Segment, MenuItemProps, - Header, Container, + Icon, } from 'semantic-ui-react'; export interface StateProps { @@ -19,45 +19,81 @@ export interface DispatchProps { export type Props = StateProps & DispatchProps; export interface State { - activeItem: string[]; + activeItem: string; } -const osNames = ['Windows', 'Debian', 'Ubuntu', 'Fedora', 'CentOS']; +const osNames = [ + { + 'name': 'Windows', + 'icon': 'windows', + }, + { + 'name': 'Ubuntu', + 'icon': 'linux', + }, + { + 'name': 'Fedora', + 'icon': 'linux', + }, + { + 'name': 'CentOS', + 'icon': 'linux', + }, +]; export class ProbeDown extends React.Component { constructor(props: Props, context: State) { super(props, context); - this.state = { activeItem: osNames[0] }; + this.state = { activeItem: osNames[0].name }; } public handleItemClick = (event: React.SyntheticEvent, data: MenuItemProps): void => { this.setState({ activeItem: data.name }); + } - console.log(data.name); + public ShowContent = (): JSX.Element => { + let os = this.state.activeItem; + switch (os) { + case 'Windows': { + return ; + } + case 'Ubuntu': { + return ; + } + case 'Fedora': { + return ; + } + case 'CentOS': { + return ; + } + default: + break; + } + return null; } public render(): JSX.Element { - const { activeItem } = this.state.activeItem; return ( -
Probe Download
- - {osNames.map((os: string) => { + + {osNames.map((item: any, index: number) => { return ( - + + + {item.name} + ); })} - - - {this.state.activeItem} Download Page + + {this.ShowContent()} @@ -66,3 +102,58 @@ export class ProbeDown extends React.Component { } } +export class Windows extends React.Component { + constructor(props: Props, context: State) { + super(props, context); + } + + public render(): JSX.Element { + return ( +
+ Windows Download Page +
+ ); + } +} + +export class Ubuntu extends React.Component { + constructor(props: Props, context: State) { + super(props, context); + } + + public render(): JSX.Element { + return ( + + Ubuntu Download Page + + ); + } +} + +export class Fedora extends React.Component { + constructor(props: Props, context: State) { + super(props, context); + } + + public render(): JSX.Element { + return ( + + Fedora Download Page + + ); + } +} + +export class CentOS extends React.Component { + constructor(props: Props, context: State) { + super(props, context); + } + + public render(): JSX.Element { + return ( + + CentOS Download Page + + ); + } +} From ebf6e465cc125694db74ab388eb1f8db2c4501f0 Mon Sep 17 00:00:00 2001 From: snoop Date: Wed, 26 Jul 2017 14:17:16 +0900 Subject: [PATCH 2/5] fixed tree --- .../meta/react/components/SensorItemTree.tsx | 42 ++++++++++++++----- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/src/ts/@overflow/meta/react/components/SensorItemTree.tsx b/src/ts/@overflow/meta/react/components/SensorItemTree.tsx index 1dcc339..74c593e 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, + ListItemProps, + CheckboxProps, +} from 'semantic-ui-react'; import MetaSensorItemType from '../../api/model/MetaSensorItemType'; @@ -26,7 +35,7 @@ export type SensorItemTreeProps = SensorItemTreeStateProps & SensorItemTreeDispa export interface SensorItemTreeState { categoryState: Map; - itemState: Map; + itemState: Map>; } interface TreeItem { @@ -71,20 +80,29 @@ 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); + newItemState[key] = _.cloneDeep(this.state.itemState[key]); + newItemState[key].fill(checkProps.checked); + this.setState({ itemState: newItemState }); + }} /> Category {this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''} @@ -97,21 +115,25 @@ 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 }); }}> - + Sensor Item From 3a44072e539c1bc6f99229a98a3be313b11784e1 Mon Sep 17 00:00:00 2001 From: snoop Date: Wed, 26 Jul 2017 15:04:35 +0900 Subject: [PATCH 3/5] fixed tree --- .../meta/react/components/SensorItemTree.tsx | 47 ++++++++++++++----- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/src/ts/@overflow/meta/react/components/SensorItemTree.tsx b/src/ts/@overflow/meta/react/components/SensorItemTree.tsx index 74c593e..16c5257 100644 --- a/src/ts/@overflow/meta/react/components/SensorItemTree.tsx +++ b/src/ts/@overflow/meta/react/components/SensorItemTree.tsx @@ -8,7 +8,7 @@ import { Label, Accordion, Icon, - List, + List, Button, ListItemProps, CheckboxProps, } from 'semantic-ui-react'; @@ -39,23 +39,25 @@ export interface SensorItemTreeState { } 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); @@ -73,7 +75,7 @@ export class SensorItemTree extends React.Component = new Map(this.state.portState);*/ } let newCategoryState: Map = _.clone(this.state.categoryState); - newCategoryState[key] = !newCategoryState[key]; - this.setState({ categoryState: newCategoryState }); }} /> @@ -99,8 +99,15 @@ export class SensorItemTree extends React.Component , checkProps: CheckboxProps) => { let newItemState: Map> = _.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); + if (checkProps.checked) { + this.selectedItemMap[key] = _.clone(data.metaSensorItemList); + } else { + this.selectedItemMap[key].length = 0; + } this.setState({ itemState: newItemState }); }} /> Category @@ -116,7 +123,7 @@ export class SensorItemTree extends React.Component - + , 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 @@ -150,6 +170,9 @@ export class SensorItemTree extends React.Component {this.ViewSensorItemType()} +