added item tree
This commit is contained in:
snoop
parent
146d97d286
commit
a0cd6f75b4
193
src/ts/@overflow/sensor/react/components/item_tree.tsx
Normal file
193
src/ts/@overflow/sensor/react/components/item_tree.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user