antd#Pagination JavaScript Examples

render() {
    const {
      currentPage,
      pageSize,
      totalCount,
      onShowSizeChange,
      onChange,
      columns,
    } = this.props
    const hasMultiHead = columns.filter(one => !!one.children).length > 0
    return (
      <div className={`table-content ${hasMultiHead ? 'clear-overlap-border' : ''}`}>
        <Table
          pagination={false}
          bordered
          rowKey="id"
          // rowClassName={this.props.rowClassName}
          {...this.props}
        />
        { currentPage ?
          <Pagination
            total={totalCount || 0}
            showSizeChanger // 是否可以改变pageSize
            showQuickJumper={false}// 是否可以快速跳转某一页
            onShowSizeChange={onShowSizeChange}
            onChange={onChange}
            showTotal={_totalCount => `共 ${_totalCount} 条`}
            current={currentPage || 1}
            pageSize={pageSize || 10}
            {...this.props}
          /> : null
        }
      </div>
    )
  }

Pagation = memo(function Pagation({ pageSizeOptions, defaultPageSize, total = 0, onChanges, ...props }) {
  const Change = (page, pageSize) => {
    onChanges && onChanges(page, pageSize);
    backTopAnimate(document.querySelector('#content'));
  }

  return (
    <>
      {total ? <Pagination {...props} showSizeChanger showQuickJumper total={total} showTotal={total => `共 ${total} 页`}
        onChange={Change} onShowSizeChange={Change} pageSizeOptions={pageSizeOptions}
        defaultPageSize={defaultPageSize} style={{ marginTop: '20px' }} defaultCurrent={1} /> : null}
    </>
  )
})

EcommerceProductCatalog = () => {
  return (
    <div>
      <Helmet title="Ecommerce: Product Catalog" />
      <div className="cui__utils__heading">
        <strong>Ecommerce: Product Catalog</strong>
      </div>
      <div className="mb-4">
        <Pagination defaultCurrent={6} total={500} showSizeChanger />
      </div>
      <div className="row">
        {productsData.map(product => {
          const { isNew, isFavorite, image, name, price, oldPrice } = product
          return (
            <div className="col-xl-4 col-lg-6" key={Math.random()}>
              <General16
                isNew={isNew}
                isFavorite={isFavorite}
                image={image}
                name={name}
                price={price}
                oldPrice={oldPrice}
              />
            </div>
          )
        })}
      </div>
      <Pagination defaultCurrent={6} total={500} showSizeChanger />
    </div>
  )
}

storiesOf('antd/pagination', module).add('changer', () => 
  <>
    <Pagination
      showSizeChanger
      onShowSizeChange={onShowSizeChange}
      defaultCurrent={3}
      total={500}
    />
    <br />
    <Pagination
      showSizeChanger
      onShowSizeChange={onShowSizeChange}
      defaultCurrent={3}
      total={500}
      disabled
    />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Change <code>pageSize</code>.</p></>) } });

ListPagination = ({ pageSize, total, onChange }) => {
  return (
    <div className="list-pagination-component">
      <Pagination
        defaultCurrent={1}
        pageSize={pageSize}
        total={total}
        onChange={page => {
          window.scrollTo(0, 0)
          onChange(page)
        }}
        hideOnSinglePage
      />
    </div>
  )
}

storiesOf('antd/pagination', module).add('mini', () => 
  <>
    <Pagination size="small" total={50} />
    <Pagination size="small" total={50} showSizeChanger showQuickJumper />
    <Pagination size="small" total={50} showTotal={showTotal} />
    <Pagination
      size="small"
      total={50}
      disabled
      showTotal={showTotal}
      showSizeChanger
      showQuickJumper
    />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Mini size pagination.</p></>) } });

render() {
        const {
            size,
            showSizeChanger,
            showQuickJumper,
            showMessage,
            pageSize,
            pageNum,
            total,
            onPageNumChange,
            onPageSizeChange,
        } = this.props;

        const props = {};
        if (showSizeChanger) {
            props.showSizeChanger = true;
        }
        if (showQuickJumper) {
            props.showQuickJumper = true;
        }

        const totalPage = Math.ceil(total / pageSize);
        let style = this.props.style;
        if (total <= 0) {
            style = {/* display: 'none', */ ...style};
        }
        return (
            <div className="pagination-wrap" style={style}>
                <Pagination
                    {...props}
                    size={size}
                    pageSizeOptions={['10', '15', '20', '30', '50', '100']}
                    onShowSizeChange={(num, size) => onPageSizeChange(size)}
                    onChange={(num) => onPageNumChange(num)}
                    defaultCurrent={1}
                    pageSize={pageSize}
                    current={pageNum}
                    total={total}
                />
                {showMessage ? (
                    <div className="total-count">
                        共{totalPage}页 {total}条数据
                    </div>
                ) : null}
            </div>
        );
    }

render() {
    const info = () => {
      Modal.info({
        title: 'some info',
        content: 'some info',
      });
    };
    const confirm = () => {
      Modal.confirm({
        title: 'some info',
        content: 'some info',
      });
    };
    return (
      <div className="locale-components">
        <div className="example">
          <Pagination defaultCurrent={1} total={50} showSizeChanger />
        </div>
        <div className="example">
          <Select showSearch style={{ width: 200 }}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
          </Select>
          <DatePicker />
          <TimePicker />
          <RangePicker style={{ width: 200 }} />
        </div>
        <div className="example">
          <Button type="primary" onClick={this.showModal}>
            Show Modal
          </Button>
          <Button onClick={info}>Show info</Button>
          <Button onClick={confirm}>Show confirm</Button>
          <Popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </Popconfirm>
        </div>
        <div className="example">
          <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
        </div>
        <div className="site-config-provider-calendar-wrapper">
          <Calendar fullscreen={false} value={moment()} />
        </div>
        <div className="example">
          <Table dataSource={[]} columns={columns} />
        </div>
        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
          <p>Locale Modal</p>
        </Modal>
      </div>
    );
  }

render() {

        const table_columns = [
            {
                title: "Date",
                dataIndex: "date",
                key: "date",
                render: (data, record) => {
                    return (
                            <div>
                                <Link to={`/health/daily/detail/${record["date"]}`}>
                                    <p>{record["date"]}</p>
                                </Link>
                            </div>
                    )
                }
            },{
                title: "Total Builds",
                dataIndex: "total",
                key: "total"
            },{
                title: "Successful Builds",
                dataIndex: "success",
                key: "success"
            },{
                title: "Failed Builds",
                dataIndex: "failure",
                key: "failure"
            },{
                title: "Build Success Rate",
                dataIndex: "success_rate",
                key: "success_rate"
            },{
                title: "Build History",
                render: (data, record) => {
                    return(
                        <div>
                            <Link to={`/health/daily/build/${record["date"]}/?type=all`}>
                                <p>{record["date"]}</p>
                            </Link>
                        </div>
                    )
                }
            }
        ]

        return(
                <div
                    style={{padding: "30px"}}>
                    <Table dataSource={this.state.table_data}
                           columns={table_columns}
                           pagination={<Pagination defaultCurrent={0}/>}
                    />
                </div>
        )
    }

render() {
        const { visible, close, onOk, multiSelect, goodsList, goodsListLoading, dispatch } = this.props;
        if (goodsList) {
            const { total_number, list } = goodsList;
            const { page, rows, checkedData } = this.state;
            return (
                <Modal
                    title="添加商品"
                    cancelText='取消'
                    okText='确定'
                    visible={visible}
                    style={{ top: 20 }}
                    width={756}
                    onCancel={() => {
                        close();
                    }}
                    onOk={() => {
                        onOk(checkedData);
                        this.setState({ checkedData: [] });
                    }}
                    footer={multiSelect ? <div>
                        <Button type="primary" onClick={() => {
                            onOk(checkedData);
                            this.setState({ checkedData: [] });
                        }}>确认</Button>
                    </div> : null}
                >
                    <Spin spinning={goodsListLoading}>
                        <View className={styles.goodsList}>
                            <View className={styles.goodsListTop}>
                                <Search
                                    placeholder="请输入商品名称"
                                    onSearch={(value) => {
                                        dispatch({
                                            type: "goods/list",
                                            payload: {
                                                page,
                                                rows,
                                                title: value
                                            }
                                        })
                                    }}
                                    style={{ width: 200 }}
                                />
                            </View>
                            <ScrollView className={styles.scrollView}>
                                {
                                    list.map((item, i) => {
                                        const index = checkedData.findIndex((e) => e.id === item.id);
                                        const checked = index !== -1;
                                        const onPress = () => {
                                            let _checkedData = checkedData;
                                            if (checked) {
                                                _checkedData.splice(index, 1);
                                                this.setState({
                                                    checkedData: _checkedData
                                                });
                                            } else {
                                                _checkedData = multiSelect ? [..._checkedData, item] : [item];
                                                this.setState({
                                                    checkedData: _checkedData
                                                }, () => {
                                                    !multiSelect ? onOk(this.state) : null;
                                                });
                                            }
                                        };
                                        return (
                                            <View className={styles.view1} key={i}>
                                                <Checkbox
                                                    checked={checked}
                                                    onChange={(e) => {
                                                        onPress();
                                                    }}
                                                />
                                                <View
                                                    className={styles.goodsListItem}
                                                    onClick={() => {
                                                        onPress();
                                                    }}
                                                >
                                                    <View className={styles.itemLeft}>
                                                        <Image
                                                            type='goods'
                                                            src={item.img}
                                                        />
                                                        <View className={styles.itemText}>
                                                            <p>{item.title}</p>
                                                            <span>￥{item.price}</span>
                                                        </View>
                                                    </View>
                                                </View>
                                            </View>
                                        );
                                    })
                                }
                            </ScrollView>
                            <View className={styles.paginationView}>
                                <Pagination
                                    size="small"
                                    showSizeChanger={false}
                                    showQuickJumper={false}
                                    pageSize={rows}
                                    total={total_number}
                                    current={page}
                                    onChange={(current, pageSize) => {
                                        this.setState({
                                            page: current,
                                            rows: pageSize
                                        }, () => {
                                            this.initList();
                                        });
                                    }}
                                    onShowSizeChange={(current, pageSize) => {
                                        this.setState({
                                            page: current,
                                            rows: pageSize
                                        }, () => {
                                            this.initList();
                                        });
                                    }}
                                />
                            </View>
                        </View>
                    </Spin>
                </Modal>
            );
        } else {
            return null;
        }
    }

SmallPagination = styled(Pagination)`
  padding: 2px 8px !important;
  text-align: right;
`

StyledPagination = styled(Pagination)`
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;

  .ant-pagination-prev,
  .ant-pagination-next {
    display: flex;
    align-items: center;

    .ant-pagination-item-link {
      ${baseStyles}

      color: ${({ theme }) => theme.primary};
      background: transparent;
    }
  }

  .ant-pagination-disabled {
    display: none;
  }

  .ant-pagination-item {
    ${baseStyles}

    font-weight: 600;

    &-active {
      border: 2px solid ${({ theme }) => rgba(theme.primary, 0.7)};
    }

    a {
      color: ${({ theme }) => theme.primary};
      font-weight: 600;
      font-size: 0.875rem;
    }
  }

  .ant-pagination-jump-next,
  .ant-pagination-jump-prev {
    ${baseStyles}

    .ant-pagination-item-link-icon {
      color: ${({ theme }) => theme.primary};
      font-size: 0.75rem;
    }

    .ant-pagination-item-ellipsis {
      position: absolute;
      top: -4px;
      right: 0;
      left: -4px;
      color: ${({ theme }) => theme.primary};
      font-size: 0.75rem;
    }
  }

  .anticon {
    display: flex;
    align-items: center;
  }
`

ExtraAppsWordpressPosts = () => {
  return (
    <div>
      <Helmet title="Wordpress Posts" />
      <div className="row">
        <div className="col-xl-9 col-lg-12">
          <div className="card">
            <div className="card-body">
              <div className="mb-2">
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="text-dark font-size-24 font-weight-bold"
                >
                  [Feature Request] How to enable custom font that comes from svg #2460
                </a>
              </div>
              <div className="mb-3">
                <a className="font-weight-bold" href="#" onClick={e => e.preventDefault()}>
                  zxs2162
                </a>{' '}
                wrote this post 12 days ago · 0 comments
              </div>
              <div className="mb-4">
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  Umi
                </a>
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  React-framework
                </a>
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  Umijs
                </a>
              </div>
              <div>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
                  perferendis consectetur corporis esse labore minima molestias, exercitationem
                  consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
                  laborum est perferendis consectetur corporis esse labore minima molestias,
                  exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit. Nihil laborum est perferendis consectetur corporis esse labore minima
                  molestias, exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur
                  adipisicing elit. Nihil laborum est perferendis consectetur corporis esse labore
                  minima molestias, exercitationem consequuntur!
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
                  perferendis consectetur corporis esse labore minima molestias, exercitationem
                  consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
                  laborum est perferendis consectetur corporis esse labore minima molestias,
                  exercitationem consequuntur!
                </p>
              </div>
            </div>
          </div>
          <div className="card">
            <div className="card-body">
              <div className="mb-2">
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="text-dark font-size-24 font-weight-bold"
                >
                  London&apos;s mayor compared President Trump to an 11-year-old child
                </a>
              </div>
              <div className="mb-3">
                <a className="font-weight-bold" href="#" onClick={e => e.preventDefault()}>
                  hepu
                </a>{' '}
                wrote this post 12 days ago · 0 comments
              </div>
              <div className="mb-4">
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  Umi
                </a>
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  React-framework
                </a>
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  Umijs
                </a>
              </div>
              <div>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
                  perferendis consectetur corporis esse labore minima molestias, exercitationem
                  consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
                  laborum est perferendis consectetur corporis esse labore minima molestias,
                  exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit. Nihil laborum est perferendis consectetur corporis esse labore minima
                  molestias, exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur
                  adipisicing elit. Nihil laborum est perferendis consectetur corporis esse labore
                  minima molestias, exercitationem consequuntur!
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
                  perferendis consectetur corporis esse labore minima molestias, exercitationem
                  consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
                  laborum est perferendis consectetur corporis esse labore minima molestias,
                  exercitationem consequuntur!
                </p>
              </div>
            </div>
          </div>
          <div className="card">
            <div className="card-body">
              <div className="mb-2">
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="text-dark font-size-24 font-weight-bold"
                >
                  What D-Day taught my grandpa
                </a>
              </div>
              <div className="mb-3">
                <a className="font-weight-bold" href="#" onClick={e => e.preventDefault()}>
                  Dankin
                </a>{' '}
                wrote this post 12 days ago · 0 comments
              </div>
              <div className="mb-4">
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  Umi
                </a>
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  React-framework
                </a>
                <a
                  href="#"
                  onClick={e => e.preventDefault()}
                  className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
                >
                  Umijs
                </a>
              </div>
              <div>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
                  perferendis consectetur corporis esse labore minima molestias, exercitationem
                  consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
                  laborum est perferendis consectetur corporis esse labore minima molestias,
                  exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit. Nihil laborum est perferendis consectetur corporis esse labore minima
                  molestias, exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur
                  adipisicing elit. Nihil laborum est perferendis consectetur corporis esse labore
                  minima molestias, exercitationem consequuntur!
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
                  perferendis consectetur corporis esse labore minima molestias, exercitationem
                  consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
                  laborum est perferendis consectetur corporis esse labore minima molestias,
                  exercitationem consequuntur!
                </p>
              </div>
            </div>
          </div>
          <Pagination defaultCurrent={1} total={50} />
        </div>
        <div className="col-xl-3 col-lg-12">
          <div className="pb-4 mb-3 border-bottom">
            <label className="font-weight-bold d-block" htmlFor="search-input">
              <span className="mb-2 d-inline-block">Search Post</span>
              <input
                className="form-control width-100p"
                type="text"
                placeholder="Search post..."
                id="search-input"
              />
            </label>
          </div>
          <div className="pb-4 mb-3 border-bottom">
            <label className="font-weight-bold d-block" htmlFor="subscribe-input">
              <span className="mb-2 d-inline-block">Subscribe</span>
              <input
                className="form-control width-100p"
                type="text"
                id="subscribe-input"
                placeholder="Enter your email..."
              />
            </label>
          </div>
          <div className="pb-4 mb-3 border-bottom">
            <div className="font-weight-bold mb-2">Categories</div>
            <div>
              <a
                href="#"
                onClick={e => e.preventDefault()}
                className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
              >
                Umi
              </a>
              <a
                href="#"
                onClick={e => e.preventDefault()}
                className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
              >
                React-framework
              </a>
              <a
                href="#"
                onClick={e => e.preventDefault()}
                className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
              >
                Umijs
              </a>
            </div>
          </div>
          <div className="pb-4 mb-3 border-bottom">
            <div className="font-weight-bold mb-3">Latest Posts</div>
            <List15 />
          </div>
        </div>
      </div>
    </div>
  )
}

function History(props) {
  const { current, activeId, onChange, selectedService } = props;
  const [pagination, setPagination] = useState({
    current: 0,
    pageSize: 8,
    total: 0,
  });
  const [historyList, setHistoryList] = useState([]);
  const [loading, setLoading] = useState(false);

  const loadHistory = (page) => {
    setLoading(true);
    loadHistoryList({
      page: page,
      page_size: 8,
      service_id: selectedService[1],
    }).then((r) => {
      setLoading(false);

      if (r.code === 14000) {
        return;
      }
      if (r.code !== 0) {
        message.error(r.msg);
        return;
      }

      setHistoryList(r.data.list);
      setPagination(r.data.pagination);
    });
  };

  useEffect(() => {
    if (selectedService && selectedService[1]) {
      // load history
      loadHistory(current);
    }
  }, [selectedService]);

  if (!historyList) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

  return (
    <Spin spinning={loading}>
      <ul className={styles.list}>
        {historyList.map((item, idx) => {
          return (
            <li
              onClick={() => {
                onChange(item.id);
              }}
              className={styles.listItem + (activeId === item.id ? ' ' + styles.activeItem : '')}
              key={idx}
            >
              <div className={styles.listItemBox}>
                <div className={styles.statusIcon}>
                  {item.test_passed ? (
                    <CheckCircleOutlined style={{ color: 'green' }} />
                  ) : (
                    <CloseCircleOutlined style={{ color: 'red' }} />
                  )}
                </div>
                <div className={styles.info}>
                  <div className={styles.methodName}>{item.method_name}</div>
                  <div>Time: {item.time_cost} ms</div>
                  <div>{item.created_at}</div>
                </div>
              </div>
            </li>
          );
        })}
      </ul>

      <Pagination
        simple
        onChange={(page, pageSize) => {
          loadHistory(page - 1);
        }}
        current={pagination.current + 1}
        pageSize={pagination.pageSize}
        total={pagination.total}
      />
    </Spin>
  );
}

render() {
    const {
      list,
      current,
      expendKeys,
      // loading,
      requirementSeach,
      fetching,
      ownerList,
    } = this.state;
    const { total, loading } = this.props;
    return (
      <div>
        <Table
          columns={this.setColumns()}
          dataSource={list}
          expandedRowRender={item => this.renderExpand(item)}
          className="table-wrap"
          onExpand={this.onExpand}
          expandedRowKeys={expendKeys}
          rowKey="id"
          size="middle"
          loading={loading}
          pagination={false}
          expandIcon={props => {
            if (props.record.recordNum > 0) {
              if (!props.expanded) {
                return (
                  <div
                    role="button"
                    tabIndex="0"
                    className="ant-table-row-expand-icon ant-table-row-collapsed"
                    aria-label="展开行"
                    onClick={() => {
                      let extendLoading = this.state.extendLoading.set(
                        props.record.id,
                        true,
                      );

                      this.setState({ extendLoading });
                      this.seeDetail(props);
                    }}
                  ></div>
                );
              } else {
                return (
                  <div
                    role="button"
                    tabIndex="0"
                    className="ant-table-row-expand-icon ant-table-row-expanded"
                    aria-label="关闭行"
                    onClick={() => {
                      this.seeDetail(props);
                    }}
                  ></div>
                );
              }
            } else {
              return null;
            }
          }}
          footer={currentData => (
            <div style={{ height: '32px' }}>
              {
                <div
                  className="pagination"
                  style={{
                    display: total === 0 ? 'none' : 'block',
                    float: 'right',
                  }}
                >
                  <Pagination
                    onChange={this.onChangePagination}
                    current={current}
                    total={Number(total)}
                    pageSize={10}
                  />
                </div>
              }
            </div>
          )}
        />
        <TaskModal
          key="id"
          visible={this.state.taskVisible}
          caseInfo={this.state.caseInfo}
          onClose={this.onCloseTask}
          handleOkTask={this.handleOkTask}
          showTask={this.showTask}
          getOwnerList={this.getOwnerList}
          ownerList={ownerList}
          fetching={fetching}
          requirementSeach={requirementSeach}
          clearRequire={this.clearRequire}
          record={this.state.record}
          type={this.props.type}
          doneApiPrefix={this.props.doneApiPrefix}
          titleModeTask={this.state.titleModeTask}
          getCaseInfo={this.getCaseInfo}
        />
      </div>
    );
  }

TrackMentors = ({ mentors }) => {
  const [currentPage, setCurrentPage] = useState(1);
  // eslint-disable-next-line
  const [cardPerPage, setCardperPage] = useState(3);

  const indexOfLastCard = currentPage * cardPerPage;
  const indexOfFirstCard = indexOfLastCard - cardPerPage;

  const paginate = pageNumber => setCurrentPage(pageNumber);
  const currentCards = mentors
    ? shuffleArray(mentors.items).slice(indexOfFirstCard, indexOfLastCard)
    : null;

  return (
    <React.Fragment>
      <SingleMentorCardStyled>
        {currentCards.map(item => (
          <div className="radio-options">
            <Radio.Button value={item.id}>
              <SingleMentorCard mentor={item} key={item} />
            </Radio.Button>
          </div>
        ))}
      </SingleMentorCardStyled>
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          marginTop: '1rem',
        }}
      >
        <Pagination
          // postPerPage={postPerPage}
          total={mentors.items.length}
          defaultCurrent={currentPage}
          // paginate={paginate}
          onChange={paginate}
          pageSize={cardPerPage}
          showSizeChanger={false}
        />
      </div>
    </React.Fragment>
  );
}

storiesOf('antd/pagination', module).add('simple', () => 
  <>
    <Pagination simple defaultCurrent={2} total={50} />
    <br />
    <Pagination disabled simple defaultCurrent={2} total={50} />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Simple mode.</p></>) } });

SmallPagination = styled(Pagination)`
  padding: 2px 8px !important;
  text-align: right;
`

render() {
    return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
  }

export default function ListTodo() {
  const { status, error, data, refetch } = useQuery("repoData", getTodos);

  const [minValue, setMinValue] = useState(0);
  const [maxValue, setMaxValue] = useState(7);
  const [text, setText] = useState("");

  function handleChange(value) {
    if (value <= 1) {
      setMinValue(0);
      setMaxValue(7);
    } else {
      setMinValue(maxValue);
      setMaxValue(value * 7);
    }
  }

  async function onSubmit() {
    await fetch("/api/v1/todo/create", {
      method: "POST",
      body: JSON.stringify({
        todo: text,
      }),
    }).then(() => {
      refetch();
      setText("");
    });
  }

  async function deleteTodo(id) {
    await fetch(`api/v1/todo/delete/${id}`, {
      method: "POST",
    }).then(() => refetch());
  }

  async function markDone(id) {
    await fetch(`api/v1/todo/mark-done/${id}`, {
      method: "POST",
    }).then(() => refetch());
  }

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      onSubmit();
    }
  };

  return (
    <div>
      <div className="flex flex-row w-full">
        <div className="mt-1 relative shadow-sm w-full space-x-2">
          <input
            type="text"
            name="text"
            id="text"
            className="w-full text-gray-900 border-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm "
            placeholder="Enter todo here..."
            onChange={(e) => {
              setText(e.target.value);
            }}
            onKeyDown={handleKeyDown}
            value={text}
          />
        </div>
        <button type="button" onClick={() => onSubmit()} className="ml-4">
          <ArrowRightIcon className="h-6 w-6" />
        </button>
      </div>

      {status === "success" && (
        <div>
          <div className="mt-4">
            {data.todos ? (
              data.todos.slice(minValue, maxValue).map((todo) => {
                return (
                  <div className="flex flex-col" key={todo.id}>
                    <ul>
                      <li>
                        <span className={todo.done ? "line-through" : ""}>
                          {todo.text}
                        </span>
                        <button
                          onClick={() => deleteTodo(todo.id)}
                          type="button"
                          className="float-right border border-transparent rounded-full shadow-sm text-red-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        >
                          <TrashIcon className="h-5 w-5" aria-hidden="true" />
                        </button>
                      </li>
                    </ul>
                  </div>
                );
              })
            ) : (
              <p>None Found</p>
            )}
          </div>
          <Pagination
            className={data.todos.length > 7 ? "mt-2" : "hidden"}
            defaultCurrent={1}
            total={12}
            onChange={handleChange}
          />
        </div>
      )}
    </div>
  );
}

render() {
    const { dataSource, page, labalWidth } = this.state
    const { getFieldDecorator } = this.props.form
    const columns = [
      { title: 'id', align: 'center', dataIndex: 'id', sorter: (a, b) => a.id - b.id },
      {
        title: 'Rule ID',
        align: 'center',
        dataIndex: 'rule_id',
        render: ruleId => (<Link to={`/rules?id=${ruleId}`}>{ruleId}</Link>),
      },
      { title: '报警值', align: 'center', dataIndex: 'value' },
      {
        title: '当前状态',
        align: 'center',
        dataIndex: 'status',
        render: status => (
          <span>{status === 2 ? '报警' : status === 0 ? '恢复' : '已确认'}</span>
        ),
      },
      {
        title: '异常分钟数',
        align: 'center',
        dataIndex: 'count',
        render: count => (
          <span>{count+1}</span>
        ),
      },
      { title: '标题', align: 'center', dataIndex: 'summary', width: 100 },
      {
        title: 'label',
        align: 'center',
        dataIndex: 'labels',
        width: labalWidth,
        render: (labels) => {
          if (labels && Object.prototype.toString.call(labels) === '[object Object]') {
            return Object.keys(labels).map(key => <Tag color="cyan" style={{ marginTop: '5px' }}>{key}: {labels[key]}</Tag>)
          }
          return '-'
        },
      },
      { title: '描述', align: 'center', dataIndex: 'description' },
      { title: '确认人', align: 'center', dataIndex: 'confirmed_by' },
      {
        title: '触发时间',
        align: 'center',
        dataIndex: 'fired_at',
        width: tableTimeWidth,
        render: firedAt => (
          <span>{firedAt === '0001-01-01T00:00:00Z' ? '--' : moment(firedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认时间',
        align: 'center',
        dataIndex: 'confirmed_at',
        width: tableTimeWidth,
        render: confirmedAt => (
          <span>{confirmedAt === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认截止时间',
        align: 'center',
        dataIndex: 'confirmed_before',
        width: tableTimeWidth,
        render: confirmedBefore => (
          <span>{confirmedBefore === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedBefore).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '恢复时间',
        align: 'center',
        dataIndex: 'resolved_at',
        width: tableTimeWidth,
        render: resolvedAt => (
          <span>{resolvedAt === '0001-01-01T00:00:00Z' ? '--' : moment(resolvedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
    ]
    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSearch}>
          <Form.Item label="标题">
            {getFieldDecorator('summary', {})(<Input placeholder="请输入标题" />)}
          </Form.Item>
          <Form.Item label="状态">
            {getFieldDecorator('status', {
              initialValue: -1,
            })(<Select>
              <Option value={-1}>所有</Option>
              <Option value={0}>恢复</Option>
              <Option value={1}>已确认</Option>
              <Option value={2}>报警</Option>
            </Select>)}
          </Form.Item>
          <Form.Item label="报警时间" style={{ marginBottom: 0 }}>
            <Form.Item style={{ marginRight: 0 }}>
              {getFieldDecorator('timestart', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警开始时间"
              />)}
            </Form.Item>
            <span style={{ width: '24px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>~</span>
            <Form.Item style={{ marginBottom: 0 }}>
              {getFieldDecorator('timeend', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警结束时间"
              />)}
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
        <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ x: 1300 }} rowKey="id" />
        <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '15px' }}>
          <Pagination onChange={this.pageChange} current={page.current} pageSize={page.size} total={page.total} />
        </div>
      </div>
    )
  }

Home = ({ history }) => {

  const [list, setList] = useState([]);

  const [currentPageIndex, setCurrentPageIndex] = useState(1);

  const [total, setTotal] = useState(0);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        await setLoading(true);
        const data = await getListByPage(currentPageIndex);
        setList(data.list);
        setTotal(data.count);
        message.success('加载成功!');
      } catch (error) {
        message.error('加载失败!');
      } finally {
        await setLoading(false);
      }
    }

    loadData()
  }, [currentPageIndex]);

  const onHandlePageChange = (page, size) => {
    setCurrentPageIndex(page);
  }


  const renderCardList = useMemo(() => {

    const onHandleDetail = item => {
      history.push({ pathname: '/workspace', state: { id: item.id } });
    };
  
    return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
      <Card
        loading={loading}
        hoverable
        title={item.name}
        bordered={false}
        cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
        extra={[
          <div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
          <div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
        ]}
      >
        <Meta
          title={item.username}
          avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
          description={item.desc || '暂无描述'}
          style={{ height: 80, overflow: 'hidden' }}
        />
      </Card>
    </Col>)
  }, [list, loading, history])


  return (
    <div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
      <Row gutter={16}>
        {
          renderCardList
        }
      </Row>
      <Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
    </div>
  );
}

render() {
    const { data } = this.props;

    return (
      <>
        <Table
          dataSource={data}
          rowKey={record => record._id}
          pagination={false}
        >
          <Column title="文件名" dataIndex="fileName" key="fileName" />
          <Column
            title="上传者"
            dataIndex="uploader"
            key="uploader"
            render={record => (
              <span>
                {record === "admin" ? (
                  <Tag color="geekblue">admin</Tag>
                ) : (
                  record
                )}
              </span>
            )}
          />
          <Column
            title="上传时间"
            dataIndex="timeOfUpload"
            key="timeOfUpload"
            render={record => <span>{numberToTime(record)}</span>}
          />
          <Column
            title="文件大小"
            dataIndex="fileSize"
            key="fileSize"
            render={record => <span>{kbToMb(record)}</span>}
          />
          <Column
            title="操作"
            key="action"
            render={record => (
              <span>
                <DeleteOutlined
                  onClick={() =>
                    this.deleteHanler(record["_id"], record["filePath"])
                  }
                />
              </span>
            )}
          />
        </Table>
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            paddingTop: "20px",
            paddingRight: "20px"
          }}
        >
          <Pagination
            defaultCurrent={1}
            defaultPageSize={10}
            total={50}
            hideOnSinglePage
          />
        </div>
      </>
    );
  }

function PendingTasks({ tasksData, track, completed, taskTableHeader }) {
  const [currentPage, setCurrentPage] = useState(1);
  // eslint-disable-next-line
  const [cardPerPage, setCardperPage] = useState(3);

  const indexOfLastCard = currentPage * cardPerPage;
  const indexOfFirstCard = indexOfLastCard - cardPerPage;

  const paginate = pageNumber => setCurrentPage(pageNumber);
  const currentTasks =
    tasksData && tasksData.items
      ? tasksData.items.slice(indexOfFirstCard, indexOfLastCard)
      : null;

  return (
    <PendingTaskStyled>
      <div className="pending-tasks-wrap">
        <div className="header">
          <p className="">{taskTableHeader}</p>
        </div>

        <div className="solid-bar"></div>

        <div className="pending-tasks">
          {currentTasks ? (
            currentTasks.map((data, idx) => (
              <SinglePendingTask
                key={idx}
                data={data}
                track={track}
                completed={completed}
              />
            ))
          ) : (
            <p className="ml-2">No task yet</p>
          )}
        </div>

        <div className="pagination">
          {/* <Link className="next-button" to="#">
            Next
          </Link> */}
          {tasksData ? (
            <Pagination
              className="p-1"
              // postPerPage={postPerPage}
              total={tasksData.items.length}
              defaultCurrent={currentPage}
              // paginate={paginate}
              onChange={paginate}
              pageSize={cardPerPage}
              showSizeChanger={false}
            />
          ) : null}
          {/* <a href="#">Next</a> */}
        </div>
      </div>
    </PendingTaskStyled>
  );
}

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

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

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

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

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={"NoHistoryOrders"}
        loading={this.props.loading}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: "14px",
            }}
          >
            <I s="CreatedAt" />
          </TextCompactTableHeader>
        ),
        dataIndex: "createdAt",
        width: 180,
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: "14px",
            }}
          >
            <I s="Market" />
          </TextCompactTableHeader>
        ),
        dataIndex: "market",
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Side" />
          </TextCompactTableHeader>
        ),
        dataIndex: "side",
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fill Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: "fillAmount",
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fill Pctg" />
          </TextCompactTableHeader>
        ),
        dataIndex: "filled",
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: "size",
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Order Price" />
          </TextCompactTableHeader>
        ),
        dataIndex: "price",
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Order Total" />
          </TextCompactTableHeader>
        ),
        dataIndex: "total",
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fee" />
          </TextCompactTableHeader>
        ),
        dataIndex: "fee",
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: "100%",
              textAlign: "center",
              paddingRight: "14px",
            }}
          >
            <I s="Status / Operations" />
          </TextCompactTableHeader>
        ),
        dataIndex: "status",
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const order = this.props.data[i];

      var status = "-";
      if (order.status === "processing" || order.status === "waiting") {
        status = (
          <LargeTableRowStatus
            style={{
              textAlign: "left",
            }}
          >
            <CancelOrderButton
              onClick={(e) => {
                e.preventDefault();
                this.onClickCancel(order);
              }}
            >
              <I s="Cancel" />
            </CancelOrderButton>
          </LargeTableRowStatus>
        );
      } else if (order.status === "processed") {
        status = (
          <LargeTableRowProcessed
            style={{
              textAlign: "left",
            }}
          >
            <div>
              <I s="Filled" />
            </div>
          </LargeTableRowProcessed>
        );
      } else if (order.status === "failed") {
        status = (
          <LargeTableRowFailed
            style={{
              textAlign: "left",
            }}
          >
            <div>
              <I s="Failed" />
            </div>
          </LargeTableRowFailed>
        );
      } else if (
        order.status === "cancelling" ||
        order.status === "cancelled"
      ) {
        status = (
          <LargeTableRowStatus
            style={{
              textAlign: "left",
            }}
          >
            <div>
              <I s="Cancelled" />
            </div>
          </LargeTableRowStatus>
        );
      } else if (order.status === "expired") {
        status = (
          <LargeTableRowStatus>
            <div>
              <I s="Expired" />
            </div>
          </LargeTableRowStatus>
        );
      }
      data.push({
        key: i,
        side: (
          <LargeTableRow
            style={{
              color:
                order.side === "BUY" ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.side === "BUY" ? <I s="Buy" /> : <I s="Sell" />}
          </LargeTableRow>
        ),
        market: (
          <LargeTableRow
            style={{
              paddingLeft: "14px",
            }}
          >
            {order.market}
          </LargeTableRow>
        ),
        size: <LargeTableRow>{order.sizeInString} </LargeTableRow>,
        filled: (
          <LargeTableRow
            style={{
              color: theme.textWhite,
            }}
          >
            {order.filled}
          </LargeTableRow>
        ),
        fillAmount: <LargeTableRow>{order.filledSizeInString} </LargeTableRow>,
        price: (
          <LargeTableRow
            style={{
              color:
                order.side === "BUY" ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.price}
          </LargeTableRow>
        ),
        total: (
          <LargeTableRow>
            {order.totalInString} {order.quoteToken}
          </LargeTableRow>
        ),
        fee: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {order.feeInString}{" "}
            {order.feeInString !== "-"
              ? order.side === "BUY"
                ? order.market.split("-")[0]
                : order.market.split("-")[1]
              : ""}
          </LargeTableRow>
        ),
        createdAt: (
          <LargeTableRow
            style={{
              paddingLeft: "14px",
              color: theme.textDim,
            }}
          >
            {Moment(order.createdAt).format(theme.timeFormat)}
          </LargeTableRow>
        ),
        status: (
          <div
            style={{
              textAlign: "center",
              paddingRight: "14px",
            }}
          >
            {status}
          </div>
        ),
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <LargeTableContainer>
        <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
          <TableLoadingSpin loading={this.props.loading}>
            <Table
              style={{
                borderStyle: "none",
                borderWidth: "0px",
                height: `${data.length * 34 + 35}px`,
                minHeight: "500px",
              }}
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{
                y: `${data.length * 34}px`,
              }}
            />
          </TableLoadingSpin>
          {hasPagination ? (
            <Pagination
              style={{
                padding: "30px 0px 30px 0px",
                background: theme.background,
                textAlign: "center",
              }}
              size=""
              total={this.props.total}
              current={this.props.current}
              onChange={this.props.onChange}
              pageSize={this.props.limit}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </LargeTableContainer>
    );
  }

render() {
    const { cur, pages, searchName } = this.state;

    // 截取路由
    const urlParams = new URL(window.location.href);
    const { hash } = urlParams;
    const projectId = hash.split('ProjectItem/')[1];

    const jump = () => {
      router.push(`/Coupons/Project/AddItem/${projectId}`);
    };

    const changePage = (page, pageSize) => {
      this.setState({
        cur: page,
        pages: pageSize,
      })
    };

    const ListContent = ({ data: { name, originalPrice, price, type, status } }) => (
      <div className={styles.listContent}>
        <div className={styles.listContentItem}>
          <p>名称</p>
          <p>{name}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>原价</p>
          <p>{Number(originalPrice) / 100}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>价格</p>
          <p>{Number(price) / 100}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>类型</p>
          <p>{type === 'special' ? '不可退款' : '可退款'}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>状态</p>
          <p>{status === 'published' ? '已上架' : '未上架'}</p>
        </div>
      </div>
    );

    const extraContent = (
      <div>
        <Search
          placeholder="请输入"
          onSearch={value => this.handleSearch(value)}
        />
      </div>
    ); 

    return (
      <Query
        query={gql`
          query(
            $projectId: ID,
            $pageSize: Int,
            $currentPage: Int,
            $status: Status,
            $nameLike: String,
          ){
            items(
              projectId: $projectId,
              pageSize: $pageSize,
              currentPage: $currentPage,
              status: $status,
              nameLike: $nameLike,
            ) {
              list {
                code
                name
                content
                originalPrice
                price
                unit
                imageUrl
                stock
                type
                status
              }
              pagination{
                pageSize
                total
                current
              }
            }
          }
        `}
        variables={{ pageSize: pages, currentPage: cur, status: 'published', projectId, nameLike: searchName }}
      >
        {({ loading, data: { items }, refetch }) => {
          if (loading) return <Spin />;
          refetch();
          // console.log('data projects', projects);

          const { pagination, list } = items;

            return (
              <Mutation
                mutation={gql`
                  mutation(
                    $itemCode: ID!
                    $projectId: ID
                    $type: UpdateItemToProjectType
                  ) {
                    updateItemToProject(
                      input: {
                        # 商品ID
                        itemCode: $itemCode
                        # 专题ID
                        projectId: $projectId
                        # 类型
                        type: $type
                      }
                    ) 
                  }
                `}
              >
                {mutate => {
                  const addItem = itemCode => {
                    const itemData = {};
                      itemData.itemCode = itemCode;
                      itemData.projectId = projectId;
                      itemData.type = 'remove';
                      try {
                        const promise = new Promise(resolve => {
                          console.log('itemData', itemData);
                          resolve(mutate({ variables: itemData }));
                        });
                        promise.then(value => {
                          console.log(value);
                          message.success('移除成功');
                          refetch();
                        });
                      } catch (catchedError) {
                        //
                      }
                  };
                  return (
                    <PageHeaderWrapper>
                      <Card
                        bordered={false}
                        className={styles.listCard}
                        title="专题商品"
                        style={{ marginTop: 24 }}
                        extra={extraContent}
                      >
                        <div className={styles.standardList}>
                          <Button
                            type="dashed"
                            style={{ width: '100%', marginBottom: 8 }}
                            icon="plus"
                            onClick={() => jump()}
                          >
                            添加
                          </Button>
                          <List
                            size="large"
                            rowKey="code"
                            loading={loading}
                            dataSource={list}
                            renderItem={item => (
                              <List.Item
                                actions={[
                                  <a
                                    onClick={() => {
                                      Modal.confirm({
                                        title: '移除商品',
                                        content: '确定移除该商品吗？',
                                        okText: '确认',
                                        cancelText: '取消',
                                        onOk: () => addItem(item.code),
                                      });
                                    }}
                                  >
                                    移除
                                  </a>,
                                ]}
                              >
                                <List.Item.Meta
                                  avatar={
                                    <Avatar src={item.imageUrl} shape="square" size="large" />
                                  }
                                  title={`[${item.code}]${item.name}`}
                                  description={item.content}
                                />
                                <ListContent data={item} />
                              </List.Item>
                            )}
                          />
                          <Pagination
                            current={pagination.current}
                            total={pagination.total}
                            style={{ float:"right" }}
                            onChange={changePage}
                          />
                        </div>
                      </Card>
                    </PageHeaderWrapper>
                  );
                }}
              </Mutation> 
            );
        }}
      </Query>
    );
  }

render() {
        const { checkedValues } = this.state
        const {
            changeState,
            newsMaterialList,
            wechatMaterialList,
            newsCurrentPage,
            newsPageSize,
            wechatMaterialListLoading
        } = this.props
        const { item, total_count } = newsMaterialList
        return(
            <Spin tip="Loading..." spinning={wechatMaterialListLoading}>
                <RadioGroup
                    value={checkedValues}
                    onChange={(e)=>{
                        this.setState({checkedValues:e.target.value})
                        let detail = newsMaterialList.item.filter((filterItem,index)=>{
                            return e.target.value===filterItem.media_id
                        })[0]
                        changeState({
                            value:e.target.value,
                            detail
                        })
                    }}
                >
                    <View className={styles.imgContent}>
                        <Row gutter={16}>
                            {
                                newsMaterialList.item&&newsMaterialList.item.map((item,index)=>
                                <Col span={8} key={index}>
                                    <View
                                        className={styles.imgItem}
                                        style={
                                            checkedValues===item.media_id ?
                                            {
                                                borderColor:'#188fff'
                                            } : {}
                                        }
                                    >
                                        <ModalNews
                                            extra={item.content.news_item}
                                        />
                                        <Radio
                                            value={item.media_id}
                                            style={{
                                                position: 'absolute',
                                                bottom: 5,
                                                right: 0,
                                            }}
                                        />
                                    </View>
                                </Col>
                                )
                            }
                        </Row>
                    </View>
                </RadioGroup>
                <View className={styles.paginationView}>
                    <Pagination
                        current={newsCurrentPage}
                        pageSize={newsPageSize ? newsPageSize : 10}
                        total={total_count ? total_count : 1}
                        showSizeChanger
                        showQuickJumper
                        hideOnSinglePage
                        pageSizeOptions={['5','10','15','20']}
                        onChange={(page, pageSize)=>{
                            wechatMaterialList({
                                params:{
                                    type:'news',
                                    offset:page===1 ? '0' : (page-1)*pageSize-1,
                                    count:pageSize,
                                }
                            })
                        }}
                        onShowSizeChange={(current, size)=>{
                            wechatMaterialList({
                                params:{
                                    type:'news',
                                    offset:'0',
                                    count:size,
                                }
                            })
                        }}
                    />
                </View>
            </Spin>
        )
    }

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={this.props.placeHolder}
        loading={this.props.loading}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader style={{ paddingLeft: '14px' }}>
            <I s="Timestamp" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'date',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Asset" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'asset',
        width: '16%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'amount',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="From/To" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'recipient',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fee" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'fee',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: '100%',
              textAlign: 'center',
            }}
          >
            <I s="Memo" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'memo',
        width: '14%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: '100%',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                textAlign: 'left',
                paddingRight: '14px',
              }}
            >
              <I s="Status" />
            </div>
          </TextCompactTableHeader>
        ),
        dataIndex: 'status',
        width: '14%',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const transaction = this.props.data[i];
      var status = '-';
      if (transaction.status === 'processing') {
        status = (
          <LargeTableRowProcessing
            style={{ color: theme.highlight, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCircleNotch} spin />
            <div>
              <I s="Processing" />
            </div>
          </LargeTableRowProcessing>
        );
      } else if (transaction.status === 'processed') {
        status = (
          <LargeTableRowProcessed
            style={{ color: theme.green, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCheckCircle} />
            <div>
              <I s="Succeeded" />
            </div>
          </LargeTableRowProcessed>
        );
      } else if (transaction.status === 'failed') {
        status = (
          <LargeTableRowFailed style={{ color: theme.red, textAlign: 'left' }}>
            <StatusFontAwesomeIcon icon={faExclamationCircle} />
            <div>
              <I s="Failed" />
            </div>
          </LargeTableRowFailed>
        );
      } else if (transaction.status === 'received') {
        status = (
          <Tooltip placement="bottom" title={<I s={'StatusConfirming'} />}>
            <LargeTableRowProcessing
              style={{ color: theme.orange, textAlign: 'left' }}
            >
              <StatusFontAwesomeIcon icon={faClock} />

              <div>
                <I s="Confirming" />
              </div>
            </LargeTableRowProcessing>
          </Tooltip>
        );
      }

      let memo = transaction.memo;
      if (transaction.memo.toLowerCase() === 'update account reward') {
        memo = <I s="Update Account Reward" />;
      } else if (transaction.memo.toLowerCase() === 'reward') {
        memo = <I s="Reward" />;
      }

      data.push({
        key: i,
        asset: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            {transaction.symbol} - <I s={transaction.tokenName} />
          </LargeTableRow>
        ),
        amount: (
          <LargeTableRow
            style={{
              color:
                transaction.receiver === window.wallet.accountId
                  ? theme.buyPrimary
                  : theme.sellPrimary,
            }}
          >
            <span>
              {transaction.receiver === window.wallet.accountId ? '+' : '-'}
            </span>
            {transaction.amountInUI} {transaction.symbol}
          </LargeTableRow>
        ),
        recipient: (
          <LargeTableRow>
            <a
              href={`${getEtherscanLink(this.props.chainId)}/address/${
                transaction.receiver === window.wallet.accountId
                  ? transaction.senderAddress
                  : transaction.receiverAddress
              }`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {transaction.receiver === window.wallet.accountId
                ? transaction.senderInUI
                : transaction.recipientInUI}
            </a>
          </LargeTableRow>
        ),
        fee: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {transaction.feeInUI} {transaction.symbol}
          </LargeTableRow>
        ),
        date: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
              color: theme.textDim,
            }}
          >
            {Moment(transaction.timestamp).format(theme.timeFormat)}
          </LargeTableRow>
        ),
        status: (
          <div
            style={{
              textAlign: 'center',
              paddingRight: '14px',
            }}
          >
            {status}
          </div>
        ),
        memo: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {memo}
          </LargeTableRow>
        ),
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <SimpleTableContainer>
        <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
          <TableLoadingSpin loading={this.props.loading}>
            <Table
              style={{
                height: `${data.length * 34 + 35}px`,
              }}
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{
                y: `${data.length * 34}px`,
              }}
            />
          </TableLoadingSpin>
          {hasPagination ? (
            <Pagination
              style={{
                padding: '30px 0px 30px 0px',
                background: theme.background,
                textAlign: 'center',
              }}
              size=""
              total={this.props.total}
              current={this.props.current}
              onChange={this.props.onChange}
              pageSize={this.props.limit}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </SimpleTableContainer>
    );
  }