From a0cd6f75b463936d205dcfff4a0753311f15bed2 Mon Sep 17 00:00:00 2001
From: snoop <snoop@loafle.com>
Date: Thu, 28 Dec 2017 16:21:33 +0900
Subject: [PATCH] added item tree

---
 .../sensor/react/components/item_tree.tsx     | 193 ++++++++++++++++++
 .../sensor/react/components/sensor_config.tsx |   4 +-
 .../components/sensor_config_auth_crawler.tsx |  33 ++-
 .../react/components/sensor_config_item.tsx   |  60 ++++++
 .../react/components/sensor_config_target.tsx |  32 +--
 5 files changed, 305 insertions(+), 17 deletions(-)
 create mode 100644 src/ts/@overflow/sensor/react/components/item_tree.tsx
 create mode 100644 src/ts/@overflow/sensor/react/components/sensor_config_item.tsx

diff --git a/src/ts/@overflow/sensor/react/components/item_tree.tsx b/src/ts/@overflow/sensor/react/components/item_tree.tsx
new file mode 100644
index 0000000..5f716e2
--- /dev/null
+++ b/src/ts/@overflow/sensor/react/components/item_tree.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon, CheckboxProps,
+} from 'semantic-ui-react';
+import * as _ from 'lodash';
+
+
+export interface StateProps {
+  ItemTreeList: Array<ItemTreeObj>;
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  dropState: Map<string, boolean>;
+  checkBoxState: Map<string, boolean>;
+  checkBoxChildrenState: Map<string, Map<string, boolean>>;
+}
+
+export interface ItemTreeObj {
+  icon?: string;
+  isCheckBox?: boolean;
+  label: string;
+  children?: Array<ItemTreeObj>;
+}
+
+export class ItemTree extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      dropState: new Map(),
+      checkBoxState: new Map(),
+      checkBoxChildrenState: new Map(),
+    };
+
+  }
+
+  private onDropClick = (key: string) => {
+    let newDropState: Map<string, boolean> = _.clone(this.state.dropState);
+    newDropState[key] = !newDropState[key];
+    this.setState({ dropState: newDropState });
+  }
+
+  private getKey(pKey: string, idx: number): string {
+    return pKey + '-' + String(idx);
+  }
+
+  private reverseChildrenCheck(childItemList: Array<ItemTreeObj>, pKey: string, checkProps: CheckboxProps,
+                               checkBoxState: Map<string, Map<string, boolean>>): void {
+
+    if(childItemList === undefined || childItemList === null || childItemList.length <= 0) {
+      return;
+    }
+
+    if (checkBoxState.get(pKey) === undefined) {
+      checkBoxState.set(pKey, new Map());
+    }
+
+    let currentKey: string = '';
+    childItemList.map((childItem: ItemTreeObj, childIdx: number) => {
+      currentKey = this.getKey(pKey, childIdx);
+      checkBoxState.get(pKey).set(currentKey, checkProps.checked);
+      this.reverseChildrenCheck(childItem.children, currentKey, checkProps, checkBoxState);
+    });
+  }
+
+  private onCheckBox = (key: string, checkProps: CheckboxProps, data: ItemTreeObj) => {
+    this.state.checkBoxState[key] = checkProps.checked;
+    let newCheckBoxChildrenState: Map<string, Map<string, boolean>> = _.clone(this.state.checkBoxChildrenState);
+
+
+    this.reverseChildrenCheck(data.children, key, checkProps, newCheckBoxChildrenState);
+
+    // newCheckBoxChildrenState[key].forEach((mValue: boolean, mkey: string) => {
+    //   newCheckBoxChildrenState[mkey] = checkProps.checked;
+    // });
+    // newCheckBoxChildrenState[key].fill(checkProps.checked);
+    // if (checkProps.checked) {
+    //   this.selectedItemMap.set(key, _.clone(data.children));
+    // } else {
+    //   this.selectedItemMap.get(key).length = 0;
+    // }
+    this.setState({ checkBoxChildrenState: newCheckBoxChildrenState });
+
+    // let sd = this.props.getSensor();
+    // sd.sensorItemMap = this.selectedItemMap;
+    // this.props.setSensor(sd);
+  }
+
+  private checkCheckBox(key: string, pKey: string): boolean {
+
+    let resBool: boolean = false;
+
+    if (this.state.checkBoxState[key]) {
+      resBool = true;
+    }
+
+    if (pKey !== '') {
+
+      let childrenState: Map<string, boolean> = this.state.checkBoxChildrenState.get(pKey);
+
+      if (childrenState !== undefined) {
+        let b: boolean = childrenState.get(key);
+        resBool = b;
+      }
+
+    }
+    return resBool;
+  }
+
+
+  public startRender(): JSX.Element[] {
+
+    // if (this.props.ItemTreeList === undefined || this.props.ItemTreeList.length <= 0) {
+    //   return null;
+    // }
+
+    let elems: JSX.Element[];
+
+    elems = this.itemRender(this.props.ItemTreeList, '');
+
+    return elems;
+  }
+
+  public itemRender(itemList: Array<ItemTreeObj>, pKeyStr: string): JSX.Element[] {
+
+    if (itemList === undefined || itemList === null || itemList.length <= 0) {
+      return null;
+    }
+
+    let elems: JSX.Element[] = new Array();
+
+    itemList.map((item: ItemTreeObj, idx: number) => {
+      let nkeyStr: string = this.getKey(pKeyStr, idx);
+      let trueStr: string;
+      let falseStr: string;
+      if (item.icon) {
+        let iconStr: string = item.icon;
+        let cIdx: number = iconStr.indexOf('|');
+        trueStr = iconStr.substring(0, cIdx);
+        falseStr = iconStr.substring(cIdx + 1);
+      }
+      elems.push(
+        <List.Item key={nkeyStr}>
+          {item.icon ?
+            <List.Icon name={this.state.dropState[nkeyStr] ? trueStr : falseStr}
+              onClick={this.onDropClick.bind(this, nkeyStr)} /> :
+            ''}
+          <List.Content>
+            <List.Item>
+              <List.Header>
+                {item.isCheckBox === false ? item.label :
+                  <Checkbox label={item.label} checked={this.checkCheckBox(nkeyStr, pKeyStr) ? true : false} onChange={
+                    (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
+                      this.onCheckBox(nkeyStr, checkProps, item);
+                    }} />}
+              </List.Header>
+              <List.Description style={{ marginLeft: '26px' }}></List.Description>
+              {this.state.dropState[nkeyStr] ?
+                ''
+                :
+                <List.List>
+                  {this.itemRender(item.children, nkeyStr)}
+                </List.List>
+              }
+            </List.Item>
+          </List.Content>
+        </List.Item>,
+      );
+    });
+
+
+    return elems;
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+        <List>
+          {this.startRender()}
+        </List>
+      </Container>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config.tsx b/src/ts/@overflow/sensor/react/components/sensor_config.tsx
index 0b0e7fa..72f8189 100644
--- a/src/ts/@overflow/sensor/react/components/sensor_config.tsx
+++ b/src/ts/@overflow/sensor/react/components/sensor_config.tsx
@@ -6,6 +6,7 @@ import {
 import {SensorConfigTarget} from './sensor_config_target';
 import {SensorConfigCrawler} from './sensor_config_crawler';
 import {SensorConfigAuthCrawler} from './sensor_config_auth_crawler';
+import {SensorConfigItem} from './sensor_config_item';
 
 export interface StateProps {
 }
@@ -38,7 +39,8 @@ export class SensorConfig extends React.Component<Props, State> {
         <SensorConfigCrawler />
         Auth Crawler
         <SensorConfigAuthCrawler />
-        {/* <SensorConfigItem /> */}
+        Sensor Item
+        <SensorConfigItem />
         {/* <SensorConfigSetting /> */}
       </Container>
     );
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
index 077f696..93c7085 100644
--- a/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {
   Table, Header, Container, Form, Checkbox, Button, Rating,
-  List, Icon, Radio, CheckboxProps,
+  List, Icon, Radio, CheckboxProps, Input, InputOnChangeData,
+  Label,
 } from 'semantic-ui-react';
 
 
@@ -30,6 +31,36 @@ export class SensorConfigAuthCrawler extends React.Component<Props, State> {
   public render(): JSX.Element {
     return (
       <Container>
+        <List>
+          <List.Item>
+            <Input label={'label'} placeholder={'item.defaultValue'} key={0} onChange={
+              (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                {/* this.onChangeAuth(item.name, data.value); */ }
+              }} />
+          </List.Item>
+          <List.Item>
+            <Input label={'label'} type='password' placeholder={'item.defaultValue'} key={0} onChange={
+              (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                {/* this.onChangeAuth(item.name, data.value); */ }
+              }} />
+          </List.Item>
+          <List.Item>
+            <Label pointing='below'>{'aaaa'}</Label>
+            <Form.Radio
+              key={11}
+              label={'itemValue'}
+              name={'radioGroup' + String('item.id')}
+              value={'itemValue'}
+              checked={null}
+              defaultChecked={true ? true : false}
+              onChange={
+                (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
+                  {/* this.onChangeAuth(item.name, itemValue); */}
+                }
+              }
+            />
+          </List.Item>
+        </List>
       </Container>
     );
   }
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_item.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_item.tsx
new file mode 100644
index 0000000..ad28c14
--- /dev/null
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_item.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon,
+} from 'semantic-ui-react';
+import {ItemTree, ItemTreeObj} from './item_tree';
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  testItemTreeList: Array<ItemTreeObj>;
+}
+
+export class SensorConfigItem extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      testItemTreeList: new Array(),
+    };
+
+    this.testData();
+  }
+
+  public testData(): void {
+        let item: ItemTreeObj = {
+          icon: 'chevron up|chevron down',
+          isCheckBox: true,
+          label: 'test label',
+        };
+
+        item.children = new Array();
+
+        for(let idx: number = 0; idx < 10; ++idx) {
+          item.children.push({
+            isCheckBox: true,
+            label: 'test label-' + String(idx),
+          });
+        }
+
+        this.state.testItemTreeList.push(item);
+      }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+          <ItemTree ItemTreeList={this.state.testItemTreeList}/>
+      </Container>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_target.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_target.tsx
index a14c36b..20a38dd 100644
--- a/src/ts/@overflow/sensor/react/components/sensor_config_target.tsx
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_target.tsx
@@ -36,21 +36,23 @@ export class SensorConfigTarget extends React.Component<Props, State> {
             <List.Icon name={true ? 'chevron up' : 'chevron down'}
               onClick={null} />
             <List.Content>
-              <List.Header>
-                Host
-            </List.Header>
-              <List.Description style={{ marginLeft: '26px' }}></List.Description>
-              <List.List onClick={null}>
-                <List.Item >
-                  <List.Content>
-                    <List.Header>
-                      <Checkbox label={'192.168.1.1 | Linux'} checked={false} onChange={null} />
-                    </List.Header>
-                    <List.Description style={{ marginLeft: '26px' }}>
-                    </List.Description>
-                  </List.Content>
-                </List.Item>
-              </List.List>
+              <List.Item>
+                <List.Header>
+                  <Checkbox label={'Host'} checked={true ? true : false} onChange={null} />
+                </List.Header>
+                <List.Description style={{ marginLeft: '26px' }}></List.Description>
+                <List.List onClick={null}>
+                  <List.Item >
+                    <List.Content>
+                      <List.Header>
+                        <Checkbox label={'192.168.1.1 | Linux'} checked={false} onChange={null} />
+                      </List.Header>
+                      <List.Description style={{ marginLeft: '26px' }}>
+                      </List.Description>
+                    </List.Content>
+                  </List.Item>
+                </List.List>
+              </List.Item>
             </List.Content>
           </List.Item>
         </List>