antd#Timeline JavaScript Examples

Event = eventWithStyle(
  ({ region = 'BA', sector, title, description, className, children }) => {
    return (
      <div className={'event ' + className}>
        <div className='event__description'>
          <figure>
            <picture>
              <SectorIcon sector={sector} />
            </picture>
            <figcaption>
              <h2>{title}</h2>
              {description && <Text>{description}</Text>}
            </figcaption>
          </figure>
        </div>

        <Timeline>{children}</Timeline>
      </div>
    );
  }
)

storiesOf('antd/timeline', module).add('right', () => 
  <Timeline mode="right">
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
      Technical testing 2015-09-01
    </Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Right alternate timeline.</p></>) } });

render() {
    return (
      <div>
        <Timeline pending="Recording..." reverse={this.state.reverse}>
          <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
          <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
          <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
        </Timeline>
        <Button type="primary" style={{ marginTop: 16 }} onClick={this.handleClick}>
          Toggle Reverse
        </Button>
      </div>
    );
  }

render() {
    let data = this.props.newsData ? this.props.newsData.list : [];
    if (data && data.length) {
      data = data.map(function(item, i) {
        return (
          <Timeline.Item key={i}>
            <span className="logoTimeago">{timeago(item.add_time)}</span>
            <span className="logusername">{item.username}</span>
            <span className="logtype">{item.type}</span>
            <span className="logtime">{formatTime(item.add_time)}</span>
            <span className="logcontent">{item.content}</span>
          </Timeline.Item>
        );
      });
    } else {
      data = '';
    }
    let pending = this.state.bidden ? (
      <a className={this.state.bidden}>以上为全部内容</a>
    ) : (
      <a className="loggetMore" onClick={this.getMore.bind(this)}>
        查看更多
      </a>
    );
    if (this.state.loading) {
      pending = <Spin />;
    }
    return (
      <section className="news-timeline">
        {data ? <Timeline pending={pending}>{data}</Timeline> : data}
      </section>
    );
  }

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Timeline>
            <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
            <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
            <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
            <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
          </Timeline>
        </div>
        <h5 className="mb-3">
          <strong>Alternate</strong>
        </h5>
        <div className="mb-5">
          <Timeline mode="alternate">
            <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
            <Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
            <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
              laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
              architecto beatae vitae dicta sunt explicabo.
            </Timeline.Item>
            <Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
            <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
            <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
              Technical testing 2015-09-01
            </Timeline.Item>
          </Timeline>
        </div>
      </div>
    )
  }

function TimelimeLabelDemo() {
  const [mode, setMode] = useState('left');

  const onChange = e => {
    setMode(e.target.value);
  };

  return (
    <>
      <Radio.Group
        onChange={onChange}
        value={mode}
        style={{
          marginBottom: 20,
        }}
      >
        <Radio value="left">Left</Radio>
        <Radio value="right">Right</Radio>
        <Radio value="alternate">Alternate</Radio>
      </Radio.Group>
      <Timeline mode={mode}>
        <Timeline.Item label="2015-09-01">Create a services</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
        <Timeline.Item>Technical testing</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
      </Timeline>
    </>
  );
}

storiesOf('antd/timeline', module).add('alternate', () => 
  <Timeline mode="alternate">
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
      beatae vitae dicta sunt explicabo.
    </Timeline.Item>
    <Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
      Technical testing 2015-09-01
    </Timeline.Item>
  </Timeline>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Alternate timeline.</p></>) } });

storiesOf('antd/timeline', module).add('basic', () => 
  <Timeline>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Basic timeline.</p></>) } });

storiesOf('antd/timeline', module).add('color', () => 
  <Timeline>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="red">
      <p>Solve initial network problems 1</p>
      <p>Solve initial network problems 2</p>
      <p>Solve initial network problems 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item>
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item color="gray">
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item color="gray">
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
  </Timeline>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set the color of circles. <code>green</code> means completed or success status, <code>red</code> means warning or error, and <code>blue</code> means ongoing or other default status, <code>gray</code> for unfinished or disabled status.</p></>) } });

storiesOf('antd/timeline', module).add('custom', () => 
  <Timeline>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined className="timeline-clock-icon" />} color="red">
      Technical testing 2015-09-01
    </Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set a node as an icon or other custom element.</p></>) } });

EventItem = ({
  city = 'Em todo o estado',
  status = 'F',
  title,
  description,
  event,
  hideAuthor = false
}) => {
  const { author } = event;
  const statusMessages = messages(status);

  return (
    <Timeline.Item
      className={status}
      dot={statusMessages.icon}
      color={statusMessages.color}
    >
      <div className='city'>
        {city}
        {event?.region?.initial && ` - ${event?.region?.initial}`}
        {author && !hideAuthor && author?.name && (
          <Popover
            content={
              <div style={{ textAlign: 'center' }}>
                Evento criado por {author?.name}. <br />
                <a>Clique aqui</a> para fazer parte de nossa equipe de
                colaboradores.
              </div>
            }
          >
            <span className='info'>
              <NotificationOutlined />
              <span>{author.name}</span>
            </span>
          </Popover>
        )}
      </div>
      <div className='meta'>
        <Popover content={<span style={{ textAlign: 'center' }}>{title}</span>}>
          <span className='label'>{title} - </span>
        </Popover>
        <span className='status'>{statusMessages.message} - </span>
        {(event.from_date !== null || event.to_date !== null) && (
          <Popover
            content={<span>Período de vigência do evento em questão.</span>}
          >
            <span className='info'>
              <ClockCircleOutlined />
              <span>
                {event.undefined_ends_date && 'A partir de '}
                {event.from_date && formatDate(event.from_date)}
                {event.to_date && ` - ${formatDate(event.to_date)}`}
              </span>
            </span>
          </Popover>
        )}

        {event?.source?.source && (
          <span className='info'>
            <LinkOutlined />
            <span>Fonte: {event.source.source}</span>
          </span>
        )}
      </div>
      <Text>{description}</Text>
      {event.source?.link && (
        <a href={event.source.link} target='__blank' alt={event.source.source}>
          Ver mais
        </a>
      )}
    </Timeline.Item>
  );
}

render() {
    const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        filters: [
          { text: 'Joe', value: 'Joe' },
          { text: 'Jim', value: 'Jim' },
        ],
        filteredValue: null,
        onFilter: (value, record) => record.name.includes(value),
        sorter: (a, b) => a.name.length - b.name.length,
        sortOrder: true,
        ellipsis: true,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        sorter: false,
        sortOrder: true,
        ellipsis: true,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        filters: [
          { text: 'London', value: 'London' },
          { text: 'New York', value: 'New York' },
        ],
        filteredValue: null,
        onFilter: (value, record) => record.address.includes(value),
        sorter: false,
        sortOrder: true,
        ellipsis: true,
      },
    ];
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Switch
            unCheckedChildren="disabled"
            checkedChildren="disabled"
            checked={disabled}
            onChange={this.handleDisable}
            style={{ marginBottom: 16 }}
          />
          <Card title="Card Title">
            <Card.Grid>Content</Card.Grid>
            <Card.Grid hoverable={false}>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
          </Card>
          <Collapse>
            <Panel header="This is panel header 1" key="1">
              <Collapse defaultActiveKey="1">
                <Panel header="This is panel nest panel" key="1">
                  <p>{text}</p>
                </Panel>
              </Collapse>
            </Panel>
            <Panel header="This is panel header 2" key="2">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 3" key="3">
              <p>{text}</p>
            </Panel>
          </Collapse>
          <Transfer
            dataSource={mockData}
            titles={['Source', 'Target']}
            targetKeys={targetKeys}
            selectedKeys={selectedKeys}
            onChange={this.handleTransferChange}
            onSelectChange={this.handleTransferSelectChange}
            render={item => item.title}
            disabled={disabled}
          />
          <TableTransfer
            dataSource={mockData}
            targetKeys={targetKeys}
            disabled={disabled}
            showSearch={showSearch}
            onChange={this.handleTableTransferChange}
            filterOption={(inputValue, item) =>
              item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
            }
            leftColumns={[
              {
                dataIndex: 'title',
                title: 'Name',
              },
              {
                dataIndex: 'description',
                title: 'Description',
              },
            ]}
            rightColumns={[
              {
                dataIndex: 'title',
                title: 'Name',
              },
            ]}
          />
          <Switch
            unCheckedChildren="disabled"
            checkedChildren="disabled"
            checked={disabled}
            onChange={this.triggerDisable}
            style={{ marginTop: 16 }}
          />
          <Switch
            unCheckedChildren="showSearch"
            checkedChildren="showSearch"
            checked={showSearch}
            onChange={this.triggerShowSearch}
            style={{ marginTop: 16 }}
          />
          <Anchor>
            <Link href="#components-anchor-demo-basic" title="Basic demo" />
            <Link href="#components-anchor-demo-static" title="Static demo" />
            <Link
              href="#components-anchor-demo-basic"
              title="Basic demo with Target"
              target="_blank"
            />
            <Link href="#API" title="API">
              <Link href="#Anchor-Props" title="Anchor Props" />
              <Link href="#Link-Props" title="Link Props" />
            </Link>
          </Anchor>
          <Tabs type="card">
            <TabPane tab="Tab 1" key="1">
              Content of Tab Pane 1
            </TabPane>
            <TabPane tab="Tab 2" key="2">
              Content of Tab Pane 2
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
          <Timeline>
            <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
            <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
            <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
              Technical testing 2015-09-01
            </Timeline.Item>
            <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
          </Timeline>
          <Calendar />
          <Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
            <TreeNode title="parent 1" key="0-0">
              <TreeNode title="parent 1-0" key="0-0-0">
                <TreeNode title="leaf" key="0-0-0-0" />
                <TreeNode title="leaf" key="0-0-0-1" />
                <TreeNode title="leaf" key="0-0-0-2" />
              </TreeNode>
              <TreeNode title="parent 1-1" key="0-0-1">
                <TreeNode title="leaf" key="0-0-1-0" />
              </TreeNode>
              <TreeNode title="parent 1-2" key="0-0-2">
                <TreeNode title="leaf" key="0-0-2-0" />
                <TreeNode title="leaf" key="0-0-2-1" />
              </TreeNode>
            </TreeNode>
          </Tree>
          <Table columns={columns} dataSource={data} footer={() => 'Footer'} />
          <Table
            columns={columnsTable}
            dataSource={dataTable}
            pagination={false}
            id="table-demo-summary"
            bordered
            summary={pageData => {
              let totalBorrow = 0;
              let totalRepayment = 0;

              pageData.forEach(({ borrow, repayment }) => {
                totalBorrow += borrow;
                totalRepayment += repayment;
              });

              return (
                <>
                  <tr>
                    <th>Total</th>
                    <td>
                      <Text type="danger">{totalBorrow}</Text>
                    </td>
                    <td>
                      <Text>{totalRepayment}</Text>
                    </td>
                  </tr>
                  <tr>
                    <th>Balance</th>
                    <td colSpan={2}>
                      <Text type="danger">{totalBorrow - totalRepayment}</Text>
                    </td>
                  </tr>
                </>
              );
            }}
          />
          <br />
          <Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
          <Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
          <Card
            hoverable
            style={{ width: 240 }}
            cover={
              <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
            }
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
          </Card>
          <Slider defaultValue={30} />
          <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
          <Badge count={5}>
            <a href="#" className="head-example" />
          </Badge>
        </Modal>
      </>
    );
  }

RaceTimeline = React.memo((props) => {
  const { t } = useTranslation();
  const [showSpare, setShowSpare] = useState(false);
  const  db = useDB();
  if (!db) return null;
  const { showButton } = props;
  const str = [];

  const getDate = (i) => {
    let year = Math.floor(i / 24) + 1;
    let month = Math.floor((i - (year - 1) * 24) / 2) + 1;
    month = month < 10 ? `\xa0\xa0${month}` : month;
    let moment = i % 2 ? "后" : "前";
    return `${year}年\xa0${month}月${moment}`;
  };
  const getColor = (grade) => {
    switch (grade) {
      case "G1":
        return "blue";
      case "G2":
        return "pink";
      case "G3":
        return "green";
      case "OP":
        return "orange";
      case "Pre-OP":
        return "orange";
      default:
        return "gray";
    }
  };
  for (let i = 13; i < 72; i++) {
    let curRace, id, golds;
    if (props.raceList && props.raceList[i]) {
      id = props.raceList[i].id;
      curRace = db.get("races").find({ id }).value();
      golds = getGolds(curRace);
      str.push(
        <Timeline.Item label={getDate(i)} color="red" className="text-base" key={id}>
          {`${curRace.grade} / ${curRace.distanceType} / ${curRace.distance} / ${curRace.name} / ${
            props.raceList[i].goal || "参赛"
          }
          ${golds ? " / " + golds : ""}`}
        </Timeline.Item>
      );
    } else if (props.filterRace && props.filterRace[i]) {
      props.filterRace[i].forEach((id, index) => {
        curRace = db.get("races").find({ id }).value();
        golds = getGolds(curRace);
        str.push(
          <Timeline.Item
            label={index === 0 ? getDate(i) : null}
            color={getColor(curRace.grade)}
            style={{ fontSize: "14px" }}
            key={id}
          >
            {`${curRace.grade} / ${curRace.distanceType} / ${curRace.distance} / ${curRace.name}
            ${golds ? " / " + golds : ""}`}
          </Timeline.Item>
        );
      });
    } else {
      //普通
      showSpare &&
        str.push(
          <Timeline.Item
            label={getDate(i)}
            color={getColor("normal")}
            style={{ fontSize: "12px" }}
          />
        );
    }
  }
  return (
    <>
      {showButton && (
        <Button onClick={() => setShowSpare(!showSpare)}>
          {showSpare ? t("隐藏空闲月份") : t("显示空闲月份")}
        </Button>
      )}
      <Timeline mode="left">{str}</Timeline>
    </>
  );
})

// displays a timeline for scaffold-eth usage

export default function TimelineDisplay(props) {
  return (
    <Timeline mode="right">
      <Timeline.Item dot="?">
        <Text delete>
          Clone and Install from the{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://github.com/austintgriffith/scaffold-eth">
            github repo
          </a>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="⚛️">
        <Text delete>
          Start your frontend app with: <Text strong>yarn start</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="⛓">
        <Text delete={props.chainIsUp}>
          Start your local blockchain with: <Text strong>yarn run chain</Text> (and refresh)
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text delete={props.hasOwner}>
          Compile and deploy your smart contract: <Text strong>yarn run deploy</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text delete={props.isNotSmoort}>
          Fix error in <Text code>SmartContractWallet.sol</Text> then: <Text strong>yarn run deploy</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot={<SendOutlined style={{ fontSize: "16px" }} />} color={props.hasEther ? "green" : "blue"}>
        <Text delete={props.hasEther}>
          Send test ether to your{" "}
          <Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address using
          (bottom left) faucet
        </Text>
      </Timeline.Item>

      <Timeline.Item
        dot={<DownloadOutlined style={{ fontSize: "16px" }} />}
        color={props.contractHasEther ? "green" : "blue"}
      >
        <Text delete={props.contractHasEther}>
          Deposit some funds into your{" "}
          <Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
          smart contract wallet
        </Text>
      </Timeline.Item>

      <Timeline.Item
        dot={<EditOutlined style={{ fontSize: "16px" }} />}
        color={props.amOwnerOfContract ? "green" : "blue"}
      >
        <Text delete={props.amOwnerOfContract}>
          Set <b>owner</b> of your{" "}
          <Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
          smart contract wallet to your{" "}
          <Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="☢️">
        <Text>
          Yikes, anyone can take ownership of <Text code>SmartContractWallet.sol</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text>
          Test your contract with <Text code>buidler/test/myTest.js</Text> then:
          <Text strong>yarn run test</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text>
          Build something awesome with ? <a href="https://github.com/austintgriffith/scaffold-eth">scaffold-eth</a> and{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/austingriffith">
            @ me
          </a>
          !
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text>
          Read more about{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://ethereum.org/developers">
            Ethereum
          </a>
          ,{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://solidity.readthedocs.io/en/develop/contracts.html">
            Solidity
          </a>
          , and{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://buidler.dev/tutorial">
            Buidler
          </a>
        </Text>
      </Timeline.Item>
    </Timeline>
  );
}

render() {
    let data = this.props.newsData ? this.props.newsData.list : [];

    const curDiffData = this.state.curDiffData;
    let logType = {
      project: '项目',
      group: '分组',
      interface: '接口',
      interface_col: '接口集',
      user: '用户',
      other: '其他'
    };

    const children = this.state.apiList.map(item => {
      let methodColor = variable.METHOD_COLOR[item.method ? item.method.toLowerCase() : 'get'];
      return (
        <Option title={item.title} value={item._id + ''} path={item.path} key={item._id}>
          {item.title}{' '}
          <Tag
            style={{ color: methodColor ? methodColor.color : '#cfefdf', backgroundColor: methodColor ? methodColor.bac : '#00a854', border: 'unset' }}
          >
            {item.method}
          </Tag>
        </Option>
      );
    });

    children.unshift(
      <Option value="" key="all">
        选择全部
      </Option>
    );

    if (data && data.length) {
      data = data.map((item, i) => {
        let interfaceDiff = false;
        // 去掉了 && item.data.interface_id
        if (item.data && typeof item.data === 'object') {
          interfaceDiff = true;
        }
        return (
          <Timeline.Item
            dot={
              <Link to={`/user/profile/${item.uid}`}>
                <Avatar src={`/api/user/avatar?uid=${item.uid}`} />
              </Link>
            }
            key={i}
          >
            <div className="logMesHeade">
              <span className="logoTimeago">{timeago(item.add_time)}</span>
              {/*<span className="logusername"><Link to={`/user/profile/${item.uid}`}><Icon type="user" />{item.username}</Link></span>*/}
              <span className="logtype">{logType[item.type]}动态</span>
              <span className="logtime">{formatTime(item.add_time)}</span>
            </div>
            <span className="logcontent" dangerouslySetInnerHTML={{ __html: item.content }} />
            <div style={{ padding: '10px 0 0 10px' }}>
              {interfaceDiff && <Button onClick={() => this.openDiff(item.data)}>改动详情</Button>}
            </div>
          </Timeline.Item>
        );
      });
    } else {
      data = '';
    }
    let pending =
      this.props.newsData.total <= this.props.curpage ? (
        <a className="logbidden">以上为全部内容</a>
      ) : (
        <a className="loggetMore" onClick={this.getMore.bind(this)}>
          查看更多
        </a>
      );
    if (this.state.loading) {
      pending = <Spin />;
    }
    let diffView = showDiffMsg(jsondiffpatch, formattersHtml, curDiffData);

    return (
      <section className="news-timeline">
        <Modal
          style={{ minWidth: '800px' }}
          title="Api 改动日志"
          visible={this.state.visible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <i>注： 绿色代表新增内容，红色代表删除内容</i>
          <div className="project-interface-change-content">
            {diffView.map((item, index) => {
              return (
                <AddDiffView
                  className="item-content"
                  title={item.title}
                  key={index}
                  content={item.content}
                />
              );
            })}
            {diffView.length === 0 && <ErrMsg type="noChange" />}
          </div>
        </Modal>
        {this.props.type === 'project' && (
          <Row className="news-search">
            <Col span="3">选择查询的 Api：</Col>
            <Col span="10">
              <AutoComplete
                onSelect={this.handleSelectApi}
                style={{ width: '100%' }}
                placeholder="Select Api"
                optionLabelProp="title"
                filterOption={(inputValue, options) => {
                  if (options.props.value == '') return true;
                  if (
                    options.props.path.indexOf(inputValue) !== -1 ||
                    options.props.title.indexOf(inputValue) !== -1
                  ) {
                    return true;
                  }
                  return false;
                }}
              >
                {/* {children} */}
                <OptGroup label="other">
                  <Option value="wiki" path="" title="wiki">
                    wiki
                  </Option>
                </OptGroup>
                <OptGroup label="api">{children}</OptGroup>
              </AutoComplete>
            </Col>
          </Row>
        )}
        {data ? (
          <Timeline className="news-content" pending={pending}>
            {data}
          </Timeline>
        ) : (
          <ErrMsg type="noData" />
        )}
      </section>
    );
  }

ParticipantsDetails = props => {
	const [info, setInfo] = useState(null);
	const [eventsData, setEventsData] = useState([]);
	const [isLoading, setIsLoading] = useState(false);

	useEffect(() => {
		(async () => {
			setIsLoading(true);
			try {
				const params = { pid: props.participantId };
				const { data } = await getParticipantsDetailService(params);

				setInfo(data.profileData);
				setEventsData(attendanceCalc(data.events));
				setIsLoading(false);
			} catch (err) {
				_notification("warning", "Error", err.message);
			}
		})();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const attendanceCalc = events => {
		if (events) {
			events.forEach(event => {
				let start = new Date(event.details.startDate);
				let end = new Date(event.details.endDate);
				let data = [];
				let dayAttend = [];
				dayAttend = event.attendance.daysAttended.map(d => {
					return d.split("T")[0];
				});

				let status;
				for (let d = start; d <= end; d.setDate(d.getDate() + 1)) {
					if (
						dayAttend.includes(
							moment(new Date(d)).format("YYYY-MM-DD")
						)
					) {
						status = "Present";
					} else if (
						!dayAttend.includes(
							moment(new Date(d)).format("YYYY-MM-DD")
						) &&
						moment(new Date(d)).format("YYYY-MM-DD") <
							moment(Date.now()).format("YYYY-MM-DD")
					) {
						status = "Absent";
					} else if (
						!dayAttend.includes(
							moment(new Date(d)).format("YYYY-MM-DD")
						)
					) {
						status = "Pending";
					}
					data.push({
						status,
						date: moment(new Date(d)).format("YYYY-MM-DD")
					});
				}
				event.attendance.dayWiseAttendance = data;
			});
			return events;
		}
	};

	return (
		<>
			<Skeleton avatar loading={isLoading} active>
				{info ? (
					<Card loading={isLoading}>
						<Card.Meta
							avatar={
								<Avatar src="https://avatars.dicebear.com/v2/identicon/12324.svg" />
							}
							title={`${info.name} (${info.email})`}
							description={
								<>
									<PhoneOutlined /> {info.phone}{" "}
									<InfoCircleOutlined /> {info.branch},{" "}
									{info.year}
								</>
							}
						/>
					</Card>
				) : null}
				<br />
				<br />
				<h3>Events Information</h3>
				<br />
				<Timeline>
					{eventsData.length !== 0 ? (
						eventsData.map((event, id) => (
							<Timeline.Item
								key={id}
								color={
									event.status === "not attended"
										? "red"
										: "green"
								}
							>
								<p>
									<span style={{ fontWeight: "700" }}>
										{event.details.title}
									</span>{" "}
									<Tag>{event.status.toUpperCase()}</Tag>
									<Tag
										color={
											event.isRsvpAccepted
												? "green"
												: "red"
										}
									>
										{event.isRsvpAccepted
											? "RSVP: Accepted"
											: "RSVP: Not Accepted"}
									</Tag>
								</p>
								<p>{event.details.description}</p>
								<p>
									{new Date(
										event.details.startDate
									).toDateString()}{" "}
									to{" "}
									{new Date(
										event.details.endDate
									).toDateString()}{" "}
									({event.details.venue})
								</p>
								<p style={{ fontWeight: "600" }}>Attendance</p>
								<div style={{ display: "flex" }}>
									{event.attendance.dayWiseAttendance &&
										event.attendance.dayWiseAttendance.map(
											(attendance, id) => {
												return (
													<Tag
														key={id}
														color={
															attendance.status ===
															"Pending"
																? "#108ee9"
																: attendance.status ===
																  "Present"
																? "#87d068"
																: "#f50"
														}
													>
														{moment(
															attendance.date
														).format("DD/MM/YYYY")}
														- {attendance.status}
													</Tag>
												);
											}
										)}
								</div>
							</Timeline.Item>
						))
					) : (
						<div>Not regeistered in any Event</div>
					)}
				</Timeline>
			</Skeleton>
		</>
	);
}

// displays a timeline for scaffold-eth usage

export default function TimelineDisplay(props) {
  return (
    <Timeline mode="right">
      <Timeline.Item dot="?">
        <Text delete>
          Clone and Install from the{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://github.com/austintgriffith/scaffold-eth">
            github repo
          </a>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="⚛️">
        <Text delete>
          Start your frontend app with: <Text strong>yarn start</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="⛓">
        <Text delete={props.chainIsUp}>
          Start your local blockchain with: <Text strong>yarn run chain</Text> (and refresh)
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text delete={props.hasOwner}>
          Compile and deploy your smart contract: <Text strong>yarn run deploy</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text delete={props.isNotSmoort}>
          Fix error in <Text code>SmartContractWallet.sol</Text> then: <Text strong>yarn run deploy</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot={<SendOutlined style={{ fontSize: "16px" }} />} color={props.hasEther ? "green" : "blue"}>
        <Text delete={props.hasEther}>
          Send test ether to your{" "}
          <Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address using
          (bottom left) faucet
        </Text>
      </Timeline.Item>

      <Timeline.Item
        dot={<DownloadOutlined style={{ fontSize: "16px" }} />}
        color={props.contractHasEther ? "green" : "blue"}
      >
        <Text delete={props.contractHasEther}>
          Deposit some funds into your{" "}
          <Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
          smart contract wallet
        </Text>
      </Timeline.Item>

      <Timeline.Item
        dot={<EditOutlined style={{ fontSize: "16px" }} />}
        color={props.amOwnerOfContract ? "green" : "blue"}
      >
        <Text delete={props.amOwnerOfContract}>
          Set <b>owner</b> of your{" "}
          <Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
          smart contract wallet to your{" "}
          <Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="☢️">
        <Text>
          Yikes, anyone can take ownership of <Text code>SmartContractWallet.sol</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text>
          Test your contract with <Text code>buidler/test/myTest.js</Text> then:
          <Text strong>yarn run test</Text>
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text>
          Build something awesome with ? <a href="https://github.com/austintgriffith/scaffold-eth">scaffold-eth</a> and{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/austingriffith">
            @ me
          </a>
          !
        </Text>
      </Timeline.Item>

      <Timeline.Item dot="?">
        <Text>
          Read more about{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://ethereum.org/developers">
            Ethereum
          </a>
          ,{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://solidity.readthedocs.io/en/develop/contracts.html">
            Solidity
          </a>
          , and{" "}
          <a target="_blank" rel="noopener noreferrer" href="https://buidler.dev/tutorial">
            Buidler
          </a>
        </Text>
      </Timeline.Item>
    </Timeline>
  );
}