antd#Tree JavaScript Examples

LabelList = observer(({ regionStore }) => {
  const treeData = regionStore.asLabelsTree((item, idx, isLabel, children, onClick) => {
    return {
      key: item.id,
      title: (data) => {
        return isLabel ? (
          <LabelItem item={item} idx={idx} regions={data.children} regionStore={regionStore} />
        ) : (
          <RegionItem item={item} idx={idx} onClick={onClick}/>
        );
      },
    };
  });

  return (
    <Tree
      className={styles.treelabels}
      treeData={treeData}
      showIcon={false}
      blockNode={true}
      defaultExpandAll={true}
      autoExpandParent={true}
      switcherIcon={<LsChevron opacity="0.25" />}
    />
  );
})

HierarchicalTreeGenes = (props) => {
  const {
    treeData,
    onGeneReorder,
  } = props;

  const onDrop = (info) => {
    const {
      dragNode, node, dropPosition, dropToGap,
    } = info;

    // if dropped in place, ignore
    // dragNode.key is str, dropPosition is int
    if (dragNode.key == dropPosition) return;

    // If not dropped in gap, ignore
    if (!dropToGap) return;

    let newPosition = dropPosition - (dragNode.key < dropPosition ? 1 : 0);
    newPosition = Math.max(0, newPosition);

    onGeneReorder(dragNode.key, newPosition);
  };

  if (!treeData) return <Skeleton active />;

  return (
    <Tree
      data-testid='HierachicalTreeGenes'
      draggable
      treeData={treeData}
      onDrop={onDrop}
    />
  );
}

render() {
    return (
      <>
        <Search style={{marginBottom: 8}} placeholder="Search" onChange={this.onChange} />
        <Tree
          showIcon
          className="draggable-tree"
          defaultExpandedKeys={this.state.expandedKeys}
          draggable
          blockNode
          switcherIcon={<DownOutlined />}
          onDragEnter={this.onDragEnter}
          onDrop={this.onDrop}
          treeData={this.state.gData}
        />
      </>
    );
  }

storiesOf('antd/tree', module).add('customized-icon', () => 
  <Tree
    showIcon
    defaultExpandAll
    defaultSelectedKeys={['0-0-0']}
    switcherIcon={<DownOutlined />}
    treeData={treeData}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can customize icons for different nodes.</p></>) } });

{ TreeNode, DirectoryTree } = Tree

{ DirectoryTree, TreeNode } = Tree

render() {
    const pathSelctByTree = (data, elementKeyPrefix = '$', deepLevel = 0) => {
      let keys = Object.keys(data);
      let TreeComponents = keys.map((key, index) => {
        let item = data[key],
          casename;
        if (deepLevel === 0) {
          elementKeyPrefix = '$';
          elementKeyPrefix = elementKeyPrefix + '.' + item._id;
          casename = item.casename;
          item = {
            params: item.params,
            body: item.body
          };
        } else if (Array.isArray(data)) {
          elementKeyPrefix =
            index === 0
              ? elementKeyPrefix + '[' + key + ']'
              : deleteLastArr(elementKeyPrefix) + '[' + key + ']';
        } else {
          elementKeyPrefix =
            index === 0
              ? elementKeyPrefix + '.' + key
              : deleteLastObject(elementKeyPrefix) + '.' + key;
        }
        if (item && typeof item === 'object') {
          const isDisable = Array.isArray(item) && item.length === 0;
          return (
            <TreeNode key={elementKeyPrefix} disabled={isDisable} title={casename || key}>
              {pathSelctByTree(item, elementKeyPrefix, deepLevel + 1)}
            </TreeNode>
          );
        }
        return <TreeNode key={CanSelectPathPrefix + elementKeyPrefix} title={key} />;
      });

      return TreeComponents;
    };

    return (
      <div className="modal-postman-form-variable">
        <Tree
          expandedKeys={this.state.expandedKeys}
          selectedKeys={this.state.selectedKeys}
          onSelect={([key]) => this.handleSelect(key)}
          onExpand={this.onExpand}
        >
          {pathSelctByTree(this.state.records)}
        </Tree>
      </div>
    );
  }

render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-4">
            <h5 className="mb-3">
              <strong>Checkable</strong>
            </h5>
            <Tree
              checkable
              defaultExpandedKeys={['0-0-0', '0-0-1']}
              defaultSelectedKeys={['0-0-0', '0-0-1']}
              defaultCheckedKeys={['0-0-0', '0-0-1']}
              treeData={treeData}
            />
          </div>
          <div className="col-lg-4">
            <h5 className="mb-3">
              <strong>Basic</strong>
            </h5>
            <Tree
              defaultExpandedKeys={['0-0-0', '0-0-1']}
              defaultSelectedKeys={['0-0-0', '0-0-1']}
              defaultCheckedKeys={['0-0-0', '0-0-1']}
              treeData={treeData}
            />
          </div>
          <div className="col-lg-4">
            <h5 className="mb-3">
              <strong>With Lines</strong>
            </h5>
            <Tree clasName="component-col" showLine defaultExpandedKeys={['0-0-0']}>
              <TreeNode title="parent 1" key="0-0">
                <TreeNode title="parent 1-0" key="0-0-0">
                  <TreeNode title="leaf" key="0-0-0-0" />
                  <TreeNode title="leaf" key="0-0-0-1" />
                  <TreeNode title="leaf" key="0-0-0-2" />
                </TreeNode>
                <TreeNode title="parent 1-1" key="0-0-1">
                  <TreeNode title="leaf" key="0-0-1-0" />
                </TreeNode>
                <TreeNode title="parent 1-2" key="0-0-2">
                  <TreeNode title="leaf" key="0-0-2-0" />
                  <TreeNode title="leaf" key="0-0-2-1" />
                </TreeNode>
              </TreeNode>
            </Tree>
          </div>
        </div>
      </div>
    )
  }

render() {
        const { dataSource } = this.state;
        return (
            <Fragment>
                <Button
                    type="primary"
                    className="margin-right"
                    onClick={() => {
                        this.setState({
                            visible: true
                        });
                    }}
                >
                    更改排序
                </Button>
                <Modal
                    title="更改排序"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Tree
                        draggable
                        onDrop={this.onDrop}
                        autoExpandParent={false}
                        defaultExpandedKeys={["节点"]}
                    >
                        {
                            dataSource.map((data, i) => (
                                <TreeNode title={data.name} key={data.id} data={data} index={i}>
                                    {
                                        data.children && data.children.map((item, j) => (
                                            <TreeNode title={`${item.name}`} key={item.id} data={item} index={j} />
                                        ))
                                    }
                                </TreeNode>
                            ))
                        }
                    </Tree>
                </Modal>
            </Fragment>
        );
    }

TreeNode = Tree.TreeNode

{ DirectoryTree } = Tree

{ TreeNode } = Tree

render() {
    const { modalVisible, form, handleAdd, handleModalVisible, menu, role: { loading } } = this.props;
    const { checkedKeys } = this.state;
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        if (checkedKeys.length === 0) {
          message.error('请选择可访问页面');
          return;
        }
        const addValue = {
          ...fieldsValue,
          menuIds: checkedKeys
        };
        handleAdd(addValue, form);
      });
    };
    const allmenus = Array.isArray(menu.allmenus) ? menu.allmenus : [];

    return (
      <Modal
        maskClosable={false}
        destroyOnClose
        width={840}
        title="新建角色"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => handleModalVisible()}
        okText="确定"
        cancelText="取消"
        confirmLoading={loading}
      >
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色名">
          {form.getFieldDecorator('description', {
            rules: [{ required: true, message: '请输入描述！' }],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限">
          {form.getFieldDecorator('role', {
            rules: [{ required: true, message: '请输入权限！' }],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="可访问页面">
          {form.getFieldDecorator('menuIds', {
            // rules: [{ required: true, message: '请选择！' }],
          })(
            <Tree
              checkedKeys={checkedKeys}
              onCheck={this.handleCheck}
              checkable
              checkStrictly
            >
              {this.renderTreeNodes(allmenus)}
            </Tree>
          )}
        </FormItem>
      </Modal>
    );
  }

{ TreeNode } = Tree

render() {
        const columns = [
            {
                title:"角色ID",
                dataIndex:"id",
            },
            {
                title:"角色名称",
                dataIndex:"role_name",
                render(role_name){
                    if(role_name==1){
                        return "管理人员";
                    }else if(role_name==2){
                        return "财务人员";
                    }else if(role_name==3){
                        return "市场人员";
                    }
                }
            },
            {
                title:"创建时间",
                dataIndex:"create_time",
                render:Utils.formateDate
            },
            {
                title:"使用状态",
                dataIndex:"status",
                render(status){
                    if(status==0){
                        return "弃用";
                    }else if(status==1){
                        return "启用";
                    }
                }
            },
            {
                title:"授权时间",
                dataIndex:"authorize_time",
            },
            {
                title:"授权人",
                dataIndex:"authorize_user_name",
            }
        ]
        
        const dataSource = [
            {
              key: '1',
              id:'1',
              role_name: '1',
              create_time: '2020-10-2',
              status: '1',
              authorize_time:'2020-10-12',
              authorize_user_name:"小天",
              menus:[
                "/admin/home",
                "/admin/publish_articles",
                "/admin/manage_blog",
                "/admin/manage_articles",
                "/admin/manage_comment",
                "/admin/manage_column",
                "/admin/subscribe_colum",
                "/admin/move_blog",
                "/admin/reward_blog",
                "/admin/setting_blog",
                "/admin/card"
              ]
            },
            {
                key: '2',
                id:'2',
                role_name: '2',
                create_time: '2020-10-2',
                status: '1',
                authorize_time:'2020-10-12',
                authorize_user_name:"小天",
                menus:[
                    "/admin/statistics",
                    "/admin/manage_download",
                    "/admin/activities"
                ]
              },
              {
                key: '3',
                id:'3',
                role_name: '3',
                create_time: '2020-10-2',
                status: '0',
                authorize_time:'2020-10-12',
                authorize_user_name:"小天",
                menus:[
                    "/admin/manage_echarts",
                    "/admin/manage_echarts/bar",
                    "/admin/manage_echarts/pie",
                    "/admin/manage_echarts/line"
                ]
              },
          ];

    
        const rowSelection = {
            type:"radio",
            
            onSelect:(selectedRow,selected)=>{
                this.setState({
                    selectedRow:selectedRow
                })
            
            }
        }

        // 弹出框样式
        const formItemLayout = {
            labelCol:{span:5},
            wrapperCol:{span:19}
        }

        
        return (
            <div>
                <Card className="card-wrap">
                    <Button type="primary" onClick={()=>this.onhandleAddRole("创建角色")}>创建角色</Button>
                    <Button type="primary" onClick={()=>this.onhandleAddPerm("设置权限")}>设置权限</Button>
                    <Button type="primary" onClick={()=>this.onhandleAddUser("用户授权")}>用户授权</Button>
                </Card>
                <Card className="card-wrap">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={dataSource}
                       
                        // onRow={(record,index) => {
                        //     return {
                        //         onClick: () => {
                        //             this.onRowClick(record,index);
                        //         }, // 点击行
                        //         onDoubleClick: event => {},
                        //         onContextMenu: event => {},
                        //         onMouseEnter: event => {}, // 鼠标移入行
                        //         onMouseLeave: event => {},
                        //     };
                        //   }}
                        rowSelection={rowSelection}
                    >
                    </Table>
                </Card>
                <Modal
                    title={this.state.title}
                    visible={this.state.visible}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <Form onFinish={this.handleOk}>
                        <Form.Item   label="角色名称" name="role_name" {...formItemLayout} >
                            <Input  placeholder="请输入角色名称"/>
                        </Form.Item>

                        <Form.Item label="状态" name="state" {...formItemLayout} rules={[{required:true,message:"请选择角色状态！"}]}>
                            <Select placeholder="启用">
                                <Option value="1">启用</Option>
                                <Option value="2">弃用</Option>
                            </Select>
                        </Form.Item>
                        
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
                            <Button type="primary" onClick={this.handleCancel}>取消</Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal
                    title={this.state.title}
                    visible={this.state.visiblePer}
                    footer={null}
                    onCancel={this.handleCancelPer}
                    forceRender={true}
                >   
                    {/*ref绑定到form*/}
                    <Form ref={this.formRef} onFinish={this.handleOkPer}>
                        <Form.Item label="角色名称" name="role_name" {...formItemLayout} rules={[{required:true,message:"请输入用户名！"}]}>
                            <Input disabled placeholder="请输入角色名称"/>
                        </Form.Item>

                        <Form.Item label="状态" name="state" {...formItemLayout} rules={[{required:true,message:"请选择角色状态！"}]}>
                            <Select placeholder="启用">
                                <Option value="1">启用</Option>
                                <Option value="2">弃用</Option>
                            </Select>
                        </Form.Item>
                        
                            <Tree
                                checkable
                                defaultExpandAll
                                treeData={menuConfig}
                                checkedKeys={this.state.menuInfo}
                                onCheck={(checkedKeys)=>{
                                    this.onCheck(checkedKeys);
                                }}
                            >
                                {/* <TreeNode title="平台权限" key="platform_all">
                                    {this.renderTreeNodes(menuConfig)}
                                </TreeNode> */}
                            </Tree>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
                            <Button type="primary" onClick={this.handleCancelPer}>取消</Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal
                    title={this.state.title}
                    visible={this.state.visibleUser}
                    footer={null}
                    onCancel={this.handleCancelUser}
                    forceRender={true}
                >  
                    {/*ref绑定到form*/}
                    <Form ref={this.formRef_User} onFinish={this.handleOkUser}>
                        
                        <Form.Item label="角色名称" name="role_name" {...formItemLayout} >
                            <Input disabled/>
                        </Form.Item>

                        <Form.Item label="选择用户"{...formItemLayout} >
                            <Transfer
                                listStyle={{width:200,height:400}}
                                title={["待选用户","已选用户"]}
                                dataSource={this.state.mockData}
                                targetKeys={this.state.targetKeys}
                                showSearch
                                searchPlaceholder="输入用户名"
                                filterOption={this.filterOption}
                                onChange={this.handleChange}	
                                render={item => item.title}
                            />
                        </Form.Item>
                        
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
                            <Button type="primary" onClick={this.handleCancelUser}>取消</Button>
                        </Form.Item>

                    </Form>
                </Modal>

            </div>
        );
    }

export function Run({ run, match, getRun, setPublic }) {
  useInjectReducer({ key: 'run', reducer });
  useInjectSaga({ key: 'run', saga });

  const runId = match.params.id;
  const didMount = useRef(true);
  useEffect(() => {
    if (didMount.current) getRun(runId);
    didMount.current = false;
  });

  const counts = run.counts.map((cnt, idx) => {
    const cats = cnt.entries.map(m => m.key);
    const values = cnt.entries.map(m => m.value);
    const options = {
      chart: { type: 'column' },
      title: { text: `Count [${cnt.name}]` },
      xAxis: { categories: cats, title: { text: null } },
      yAxis: {
        min: 0,
        title: { text: 'Value', align: 'middle' },
        labels: { overflow: 'justify' },
      },
      tooltip: { valueSuffix: '' },
      plotOptions: { bar: { dataLabels: { enabled: true } } },
      credits: { enabled: false },
      series: [
        {
          name: cnt.name,
          data: values,
          color: '#6929C2',
        },
      ],
    };

    return (
      // eslint-disable-next-line react/no-array-index-key
      <Card key={`counts_chart_${idx}`} style={{ margin: '20px 0' }}>
        <HighchartsReact highcharts={Highcharts} options={options} />
        <Divider />
      </Card>
    );
  });

  const parameters = run.parameters.map((param, i) => (
    // eslint-disable-next-line react/no-array-index-key
    <div key={`parameter_${param.name}_${param.value}_${i}`}>
      <b>{param.name}</b>: {param.value}
      <br />
    </div>
  ));

  const description = run.description ? (
    <p>{run.description}</p>
  ) : (
    <p>No description provided...</p>
  );

  const metrics = run.metrics.map((metric, i) => ({ ...metric, key: i }));

  return (
    <div>
      <Helmet>
        <title>Run</title>
        <meta name="description" content="Description of Run" />
      </Helmet>
      <div>
        <h1>{`Run [${runId}]`}</h1>
        <Divider />
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Card
              title="Information & parameters"
              extra={
                <Switch
                  checkedChildren="public"
                  unCheckedChildren="private"
                  checked={run.is_public}
                  onClick={setPublic}
                />
              }
            >
              <b>QiskitFlow version</b>: {run.version}
              <br />
              <br />
              {parameters}
              <br />
              <b>Execute experiment</b>: <Text code>...</Text>
              <br />
              <br />
              <b>BibTeX</b>:
              <Paragraph copyable>
                {`...`}
              </Paragraph>
            </Card>
            <br />
            <Table
              key="metrics_table"
              dataSource={metrics}
              columns={columns}
              pagination={false}
            />
            <br />
            <Card title="State vectors">
              <List
                size="small"
                dataSource={run.state_vectors}
                renderItem={sv => {
                  const vector = sv.vector
                    .map(c => `${c.real}+j${c.img} `)
                    .concat();

                  return (
                    <List.Item>
                      <b>{sv.name}</b>: {vector}
                    </List.Item>
                  );
                }}
              />
            </Card>
          </Col>
          <Col span={12}>
            <Card
              title="Experiment description"
              style={{ margin: '0 0 20px 0' }}
            >
              {description}
            </Card>
            <Card title="Files">
              <Tree
                showLine
                switcherIcon={<DownOutlined />}
                defaultExpandedKeys={['0-0-0']}
                treeData={[
                  {
                    title: 'run.json',
                    key: '0-0',
                  },
                ]}
              />
            </Card>
            {counts}
          </Col>
        </Row>
      </div>
    </div>
  );
}

render() {
    const {
      modalNewRequestVisible,
      modalNewRequestFolderID,
      rightMenuVisible,
      rightMenuPosition,
      rightMenuItems,
      rightMenuState,
    } = this.state;
    const { collectionsLoading, collections } = this.props;
    const { folderTree } = this.props.model;
    return (
      <div className={styles.CollectionsTab}>
        <div className={styles.optionBar}>
          <Button
            onClick={() => {
              this.showModalCreateCollection(true);
            }}
            type={'link'}
            icon={<FolderAddOutlined />}
            size={'small'}
            title={'New Folder'}
          />
          <Button
            onClick={() => {
              this.showModalCreateTestCase(true);
            }}
            type={'link'}
            icon={<FileAddOutlined />}
            size={'small'}
            title={'New File'}
          />
        </div>

        <Spin spinning={collectionsLoading}>
          {collections && collections.length ? (
            <ReactScrollBar style={{ height: '710px' }}>
              <Tree.DirectoryTree
                onSelect={this.onSelectTreeItem}
                onRightClick={this.onTreeRightClick}
              >
                {(collections || []).map((item) => {
                  return (
                    <Tree.TreeNode
                      key={`collection-${item.id}`}
                      collectionID={item.id}
                      title={item.name}
                    >
                      {(item.test_cases || []).map((testCase) => {
                        return (
                          <Tree.TreeNode
                            key={`testcase-${testCase.id}`}
                            collectionID={item.id}
                            title={testCase.name}
                            isLeaf
                          />
                        );
                      })}
                    </Tree.TreeNode>
                  );
                })}
              </Tree.DirectoryTree>
            </ReactScrollBar>
          ) : (
            <Empty />
          )}
        </Spin>

        <NewCollectionModal />

        <NewTestCaseModal
          visible={modalNewRequestVisible}
          folderTree={folderTree}
          folderID={modalNewRequestFolderID}
          onCancel={() => {
            this.setState({
              modalNewRequestVisible: false,
            });
          }}
        />

        <RightMenu
          visible={rightMenuVisible}
          position={rightMenuPosition}
          menu={rightMenuItems}
          onClick={this.onMenuClick}
          state={rightMenuState}
          onCancel={() => {
            this.setState({
              rightMenuVisible: false,
            });
          }}
        />
      </div>
    );
  }

render() {
    // const { currColId, currCaseId, isShowCol } = this.props;
    const { colModalType, colModalVisible, importInterVisible } = this.state;
    const currProjectId = this.props.match.params.id;
    // const menu = (col) => {
    //   return (
    //     <Menu>
    //       <Menu.Item>
    //         <span onClick={() => this.showColModal('edit', col)}>修改集合</span>
    //       </Menu.Item>
    //       <Menu.Item>
    //         <span onClick={() => {
    //           this.showDelColConfirm(col._id)
    //         }}>删除集合</span>
    //       </Menu.Item>
    //       <Menu.Item>
    //         <span onClick={() => this.showImportInterface(col._id)}>导入接口</span>
    //       </Menu.Item>
    //     </Menu>
    //   )
    // };

    const defaultExpandedKeys = () => {
      const { router, currCase, interfaceColList } = this.props,
        rNull = { expands: [], selects: [] };
      if (interfaceColList.length === 0) {
        return rNull;
      }
      if (router) {
        if (router.params.action === 'case') {
          if (!currCase || !currCase._id) {
            return rNull;
          }
          return {
            expands: this.state.expands ? this.state.expands : ['col_' + currCase.col_id],
            selects: ['case_' + currCase._id + '']
          };
        } else {
          let col_id = router.params.actionId;
          return {
            expands: this.state.expands ? this.state.expands : ['col_' + col_id],
            selects: ['col_' + col_id]
          };
        }
      } else {
        return {
          expands: this.state.expands ? this.state.expands : ['col_' + interfaceColList[0]._id],
          selects: ['root']
        };
      }
    };

    const itemInterfaceColCreate = interfaceCase => {
      return (
        <TreeNode
          style={{ width: '100%' }}
          key={'case_' + interfaceCase._id}
          title={
            <div
              className="menu-title"
              onMouseEnter={() => this.enterItem(interfaceCase._id)}
              onMouseLeave={this.leaveItem}
              title={interfaceCase.casename}
            >
              <span className="casename">{interfaceCase.casename}</span>
              <div className="btns">
                <Tooltip title="删除用例">
                  <Icon
                    type="delete"
                    className="interface-delete-icon"
                    onClick={e => {
                      e.stopPropagation();
                      this.showDelCaseConfirm(interfaceCase._id);
                    }}
                    style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
                  />
                </Tooltip>
                <Tooltip title="克隆用例">
                  <Icon
                    type="copy"
                    className="interface-delete-icon"
                    onClick={e => {
                      e.stopPropagation();
                      this.caseCopy(interfaceCase._id);
                    }}
                    style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
                  />
                </Tooltip>
              </div>
            </div>
          }
        />
      );
    };

    let currentKes = defaultExpandedKeys();
    // console.log('currentKey', currentKes)

    let list = this.state.list;

    if (this.state.filterValue) {
      let arr = [];
      list = list.filter(item => {

        item.caseList = item.caseList.filter(inter => {
          if (inter.casename.indexOf(this.state.filterValue) === -1 
          && inter.path.indexOf(this.state.filterValue) === -1
          ) {
            return false;
          }
          return true;
        });

        arr.push('col_' + item._id);
        return true;
      });
      // console.log('arr', arr);
      if (arr.length > 0) {
        currentKes.expands = arr;
      }
    }

    // console.log('list', list);
    // console.log('currentKey', currentKes)

    return (
      <div>
        <div className="interface-filter">
          <Input placeholder="搜索测试集合" onChange={this.filterCol} />
          <Tooltip placement="bottom" title="添加集合">
            <Button
              type="primary"
              style={{ marginLeft: '16px' }}
              onClick={() => this.showColModal('add')}
              className="btn-filter"
            >
              添加集合
            </Button>
          </Tooltip>
        </div>
        <div className="tree-wrapper" style={{ maxHeight: parseInt(document.body.clientHeight) - headHeight + 'px'}}>
          <Tree
            className="col-list-tree"
            defaultExpandedKeys={currentKes.expands}
            defaultSelectedKeys={currentKes.selects}
            expandedKeys={currentKes.expands}
            selectedKeys={currentKes.selects}
            onSelect={this.onSelect}
            autoExpandParent
            draggable
            onExpand={this.onExpand}
            onDrop={this.onDrop}
          >
            {list.map(col => (
              <TreeNode
                key={'col_' + col._id}
                title={
                  <div className="menu-title">
                    <span>
                      <Icon type="folder-open" style={{ marginRight: 5 }} />
                      <span>{col.name}</span>
                    </span>
                    <div className="btns">
                      <Tooltip title="删除集合">
                        <Icon
                          type="delete"
                          style={{ display: list.length > 1 ? '' : 'none' }}
                          className="interface-delete-icon"
                          onClick={() => {
                            this.showDelColConfirm(col._id);
                          }}
                        />
                      </Tooltip>
                      <Tooltip title="编辑集合">
                        <Icon
                          type="edit"
                          className="interface-delete-icon"
                          onClick={e => {
                            e.stopPropagation();
                            this.showColModal('edit', col);
                          }}
                        />
                      </Tooltip>
                      <Tooltip title="导入接口">
                        <Icon
                          type="plus"
                          className="interface-delete-icon"
                          onClick={e => {
                            e.stopPropagation();
                            this.showImportInterfaceModal(col._id);
                          }}
                        />
                      </Tooltip>
                      <Tooltip title="克隆集合">
                        <Icon
                          type="copy"
                          className="interface-delete-icon"
                          onClick={e => {
                            e.stopPropagation();
                            this.copyInterface(col);
                          }}
                        />
                      </Tooltip>
                    </div>
                    {/*<Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
                      <Icon className="opts-icon" type='ellipsis'/>
                    </Dropdown>*/}
                  </div>
                }
              >
                {col.caseList.map(itemInterfaceColCreate)}
              </TreeNode>
            ))}
          </Tree>
        </div>
        <ColModalForm
          ref={this.saveFormRef}
          type={colModalType}
          visible={colModalVisible}
          onCancel={() => {
            this.setState({ colModalVisible: false });
          }}
          onCreate={this.addorEditCol}
        />

        <Modal
          title="导入接口到集合"
          visible={importInterVisible}
          onOk={this.handleImportOk}
          onCancel={this.handleImportCancel}
          className="import-case-modal"
          width={800}
        >
          <ImportInterface currProjectId={currProjectId} selectInterface={this.selectInterface} />
        </Modal>
      </div>
    );
  }

RegionTree = observer(({ regionStore }) => {
  // @todo improve list render
  // this whole block performs async render to not block the rest of UI on first render
  const [deferred, setDeferred] = useState(true);
  const renderNow = useCallback(() => setDeferred(false), []);

  useEffect(() => {
    setTimeout(renderNow);
  }, [renderNow]);

  const canDrag = useRef(true);
  const setDraggable = useCallback((isDraggable)=>{
    canDrag.current = isDraggable;
  }, []);

  if (deferred)
    return (
      <div style={{ textAlign: "center" }}>
        <Spin />
      </div>
    );

  const isFlat = !regionStore.sortedRegions.some(r => r.parentID);
  const regions = regionStore.asTree((item, idx, onClick) => {
    return {
      key: item.id,
      title: <RegionItem item={item} idx={idx} flat={isFlat} setDraggable={setDraggable} onClick={onClick}/>,
    };
  });

  const classifications = regionStore.classifications.map(item => ({
    classification: true,
    key: item.id,
    title: <RegionItem item={item} flat  setDraggable={setDraggable} />,
  }));

  const treeData = [...classifications, ...regions];

  return (
    <Tree
      className={styles.treelabels}
      treeData={treeData}
      draggable={true}
      showIcon={false}
      blockNode={true}
      defaultExpandAll={true}
      autoExpandParent={true}
      switcherIcon={<LsChevron opacity="0.25"/>}
      onDragStart={({ event, node }) => {
        if (node.classification || !canDrag.current) {
          event.preventDefault();
          event.stopPropagation();
          return false;
        }
      }}
      onDrop={({ node, dragNode, dropPosition, dropToGap }) => {
        if (node.classification) return false;
        const dropKey = node.props.eventKey;
        const dragKey = dragNode.props.eventKey;
        const dropPos = node.props.pos.split("-");

        dropPosition = dropPosition - parseInt(dropPos[dropPos.length - 1]);
        const treeDepth = dropPos.length;

        const dropReg = regionStore.findRegionID(dropKey);
        const dragReg = regionStore.findRegionID(dragKey);

        regionStore.unhighlightAll();

        if (treeDepth === 2 && dropToGap && dropPosition === -1) {
          dragReg.setParentID("");
        } else if (dropPosition !== -1) {
          // check if the dragReg can be a child of dropReg
          const selDrop = dropReg.labeling?.selectedLabels || [];
          const labelWithConstraint = selDrop.filter(l => l.groupcancontain);

          if (labelWithConstraint.length) {
            const selDrag = dragReg.labeling.selectedLabels;

            const set1 = Utils.Checkers.flatten(labelWithConstraint.map(l => l.groupcancontain.split(",")));
            const set2 = Utils.Checkers.flatten(selDrag.map(l => (l.alias ? [l.alias, l.value] : [l.value])));

            if (set1.filter(value => -1 !== set2.indexOf(value)).length === 0) return;
          }

          // check drop regions tree depth
          if (dropReg.labeling?.from_name?.groupdepth) {
            let maxDepth = Number(dropReg.labeling.from_name.groupdepth);

            // find the height of the tree formed by dragReg for
            // example if we have a tree of A -> B -> C -> D and
            // we're moving B -> C part somewhere then it'd have a
            // height of 1
            const treeHeight = function(node) {
              if (!node) return 0;

              // TODO this can blow up if we have lots of stuff there
              const childrenHeight = regionStore.filterByParentID(node.pid).map(c => treeHeight(c));

              if (!childrenHeight.length) return 0;

              return 1 + Math.max.apply(Math, childrenHeight);
            };

            if (maxDepth >= 0) {
              maxDepth = maxDepth - treeHeight(dragReg);
              let reg = dropReg;

              while (reg) {
                reg = regionStore.findRegion(reg.parentID);
                maxDepth = maxDepth - 1;
              }

              if (maxDepth < 0) return;
            }
          }

          dragReg.setParentID(dropReg.id);
        }
      }}
    >
      {/* <TreeNode title="hello" key="0-0" style={{ width: '100%' }} /> */}
    </Tree>
  );
})

HierarchicalTree = (props) => {
  const {
    onCheck: propOnCheck,
    defaultCheckedKeys: propDefaultCheckedKeys,
    treeData,
    store,
    experimentId,
    showHideButton,
    onCellSetReorder,
    onNodeUpdate,
    onNodeDelete,
  } = props;

  const [checkedKeys, setCheckedKeys] = useState(propDefaultCheckedKeys);
  const [expandedKeys, setExpandedKeys] = useState(propDefaultCheckedKeys);

  useEffect(() => {
    if (checkedKeys.length > 0) {
      onCheck(checkedKeys);
    }
  }, []);

  const onCheck = useCallback((keys) => {
    setCheckedKeys(keys);
    propOnCheck(keys);
  }, []);

  const onDrop = useCallback((info) => {
    const {
      dragNode, node, dropPosition, dropToGap,
    } = info;

    // If rootNode, ignore
    if (dragNode.rootNode) return;

    // pos is a string e.g.: 0-0-1, each number is a position in a tree level
    const posFromArray = dragNode.pos.split('-');
    const posToArray = node.pos.split('-');

    const fromPosition = parseInt(posFromArray[2], 10);

    // If not in the same cellClass, ignore
    if (!_.isEqual(posFromArray[1], posToArray[1])) return;

    // If was dropped in same place, ignore
    if (fromPosition === dropPosition) return;

    // If not dropped in gap, ignore
    // (only allow dropToGap when the destination node is rootNode
    // because it can have children nodes)
    if (!dropToGap && !node.rootNode) return;

    const newPosition = dropPosition - (fromPosition < dropPosition ? 1 : 0);

    onCellSetReorder(dragNode.key, newPosition);
  }, []);

  const renderColorPicker = (modified) => {
    if (modified.color) {
      return (
        <ColorPicker
          color={modified.color || '#ffffff'}
          onColorChange={(e) => {
            onNodeUpdate(modified.key, { color: e });
          }}
        />
      );
    }
    return <></>;
  };

  const renderEditableField = (modified, parentKey) => (
    <EditableField
      onAfterSubmit={(e) => {
        onNodeUpdate(modified.key, { name: e });
      }}
      onDelete={() => {
        onNodeDelete(modified.key);
      }}
      value={modified.name}
      showEdit={modified.key !== 'scratchpad'}
      deleteEnabled={parentKey === 'scratchpad'}
      renderBold={!!modified.rootNode}
    />
  );

  const renderFocusButton = (modified) => {
    if (modified.children && store) {
      return (
        <FocusButton
          experimentId={experimentId}
          lookupKey={modified.key}
          store={store}
        />
      );
    }

    return <></>;
  };

  const renderHideButton = (modified) => {
    if (!modified.rootNode && showHideButton) {
      return (
        <HideButton cellSetKey={modified.key} />
      );
    }

    return <></>;
  };

  const renderTitlesRecursive = (source, parentKey = null) => {
    const toRender = source && source.map((d) => {
      const modified = d;
      modified.title = (
        <Space>
          {renderFocusButton(modified)}
          {renderEditableField(modified, parentKey)}
          {renderColorPicker(modified)}
          {renderHideButton(modified)}
        </Space>
      );

      modified.selectable = false;

      if (modified.children) {
        modified.children = renderTitlesRecursive(modified.children, modified.key);
      }

      return modified;
    });

    return toRender;
  };

  const [renderedTreeData, setRenderedTreeData] = useState([]);
  useEffect(() => {
    if (!treeData) {
      return;
    }

    setExpandedKeys(treeData.map((n) => n.key));
    setRenderedTreeData(renderTitlesRecursive(treeData));
  }, [treeData]);

  if (!treeData) return <Skeleton active />;

  return (
    <Tree
      checkable
      draggable
      onExpand={(keys) => {
        setExpandedKeys(keys);
      }}
      expandedKeys={expandedKeys}
      onCheck={onCheck}
      treeData={renderedTreeData}
      checkedKeys={checkedKeys}
      onDrop={onDrop}
      switcherIcon={<DownOutlined />}
      defaultExpandAll
    />
  );
}

render () {
    const { stateAdminAuthority } = this.props
    const { getFieldDecorator } = this.props.form
    const { authority_type_select, authority_parent_name } = this.state

    const customLabel = data => {
      return (
        <div className="box-tree-title clearfix">
          <div className="pull-left">
            <span className="title">{data.authority_name} </span>
          </div>
          <div className="pull-right">
            <Icon
              onClick={() => {
                this.showCreateModal(data)
                this.setState({
                  is_create: true
                })
              }}
              type="plus-circle-o"
            />
            <Icon
              onClick={() => {
                this.showEditModal(data)
                this.setState({
                  is_create: false
                })
                this.props.dispatch({
                  type: 'SET_CURRENT_AUTHORITY_INFO',
                  data: data
                })
              }}
              type="edit"
            />
            <Icon
              onClick={() => this.handleDeleteAuthority(data)}
              type="delete"
            />
          </div>
        </div>
      )
    }

    const TreeNodeTree = data => {
      return data.length > 0
        ? data.map(item => {
          return (
            <TreeNode key={item.authority_id} title={customLabel(item)}>
              {TreeNodeTree(item.children)}
            </TreeNode>
          )
        })
        : null
    }

    const itemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    const tailItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 16,
          offset: 5
        }
      }
    }

    return (
      <div className="layout-main">
        <div className="layout-main-title">
          <Breadcrumb>
            <Breadcrumb.Item href="#/manager/index">
              <Icon type="home" />
            </Breadcrumb.Item>
            <Breadcrumb.Item href="#/manager/index">
              <span>主页</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item href="#">
              <span>系统管理</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item>管理员权限菜单</Breadcrumb.Item>
          </Breadcrumb>
        </div>

        <div className="layout-nav-btn">
          <button
            className="btn btn-danger"
            icon="plus"
            onClick={() => this.showCreateModal()}
            type="primary"
          >
            创建权限
          </button>
        </div>

        <div className="card admin-authority">
          <div className="card-body">
            <Modal
              footer={null}
              onCancel={this.handleCancel}
              title="权限"
              visible={this.state.visible}
            >
              <Form className="login-form" onSubmit={this.handleSubmit}>
                {authority_parent_name ? (
                  <Form.Item {...itemLayout} label="父权限名称">
                    <Input
                      disabled={true}
                      type="text"
                      value={this.state.authority_parent_name}
                    />
                  </Form.Item>
                ) : (
                    ''
                  )}

                <Form.Item {...itemLayout} hasFeedback label="权限名称">
                  {getFieldDecorator('authority_name', {
                    rules: [
                      {
                        required: true,
                        message: '请输入权限名称'
                      }
                    ]
                  })(<Input type="text" />)}
                </Form.Item>

                <Form.Item {...itemLayout} hasFeedback label="权限类型">
                  {getFieldDecorator('authority_type', {
                    rules: [
                      {
                        required: true,
                        message: '请选择权限类型！'
                      }
                    ]
                  })(
                    <Select
                      onChange={this.authorityTypeChange}
                      placeholder="请选择权限类型！"
                    >
                      <Option value="1">基础菜单</Option>
                      <Option value="2">操作和功能</Option>
                    </Select>
                  )}
                </Form.Item>

                {Number(authority_type_select) === 2 ? (
                  <Form.Item {...itemLayout} hasFeedback label="权限路径">
                    {getFieldDecorator('authority_url', {
                      rules: [
                        {
                          required: true,
                          message: '请输入权限路径'
                        }
                      ]
                    })(
                      <Input
                        addonBefore="/api-admin/v1"
                        placeholder="请输入权限路径"
                        type="text"
                      />
                    )}
                  </Form.Item>
                ) : (
                    <Form.Item {...itemLayout} hasFeedback label="权限Key">
                      {getFieldDecorator('authority_url', {
                        rules: [
                          {
                            required: true,
                            message: '请输入权限Key'
                          }
                        ]
                      })(<Input placeholder="请输入权限Key" type="text" />)}
                    </Form.Item>
                  )}

                <Form.Item {...itemLayout} label="排序">
                  {getFieldDecorator('authority_sort')(<InputNumber />)}
                </Form.Item>

                <Form.Item {...itemLayout} hasFeedback label="权限描述">
                  {getFieldDecorator('authority_description', {
                    rules: [
                      {
                        required: true,
                        message: '请输入权限描述'
                      }
                    ]
                  })(<Input placeholder="请输入权限描述" type="text" />)}
                </Form.Item>

                {Number(authority_type_select) !== 2 ? (
                  <Form.Item {...itemLayout} label="是否显示">
                    {getFieldDecorator('enable', { valuePropName: 'checked' })(
                      <Switch />
                    )}
                  </Form.Item>
                ) : (
                    ''
                  )}
                <Form.Item {...tailItemLayout}>
                  <Button
                    className="login-form-button"
                    htmlType="submit"
                    type="primary"
                  >
                    {this.state.is_create ? '提交' : '修改'}
                  </Button>
                  <Button onClick={this.handleReset} style={{ marginLeft: 8 }}>
                    重置
                  </Button>
                </Form.Item>
              </Form>
            </Modal>

            <Tree defaultExpandAll={true} showLine ref="tree">
              {stateAdminAuthority.admin_authority_list.map(item => {
                return (
                  <TreeNode key={item.authority_id} title={customLabel(item)}>
                    {TreeNodeTree(item.children)}
                  </TreeNode>
                )
              })}
            </Tree>
          </div>
        </div>
      </div>
    )
  }

render() {
		const { taskKey, task } = this.state;

		return (
			<>
				<PageHeader
					title="Tasks"
				/>
				<Content style={{ padding: '16px 24px' }}>
					<Row gutter={16} className="height-100 tree-height-100">
						<Col className="max-height-100" span={5}>
							<Tree
								showIcon
								blockNode
								treeData={this.state.data}
								onSelect={this.onSelect}
								selectedKeys={[taskKey]}
								style={{
									height: '100%',
									paddingRight: '.5rem',
									overflow: 'auto',
									background: '#0a0a0a',
									border: '1px solid #303030'
								}}
							/>
						</Col>
						<Col className="max-height-100" span={19}>
							{task ? (
								<Row gutter={[16, 14]} className="height-100" style={{ flexDirection: "column", flexWrap: "nowrap" }}>
									<Col flex="0 0 auto">
										<Row gutter={[16, 14]}>
											<Col span={24}>
												<PageHeader
													title={task.id}
													tags={
														task.stats.hasOwnProperty("status") ? (	
															HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="warning">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="processing">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="error">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="success">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="pink">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="yellow">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : (
																<Tag color="default">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															)
														) : null
													}
													style={{ padding: 0 }}
													extra={
														<Form layout="inline">
															<Form.Item
																label="Priority"
															>
																<InputNumber
																	min={-1}
																	max={999}
																	value={task.priority}
																	onChange={this.onChangePriority}
																	readOnly={this.state.isReadOnlyPriority}
																	bordered={false}
																/>
															</Form.Item>
															<Button
																icon={<ControlOutlined />}
																onClick={this.onClickArguments}
																style={{ marginRight: '1rem' }}
															>
																Arguments
															</Button>
															<Popconfirm
																placement="topRight"
																title="Are you sure you want to delete this task?"
																onConfirm={this.onClickDelete}
																okText="Yes"
																cancelText="No"
															>
																<Button
																	type="danger"
																	icon={<DeleteOutlined />}
																	loading={this.state.isLoadingDelete}
																>
																	Delete
																</Button>
															</Popconfirm>
														</Form>
													}
												/>
											</Col>
											<Col span={24}>
												{task.stats.hasOwnProperty("progress") ? (
													<Progress type="line" percent={Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100)} />
												) : (
													<Progress type="line" percent={0} />
												)}
											</Col>
											<Col span={24}>
												<Row gutter={[12, 10]}>
													<Col>
														<Button
															type="primary"
															icon={<PlayCircleOutlined />}
															onClick={this.onClickStart}
															loading={this.state.isLoadingStart}
														>
															Start
														</Button>
													</Col>
													<Col>
														<Button
															icon={<ReloadOutlined />}
															onClick={this.onClickRefresh}
															loading={this.state.isLoadingRefresh}
														>
															Refresh
														</Button>
													</Col>
													<Col>
														<Button
															icon={<PauseOutlined />}
															onClick={this.onClickPause}
															loading={this.state.isLoadingPause}
														>
															Pause
														</Button>
													</Col>
													<Col>
														<Button
															icon={<CaretRightOutlined />}
															onClick={this.onClickResume}
															loading={this.state.isLoadingResume}
														>
															Resume
														</Button>
													</Col>
													<Col>
														<Button
															icon={<EnvironmentOutlined />}
															onClick={this.onClickCheckpoint}
															loading={this.state.isLoadingCheckpoint}
														>
															Checkpoint
														</Button>
													</Col>
													<Col>
														<Button
															icon={<StepForwardOutlined />}
															onClick={this.onClickSkip}
															loading={this.state.isLoadingSkip}
														>
															Skip
														</Button>
													</Col>
													<Col>
														<Popconfirm
															placement="topRight"
															title="Are you sure you want to quit this task?"
															onConfirm={this.onClickQuit}
															okText="Yes"
															cancelText="No"
														>
															<Button
																type="danger"
																icon={<CloseOutlined />}
																loading={this.state.isLoadingQuit}
															>
																Quit
															</Button>
														</Popconfirm>
													</Col>
												</Row>
											</Col>
										</Row>
									</Col>
									<Col flex="1 1 auto">
										<Row gutter={[16, 14]} className="height-100">
											<Col className="max-height-100" span={16}>
												<Descriptions
													column={2}
													layout="horizontal"
													bordered
												>
													{task.stats.hasOwnProperty("status") && (
														<Descriptions.Item label="Status" span={2}>
															{HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="warning" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="processing" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="error" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="success" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
																<Badge color="pink" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
																<Badge color="yellow" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : (
																<Badge status="default" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															)}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("target") && (
														<Descriptions.Item label="Target" span={2}>
															{task.stats["target"]}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("progress") && (
														<Descriptions.Item label="Progress" span={2}>
															{task.stats["progress"][0] + " / " + task.stats["progress"][1] + " (" + Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100) + "%)"}
															{task.stats.hasOwnProperty("guess") && (
																<Tooltip title={
																	<Descriptions bordered size="small" column={1} layout="horizontal">
																		{task.stats.guess.guess_base !== null ? (
																			<Descriptions.Item label="Guess Base">{task.stats.guess.guess_base} ({task.stats.guess.guess_base_offset}/{task.stats.guess.guess_base_count})</Descriptions.Item>
																		) : (
																			<Descriptions.Item label="Guess Base">-</Descriptions.Item>
																		)}
																		{task.stats.guess.guess_mod !== null ? (
																			<Descriptions.Item label="Guess Mod">{task.stats.guess.guess_mod} ({task.stats.guess.guess_mod_offset}/{task.stats.guess.guess_mod_count})</Descriptions.Item>
																		) : (
																			<Descriptions.Item label="Guess Mod">-</Descriptions.Item>
																		)}
																	</Descriptions>
																}>
																	<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
																</Tooltip>
															)}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("rejected") && (
														<Descriptions.Item label="Rejected" span={1}>
															{task.stats["rejected"]}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("restore_point") && (
														<Descriptions.Item label="Restore point" span={1}>
															{task.stats["restore_point"]}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("recovered_hashes") && (
														<Descriptions.Item label="Recovered hashes" span={1}>
															{task.stats["recovered_hashes"][0] + " / " + task.stats["recovered_hashes"][1] + " (" + Math.trunc((task.stats["recovered_hashes"][0] / task.stats["recovered_hashes"][1])*100) + "%)"}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("recovered_salts") && (
														<Descriptions.Item label="Recovered salts" span={1}>
															{task.stats["recovered_salts"][0] + " / " + task.stats["recovered_salts"][1] + " (" + Math.trunc((task.stats["recovered_salts"][0] / task.stats["recovered_salts"][1])*100) + "%)"}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("devices") && (
														<Descriptions.Item label="Speed" span={2}>
															{humanizeSpeed(totalSpeed(task.stats["devices"]))}
															<Tooltip title={
																<Table
																	columns={[
																		{
																			title: 'ID',
																			dataIndex: 'id',
																			key: 'ID'
																		},
																		{
																			title: 'Speed',
																			dataIndex: 'speed',
																			key: 'Speed'
																		},
																		{
																			title: 'Temp',
																			dataIndex: 'temp',
																			key: 'Temp'
																		},
																		{
																			title: 'Util',
																			dataIndex: 'util',
																			key: 'Util'
																		}
																	]}
																	dataSource={task.stats["devices"].map(device =>
																		({
																			key: device.device_id,
																			id: device.device_id,
																			speed: humanizeSpeed(device.speed),
																			temp: device.hasOwnProperty("temp") ? device.temp + " °C": "-",
																			util: device.util + "%",
																		})
																	)}
																	size="small"
																	pagination={false}
																	style={{ overflow: 'auto' }}
																/>
															}>
																<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
															</Tooltip>
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("time_start") && (
														<Descriptions.Item label="Started" span={1}>
															<Tooltip title={moment.unix(task.stats["time_start"]).format("MMMM Do YYYY, HH:mm")}>
																{moment.unix(task.stats["time_start"]).fromNow()}
															</Tooltip>
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("estimated_stop") && (
														<Descriptions.Item label="ETA" span={1}>
															<Tooltip title={moment.unix(task.stats["estimated_stop"]).format("MMMM Do YYYY, HH:mm")}>
																{moment.unix(task.stats["estimated_stop"]).fromNow()}
															</Tooltip>
														</Descriptions.Item>
													)}
												</Descriptions>
											</Col>
											<Col className="max-height-100" span={8}>
												<div className="height-100" style={{ display: "flex", flexDirection: "column" }}>
												<span><CodeOutlined /> Terminal</span>
												<pre style={{
													flex: 'auto',
													overflow: 'auto',
													padding: '.5rem',
													margin: '0',
													border: '1px solid #303030'
												}}>
													{task.journal.map(j => j.message + "\n")}
												</pre>
												</div>
											</Col>
										</Row>
									</Col>
								</Row>
							) : (
								"No selected task."
							)}
						</Col>
					</Row>
				</Content>
			</>
		)
	}

// ==== End Badge ====

  render() {
    const { currentStep } = this.state;
    return (
      <div className="direction-components">
        <Row>
          <Col span={24}>
            <Divider orientation="left">Cascader example</Divider>
            <Cascader
              suffixIcon={<SearchIcon />}
              options={cascaderOptions}
              onChange={this.onCascaderChange}
              placeholder="یک مورد انتخاب کنید"
              popupPlacement={this.props.popupPlacement}
            />
            &nbsp;&nbsp;&nbsp;&nbsp; With search:
            <Cascader
              suffixIcon={<SmileOutlined />}
              options={cascaderOptions}
              onChange={this.onCascaderChange}
              placeholder="Select an item"
              popupPlacement={this.props.popupPlacement}
              showSearch={this.cascaderFilter}
            />
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={12}>
            <Divider orientation="left">Switch example</Divider>
            &nbsp;&nbsp;
            <Switch defaultChecked />
            &nbsp;&nbsp;
            <Switch loading defaultChecked />
            &nbsp;&nbsp;
            <Switch size="small" loading />
          </Col>
          <Col span={12}>
            <Divider orientation="left">Radio Group example</Divider>

            <Radio.Group defaultValue="c" buttonStyle="solid">
              <Radio.Button value="a">تهران</Radio.Button>
              <Radio.Button value="b" disabled>
                اصفهان
              </Radio.Button>
              <Radio.Button value="c">فارس</Radio.Button>
              <Radio.Button value="d">خوزستان</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={12}>
            <Divider orientation="left">Button example</Divider>
            <div className="button-demo">
              <Button type="primary" icon={<DownloadOutlined />} />
              <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
              <Button type="primary" shape="round" icon={<DownloadOutlined />} />
              <Button type="primary" shape="round" icon={<DownloadOutlined />}>
                Download
              </Button>
              <Button type="primary" icon={<DownloadOutlined />}>
                Download
              </Button>
              <br />
              <Button.Group>
                <Button type="primary">
                  <LeftOutlined />
                  Backward
                </Button>
                <Button type="primary">
                  Forward
                  <RightOutlined />
                </Button>
              </Button.Group>
              <Button type="primary" loading>
                Loading
              </Button>
              <Button type="primary" size="small" loading>
                Loading
              </Button>
            </div>
          </Col>
          <Col span={12}>
            <Divider orientation="left">Tree example</Divider>
            <Tree
              showLine
              checkable
              defaultExpandedKeys={['0-0-0', '0-0-1']}
              defaultSelectedKeys={['0-0-0', '0-0-1']}
              defaultCheckedKeys={['0-0-0', '0-0-1']}
            >
              <TreeNode title="parent 1" key="0-0">
                <TreeNode title="parent 1-0" key="0-0-0" disabled>
                  <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
                  <TreeNode title="leaf" key="0-0-0-1" />
                </TreeNode>
                <TreeNode title="parent 1-1" key="0-0-1">
                  <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
                </TreeNode>
              </TreeNode>
            </Tree>
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={24}>
            <Divider orientation="left">Input (Input Group) example</Divider>
            <InputGroup size="large">
              <Row gutter={8}>
                <Col span={5}>
                  <Input defaultValue="0571" />
                </Col>
                <Col span={8}>
                  <Input defaultValue="26888888" />
                </Col>
              </Row>
            </InputGroup>
            <br />
            <InputGroup compact>
              <Input style={{ width: '20%' }} defaultValue="0571" />
              <Input style={{ width: '30%' }} defaultValue="26888888" />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select defaultValue="Option1">
                <Option value="Option1">Option1</Option>
                <Option value="Option2">Option2</Option>
              </Select>
              <Input style={{ width: '50%' }} defaultValue="input content" />
              <InputNumber />
            </InputGroup>
            <br />
            <Search placeholder="input search text" enterButton="Search" size="large" />
            <br />
            <br />
            <div style={{ marginBottom: 16 }}>
              <Input
                addonBefore={this.selectBefore}
                addonAfter={this.selectAfter}
                defaultValue="mysite"
              />
            </div>
            <br />
            <Row>
              <Col span={12}>
                <Divider orientation="left">Select example</Divider>
                <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
                  <Option value="jack">Jack</Option>
                  <Option value="مورچه">مورچه</Option>
                  <Option value="disabled" disabled>
                    Disabled
                  </Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
                  <Option value="مورچه">مورچه</Option>
                </Select>
                <Select defaultValue="مورچه" style={{ width: 120 }} loading>
                  <Option value="مورچه">مورچه</Option>
                </Select>
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="Select a person"
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option value="jack">Jack</Option>
                  <Option value="سعید">سعید</Option>
                  <Option value="tom">Tom</Option>
                </Select>
              </Col>
              <Col span={12}>
                <Divider orientation="left">TreeSelect example</Divider>
                <div>
                  <TreeSelect
                    showSearch
                    style={{ width: '100%' }}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="Please select"
                    allowClear
                    treeDefaultExpandAll
                  >
                    <TreeNode value="parent 1" title="parent 1" key="0-1">
                      <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
                        <TreeNode value="leaf1" title="my leaf" key="random" />
                        <TreeNode value="leaf2" title="your leaf" key="random1" />
                      </TreeNode>
                      <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
                        <TreeNode
                          value="sss"
                          title={<b style={{ color: '#08c' }}>sss</b>}
                          key="random3"
                        />
                      </TreeNode>
                    </TreeNode>
                  </TreeSelect>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col span={24}>
                <Divider orientation="left">Modal example</Divider>
                <div>
                  <Button type="primary" onClick={this.showModal}>
                    Open Modal
                  </Button>
                  <Modal
                    title="پنچره ساده"
                    visible={this.state.modalVisible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                  >
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                    <p>نگاشته‌های خود را اینجا قراردهید</p>
                  </Modal>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col span={24}>
                <Divider orientation="left">Steps example</Divider>
                <div>
                  <Steps progressDot current={currentStep}>
                    <Step title="Finished" description="This is a description." />
                    <Step title="In Progress" description="This is a description." />
                    <Step title="Waiting" description="This is a description." />
                  </Steps>
                  <br />
                  <Steps current={currentStep} onChange={this.onStepsChange}>
                    <Step title="Step 1" description="This is a description." />
                    <Step title="Step 2" description="This is a description." />
                    <Step title="Step 3" description="This is a description." />
                  </Steps>
                </div>
              </Col>
            </Row>
            <br />
            <Row>
              <Col span={12}>
                <Divider orientation="left">Rate example</Divider>
                <div>
                  <Rate defaultValue={2.5} />
                  <br />
                  <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
                  supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
                  implement rtl support.
                </div>
              </Col>
              <Col span={12}>
                <Divider orientation="left">Badge example</Divider>
                <div>
                  <div>
                    <Badge count={this.state.badgeCount}>
                      <a href="#" className="head-example" />
                    </Badge>
                    <ButtonGroup>
                      <Button onClick={this.declineBadge}>
                        <MinusOutlined />
                      </Button>
                      <Button onClick={this.increaseBadge}>
                        <PlusOutlined />
                      </Button>
                    </ButtonGroup>
                  </div>
                  <div style={{ marginTop: 10 }}>
                    <Badge dot={this.state.showBadge}>
                      <a href="#" className="head-example" />
                    </Badge>
                    <Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
        </Row>

        <br />
        <br />
        <Row>
          <Col span={24}>
            <Divider orientation="left">Pagination example</Divider>
            <Pagination showSizeChanger defaultCurrent={3} total={500} />
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={24}>
            <Divider orientation="left">Grid System example</Divider>
            <div className="grid-demo">
              <div className="code-box-demo">
                <p>
                  <strong>* Note:</strong> Every calculation in RTL grid system is from right side
                  (offset, push, etc.)
                </p>
                <Row>
                  <Col span={8}>col-8</Col>
                  <Col span={8} offset={8}>
                    col-8
                  </Col>
                </Row>
                <Row>
                  <Col span={6} offset={6}>
                    col-6 col-offset-6
                  </Col>
                  <Col span={6} offset={6}>
                    col-6 col-offset-6
                  </Col>
                </Row>
                <Row>
                  <Col span={12} offset={6}>
                    col-12 col-offset-6
                  </Col>
                </Row>
                <Row>
                  <Col span={18} push={6}>
                    col-18 col-push-6
                  </Col>
                  <Col span={6} pull={18}>
                    col-6 col-pull-18
                  </Col>
                </Row>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    );
  }