antd#Alert JavaScript Examples

render() {
    const { value, selectedValue } = this.state;
    return (
      <>
        <Alert
          message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
        />
        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
      </>
    );
  }

content = (
    <div>
        <Alert style={{marginTop: 5, marginBottom: 10}} message={<FormattedMessage id="delay-message-information1"/>} type="info" showIcon/>
        <p><FormattedMessage id="delay-message-information2"/></p>
        <p><FormattedMessage id="delay-message-information3"/></p>
        <pre>
            {JSON.stringify({
                "level": 0,
                "topic": "target",
                "key": "key",
                "value": "value"
            }, null, 4)}
        </pre>
    </div>
)

render() {
    return (
      <div className="layout-main" id="system-config">
        <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>
        <Notice />
        <Advertise />
        <Alert
          message="备注"
          description="应用于网站的某些配置公告等等"
          type="warning"
          showIcon
        />
      </div>
    )
  }

alertContent = () => {
  const ua = window.navigator.userAgent
  const isChrome = ua.indexOf('Chrome') && window.chrome
  if (!isChrome) {
    return (
      <Alert
        style={{zIndex: 99}}
        message={'YApi 的接口测试等功能仅支持 Chrome 浏览器，请使用 Chrome 浏览器获得完整功能。'}
        banner={true}
        closable={true}
      />
    )
  }
}

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>
    </>
  );
}

function CheckCrossInstall(props) {
  const hasPlugin = props.hasPlugin
  return (
    <div className={hasPlugin ? null : 'has-plugin'}>
      {hasPlugin ? (
        ''
      ) : (
        <Alert
          message={(
            <div>
              运行接口需安装浏览器插件，<a href='https://github.com/fjc0k/YApi-X/tree/master/chrome-extension#readme'>查看安装教程→</a>
            </div>
          )}
          type='error'
          style={{ margin: 10 }}
        />
      )}
    </div>
  )
}

Home = withRouter(props => {
  const { location } = props;
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">Home</Link>
    </Breadcrumb.Item>,
  ].concat(extraBreadcrumbItems);
  return (
    <div className="demo">
      <div className="demo-nav">
        <Link to="/">Home</Link>
        <Link to="/apps">Application List</Link>
      </div>
      <Switch>
        <Route path="/apps" component={Apps} />
        <Route render={() => <span>Home Page</span>} />
      </Switch>
      <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
    </div>
  );
})

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Spin tip="Loading...">
            <Alert
              message="Alert message title"
              description="Further details about the context of this alert."
              type="info"
            />
          </Spin>
        </div>
      </div>
    )
  }

render() {
    const container = (
      <Alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    );
    return (
      <div>
        <Spin spinning={this.state.loading} delay={500}>
          {container}
        </Spin>
        <div style={{ marginTop: 16 }}>
          Loading state：
          <Switch checked={this.state.loading} onChange={this.toggle} />
        </div>
      </div>
    );
  }

render() {
        return (
            <Row>
                <Card title="Spin的用法" className="card-wrap">
                    <Spin size="small"/>
                    <Spin/>
                    <Spin size="large"/>
                </Card>

                <Card title="内容遮罩" className="card-wrap">
                    <Alert  message="React" description="Antd Pro Design of React教程学习" type="info">
                    </Alert>

                    <Alert  message="React" description="Antd Pro Design of React教程学习" type="warning">
                    </Alert>

                    <Spin tip="加载中">
                        <Alert  message="React" description="Antd Pro Design of React教程学习" type="warning">
                        </Alert>
                    </Spin>
                </Card>
            </Row>
        );
    }

LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
)

BrowserAlert = () => {
  const renderContent = () => {
    if (navigator.userAgent.match('Chrome')) return <></>;

    return (
      <Alert
        showIcon
        message={(
          <>
            <b>Browser not supported.</b>
            {' '}
            We recommend switching to Google Chrome for the best Cellenics experience.
          </>
        )}
        banner
        closable
        style={{
          position: 'fixed',
          top: 0,
          zIndex: 100,
          width: '100%',
          borderBottom: '1px solid #FFF0A3',
        }}
      />
    );
  };

  return renderContent();
}

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <div className="mb-3">
            <Alert closable message="Success Tips" type="success" showIcon />
          </div>
          <div className="mb-3">
            <Alert closable message="Informational Notes" type="info" showIcon />
          </div>
          <div className="mb-3">
            <Alert closable message="Warning" type="warning" showIcon />
          </div>
          <div className="mb-3">
            <Alert closable message="Error" type="error" showIcon />
          </div>
        </div>
        <h5 className="mb-3">
          <strong>Advanced</strong>
        </h5>
        <div className="mb-3">
          <Alert
            closable
            message="Success Tips"
            description="Detailed description and advice about successful copywriting."
            type="success"
            showIcon
          />
        </div>
        <div className="mb-5">
          <div className="mb-3">
            <Alert
              closable
              message="Informational Notes"
              description="Additional description and information about copywriting."
              type="info"
              showIcon
            />
          </div>
          <div className="mb-3">
            <Alert
              closable
              message="Warning"
              description="This is a warning notice about copywriting."
              type="warning"
              showIcon
            />
          </div>
          <div className="mb-3">
            <Alert
              closable
              message="Error"
              description="This is an error message about copywriting."
              type="error"
              showIcon
            />
          </div>
        </div>
      </div>
    )
  }

render() {
    const { selectedRowKeys, needTotalList } = this.state;
    const {
      data: { list, pagination },
      loading,
      columns,
      rowKey,
    } = this.props;

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <div className={styles.tableAlert}>
          <Alert
            message={
              <Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                {needTotalList.map(item => (
                  <span style={{ marginLeft: 8 }} key={item.dataIndex}>
                    {item.title}
                    总计&nbsp;
                    <span style={{ fontWeight: 600 }}>
                      {item.render ? item.render(item.total) : item.total}
                    </span>
                  </span>
                ))}
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                  清空
                </a>
              </Fragment>
            }
            type="info"
            showIcon
          />
        </div>
        <Table
          loading={loading}
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={list}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }

render(){
    const {getFieldDecorator} = this.props.form
    return (
      <div>
        <Form className='stepForm' id='step2'>
          <Alert closable showIcon message="确认转账后，资金将直接打入对方账户，无法退回。" style={{ marginBottom: 24 }}/>
          <Form.Item {...formItemLayout} className='setFormText' label="付款账户">
            {this.props.stepFormStore.info.payAccount}
          </Form.Item>
          <Form.Item {...formItemLayout} label="收款账户">
            {this.props.stepFormStore.info.receiverAccount}
          </Form.Item>
          <Form.Item {...formItemLayout} className='setFormText' label="收款人姓名">
            {this.props.stepFormStore.info.receiverName}
          </Form.Item>
          <Form.Item {...formItemLayout} className='setFormText' label="转账金额">
            <span className='money'>{this.props.stepFormStore.info.amount}</span>
            <span>（{digitUppercase(this.props.stepFormStore.info.amount)}）</span>
          </Form.Item>
          <Divider/>
          <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={this.handleSubmit} loading={this.state.loading}>提交</Button>
            <Button onClick={()=>this.props.stepFormStore.setCurrent(0)} style={{ marginLeft: 8 }}>上一步</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }

render() {
    const { env, versionKey, userConfig } = this.props;

    const { monitorType = 0, dashboardPath } = this.state;

    const { version } = this.props.setting.settings;

    const { dashboards: dashboardList = [] } =
      (Array.isArray(version) && version.find((item) => item.versionKey === versionKey)) || {};

    console.log('监控 --- version', version);
    console.log('监控 --- versionKey', versionKey);
    console.log('>>>>>>>>> this.props.userConfig', userConfig);
    console.log('监控 --- dashboardList', dashboardList);
    console.log('dashboardPath', dashboardPath);
    console.log('this.props.location.query', this.props.location.query);

    if (!env) {
      return (
        <div style={{ marginTop: 10 }}>
          <Alert message="Warning" description="请选择环境." type="warning" showIcon />
        </div>
      );
    }

    return (
      <div style={{ backgroundColor: '#f7f8fa' }}>
        <div
          style={{
            // marginLeft: 10,
            // marginTop: 10,
            // marginRight: 10,
            // marginBottom: 10,
            paddingTop: 5,
            paddingBottom: 5,
            flexDirection: 'column',
            display: 'flex',
            flex: 'auto',
            height: '100%',
          }}
        >
          <Row gutter={24} className="top">
            <Col
              span={24}
              className={styles.monitorTab}
              style={{ marginLeft: '10px', paddingBottom: '10px' }}
            >
              {Array.isArray(dashboardList) && dashboardList.length ? (
                <RadioGroup
                  defaultValue={dashboardPath}
                  value={dashboardPath}
                  onChange={this.monitorTypeTChange}
                  optionType="button"
                  buttonStyle="solid"
                >
                  {dashboardList.map((item) => (
                    <Radio.Button key={item.name} value={item.value}>
                      {item.name}
                    </Radio.Button>
                  ))}
                </RadioGroup>
              ) : (
                <span>请在设置界面设置监控面板地址</span>
              )}
            </Col>
          </Row>
          {this.renderGrafana()}
        </div>
      </div>
    );
  }

render() {
    const { selectedRowKeys, needTotalList } = this.state;
    const { data = {}, rowKey, ...rest } = this.props;
    const { list = [], pagination } = data;

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <div className={styles.tableAlert}>
          <Alert
            message={
              <Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                {needTotalList.map(item => (
                  <span style={{ marginLeft: 8 }} key={item.dataIndex}>
                    {item.title}
                    总计&nbsp;
                    <span style={{ fontWeight: 600 }}>
                      {item.render ? item.render(item.total) : item.total}
                    </span>
                  </span>
                ))}
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                  清空
                </a>
              </Fragment>
            }
            type="info"
            showIcon
          />
        </div>
        <Table
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={list}
          pagination={paginationProps}
          onChange={this.handleTableChange}
          {...rest}
        />
      </div>
    );
  }

Login = ({logUser}) => {
    const [userName, setUserName] = useState("");
    const [password, setPassword] = useState("");
    const [errorMsg, setErrorMsg] = useState(null);

    const handleSignIn = async () => {
        const data = await logIn({
            nickname: userName, 
            password: password
        });

        if (data.succes) {
            const data = await whoAmI();
            if (data.auth) {
                logUser(data.user);
            }
        }
        else {
            setErrorMsg(data.message);
        }
        
    };

    const enterPressed = (event) => {
        if(event.key === "Enter"){
            handleSignIn();
        }
    }

    return (
        <div className="login" >
            <div className="title">
                <h3>Login</h3>
                <GiPadlock className="iconLogin" />
            </div>
            {
            (errorMsg)?
             <Alert
                className="errorMsg"
                description={errorMsg}
                type="error"
                showIcon
            />:null
            }
            <Input
                size="large"
                placeholder="Introduce un usuario"
                prefix={<UserOutlined />}
                onChange={e => setUserName(e.target.value.trim())}
            />
            <Input.Password
                size="large"
                placeholder="Introuce una contraseña"
                className="inputPassword"
                onChange={e => setPassword(e.target.value)}
                onKeyPress={enterPressed}
            />
            <Button onClick={handleSignIn} className="btnLogin">
                Entrar
            </Button>
        </div>
    );
}

render() {
    const { selectedRowKeys, needTotalList, pagination } = this.state;
    const realPagination = this.props.pagination ? this.props.pagination : pagination;
    const { data, selectedRows, rowKey, ...rest } = this.props;
    const rowSelection = selectedRows
      ? {
          selectedRowKeys,
          onChange: this.handleRowSelectChange,
          getCheckboxProps: record => ({
            disabled: record.disabled,
          }),
        }
      : null;

    return (
      <div className={styles.standardTable}>
        {rowSelection ? (
          <div className={styles.tableAlert}>
            <Alert
              message={
                <Fragment>
                  已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                  {needTotalList.map(item => (
                    <span style={{ marginLeft: 8 }} key={item.dataIndex}>
                      {item.title}
                      总计&nbsp;
                      <span style={{ fontWeight: 600 }}>
                        {item.render ? item.render(item.total) : item.total}
                      </span>
                    </span>
                  ))}
                  <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                    清空
                  </a>
                </Fragment>
              }
              type="info"
              showIcon
            />
          </div>
        ) : null}
        
        <Table
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={data}
          pagination={realPagination}
          onChange={this.handleTableChange}
          {...rest}
        />
      </div>
    );
  }

{ ErrorBoundary } = Alert

LoginForm = ({auth, Login}) => {
    let history = useHistory()
    const [values, setValues ] = React.useState({
        identifier: "",
        password: "",
        status: "",
        errMessage: "",
        loading:false
    })

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    const [form] = Form.useForm();
    const handleChange = (event)=>{
        setValues({
            ...values,
            [event.target.name]: event.target.value
        })
    }


    const onFinish =async values => {

        await Login(values).then(message => {
            if(message === "success") {
                setValues({ status:"success", errMessage: "",identifier:"", password:""});
                form.resetFields()
                auth.loggedIn = true;
                history.replace('/list')
            } else {
                setValues({ identifier:"", password:"", status:"error", errMessage: message});
            }
        })


    };
        return (
            <div>
                { values.status==="success" ? <Alert message="Login success" type="success" /> : null }
                <br/>
            <Form name="basic" form={form}  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}>
                <Form.Item
                    label="Email"
                    name="identifier"
                    rules={[{required: true, message: 'Please input your Email!'}]}

                >
                    <Input name="identifier" value={values.identifier} onChange={handleChange}/>
                </Form.Item >

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[{required: true, message: 'Please input your password!'}]}

                    validateStatus={values.status}
                    help={values.errMessage}
                    hasFeedback

                >
                    <Input.Password name="password" value={values.password} onChange={handleChange} />
                </Form.Item>


                <Form.Item >
                    <Button type="primary" htmlType="submit" loading={values.loading}>
                        Login
                    </Button>
                </Form.Item>
            </Form>
            </div>
        )


}

render() {
        return (
            <Alert message={this.props.message} type={this.props.type} closable onClick={this.props.close_func}/>
        )
    }

ConfigureEmbedding = (props) => {
  const { experimentId, onConfigChange } = props;
  const [plot, setPlot] = useState(null);
  const filterName = 'configureEmbedding';
  const cellSets = useSelector(getCellSets());
  const cellMeta = useSelector((state) => state.cellMeta);
  const [selectedPlot, setSelectedPlot] = useState('cellCluster');

  const dispatch = useDispatch();
  const debounceSave = useCallback(
    _.debounce((plotUuid) => dispatch(savePlotConfig(experimentId, plotUuid)), 2000), [],
  );

  const continuousEmbeddingPlots = ['mitochondrialContent', 'doubletScores'];

  useEffect(() => {
    continuousEmbeddingPlots.forEach((dataName) => {
      if (cellMeta[dataName].loading && !cellMeta[dataName].error) {
        dispatch(loadCellMeta(experimentId, dataName));
      }
    });
  }, []);

  const plots = {
    cellCluster: {
      title: 'Colored by CellSets',
      plotUuid: generateDataProcessingPlotUuid(null, filterName, 0),
      plotType: 'embeddingPreviewByCellSets',
      plot: (config, actions) => (
        <CategoricalEmbeddingPlot
          experimentId={experimentId}
          config={config}
          actions={actions}
          onUpdate={updatePlotWithChanges}
        />
      )
      ,
    },
    sample: {
      title: 'Colored by Samples',
      plotUuid: generateDataProcessingPlotUuid(null, filterName, 1),
      plotType: 'embeddingPreviewBySample',
      plot: (config, actions) => (
        <CategoricalEmbeddingPlot
          experimentId={experimentId}
          config={{
            ...config,
            legend: {
              ...config.legend,
              title: 'Sample Name',
            },
            selectedCellSet: 'sample',
          }}
          actions={actions}
          onUpdate={updatePlotWithChanges}
        />
      ),
    },
    mitochondrialContent: {
      title: 'Mitochondrial fraction reads',
      plotUuid: generateDataProcessingPlotUuid(null, filterName, 2),
      plotType: 'embeddingPreviewMitochondrialContent',
      plot: (config, actions) => (
        <ContinuousEmbeddingPlot
          experimentId={experimentId}
          config={config}
          actions={actions}
          plotUuid={generateDataProcessingPlotUuid(null, filterName, 2)}
          plotData={cellMeta.mitochondrialContent.data}
          loading={cellMeta.mitochondrialContent.loading}
          error={cellMeta.mitochondrialContent.error}
          reloadPlotData={() => dispatch(loadCellMeta(experimentId, 'mitochondrialContent'))}
          onUpdate={updatePlotWithChanges}
        />
      ),
    },
    doubletScores: {
      title: 'Cell doublet score',
      plotUuid: generateDataProcessingPlotUuid(null, filterName, 3),
      plotType: 'embeddingPreviewDoubletScore',
      plot: (config, actions) => (
        <ContinuousEmbeddingPlot
          experimentId={experimentId}
          config={config}
          actions={actions}
          plotUuid={generateDataProcessingPlotUuid(null, filterName, 2)}
          plotData={cellMeta.doubletScores.data}
          loading={cellMeta.doubletScores.loading}
          error={cellMeta.doubletScores.error}
          reloadPlotData={() => dispatch(loadCellMeta(experimentId, 'doubletScores'))}
          onUpdate={updatePlotWithChanges}
        />
      ),
    },
  };

  const plotSpecificStylingControl = {
    sample: [
      {
        panelTitle: 'Colour Inversion',
        controls: ['colourInversion'],
        footer: <Alert
          message='Changing plot colours is not available here. Use the Data Management tool in Data Exploration to customise cell set and metadata colours'
          type='info'
        />,
      },
      {
        panelTitle: 'Markers',
        controls: ['markers'],
      },
      {
        panelTitle: 'Legend',
        controls: [{
          name: 'legend',
          props: {
            option: {
              positions: 'top-bottom',
            },
          },
        }],
      },
      {
        panelTitle: 'Labels',
        controls: ['labels'],
      },
    ],
    cellCluster: [
      {
        panelTitle: 'Colours',
        controls: ['colourInversion'],
        footer: <Alert
          message='Changing plot colours is not available here. Use the Data Management tool in Data Exploration to customise cell set and metadata colours'
          type='info'
        />,
      },
      {
        panelTitle: 'Markers',
        controls: ['markers'],
      },
      {
        panelTitle: 'Legend',
        controls: [{
          name: 'legend',
          props: {
            option: {
              positions: 'top-bottom',
            },
          },
        }],
      },
      {
        panelTitle: 'Labels',
        controls: ['labels'],
      },
    ],
    mitochondrialContent: [
      {
        panelTitle: 'Colours',
        controls: ['colourScheme', 'colourInversion'],
      },
      {
        panelTitle: 'Markers',
        controls: ['markers'],
      },
      {
        panelTitle: 'Legend',
        controls: ['legend'],
      },
    ],
    doubletScores: [
      {
        panelTitle: 'Colours',
        controls: ['colourScheme', 'colourInversion'],
      },
      {
        panelTitle: 'Markers',
        controls: ['markers'],
      },
      {
        panelTitle: 'Legend',
        controls: ['legend'],
      },
    ],
  };

  const plotStylingControlsConfig = [
    {
      panelTitle: 'Main schema',
      controls: ['dimensions'],
      children: [
        {
          panelTitle: 'Title',
          controls: ['title'],
        },
        {
          panelTitle: 'Font',
          controls: ['font'],
        },
      ],
    },
    {
      panelTitle: 'Axes and margins',
      controls: ['axes'],
    },
    ...plotSpecificStylingControl[selectedPlot],
  ];

  const outstandingChanges = useSelector(
    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.outstandingChanges,
  );

  const plotConfigs = useSelector((state) => {
    const plotUuids = Object.values(plots).map((plotIt) => plotIt.plotUuid);

    const plotConfigsToReturn = plotUuids.reduce((acum, plotUuidIt) => {
      // eslint-disable-next-line no-param-reassign
      acum[plotUuidIt] = state.componentConfig[plotUuidIt]?.config;
      return acum;
    }, {});

    return plotConfigsToReturn;
  });

  const selectedConfig = plotConfigs[plots[selectedPlot].plotUuid];

  useEffect(() => {
    Object.values(plots).forEach((obj) => {
      if (!plotConfigs[obj.plotUuid]) {
        dispatch(loadPlotConfig(experimentId, obj.plotUuid, obj.plotType));
      }
    });
  }, []);

  useEffect(() => {
    // if we change a plot and the config is not saved yet
    if (outstandingChanges) {
      dispatch(savePlotConfig(experimentId, plots[selectedPlot].plotUuid));
    }
  }, [selectedPlot]);

  useEffect(() => {
    // Do not update anything if the cell sets are stil loading or if
    // the config does not exist yet.
    if (!selectedConfig) {
      return;
    }

    const plotActions = {
      export: true,
    };
    if (!cellSets.loading
      && !cellSets.error
      && !cellSets.updateCellSetsClustering
      && selectedConfig
    ) {
      setPlot(plots[selectedPlot].plot(selectedConfig, plotActions));
    }
  }, [selectedConfig, cellSets]);

  const updatePlotWithChanges = (obj) => {
    dispatch(updatePlotConfig(plots[selectedPlot].plotUuid, obj));
    debounceSave(plots[selectedPlot].plotUuid);
  };

  const renderPlot = () => {
    // Spinner for main window
    if (!selectedConfig) {
      return (
        <center>
          <Loader />
        </center>
      );
    }

    if (selectedPlot === 'sample' && !cellSets.loading && isUnisample(cellSets.hierarchy)
    ) {
      return (
        <center>
          <Empty
            style={{ width: selectedConfig.dimensions.width }}
            description='Your project has only one sample.'
          />
        </center>
      );
    }

    if (plot) {
      return plot;
    }
  };

  return (
    <>
      <PageHeader
        title={plots[selectedPlot].title}
        style={{ width: '100%', paddingRight: '0px' }}
      />
      <Row gutter={16}>
        <Col flex='auto'>
          {renderPlot()}
        </Col>

        <Col flex='1 0px'>
          <Space direction='vertical'>
            {Object.entries(plots).map(([key, plotObj]) => (
              <button
                type='button'
                key={key}
                onClick={() => setSelectedPlot(key)}
                style={{
                  margin: 0,
                  backgroundColor: 'transparent',
                  align: 'center',
                  padding: '8px',
                  border: '1px solid #000',
                  cursor: 'pointer',
                }}
              >
                <MiniPlot
                  experimentId={experimentId}
                  plotUuid={plotObj.plotUuid}
                  plotFn={plotObj.plot}
                  actions={false}
                />
              </button>

            ))}
          </Space>
        </Col>

        <Col flex='1 0px'>
          <CalculationConfig experimentId={experimentId} onConfigChange={onConfigChange} />
          <Collapse>
            <Panel header='Plot styling' key='styling'>
              <div style={{ height: 8 }} />
              <PlotStyling
                formConfig={plotStylingControlsConfig}
                config={selectedConfig}
                onUpdate={updatePlotWithChanges}
              />
            </Panel>
          </Collapse>
        </Col>
      </Row>
    </>
  );
}

export default function Uploader({ type }) {
  const { isAdmin, user, isDev } = useContext(Context);
  const [sign, setSign] = useState({});
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);

  const handleRefresh = useCallback(() => {
    setLoading(true);
    fetch(`/api/list?type=${type}`)
      .then(res => res.json())
      .then(json => {
        setLoading(false);
        setList(json);
      });
  }, [type]);

  const getSign = useCallback(() => {
    if (!user && !isDev) return;
    fetch(`/api/signature/${type}`)
    .then(res => {
        if (res.status === 200) {
          return res.json();
        }
        return Promise.reject(res);
      })
      .then(json => setSign(json))
      .catch(err => {
        message.error(err.statusText || err.message || 'Forbidden');
      });
  }, [type]);

  const handleRemove = useCallback((objectId) => {
    setLoading(true);
    fetch(`/api/remove?${qs.stringify({ objectId })}`)
      .then(res => res.json())
      .then(() => {
        setLoading(false);
        handleRefresh();
      });
  }, [handleRefresh]);

  const handleSave = useCallback(({
    name,
    size,
    key,
  }) => {
    setLoading(true);
    fetch(`/api/save?${qs.stringify({ name, size, key, type })}`)
      .then(res => res.json())
      .then(() => {
        setLoading(false);
        handleRefresh();
      });
  }, [type, handleRefresh]);

  const handlePaste = useCallback((e) => {
    if (uploading) return;

    if (!e.clipboardData
      && !e.clipboardData.items
      && e.clipboardData.items.length === 0) {
      message.error('There\'s no image pasted.');
      return;
    }

    if (!accepts.includes(e.clipboardData.items[0].type)) {
      message.error('The format\'s not supported.');
      return;
    }

    const file = e.clipboardData.items[0].getAsFile();
    const form = new FormData();
    const key = `${uuidV4()}${ext(file.name)}`;
    Object.entries({
      ...sign,
      key,
    }).forEach(([k, v]) => {
      form.append(k, v);
    });
    form.append('file', file);

    setUploading(true);
    fetch(sign.host, {
      method: 'POST',
      body: form,
    }).then(res => {
      if (res.status !== 200) {
        return Promise.reject(new Error(res.statusText));
      }
      const { name, size } = file;
      handleSave({ name, size, key });
    }).catch(err => {
      message.error(err.message || 'Upload failed.')
    }).finally(() => {
      setUploading(false);
    });
  }, [uploading, sign, handleSave]);

  useEffect(() => {
    getSign();
    handleRefresh();
  }, [getSign, handleRefresh]);

  useEffect(() => {
    setList([]);
  }, [type]);

  const uploadProps = useMemo(() => ({
    name: 'file',
    multiple: true,
    action: sign.host,
    data(file) {
      file.key = `${uuidV4()}${ext(file.name)}`;
      return {
        ...sign,
        key: file.key,
      }
    },
    accept: type === 'file' ? '*' : `${type}/*`,
    beforeUpload() {
      if (!sign.host) {
        message.error('Sign is invalid');
        return false;
      }
      return true;
    },
    onChange(info) {
      const { status, name, size, originFileObj } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        const index = info.fileList.map(d => d.uid).indexOf(info.file.uid);
        info.fileList.splice(index, 1);
        message.success(`${info.file.name} uploaded successfully.`);
        handleSave({ name, size, key: originFileObj.key });
      } else if (status === 'error') {
        message.error(`${info.file.name} upload failed.`);
      }
    },
  }), [type, sign, handleSave]);

  return (
    <div onPaste={handlePaste}>
      <input autoFocus style={{ width: 1, height: 1, position: 'absolute' }}></input>
      {!user && (
        <Alert
          style={{ marginBottom: 20 }}
          showIcon
          message="Uploading service is not available for non-login user, please login."
          type="warning"
        />
      )}
      <Spin spinning={uploading}>
        <Dragger {...uploadProps}>
          <p className="ant-upload-drag-icon">
            <UploadOutlined />
          </p>
          <p className="ant-upload-text">Drop files{type === 'image' ? '(or paste image)' : ''} here or click to upload.</p>
        </Dragger>
      </Spin>
      <div style={{ marginTop: 20 }}>
        {type === 'file' ? (
          <File
            list={list}
            user={user}
            isAdmin={isAdmin}
            loading={loading}
            handleRemove={handleRemove}
          />
        ) : (
          <Media
            type={type}
            list={list}
            user={user}
            isAdmin={isAdmin}
            loading={loading}
            handleRemove={handleRemove}
          />
        )}
      </div>
    </div>
  );
}

function App(props) {
  const mainnetProvider = scaffoldEthProvider && scaffoldEthProvider._network ? scaffoldEthProvider : mainnetInfura;

  const [injectedProvider, setInjectedProvider] = useState();
  /* ? This hook will get the price of ETH from ? Uniswap: */
  const price = useExchangePrice(targetNetwork, mainnetProvider);

  /* ? This hook will get the price of Gas from ⛽️ EtherGasStation */
  const gasPrice = useGasPrice(targetNetwork, "fast");
  // Use your injected provider from ? Metamask or if you don't have it then instantly generate a ? burner wallet.
  const userProvider = useUserProvider(injectedProvider, localProvider);
  const address = useUserAddress(userProvider);

  // You can warn the user if you would like them to be on a specific network
  const localChainId = localProvider && localProvider._network && localProvider._network.chainId;
  const selectedChainId = userProvider && userProvider._network && userProvider._network.chainId;

  // For more hooks, check out ?eth-hooks at: https://www.npmjs.com/package/eth-hooks

  // The transactor wraps transactions and provides notificiations
  const tx = Transactor(userProvider, gasPrice);

  // Faucet Tx can be used to send funds from the faucet
  const faucetTx = Transactor(localProvider, gasPrice);

  // ? scaffold-eth is full of handy hooks like this one to get your balance:
  const yourLocalBalance = useBalance(localProvider, address);

  // Just plug in different ? providers to get your balance on different chains:
  const yourMainnetBalance = useBalance(mainnetProvider, address);

  // Load in your local ? contract and read a value from it:
  const readContracts = useContractLoader(localProvider);

  // If you want to make ? write transactions to your contracts, use the userProvider:
  const writeContracts = useContractLoader(userProvider);


  /*
  const addressFromENS = useResolveName(mainnetProvider, "austingriffith.eth");
  console.log("? Resolved austingriffith.eth as:",addressFromENS)
  */

  //
  // ? DEBUG ??‍?
  //
  useEffect(() => {
    if (
      DEBUG &&
      mainnetProvider &&
      address &&
      selectedChainId &&
      yourLocalBalance &&
      yourMainnetBalance &&
      readContracts &&
      writeContracts
    ) {
      console.log("_____________________________________ ? scaffold-eth _____________________________________");
      console.log("? mainnetProvider", mainnetProvider);
      console.log("? localChainId", localChainId);
      console.log("?‍? selected address:", address);
      console.log("??‍♂️ selectedChainId:", selectedChainId);
      console.log("? yourLocalBalance", yourLocalBalance ? formatEther(yourLocalBalance) : "...");
      console.log("? yourMainnetBalance", yourMainnetBalance ? formatEther(yourMainnetBalance) : "...");
      console.log("? readContracts", readContracts);
      console.log("? writeContracts", writeContracts);
    }
  }, [
    mainnetProvider,
    address,
    selectedChainId,
    yourLocalBalance,
    yourMainnetBalance,
    readContracts,
    writeContracts,
  ]);

  let networkDisplay = "";
  if (localChainId && selectedChainId && localChainId !== selectedChainId) {
    const networkSelected = NETWORK(selectedChainId);
    const networkLocal = NETWORK(localChainId);
    if (selectedChainId === 1337 && localChainId === 31337) {
      networkDisplay = (
        <div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
          <Alert
            message="⚠️ Wrong Network ID"
            description={
              <div>
                You have <b>chain id 1337</b> for localhost and you need to change it to <b>31337</b> to work with
                HardHat.
                <div>(MetaMask -&gt; Settings -&gt; Networks -&gt; Chain ID -&gt; 31337)</div>
              </div>
            }
            type="error"
            closable={false}
          />
        </div>
      );
    } else {
      networkDisplay = (
        <div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
          <Alert
            message="⚠️ Wrong Network"
            description={
              <div>
                You have <b>{networkSelected && networkSelected.name}</b> selected and you need to be on{" "}
                <b>{networkLocal && networkLocal.name}</b>.
              </div>
            }
            type="error"
            closable={false}
          />
        </div>
      );
    }
  } else {
    networkDisplay = (
      <div style={{ zIndex: -1, position: "absolute", right: 154, top: 28, padding: 16, color: targetNetwork.color }}>
        {targetNetwork.name}
      </div>
    );
  }

  const loadWeb3Modal = useCallback(async () => {
    const provider = await web3Modal.connect();
    setInjectedProvider(new Web3Provider(provider));
  }, [setInjectedProvider]);

  useEffect(() => {
    if (web3Modal.cachedProvider) {
      loadWeb3Modal();
    }
  }, [loadWeb3Modal]);

  const [route, setRoute] = useState();
  useEffect(() => {
    setRoute(window.location.pathname);
  }, [setRoute]);

  let faucetHint = "";
  const faucetAvailable = localProvider && localProvider.connection && targetNetwork.name === "localhost";

  if (faucetAvailable) {
    faucetHint = (
      <div style={{ padding: 16 }}>
        <Button
          type="primary"
          onClick={() => {
            faucetTx({
              to: address,
              value: parseEther("0.01"),
            });
          }}
        >
          ? Grab funds from the faucet ⛽️
        </Button>
      </div>
    );
  }

  return (
    <div className="App">
      <Header />
      {networkDisplay}
      <BrowserRouter>
        <Menu style={{ textAlign: "center" }} selectedKeys={[route]} mode="horizontal">
        <Menu.Item key="/">
            <Link
              onClick={() => {
                setRoute("/");
              }}
              to="/"
            >
              Mint an NFT
            </Link>
          </Menu.Item>
          <Menu.Item key="/view">
            <Link
              onClick={() => { setRoute("/view"); }}
              to="/view">View an NFT</Link>
          </Menu.Item>
          <Menu.Item key="/contract">
            <Link
              onClick={() => {
                setRoute("/contract");
              }}
              to="/contract"
            >
              NFTMinter Contract
            </Link>
          </Menu.Item>
        </Menu>

        <Switch>
          <Route exact path="/">
          <Minter
              signer={userProvider.getSigner()}
              provider={localProvider}
              address={address}
              blockExplorer={blockExplorer}
            />
          </Route>

          <Route path="/view">
              <NFTViewer
                provider={localProvider}
                address={address}
                blockExplorer={blockExplorer}
              />
          </Route>

          <Route exact path="/contract">
            <Contract
              name="NFTMinter"
              signer={userProvider.getSigner()}
              provider={localProvider}
              address={address}
              blockExplorer={blockExplorer}
            />
          </Route>
        </Switch>
      </BrowserRouter>

      <ThemeSwitch />

      {/* ?‍? Your account is in the top right with a wallet at connect options */}
      <div style={{ position: "fixed", textAlign: "right", right: 0, top: 0, padding: 10 }}>
        <Account
          address={address}
          localProvider={localProvider}
          userProvider={userProvider}
          mainnetProvider={mainnetProvider}
          price={price}
          web3Modal={web3Modal}
          loadWeb3Modal={loadWeb3Modal}
          logoutOfWeb3Modal={logoutOfWeb3Modal}
          blockExplorer={blockExplorer}
        />
        {faucetHint}
      </div>


    </div>
  );
}

render() {
    const {
      loading,
      statusListText,
      articleTypeText,
      statusList,
      source_list,
      title_val,
      status_val,
      type_val,
      source_val,
      edit_status_val
    } = this.state
    const { stateArticle = {} } = this.props
    const { getFieldDecorator } = this.props.form

    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="admin-article card">
          <div className="card-body">
            <div className="xsb-operation-menu">
              <Form layout="inline">
                <Form.Item label="文章标题">
                  <Input
                    value={title_val}
                    onChange={e => {
                      this.changeVal(e.target.value, 'title_val')
                    }}
                  />
                </Form.Item>
                <Form.Item label="状态">
                  <Select
                    className="select-view"
                    value={status_val}
                    onChange={value => {
                      this.changeVal(value, 'status_val')
                    }}
                  >
                    <Option value="">全部</Option>
                    {Object.keys(this.state.statusListText).map(key => (
                      <Option key={key}>
                        {this.state.statusListText[key]}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item label="类型">
                  <Select
                    className="select-view"
                    value={type_val}
                    onChange={value => {
                      this.changeVal(value, 'type_val')
                    }}
                  >
                    <Option value="">全部</Option>
                    {Object.keys(this.state.articleTypeText).map(key => (
                      <Option key={key}>
                        {this.state.articleTypeText[key]}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item label="来源：">
                  <Select
                    className="select-view"
                    value={source_val}
                    onChange={value => {
                      this.changeVal(value, 'source_val')
                    }}
                  >
                    <Option value="">全部</Option>
                    {source_list.map((item, key) =>
                      item ? (
                        <Option value={key} key={key}>
                          {item}
                        </Option>
                      ) : (
                        ''
                      )
                    )}
                  </Select>
                </Form.Item>
                <Form.Item>
                  <button
                    className="btn btn-danger"
                    onClick={this.fetchArticleList}
                  >
                    搜索
                  </button>
                  <button
                    className="btn btn-primary"
                    onClick={this.resetBarFrom}
                  >
                    重置
                  </button>
                </Form.Item>
              </Form>
            </div>

            <Modal
              footer={null}
              onCancel={() => {
                this.setState({
                  modal_visible_edit: false
                })
              }}
              title="修改文章"
              visible={this.state.modal_visible_edit}
            >
              <Form className="from-view" onSubmit={this.handleSubmit}>
                <Form.Item {...itemLayout} hasFeedback label="状态">
                  {getFieldDecorator('status', {
                    rules: [{ required: true, message: '请选择状态！' }]
                  })(
                    <Select
                      placeholder="状态"
                      onChange={value => {
                        this.setState({
                          edit_status_val: value
                        })
                      }}
                    >
                      {Object.keys(this.state.statusListText).map(key => (
                        <Option key={key}>
                          {this.state.statusListText[key]}
                        </Option>
                      ))}
                    </Select>
                  )}
                </Form.Item>

                {Number(edit_status_val) === statusList.reviewFail ? (
                  <Form.Item {...itemLayout} label="拒绝的原因">
                    {getFieldDecorator('rejection_reason', {
                      rules: [
                        {
                          required: true,
                          message: '请输入拒绝的原因！',
                          whitespace: true
                        }
                      ]
                    })(<Input placeholder="文章被拒绝的原因" />)}
                  </Form.Item>
                ) : (
                  ''
                )}

                <Form.Item {...itemLayout} hasFeedback label="类型">
                  {getFieldDecorator('type', {
                    rules: [{ required: true, message: '请选择类型！' }]
                  })(
                    <Select placeholder="类型">
                      {Object.keys(this.state.articleTypeText).map(key => (
                        <Option key={key}>
                          {this.state.articleTypeText[key]}
                        </Option>
                      ))}
                    </Select>
                  )}
                </Form.Item>

                <Form.Item {...itemLayout} label="所属标签">
                  {getFieldDecorator('tag_ids', {
                    rules: [
                      {
                        required: true,
                        message: '请选择所属标签!',
                        type: 'array'
                      }
                    ]
                  })(
                    <Select mode="multiple" placeholder="请选择所属标签">
                      {this.state.article_tag_all.map(item => (
                        <Option key={item.tag_id}>{item.name}</Option>
                      ))}
                    </Select>
                  )}
                </Form.Item>

                <Form.Item {...itemLayout} hasFeedback label="来源">
                  {getFieldDecorator('source', {
                    rules: [{ required: true, message: '请选择来源！' }]
                  })(
                    <Select placeholder="来源">
                      {source_list.map((item, key) =>
                        item ? <Option key={key}>{item}</Option> : ''
                      )}
                    </Select>
                  )}
                </Form.Item>

                <Form.Item {...tailItemLayout}>
                  <button className="btn btn btn-danger register-btn">
                    更新
                  </button>
                </Form.Item>
              </Form>
            </Modal>

            <Table
              columns={this.state.columns}
              dataSource={stateArticle.list}
              loading={loading}
              onChange={this.TablePageChange.bind(this)}
              pagination={this.state.pagination}
              rowKey="aid"
            />
          </div>

          <Alert
            style={{ marginTop: '20px' }}
            message="备注信息"
            description="文章发表完成后状态是审核中，是仅对自己可见的，审核不通过也是仅自己可见，并且会标注审核不通过，更改为审核通过的文章对所有人开放，
          这种方式是人工审核的，暂时采用这种方案，后续会更改"
            type="info"
            showIcon
          />
        </div>
      </div>
    )
  }

export default function BoardView({
  dataSource,
  onPageCreate,
  onPageDelete,
  onPageSelect,
  onPageMetaChange,
  onSequenceChange,
  onGroupByInit,
  filters,
  showProperties,
  sequence,
  properties,
  groupBy: { propertyId },
}) {
  const createPage = (groupId) => {
    onPageCreate({
      title: "Untitled",
      meta: {
        [propertyId]: groupId,
      },
    });
  };

  const getProperties = (pageMeta) =>
    properties
      .filter((property) => showProperties.indexOf(property.id) > -1)
      .filter((property) => pageMeta[property.id])
      .map((property) => ({
        Display: getDisplay(property.type),
        property,
        value: pageMeta[property.id],
      }));

  const pages = useMemo(
    () => applySequence(filterPages(dataSource, filters, properties), sequence),
    [dataSource, filters, properties, sequence]
  );

  const propertyToGroupBy = properties.find((property) => property.id === propertyId);

  const pageGroups = useMemo(() => groupPages(propertyToGroupBy, pages), [
    propertyToGroupBy,
    pages,
  ]);

  if (!propertyToGroupBy) {
    return (
      <div>
        <Alert message="Please select or create a property to group by" type="info" showIcon />
        <CreatePropertyBtn icon={<PlusOutlined />} type="link" onClick={onGroupByInit}>
          Create property
        </CreatePropertyBtn>
      </div>
    );
  }

  const handleBoardChange = ({ source, destination }) => {
    const [sourceGroupId, sourceIndex] = [source.droppableId, source.index];
    const [destinationGroupId, destinationIndex] = [destination.droppableId, destination.index];

    const targetPage = pageGroups[sourceGroupId].items[sourceIndex];
    pageGroups[sourceGroupId].items.splice(sourceIndex, 1);
    pageGroups[destinationGroupId].items.splice(destinationIndex, 0, targetPage);

    const newSequence = Object.values(pageGroups).reduce((seq, group) => {
      seq.push(...group.items.map((page) => page.id));
      return seq;
    }, []);

    onSequenceChange(newSequence);
    onPageMetaChange(targetPage.id, propertyToGroupBy.id, destinationGroupId);
  };

  return (
    <div>
      <SortableBoard groups={pageGroups} onChange={handleBoardChange} onItemCreate={createPage}>
        {(page, restProps) => (
          <BoardCard
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...restProps}
            onClick={() => onPageSelect(page.id)}
            title={page.title}
            properties={getProperties(page.meta)}
            onDelete={() => onPageDelete(page.id)}
          />
        )}
      </SortableBoard>
    </div>
  );
}

Step2 = props => {
  const { form, data, dispatch, submitting } = props;

  if (!data) {
    return null;
  }

  const { getFieldDecorator, validateFields, getFieldsValue } = form;

  const onPrev = () => {
    if (dispatch) {
      const values = getFieldsValue();
      dispatch({
        type: 'formAndstepForm/saveStepFormData',
        payload: { ...data, ...values },
      });
      dispatch({
        type: 'formAndstepForm/saveCurrentStep',
        payload: 'info',
      });
    }
  };

  const onValidateForm = e => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        if (dispatch) {
          dispatch({
            type: 'formAndstepForm/submitStepForm',
            payload: { ...data, ...values },
          });
        }
      }
    });
  };

  const { payAccount, receiverAccount, receiverName, amount } = data;
  return (
    <Form layout="horizontal" className={styles.stepForm}>
      <Alert
        closable
        showIcon
        message="确认转账后，资金将直接打入对方账户，无法退回。"
        style={{
          marginBottom: 24,
        }}
      />
      <Descriptions column={1}>
        <Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
        <Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
        <Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
        <Descriptions.Item label="转账金额">
          <Statistic value={amount} suffix="元" />
        </Descriptions.Item>
      </Descriptions>
      <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 { stateArticleColumn } = this.props
    const { loading, is_create } = this.state
    const { getFieldDecorator } = this.props.form

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

    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"
            type="primary"
            onClick={() => this.showModal(0)}
          >
            创建专栏
          </button>
        </div>

        <div className="card article-column">
          <div className="card-body">
            <Modal
              footer={null}
              onCancel={() => {
                this.setState({
                  modal_visible_edit: false
                })
              }}
              title="填写专栏"
              visible={this.state.modal_visible_edit}
            >
              <Form className="from-view" onSubmit={this.handleSubmit}>
                <Form.Item {...itemLayout} label="专栏名">
                  {getFieldDecorator('name', {
                    rules: [
                      {
                        required: true,
                        message: '请输入专栏名！',
                        whitespace: true
                      }
                    ]
                  })(<Input placeholder="专栏名" />)}
                </Form.Item>

                <Form.Item {...itemLayout} label="专栏名单词">
                  {getFieldDecorator('en_name', {
                    rules: [
                      {
                        required: true,
                        message: '请输入专栏名单词！',
                        whitespace: true
                      }
                    ]
                  })(<Input placeholder="专栏名单词" />)}
                </Form.Item>

                <Form.Item {...itemLayout} label="专栏名图标">
                  {getFieldDecorator('icon', {
                    rules: [
                      {
                        required: true,
                        message: '请输入专栏名图标！',
                        whitespace: true
                      }
                    ]
                  })(<Input placeholder="专栏名图标" />)}
                </Form.Item>

                <Form.Item {...itemLayout} label="专栏下属专题">
                  {getFieldDecorator('tag_ids', {
                    rules: [
                      {
                        required: true,
                        message: '请选择文章专栏下属专题!',
                        type: 'array'
                      }
                    ]
                  })(
                    <Select
                      mode="multiple"
                      placeholder="请选择文章专栏下属专题"
                    >
                      {this.state.article_tag_all.map(item => (
                        <Option key={item.tag_id}>{item.name}</Option>
                      ))}
                    </Select>
                  )}
                </Form.Item>

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

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

                <Form.Item {...itemLayout} label="是否首页显示">
                  {getFieldDecorator('is_home', { valuePropName: 'checked' })(
                    <Switch />
                  )}
                </Form.Item>

                <Form.Item {...itemLayout} label="是否有效">
                  {getFieldDecorator('enable', { valuePropName: 'checked' })(
                    <Switch />
                  )}
                </Form.Item>

                <Form.Item {...tailItemLayout}>
                  <Button
                    className="register-btn"
                    htmlType="submit"
                    type="primary"
                  >
                    {is_create ? '创建专栏' : '更新'}
                  </Button>
                </Form.Item>
              </Form>
            </Modal>

            <Table
              columns={this.state.columns}
              dataSource={stateArticleColumn.list}
              loading={loading}
              onChange={this.TablePageChange.bind(this)}
              pagination={this.state.pagination}
              rowKey="column_id"
            />

            <Alert
              style={{ marginTop: '20px' }}
              message="备注信息"
              description="文章专栏与文章标题之间的关系是，文章专栏下可以有多个文章标签，一个文章标签可以从属于多个文章专栏，
    创建的文章专栏如果不选择下属标题，默认是关闭状态，只有下属标题大于0，才会开放"
              type="info"
              showIcon
            />
          </div>
        </div>
      </div>
    )
  }