antd#Divider JavaScript Examples

function SelectionPanel({ actions, selectedStream }) {
  const descriptions = (
    <>
      <p>{i18n.t('message.restriction1')}</p>
      <p>{i18n.t('message.restriction2')}</p>
    </>
  );
  return (
    <>
      <Alert
        message={i18n.t('label.info')}
        description={descriptions}
        type="info"
        showIcon
        closable
        style={{ marginBottom: '10px' }}
      />
      <ErrorBoundary>
        <UserStreamPanel actions={actions} />
      </ErrorBoundary>
      <Divider orientation="left" plain />
      <ErrorBoundary>
        <MarketStreamPanel actions={actions} selectedStream={selectedStream} />
      </ErrorBoundary>
    </>
  );
}

ViewNewsletter = (props) => {
  const [visible, setVisible] = useState(false);

  const onCancel = (e) => {
    e.stopPropagation();
    setVisible(false);
  };

  return (
    <div>
      <Button
        size="xs"
        onClick={() => {
          setVisible(true);
        }}
      >
        Read
        <Modal
          destroyOnClose={true}
          keyboard={true}
          visible={visible}
          title={props.n.title}
          onCancel={onCancel}
          footer={[<Button onClick={onCancel}>Close</Button>]}
        >
          <p>{props.n.text}</p>
          <Divider />
          <p>Author : {props.n.createdBy.name}</p>
        </Modal>
      </Button>
    </div>
  );
}

renderAppCreateEvent() {
    const { source, operation, metadata, user_name, app_name, zone_code } = this.props.data;
    let data = JSON.parse(metadata);
    const { region_name, ip, users } = data;

    return (
      <div style={{ lineHeight: '30px' }}>
        新增了应用 <Tag>{app_name}</Tag>
        {users && users.length ? (
          <>
            <Divider type={'vertical'} />
            负责人: {users.join(',')}
          </>
        ) : (
          ''
        )}
      </div>
    );
  }

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
          ista probare, quae sunt a te dicta? Refert tamen, quo modo.
        </p>
        <Divider />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
          ista probare, quae sunt a te dicta? Refert tamen, quo modo.
        </p>
        <Divider>
          <strong>With Text</strong>
        </Divider>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
          ista probare, quae sunt a te dicta? Refert tamen, quo modo.
        </p>
        <Divider dashed />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
          ista probare, quae sunt a te dicta? Refert tamen, quo modo.
        </p>
      </div>
    )
  }

columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  }, {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  }, {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <span>
      <a>Action 一 {record.name}</a>
      <Divider type="vertical"/>
      <a>Delete</a>
      <Divider type="vertical"/>
      <a className="ant-dropdown-link">
        More actions <Icon type="down"/>
      </a>
    </span>
    ),
  }]

FlowToolbar = () => {
  return (
    <Toolbar className={styles.toolbar}>
      <ToolbarButton command="undo" />
      <ToolbarButton command="redo" />
      <Divider type="vertical" />
      <ToolbarButton command="copy" />
      <ToolbarButton command="paste" />
      <ToolbarButton command="delete" />
      <Divider type="vertical" />
      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
      <Divider type="vertical" />
      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
      <Divider type="vertical" />
      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
    </Toolbar>
  );
}

Index = memo(function Index() {

  const [popusVisible,setPopusVisible] = useState(true);

  const popusConfig = {
    visible:popusVisible,
    close:setPopusVisible,
    imageUrl:'https://antd-simple-pro.oss-cn-beijing.aliyuncs.com/image/1619162519739.png',
    linkUrl:'https://github.com/lgf196/ant-simple-pro'
  }

  const topconfig = {
    imageUrl:'http://img30.360buyimg.com/pop/jfs/t1/167699/3/19263/31070/607cfaf8Ed0016163/86edcf393b26d657.jpg.webp',
    linkUrl:'https://github.com/lgf196/ant-simple-pro',
    bg:'rgb(200, 32, 32)'
  }

  return (
    <PageLayout>
      <Divider>顶部广告栏</Divider>
      <TopAd {...topconfig} />
      <Divider />
      <Button type="primary" onClick={()=>setPopusVisible(true)}>弹窗广告栏</Button>
      <Popus {...popusConfig}/>
    </PageLayout>
  )
})

render() {
        const { user: { detail } } = this.props;
        return (
          <PageHeaderWrapper title="用户详情">
            <Card>
              <DescriptionList size="large" title="基本信息">
                <Description term="名称">{detail.realName} </Description>
                <Description term="账号">{detail.loginName}</Description>
                <Description term="权限">{detail.roleName}</Description>
                <Description term="手机号">{detail.phone}</Description>
                <Description term="邮箱">{detail.email}</Description>
              </DescriptionList>
              <Divider dashed />
              <DescriptionList size="large" title="其他信息">
                <Description term="创建时间">{moment(detail.createdAt).format('YYYY-MM-DD HH:mm:ss')} </Description>
                <Description term="上次登录时间">{moment(detail.loginDate).format('YYYY-MM-DD HH:mm:ss')} </Description>
                <Description term="备注">{detail.remark}</Description>
              </DescriptionList>
              <Divider dashed />
              <Row className="marginTop textRight">
                <Button type="primary" onClick={() => router.go(-1)}>返回</Button>
              </Row>
            </Card>
          </PageHeaderWrapper>
        )
    }

Header = ({ appName, alignRight, homeUrl, children, handleClickLogo, ...props }) => {
  const goToHomePage = useCallback(
    (e) => {
      if (handleClickLogo) {
        handleClickLogo(e);
      } else {
        e.preventDefault();
        window.history.pushState(null, homeUrl, homeUrl);
      }
    },
    [handleClickLogo, homeUrl],
  );

  return (
    <Layout.Header {...props} className={styles.vdsHeader}>
      <div className={styles.vdsHeaderContainer}>
        <a
          href={homeUrl}
          onClick={goToHomePage}
          className={styles.vdsLogoLink}
          title="Virtru"
          aria-label="Home page"
          tabIndex={0}
        >
          <LogoVirtruIcon className={styles.vdsLogo} />
        </a>
        <Divider type="vertical" className={styles.vdsDivider} />
        <Title className={styles.vdsTitle}>
          <a href={homeUrl} onClick={goToHomePage} className={styles.vdsAppNameLink}>
            <span className={styles.vdsAppName}>{appName}</span>
          </a>
        </Title>
        <div className={cn(styles.vdsHeaderContent, { [styles.vdsAlignRight]: alignRight })}>
          {children}
        </div>
      </div>
    </Layout.Header>
  );
}

function SavedAccounts({ accounts, onRemoveItem }) {
  const [accountsData, setAccountsData] = useState(accounts);

  useEffect(
    () => {
      setAccountsData(accounts);
    },
    [accounts]
  );

  return (
    <div className={styles.savedAccountCard}>
      <h3>Saved Accounts</h3>
      <Divider style={{ background: '#2e3032', marginTop: 0, marginBottom: 0 }} />
      {accountsData.length > 0 ? (
        accountsData.map(item => (
          <div
            style={{
              marginTop: 10,
              marginBottom: 10,
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <Link to={`/market/accounts/${item}`} style={{ fontWeight: 600 }}>
              {item}
            </Link>
            <Icon
              type="close"
              onClick={() => {
                let newAccount = accounts.filter(entry => entry != item);
                setAccountsData(newAccount);
                watchlistManager.saveData(newAccount);
                onRemoveItem(item);
              }}
            />
          </div>
        ))
      ) : (
        <span>No saved accounts</span>
      )}
    </div>
  );
}

TradeListCell = props => {
  const { item, admin, buyClick, sellClick, editClick, closeClick } = props;
  return (
    <div className={styles.tradeListCell}>
      <Row>
        <Col span={12}>{`账户地址：${item.address}`}</Col>
        <Col span={8}>{`交易时间：${item.latest}`}</Col>
        <Col span={4}>{`成交额：${item.total}`}</Col>
      </Row>
      <br/>
      <Row>
        <Col span={2} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
          <img alt="logo" width="100px" src={item.logo} />
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.name}</span>
              <p>{`类型: ${item.type}`}</p>
              <span>{`邮编: ${item.code}`}</span>
              <p>{`线损: ${item.loss}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`可销售度数: ${item.canSell}`}</span>
              <p>{`售价: ${item.sellPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`需购买度数: ${item.needBuy}`}</span>
              <p>{`售价: ${item.buyPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.status}</span>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <>
            <Button type="primary" size="default" onClick={buyClick}>购买</Button>
            <Divider orientation="center" type="vertical"/>
            <Button type="primary" danger size="default" onClick={sellClick}>出售</Button>
          </>
          {
            admin ?
              <div style={{marginTop: 10, hidden: true}}>
                <Button type="primary" size="default" onClick={editClick}>编辑</Button>
                <Divider orientation="center" type="vertical"/>
                <Button type="primary" danger size="default" onClick={() => closeClick(item.status === '歇业' ? "开业" : "歇业")}>{item.status === '歇业' ? "开业" : "歇业"}</Button>
              </div>
              :
              null
          }
        </Col>
      </Row>
      <Divider type="horizontal"/>
    </div>
  );
}

render() {
    return (

      <Layout className="layout-style">
        <h2>Welcome to the Sieberrsec Training Platform!</h2>
        <h3>This platform is in early alpha. Do report any bugs you find :D!</h3>
        <Divider />
        <div style={{ display: "flex", alignItems: "center" }}>
          <h1 style={{ fontSize: "150%", marginRight: "1ch" }}>Announcements <NotificationTwoTone /></h1> {this.state.updatingIndicator && (<div style={{ display: "flex", alignItems: "center" }}><Ellipsis color="#177ddc" size={50} /> <h4> Checking for updates</h4></div>)}
        </div>
        <List
          grid={{ gutter: 0, column: 1 }}
          dataSource={this.state.announcements}
          locale={{
            emptyText: (
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
                <FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
                <h1 style={{ fontSize: "200%" }}>There are no announcements.</h1>
              </div>
            )
          }}
          renderItem={item => {
            return (
              <List.Item key={item.title}>
                <Card

                  hoverable
                  type="inner"
                  bordered={true}
                  bodyStyle={{ backgroundColor: "#262626" }}
                  style={{ overflow: "hidden" }}
                >
                  <h1>{item.title}</h1>
                  <Divider />
                  <MarkdownRenderer>{item.content}</MarkdownRenderer>
                  <span style={{ float: "right" }}>Posted on <i>{new Date(item.timestamp).toLocaleString("en-US", { timeZone: "Asia/Singapore" })}</i></span>
                </Card>

              </List.Item>
            )
          }}

        >

        </List>

      </Layout>


    );
  }

export function HomePage({ dispatch, user, loggedIn, loading }) {
  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

  const loginForm = loggedIn ? '' : <Login />;

  return (
    <div>
      <Helmet>
        <title>Home</title>
      </Helmet>
      <Row gutter={[16, 16]}>
        <Col span={18}>
          <Card title="Greetings!" style={{ margin: '20px 0' }}>
            <p>
              Welcome to alpha version of QiskitFlow! Platform for tracking,
              sharing and running quantum experiments in a clean and
              understandable for developers, researchers and students manner.
              Thank you for taking time and reviewing our efforts in making
              quantum computing more transparent for everybody!
            </p>
            <p>
              If you have any questions or suggestions feel free to drop an
              email [email protected] or open{' '}
              <a href="https://github.com/IceKhan13/QiskitFlow/issues" target="_blank">
                Github issue
              </a>
            </p>
          </Card>
          <Divider />
          <h2>Public experiments</h2>
          <SharedRunsList />
        </Col>
        <Col span={6}>
          <Card title="QiskitFlow info" style={{ margin: '20px 0' }}>
            <b>Build</b>: 0.0.10-alpha
            <br />
            <b>Github</b>:{' '}
            <a href="https://github.com/IceKhan13/QiskitFlow" target="_blank">
              https://github.com/IceKhan13/QiskitFlow
            </a>
            <br />
            <b>PyPi</b>:{' '}
            <a href="https://pypi.org/project/qiskitflow/" target="_black">
              https://pypi.org/project/qiskitflow/
            </a>
          </Card>
          {loginForm}
          <img
            src="https://media.giphy.com/media/rmIGBIsDle8dEPubrG/giphy.gif"
            alt="QiskitFlow 3d"
            width="100%"
          />
          <Card title="Roadmap" style={{ margin: '20px 0' }}>
            <Steps direction="vertical" current={1}>
              <Step
                title="Alpha release"
                description="Alpha release for closed testing"
              />
              <Step title="Testing" description="Testing is in progress" />
              <Step
                title="General public release"
                description="Release for general public with open registration"
              />
              <Step
                title="Experiments compiler"
                description="Compiler backend for building executable images of executed experiments"
              />
            </Steps>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

render() {
    const { users } = this.state
    const title = (
      <span>
        <Button type='primary' onClick={this.handleAddUser}>添加用户</Button>
      </span>
    )
    const cardContent = `在这里，你可以对系统中的用户进行管理，例如添加一个新用户，或者修改系统中已经存在的用户。`
    return (
      <div className="app-container">
        <TypingCard title='用户管理' source={cardContent} />
        <br/>
        <Card title={title}>
          <Table bordered rowKey="id" dataSource={users} pagination={false}>
            <Column title="用户ID" dataIndex="id" key="id" align="center"/>
            <Column title="用户名称" dataIndex="name" key="name" align="center"/>
            <Column title="用户角色" dataIndex="role" key="role" align="center"/>
            <Column title="用户描述" dataIndex="description" key="description" align="center" />
            <Column title="操作" key="action" width={195} align="center"render={(text, row) => (
              <span>
                <Button type="primary" shape="circle" icon="edit" title="编辑" onClick={this.handleEditUser.bind(null,row)}/>
                <Divider type="vertical" />
                <Button type="primary" shape="circle" icon="delete" title="删除" onClick={this.handleDeleteUser.bind(null,row)}/>
              </span>
            )}/>
          </Table>
        </Card>
        <EditUserForm
          currentRowData={this.state.currentRowData}
          wrappedComponentRef={formRef => this.editUserFormRef = formRef}
          visible={this.state.editUserModalVisible}
          confirmLoading={this.state.editUserModalLoading}
          onCancel={this.handleCancel}
          onOk={this.handleEditUserOk}
        />  
        <AddUserForm
          wrappedComponentRef={formRef => this.addUserFormRef = formRef}
          visible={this.state.addUserModalVisible}
          confirmLoading={this.state.addUserModalLoading}
          onCancel={this.handleCancel}
          onOk={this.handleAddUserOk}
        />  
      </div>
    );
  }

expandedRowRender(recordRow) {
    const { id } = recordRow
    const { expandData } = this.state
    const { expandLoading } = this
    if (!expandLoading) {
      this.getReceiver(id)
    }
    const addStrategyEvent = () => {
      this.createEditReceiver.updateValue({ id, mode: 'create' })
    }
    const columns = [
      {
        title: '报警时间段',
        align: 'center',
        dataIndex: 'date',
        render: (text, record) => (
          <span>{record.start_time}~{record.end_time}</span>
        ),
      },
      { title: '报警延迟', align: 'center', dataIndex: 'start' },
      { title: '报警周期', align: 'center', dataIndex: 'period' },
      { title: '报警用户', align: 'center', dataIndex: 'user' },
      { title: '值班组', align: 'center', dataIndex: 'duty_group' },
      { title: '报警用户组', align: 'center', dataIndex: 'group' },
      { title: 'Filter表达式', align: 'center', dataIndex: 'expression' },
      { title: '报警方式', align: 'center', dataIndex: 'method' },
      {
        title: () => (<div>操作<Divider type="vertical" /><a onClick={addStrategyEvent}>添加</a></div>),
        dataIndex: 'operation',
        align: 'center',
        key: 'operation',
        render: (text, record) => (
          <span>
            <a onClick={() => { this.currentRow = id; this.handleEditReceiver(record) }}>编辑</a>
            {/* <Divider type="vertical" /> */}
            <Popconfirm
              title="确定要删除吗?"
              onConfirm={() => { this.currentRow = id; this.handleDeleteReceiver(record) }}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">删除</a>
            </Popconfirm>
          </span>
        ),
      },
    ];
    return <Table columns={columns} dataSource={expandData[id]} pagination={false} rowKey="id" />
  }

function InfoEvent(props) {

  const { evento } = props

  const dataEvent = [ 

  	{
  		data: evento.company,
  		description: "Comunidade"
  	},
  	{
  		data: evento.startDate,
  		description: "Data de Inicio"
  	},
  	{
  		data: evento.finishDate,
  		description: "Data de Encerramento"
  	},
  	{
  		data: evento.workload,
  		description: "Carga Horária"
  	},
	  
	];

  return (
  	<>
	  	<div className="up-info">
	  		
	  	</div>
	    <div className="list-info">
		  <Divider orientation="left">{evento.course}</Divider>
		    <List
		      header={<div>Informações do evento</div>}
		      bordered
		      dataSource={dataEvent}
		      renderItem={dataEvent => (
		        <List.Item>
		          <Tag color="default">{dataEvent.description}</Tag>{dataEvent.data}
		        </List.Item>
		      )}
		    />
	    </div>
	</>
  );
}

DisplayVariable = ({ contractFunction, functionInfo, refreshRequired, triggerRefresh }) => {
  const [variable, setVariable] = useState("");

  const refresh = useCallback(async () => {
    try {
      const funcResponse = await contractFunction();
      setVariable(funcResponse);
      triggerRefresh(false);
    } catch (e) {
      console.log(e);
    }
  }, [setVariable, contractFunction, triggerRefresh]);

  useEffect(() => {
    refresh();
  }, [refresh, refreshRequired, contractFunction]);

  return (
    <div>
      <Row>
        <Col
          span={8}
          style={{
            textAlign: "right",
            opacity: 0.333,
            paddingRight: 6,
            fontSize: 24,
          }}
        >
          {functionInfo.name}
        </Col>
        <Col span={14}>
          <h2>{tryToDisplay(variable)}</h2>
        </Col>
        <Col span={2}>
          <h2>
            <a href="#" onClick={refresh}>
              ?
            </a>
          </h2>
        </Col>
      </Row>
      <Divider />
    </div>
  );
}

DeadlineList = ({pinned, data, onPin, onUnpin, onDelete}) => {
    const formatDate = date => `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
    const formatDescription = item => `${formatDate(new Date(item.start))} ~ ${formatDate(new Date(item.end))}`;

    return (
        <Container>
            {pinned ? <Fragment>
                <PinnedDeadline
                    title={pinned.name}
                    description={formatDescription(pinned)}
                    onUnpin={onUnpin}
                />
                <Divider />
            </Fragment> : null}
            <StyledList
                itemLayout="horizontal"
                dataSource={data}
                renderItem={(item, index) => (
                    <List.Item
                        actions={[
                            <Popconfirm
                                title="Are you sure？"
                                okText="Yes"
                                placement="left"
                                cancelText="No"
                                onConfirm={() => onPin(index)}>
                                <PushpinFilled />
                            </Popconfirm>,
                            <Popconfirm
                                title="Are you sure？"
                                okText="Yes"
                                placement="left"
                                cancelText="No"
                                onConfirm={() => onDelete(item.id, index)}>
                                <Button
                                    type="primary"
                                    danger
                                    shape="circle"
                                    icon={
                                        <DeleteOutlined />
                                    }/>
                            </Popconfirm>]}>
                        <List.Item.Meta
                            title={item.name}
                            description={formatDescription(item)}
                        />
                    </List.Item>
                )}
            />
        </Container>
    );
}

DisplayVariable = ({ contractFunction, functionInfo, refreshRequired, triggerRefresh}) => {
  const [variable, setVariable] = useState("");

  const refresh = useCallback(async () => {
    try {
      const funcResponse = await contractFunction();
      setVariable(funcResponse);
      triggerRefresh(false);
    } catch (e) {
      console.log(e);
    }
  }, [setVariable, contractFunction, triggerRefresh]);

  useEffect(() => {
    refresh();
  }, [refresh, refreshRequired, contractFunction]);

  return (
    <div>
      <Row>
        <Col
          span={8}
          style={{
            textAlign: "right",
            opacity: 0.333,
            paddingRight: 6,
            fontSize: 24,
          }}
        >
          {functionInfo.name}
        </Col>
        <Col span={14}>
          <h2>{tryToDisplay(variable)}</h2>
        </Col>
        <Col span={2}>
          <h2>
            <a href="#" onClick={refresh}>
              ?
            </a>
          </h2>
        </Col>
      </Row>
      <Divider />
    </div>
  );
}

SelectWallet = ({ size = "medium", width = 250 }) => {
  const [showWalletModal, setShowWalletModal] = useState(false);
  const { wallets, activeWallet } = useSelector((state) => state.settings);
  const dispatch = useDispatch();
  const { t } = useTranslation();
  return (
    <div>
      <Select
        placeholder={t("main_menu.select_wallet.placeholder", "Select your wallet address")}
        value={activeWallet}
        size={size}
        style={{ width }}
        notFoundContent={t("main_menu.select_wallet.no_found", "No wallets found")}
        optionFilterProp="children"
        dropdownRender={(menu) => (
          <div>
            {menu}
            <Divider style={{ margin: "4px 0" }} />
            <div>
              <Button type="link" onClick={() => setShowWalletModal(true)}>
                {t("main_menu.select_wallet.btn", "Add")}
              </Button>
            </div>
          </div>
        )}
        onChange={(address) => {
          if (typeof address === "string") {
            dispatch(changeActiveWallet(address));
          }
        }}
      >
        {wallets.map((address, i) => (
          <Select.Option key={"wallet-" + i} value={address}>
            {address}
          </Select.Option>
        ))}
      </Select>

      <AddWalletAddressModal
        visible={showWalletModal}
        setShowWalletModal={setShowWalletModal}
      />
    </div>
  );
}

DisplayVariable = ({ contractFunction, functionInfo, refreshRequired, triggerRefresh }) => {
  const [variable, setVariable] = useState("");

  const refresh = useCallback(async () => {
    try {
      const funcResponse = await contractFunction();
      setVariable(funcResponse);
      triggerRefresh(false);
    } catch (e) {
      console.log(e);
    }
  }, [setVariable, contractFunction, triggerRefresh]);

  useEffect(() => {
    refresh();
  }, [refresh, refreshRequired, contractFunction]);

  return (
    <div>
      <Row>
        <Col
          span={8}
          style={{
            textAlign: "right",
            opacity: 0.333,
            paddingRight: 6,
            fontSize: 24,
          }}
        >
          {functionInfo.name}
        </Col>
        <Col span={14}>
          <h2>{tryToDisplay(variable)}</h2>
        </Col>
        <Col span={2}>
          <h2>
            <a href="#" onClick={refresh}>
              ?
            </a>
          </h2>
        </Col>
      </Row>
      <Divider />
    </div>
  );
}

Edit = (props) => {
  const [visible, setVisible] = useState(false);
  const [isActive, setIsActive] = useState(props.n.active);
  const [title, setTitle] = useState(props.n.title);
  const [text, setText] = useState(props.n.text);

  const onClose = async (e) => {
    e.stopPropagation();
    setVisible(false);
    await postData();
  };

  const postData = async () => {
    await fetch(`/api/v1/newsletter/update`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
      body: JSON.stringify({
        id: props.n._id,
        text,
        title,
        active: isActive,
      }),
    }).then((res) => res.json());
  };

  return (
    <div>
      <Button onClick={() => setVisible(true)}>
        Edit
        <Drawer
          width={640}
          placement="right"
          onClose={onClose}
          visible={visible}
        >
          <h4>Active : {props.n.active.toString()}</h4>
          <h4>Created By : {props.n.createdBy.name}</h4>
          <Divider />
          <h4>
            Title :{" "}
            <Input
              style={{ width: 300 }}
              onChange={(e) => setTitle(e.target.value)}
            />
          </h4>
          <Divider />
          <h5>Detail</h5>
          <Input.TextArea
            defaultValue={props.n.text}
            rows={10}
            onChange={(e) => setText(e.target.value)}
          />
          <Divider />
          <h5>Select the button below to change visability </h5>
          <Radio.Group
            buttonStyle="solid"
            value={isActive}
            onChange={(e) => setIsActive(e.target.value)}
            style={{ textAlign: "center" }}
          >
            <Space>
              <Radio.Button value={true}>Active</Radio.Button>
              <Radio.Button value={false}>Hidden</Radio.Button>
            </Space>
          </Radio.Group>
        </Drawer>
      </Button>
    </div>
  );
}

EventOptions = props => {
	const [isDrawerVisible, setIsDrawerVisible] = useState(false);
	const [userData] = useState(getRole());
	const handleEventAdd = () => {
		setIsDrawerVisible(false);
		props.onAddEvent();
	};

	const handleChange = val => {
		props.onTypeChange(val);
	};

	return (
		<div style={{ marginBottom: 12 }}>
			{userData.role === "lead" ? (
				<>
					<Button onClick={() => setIsDrawerVisible(true)}>
						Create Event
					</Button>
					<Divider type="vertical" />
				</>
			) : null}

			<Select
				style={{ minWidth: 180 }}
				defaultValue="Upcoming Events"
				onChange={handleChange}
			>
				<Option value="upcoming">Upcoming Events</Option>
				<Option value="past">Past Events</Option>
				<Option value="running">Running Events</Option>
			</Select>

			<Drawer
				title="Create Event"
				placement="right"
				closable={true}
				width="40%"
				destroyOnClose={true}
				onClose={() => setIsDrawerVisible(false)}
				visible={isDrawerVisible}
			>
				<CreateEvent onAddEvent={handleEventAdd} />
			</Drawer>
		</div>
	);
}

DefaultPage = ({ detail }) => {
  return (
    <>
      <div className='application-scenario'>
        <Helmet title='Application| scenario' />
        <h5>Scenario</h5>
        <div>
          <div className='application-scenario editor-container'>
            <Editor
              value={get(detail, 'scenario', '')}
              highlight={code => highlight(code, languages.go, 'go')}
              padding={16}
              tabSize={4}
              insertSpaces
              className='editor'
              disabled
              style={{
                fontFamily: '"Arial", "Open Sans", monospace',
                fontSize: 14
              }}
            />
          </div>
          <Divider orientation='left' plain>
     gomod
          </Divider>
          <div className='application-scenario editor-container'>
            <Editor
              value={get(detail, 'gomod', '')}
              highlight={code => highlight(code, languages.go, 'go')}
              padding={16}
              tabSize={4}
              insertSpaces
              className='editor'
              disabled
              style={{
                fontFamily: '"Arial", "Open Sans", monospace',
                fontSize: 14
              }}
            />
          </div>
          <Divider orientation='left' plain>
     gosum
          </Divider>
          <div className='application-scenario editor-container'>
            <Editor
              value={get(detail, 'gosum', '')}
              highlight={code => highlight(code, languages.go, 'go')}
              padding={16}
              tabSize={4}
              insertSpaces
              className='editor'
              disabled
              style={{
                fontFamily: '"Arial", "Open Sans", monospace',
                fontSize: 14
              }}
            />
          </div>
        </div>
      </div>
    </>
  )
}

render() {
    const { form, data, dispatch, submitting } = this.props;
    const { getFieldDecorator, validateFields } = form;
    const onPrev = () => {
      router.push('/form/step-form/info');
    };
    const onValidateForm = e => {
      e.preventDefault();
      validateFields((err, values) => {
        if (!err) {
          dispatch({
            type: 'form/submitStepForm',
            payload: {
              ...data,
              ...values,
            },
          });
        }
      });
    };
    return (
      <Form layout="horizontal" className={styles.stepForm}>
        <Alert
          closable
          showIcon
          message="确认转账后，资金将直接打入对方账户，无法退回。"
          style={{ marginBottom: 24 }}
        />
        <Form.Item {...formItemLayout} className={styles.stepFormText} label="付款账户">
          {data.payAccount}
        </Form.Item>
        <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款账户">
          {data.receiverAccount}
        </Form.Item>
        <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名">
          {data.receiverName}
        </Form.Item>
        <Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额">
          <span className={styles.money}>{data.amount}</span>
          <span className={styles.uppercase}>（{digitUppercase(data.amount)}）</span>
        </Form.Item>
        <Divider style={{ margin: '24px 0' }} />
        <Form.Item {...formItemLayout} label="支付密码" required={false}>
          {getFieldDecorator('password', {
            initialValue: '123456',
            rules: [
              {
                required: true,
                message: '需要支付密码才能进行支付',
              },
            ],
          })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
        </Form.Item>
        <Form.Item
          style={{ marginBottom: 8 }}
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: {
              span: formItemLayout.wrapperCol.span,
              offset: formItemLayout.labelCol.span,
            },
          }}
          label=""
        >
          <Button type="primary" onClick={onValidateForm} loading={submitting}>
            提交
          </Button>
          <Button onClick={onPrev} style={{ marginLeft: 8 }}>
            上一步
          </Button>
        </Form.Item>
      </Form>
    );
  }

render(){
    const {getFieldDecorator} = this.props.form
    return (
      <div>
        <Form className='stepForm' hideRequiredMark>
          <Form.Item {...formItemLayout} label="付款账户">
            {getFieldDecorator('payAccount', {
              initialValue: '[email protected]',
              rules: [{ required: true, message: '请选择付款账户' }],
            })(
              <Select placeholder="[email protected]">
                <Option value="[email protected]">[email protected]</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="收款账户">
            <Input.Group compact>
              <Select defaultValue='alipay' style={{width:100}}>
                <Option value="alipay">支付宝</Option>
                <Option value="bank">银行账户</Option>
              </Select>
              {getFieldDecorator('receiverAccount',{
                  initialValue: '[email protected]',
                  rules: [
                    { required: true, message: '请输入收款人账户' },
                    { type: 'email', message: '账户名应为邮箱格式' },
                  ],
                })(
                  <Input style={{ width: 'calc(100% - 100px)' }}/>
                )}
            </Input.Group>
          </Form.Item>
          <Form.Item {...formItemLayout} label="收款人姓名">
            {getFieldDecorator('receiverName', {
              initialValue: 'Alex',
              rules: [{ required: true, message: '请输入收款人姓名' }],
            })(<Input placeholder="请输入收款人姓名" />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="转账金额">
            {getFieldDecorator('amount', {
              initialValue: 500,
              rules: [
                { required: true, message: '请输入转账金额' },
                {
                  pattern: /^(\d+)((?:\.\d+)?)$/,
                  message: '请输入合法金额数字',
                },
              ],
            })(<Input prefix="￥" placeholder="请输入金额" />)}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type='primary' onClick={this.nextStep}>下一步</Button>
          </Form.Item>
        </Form>
        <Divider/>
        <div className='desc'>
          <h3>说明</h3>
          <h4>转账到支付宝账户</h4>
          <p>
            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
          </p>
          <h4>转账到银行卡</h4>
          <p>
            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
          </p>
        </div>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

HtxDialogView = inject("store")(
  observer(({ store, item }) => {
    if (!store.task || !store.task.dataObj) {
      return <Empty />;
    }

    const result = [];
    let name = item.value;

    if (name.charAt(0) === "$") {
      name = name.substr(1);
    }

    store.task.dataObj[name].forEach((item, ind) => {
      let bgColor;

      if (item.name) {
        bgColor = convertToRGBA(stringToColor(item.name), 0.1);
      }

      result.push(
        <DialogView
          key={ind}
          name={item.name}
          hint={item.hint}
          text={item.text}
          selected={item.selected}
          date={item.date}
          id={item.id}
          bg={bgColor}
        />,
      );
    });

    return (
      <div>
        <div
          style={{
            display: "flex",
            flexFlow: "column",
            maxHeight: "500px",
            overflowY: "scroll",
            paddingRight: "10px",
            marginTop: "10px",
          }}
        >
          {result}
        </div>
        <Divider dashed={true} />
      </div>
    );
  }),
)

SearchMenu = (props) => {
  const { options, categoryInfo, onSelect } = props;
  const [filteredOptions, setFilteredOptions] = useState(options);

  const search = (text) => {
    const newFiltered = {};
    Object.keys(options).forEach((key) => {
      newFiltered[key] = newFiltered[key] || [];
      options[key].forEach((tool) => {
        const keys = Object.keys(tool);
        const containsText = keys.filter(
          (k) => tool[k].toString().toLowerCase().includes(text.toLowerCase()),
        );
        if (containsText.length > 0) {
          newFiltered[key].push(tool);
        }
      });
    });

    setFilteredOptions(newFiltered);
    return newFiltered;
  };

  const renderMenuItem = (icon, item, category) => (
    <Menu.Item
      key={[item.key, 'item'].join('-')}
      icon={icon}
      onClick={() => {
        onSelect(item.key, category, item.group);
      }}
    >
      <Tooltip placement='left' title={item.description} mouseLeaveDelay={0}>
        {item.name ?? item.key}
      </Tooltip>
    </Menu.Item>
  );

  return (
    <Menu>
      <Menu.Item>
        <Input
          placeholder='Search'
          onChange={(e) => search(e.target.value)}
          allowClear
        />
      </Menu.Item>
      {
        Object.keys(filteredOptions).map((category) => [
          filteredOptions[category].length > 0 ? <Menu.Item><Divider orientation='left' plain>{category || ''}</Divider></Menu.Item> : <></>,
          filteredOptions[category].map((item) => renderMenuItem(categoryInfo[category] || <></>,
            item,
            category)),
        ])
      }
    </Menu>
  );
}

Item = ({ item }) => {
  const { moneyFormatter } = useMoney();
  return (
    <Row gutter={[12, 0]} key={item._id}>
      <Col className="gutter-row" span={11}>
        <p style={{ marginBottom: 5 }}>
          <strong>{item.itemName}</strong>
        </p>
        <p>{item.description}</p>
      </Col>
      <Col className="gutter-row" span={4}>
        <p
          style={{
            textAlign: 'right',
          }}
        >
          {moneyFormatter({ amount: item.price })}
        </p>
      </Col>
      <Col className="gutter-row" span={4}>
        <p
          style={{
            textAlign: 'right',
          }}
        >
          {item.quantity}
        </p>
      </Col>
      <Col className="gutter-row" span={5}>
        <p
          style={{
            textAlign: 'right',
            fontWeight: '700',
          }}
        >
          {moneyFormatter({ amount: item.total })}
        </p>
      </Col>
      <Divider dashed style={{ marginTop: 0, marginBottom: 15 }} />
    </Row>
  );
}