antd#List JavaScript Examples

AccountHistory = () => {
  return (
    <div className={styles.accountHistory}>
      <div style={{height: '50px',fontSize: '16px', color: '#333',lineHeight: '50px', paddingLeft: '10px', borderBottom: '1px solid #f0f0f0'}}>
        交易记录
      </div>
      <div style={{height: '290px'}}>
        <List
          bordered
          dataSource={data}
          renderItem={(item,index) => (
            <List.Item>
              <Typography.Text mark>{index%2 ===0 ? '转入': '转出'}</Typography.Text> {item}
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}

TodoListUI = (props) => {
  return (
    <div style={{ margin: '10px' }}>
      <div>
        <Input
          placeholder={props.inputValue}
          style={{ width: '250px', marginRight: '10px' }}
          onChange={props.changeInputValue}
          value={props.inputValue}
        />
        <Button
          type="primary"
          onClick={props.clickBtn}
        >增加</Button>
      </div>
      <div style={{ margin: '10px', width: '300px' }}>
        <List
          bordered
          dataSource={props.list}
          renderItem={(item, index) => (<List.Item onClick={() => { props.deleteItem(index) }}>{item}</List.Item>)}
        ></List>
      </div>
    </div>
  );
}

ListItem = styled(List.Item)`
  background: ${(props) => props.theme.background}!important;
  border-top: none !important;
  margin-bottom: 8px !important;
  height: 60px !important;
  border-radius: 4px;
  cursor: pointer;
  border-left: 5px solid transparent !important;
  transition: 0.75s !important;
  &:hover {
    border-left-color: ${(props) => props.theme.primary}!important;
  }
`

SupportListModal = ({ decimals, symbol, supportList, activeSupportValue, onCancel, fund_aa }) => {
  const { t } = useTranslation();
  return (
    <Modal
      visible={activeSupportValue}
      title={t("modals.supportList.title", "Supporters")}
      footer={<Button type="primary" onClick={onCancel}>{t("modals.common.close", "Close")}</Button>}
      onCancel={onCancel}>
      <List
        dataSource={supportList.sort((a, b) => b.support - a.support)}
        renderItem={(item) => (<List.Item.Meta
          style={{ marginBottom: 10 }}
          title={item.address}
          description={<>{item.support / 10 ** decimals} {symbol || (fund_aa ? "T_SF" : "T1")}</>} />)}
      />
    </Modal>
  )
}

render() {
    const { data, style = {} } = this.props;
    const { list, pagination } = data;
    return (
      <>
        <Panel title="" style={{ ...style }}>
          <List
            dataSource={list}
            style={{ marginLeft: '15px' }}
            pagination={{
              pageSize: pagination.pageSize,
              current: pagination.current,
              onChange: this.onChange,
              total: pagination.total,
            }}
            renderItem={(item) => {
              return (
                <List.Item className={styles.listItem}>
                  <div style={{ width: '100%' }}>
                    <EventView data={item} />
                  </div>
                </List.Item>
              );
            }}
          />
        </Panel>
      </>
    );
  }

render() {
    const {
      list: { list },
    } = this.props;
    return (
      <List
        className={stylesProjects.coverCardList}
        rowKey="id"
        grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
        dataSource={list}
        renderItem={item => (
          <List.Item>
            <Card
              className={stylesProjects.card}
              hoverable
              cover={<img alt={item.title} src={item.cover} />}
            >
              <Card.Meta title={<a>{item.title}</a>} description={item.subDescription} />
              <div className={stylesProjects.cardItemContent}>
                <span>{moment(item.updatedAt).fromNow()}</span>
                <div className={stylesProjects.avatarList}>
                  <AvatarList size="mini">
                    {item.members.map(member => (
                      <AvatarList.Item
                        key={`${item.id}-avatar-${member.id}`}
                        src={member.avatar}
                        tips={member.name}
                      />
                    ))}
                  </AvatarList>
                </div>
              </div>
            </Card>
          </List.Item>
        )}
      />
    );
  }

LabelItem = observer(({ item, regions, regionStore }) => {
  const color = item.background;
  const vars = asVars({ color });

  const isHidden = Object.values(regions).reduce((acc, item) => acc && item.hidden, true);
  const count = Object.values(regions).length;

  return (
    <Block name="list-item" tag={List.Item} key={item.id} style={vars}>
      <Space spread>
        <Elem name="title">
          {!item.isNotLabel ? (
            <Label color={color} empty={item.isEmpty}>
              {item._value}
            </Label>
          ) : <>Not labeled</>}
          <Elem name="counter">
            {`${count} Region${(count === 0 || count > 1) ? "s" : ""}`}
          </Elem>
        </Elem>
        <Elem
          name="visibility"
          tag={Button}
          type="text"
          icon={isHidden ? <LsInvisible/> : <LsVisible/>}
          onClick={() => regionStore.setHiddenByLabel(!isHidden, item)}
          mod={{ hidden: isHidden }}
        />
      </Space>
    </Block>
  );
})

render() {
    
    return <div>
                {/* 示例列表 */}
                <List
                  header={<div>WebRTC示例</div>}
                  footer={<div>Footer</div>}
                  bordered
                  //数据源
                  dataSource={data}
                  //列表项
                  renderItem={item => (
                    <List.Item>
                      {/* 连接 */}
                      <Link to={item['path']}>{item['title']}</Link>
                    </List.Item>
                  )}
                />
            </div>
  }

render() {
    return (
      <Fragment>
        <List
          itemLayout="horizontal"
          dataSource={this.getData()}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta
                avatar={item.avatar}
                title={item.title}
                description={item.description}
              />
            </List.Item>
          )}
        />
      </Fragment>
    );
  }

Index = memo(function Index(props) {
  return (
    <>
     <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <List.Item.Meta
          avatar={
            <SvgIcon iconClass='logon' fontSize='30px' />
          }
          title='Ant-Simple-Pro'
          description='简洁，美观，快速上手，支持3大框架；Concise, beautiful, quick to get started, support 3 big frameworks'
        />
      </List.Item>
    )}
  />,
    </>
  )
})

ListItem = styled(List.Item)`
  background: ${(props) => props.theme.background}!important;
  border-top: none !important;
  margin-bottom: 8px !important;
  height: 60px !important;
  border-radius: 4px;
  cursor: pointer;
  border-left: 5px solid transparent !important;
  transition: 0.75s !important;
  &:hover {
    border-left-color: ${(props) => props.theme.primary}!important;
  }
`

ClassPicker = (props) => {

    const { classList, selectedResults, setSelectedResults } = props;

    if (!classList) {
        return null
    }

    return (
        <List
            bordered
            header={<h3 style={{textAlign: 'center'}}>Kat.</h3>}
            dataSource={classList}
            renderItem={(item) => {
                return (
                    <List.Item
                        className={[
                            'list-item',
                            item.className === selectedResults.value ? 'selected' : '']
                                .join(' ')}
                        onClick={() => setSelectedResults({type: 'class', value: item.className})}
                    >
                        {item.className}
                    </List.Item>
                )
            }}
            className={'list'}
        />
    )
}

StyledList = styled(List)`
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.2) 0em 0.0625em 0.1875em 0em,
    rgba(0, 0, 0, 0.14) 0em 0.0625em 0.0625em 0em,
    rgba(0, 0, 0, 0.12) 0em 0.125em 0.0625em -0.0625em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .ant-spin-nested-loading {
    width: 100%;
  }

  .ant-list-header {
    width: 100%;
    padding: 5px 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    button {
      font-size: 13px;
    }
  }

  .ant-list-items {
    max-height: 350px;
    overflow-y: auto;
  }

  ${media.tablet`
    min-height: 153px;
  `}
`

render() {
        let {announcements} = this.props;
        console.log(announcements);
        return (
            <div style={{margin: 10}}>
                <List
                    itemLayout={'vertical'}
                    size={'large'}
                    pagination={{pageSize: 5}}
                    dataSource={announcements}
                    renderItem={item => (
                        <List.Item
                            key={item._id}
                        >
                            <List.Item.Meta
                                avatar={<Avatar src={'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'} />}
                                title={<a href={item.href}>{item.subject}</a>}
                                description={"Created on "+new Date(item.created_on).toDateString()+" by Admin"}
                            />
                            {item.description}
                        </List.Item>
                    )}
                />
            </div>

        );
    }

storiesOf('antd/comment', module).add('list', () => 
  <List
    className="comment-list"
    header={`${data.length} replies`}
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <li>
        <Comment
          actions={item.actions}
          author={item.author}
          avatar={item.avatar}
          content={item.content}
          datetime={item.datetime}
        />
      </li>
    )}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Displaying a series of comments using the <code>antd</code> List Component.</p></>) } });

render() {
    return (
      <Fragment>
        <List
          itemLayout="horizontal"
          dataSource={this.getData()}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta
                avatar={item.avatar}
                title={item.title}
                description={item.description}
              />
            </List.Item>
          )}
        />
      </Fragment>
    );
  }

render() {
    return (

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

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

              </List.Item>
            )
          }}

        >

        </List>

      </Layout>


    );
  }

function InfoEvent(props) {

  const { evento } = props

  const dataEvent = [ 

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

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

StyledList = styled(List)`
    padding: 16px;
`

export default function NoticeList({
  data = [],
  onClick,
  onClear,
  title,
  locale,
  emptyText,
  emptyImage,
  onViewMore = null,
  showClear = true,
  showViewMore = false,
}) {
  if (data.length === 0) {
    return (
      <div className={styles.notFound}>
        {emptyImage ? <img src={emptyImage} alt="not found" /> : null}
        <div>{emptyText || locale.emptyText}</div>
      </div>
    );
  }
  return (
    <div>
      <List className={styles.list}>
        {data.map((item, i) => {
          const itemCls = classNames(styles.item, {
            [styles.read]: item.read,
          });
          // eslint-disable-next-line no-nested-ternary
          const leftIcon = item.avatar ? (
            typeof item.avatar === 'string' ? (
              <Avatar className={styles.avatar} src={item.avatar} />
            ) : (
              <span className={styles.iconElement}>{item.avatar}</span>
            )
          ) : null;

          return (
            <List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
              <List.Item.Meta
                className={styles.meta}
                avatar={leftIcon}
                title={
                  <div className={styles.title}>
                    {item.title}
                    <div className={styles.extra}>{item.extra}</div>
                  </div>
                }
                description={
                  <div>
                    <div className={styles.description} title={item.description}>
                      {item.description}
                    </div>
                    <div className={styles.datetime}>{item.datetime}</div>
                  </div>
                }
              />
            </List.Item>
          );
        })}
      </List>
      <div className={styles.bottomBar}>
        {showClear ? (
          <div onClick={onClear}>
            {locale.clear} {locale[title] || title}
          </div>
        ) : null}
        {showViewMore ? <div onClick={onViewMore}>{locale.viewMore}</div> : null}
      </div>
    </div>
  );
}

TransactionsTable = ({ source, type }) => {
  const active = useSelector((state) => state.active);
  const { t } = useTranslation();
  const { params, bonded_state, fund_aa, address } = active;
  const { activeWallet } = useSelector((state) => state.settings);
  const actualParams = getParams(params, bonded_state);

  const getUserName = (adr) => {
    if (fund_aa && (adr === fund_aa)) {
      return "Stability fund"
    } else if (adr === address) {
      return "Curve AA"
    } else if (("decision_engine_aa" in bonded_state) && bonded_state.decision_engine_aa === adr) {
      return "Decision Engine"
    } else if (config.FACTORY_AAS.includes(adr)) {
      return "Factory AA"
    } else {
      return undefined;
    }
  }

  return <div className={styles.wrap}>
    <div className={styles.head + " " + styles.row}>
      <div className={styles.status}><Text strong>{t("trade.tabs.transactions.head.status", "Status")}</Text></div>
      <div className={styles.event}><Text strong>{t("trade.tabs.transactions.head.event", "Event")}</Text></div>
      <div className={styles.input}><Text strong>{t("trade.tabs.transactions.head.input", "Input")}</Text></div>
      <div className={styles.output}><Text strong>{t("trade.tabs.transactions.head.output", "Output")}</Text></div>
      <div className={styles.user}><Text strong>{t("trade.tabs.transactions.head.user", "User")}</Text></div>
      <div className={styles.time}><Text strong>{t("trade.tabs.transactions.head.time", "Time")}</Text></div>
    </div>

    <List dataSource={source.sort(customSort)} className={styles.list} renderItem={(item) => {
      const ts = moment.unix(item.timestamp).format("DD-MM-YYYY HH:mm");

      const [event, input, inputCurrency, output, user] = eventIdentification(type, item, actualParams, activeWallet, active);

      return <a href={`https://${config.TESTNET ? "testnet" : ""
        }explorer.obyte.org/#${item.unit}`}
        target="_blank"
        rel="noopener" className={styles.row}>
        <div className={styles.status}>
          <div className={styles.dotWrap}>
            <Dot status={item.bounced ? "error" : (item.isStable ? "stable" : "not_stable")} tooltip={item.bounced ? t("trade.tabs.transactions.error", "Error") : (item.isStable ? t("trade.tabs.transactions.stable", "Stable") : t("trade.tabs.transactions.not_stable", "Not stable"))} />
          </div>
          <div className={styles.statusInfo}><span className={styles.label}>{t("trade.tabs.transactions.head.status", "Status")}:</span><Text type="secondary">{item.bounced ? <span style={{ color: "#F4222D" }}>Error</span> : (item.isStable ? <span style={{ color: "#52C51A" }}>Stable</span> : <span style={{ color: "#FBAD13" }}>Not stable</span>)}</Text></div>
        </div>
        <div className={styles.event}><span className={styles.label}>{t("trade.tabs.transactions.head.event", "Event")}:</span><Text type="secondary">{event}</Text></div>
        <div className={styles.input}><span className={styles.label}>{t("trade.tabs.transactions.head.input", "Input")}:</span><Text type="secondary">{(!item.bounced && input) || "-"} {(!item.bounced && input && inputCurrency) || ""}</Text></div>
        <div className={styles.output}><span className={styles.label}>{t("trade.tabs.transactions.output", "Output")}:</span> <Text type="secondary">{(!item.bounced && output) || "-"}</Text></div>
        <div className={styles.user}><span className={styles.label}>{t("trade.tabs.transactions.head.user", "User")}:</span><Text type="secondary">{<Tooltip title={user || item.trigger_address}>
          {getUserName(user || item.trigger_address) || (user || item.trigger_address).slice(0, 14) + "..."}
        </Tooltip>}</Text></div>
        <div className={styles.time}><span className={styles.label}>{t("trade.tabs.transactions.head.time", "Time")}:</span><Text type="secondary">{ts}</Text></div>
      </a>
    }} />

  </div>
}

OrginzationSquare = props => {
  const { dispatch, orgList } = props;
  useEffect(() => {
    dispatch({
      type: 'orginzation/getOrganizationList',
    });
    return () => {
      //
    };
  }, []);

  const apply = item => {
    dispatch({
      type: 'orginzation/postApplication',
      payload: {
        org_id: item.id,
        to_id: item.user_id,
        apply_status: 'PENDING',
      },
    }).then((res) => {
      dispatch({
        type: 'orginzation/getOrganizationList',
      });
    });
  };

  const RenderIcon = ({ item }) => {
    const status = item.user_status;
    if (status === 'true') {
      return <span>已在组织</span>;
    } else if (item.apply_status == null) {
      return <span onClick={() => apply(item)}>申请加入</span>;
    } else {
      return <span>{APPLICATION_TYPE[item.apply_status]}</span>;
    }
  };

  return (
    <div>
      <div>
        <List
          itemLayout="vertical"
          size="large"
          pagination={{
            pageSize: 2,
          }}
          dataSource={orgList}
          renderItem={item => (
            <List.Item
              key={item.org_name}
              actions={[<RenderIcon item={item} />]}
              extra={
                <img
                  width={272}
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
              }
            >
              <List.Item.Meta
                title={<a>{item.org_name}</a>}
                description={item.org_description}
              />
            </List.Item>
          )}
        />
      </div>
    </div>
  );
}

function HistoryTab(props) {
  const { history, dispatch, currentAppName, historyLoading, historyPagination } = props;
  let hasMore = false;
  let blank = !(history && history.length);

  if (historyPagination) {
    const { current, total, pageSize } = historyPagination;
    if ((current + 1) * pageSize < total) hasMore = true;
  }

  const loadHistory = (page = 0, pageSize = 20) => {
    dispatch({
      type: 'HttpDebug/loadHistory',
      payload: {
        app_name: currentAppName,
        page_size: pageSize,
        page: page,
      },
    });
  };

  useEffect(() => {
    loadHistory();
  }, [currentAppName]);

  return (
    <ReactScrollBar style={{ height: '730px' }}>
      <List loading={historyLoading} split={false}>
        {(history || []).map((item, idx) => {
          return (
            <List.Item className={styles.historyItem}>
              <RequestItem key={idx} id={item.id} method={item.method} title={item.url} />
            </List.Item>
          );
        })}
      </List>

      {blank && <Empty />}

      {hasMore && (
        <div style={{ textAlign: 'center', padding: '10px' }}>
          <Button
            onClick={() => {
              loadHistory(historyPagination.current + 1);
            }}
          >
            加载更多
          </Button>
        </div>
      )}
    </ReactScrollBar>
  );
}

render() {
        return (
            <>
                <Spin spinning={this.state.loading} tip='正在获取指令内容...'>
                    <div className="page-search">
                        <Search ref={this.commandRef} placeholder="请输入指令" onSearch={value => {
                            for (let i = 0; i < this.state.webSockets.length; i++) {
                                let ws = this.state.webSockets[i]['ws'];
                                if (ws.readyState === WebSocket.OPEN) {
                                    ws.send(new Message(Message.Data, value + String.fromCharCode(13)).toString());
                                }
                            }
                            this.commandRef.current.setValue('');
                        }} enterButton='执行'/>
                    </div>

                    <div className="page-card">
                        <List
                            grid={{gutter: 16, column: 2}}
                            dataSource={this.state.assets}
                            renderItem={item => (
                                <List.Item>
                                    <Card title={item.name}
                                          className={['console-card',this.state.active === item['id'] ? 'command-active' : '']}
                                          onClick={() => {
                                              if (this.state.active === item['id']) {
                                                  this.setState({
                                                      active: undefined
                                                  })
                                              } else {
                                                  this.setState({
                                                      active: item['id']
                                                  })
                                              }
                                          }}
                                    >
                                        <BatchCommandTerm assetId={item.id}
                                                          command={this.state.command}
                                                          appendWebsocket={this.appendWebsocket}/>
                                    </Card>
                                </List.Item>
                            )}
                        />
                    </div>
                </Spin>

            </>
        );
    }

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <List
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={dataList}
            renderItem={item => (
              <List.Item>
                <Typography.Text code>[#]</Typography.Text> {item}
              </List.Item>
            )}
          />
        </div>
        <h5 className="mb-3">
          <strong>With Avatar</strong>
        </h5>
        <div className="mb-5">
          <List
            itemLayout="horizontal"
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                  }
                  title={<a href="https://ant.design">{item.title}</a>}
                  description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                />
              </List.Item>
            )}
          />
        </div>
      </div>
    )
  }

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

    const IconText = ({ type, text }) => (
      <span>
        <Icon
          type={type}
          style={{
            marginRight: 8,
          }}
        />
        {text}
      </span>
    );

    return (
      <List
        size="large"
        className={styles.articleList}
        rowKey="id"
        itemLayout="vertical"
        dataSource={list}
        renderItem={item => (
          <List.Item
            key={item.id}
            actions={[
              <IconText key="star" type="star-o" text={item.star} />,
              <IconText key="like" type="like-o" text={item.like} />,
              <IconText key="message" type="message" text={item.message} />,
            ]}
          >
            <List.Item.Meta
              title={
                <a className={styles.listItemMetaTitle} href={item.href}>
                  {item.title}
                </a>
              }
              description={
                <span>
                  <Tag>Ant Design</Tag>
                  <Tag>设计语言</Tag>
                  <Tag>蚂蚁金服</Tag>
                </span>
              }
            />
            <ArticleListContent data={item} />
          </List.Item>
        )}
      />
    );
  }

export default function NoticeList({
  data = [],
  onClick,
  onClear,
  toPage,
  title,
  locale,
  emptyText,
  emptyImage,
  showClear = true,
}) {
  if (data.length === 0) {
    return (
      <div className={styles.notFound}>
        {emptyImage ? <img src={emptyImage} alt="not found" /> : null}
        <div>{emptyText || locale.emptyText}</div>
      </div>
    );
  }
  return (
    <div>
      <List className={styles.list}>
        {data.map((item, i) => {
          const itemCls = classNames(styles.item, {
            [styles.read]: item.read,
          });
          // eslint-disable-next-line no-nested-ternary
          const leftIcon = item.user_info ? (
            typeof item.user_info.avatar_url === 'string' ? (
              <Avatar className={styles.avatar} src={item.user_info.avatar_url} />
            ) : (
              item.avatar
            )
          ) : null;

          return (
            <List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
              <List.Item.Meta
                className={styles.meta}
                avatar={<span className={styles.iconElement}>{leftIcon}</span>}
                title={
                  <div className={styles.title}>
                    {item.goods_backup
                      ? <Fragment>
                          {item.goods_backup.goods_name}
                          <div className={styles.extra}>￥ {item.goods_backup.price * item.goods_backup.num}</div>
                        </Fragment>
                      : <Fragment>
                          {item.content}
                        </Fragment>
                    }
                  </div>
                }
                description={
                  <div>
                    <div className={styles.description} title={item.description}>
                      {item.goods_backup ? item.goods_backup.gtype_name : null}
                    </div>
                    <div className={styles.datetime}>{moment(item.add_time).format('YYYY-MM-DD kk:mm')}</div>
                  </div>
                }
              />
            </List.Item>
          );
        })}
      </List>

      <div>
        {showClear ? (
          <div className={styles.clear} style={{borderRight:'1px solid #F0F2F5'}} onClick={onClear}>
            {locale.clear}
          </div>
        ) : null}
        <div className={styles.clear} style={showClear ? {} : {width:'100%'} } onClick={toPage}>
        <a>查看全部</a>
        </div>
      </div>
    </div>
  );
}

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

    const title = (
      <div className={styles.title + " " + styles.titlespace}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <h3>Annotations</h3>
        </div>

        <div style={{ marginRight: "1px" }}>
          {store.hasInterface("annotations:add-new") && (
            <Tooltip placement="topLeft" title="Create a new annotation">
              <Button
                size="small"
                onClick={ev => {
                  ev.preventDefault();
                  const c = store.annotationStore.createAnnotation();

                  store.annotationStore.selectAnnotation(c.id);
                  // c.list.selectAnnotation(c);
                }}
              >
                <PlusOutlined />
              </Button>
            </Tooltip>
          )}
          &nbsp;
          <Tooltip placement="topLeft" title="View all annotations">
            <Button
              size="small"
              type={store.annotationStore.viewingAllAnnotations ? "primary" : ""}
              onClick={ev => {
                ev.preventDefault();
                store.annotationStore.toggleViewingAllAnnotations();
              }}
            >
              <WindowsOutlined />
            </Button>
          </Tooltip>
        </div>
      </div>
    );

    const content = store.annotationStore.annotations.map(c => <Annotation key={c.id} item={c} store={store} />);

    return (
      <Card title={title} size="small" bodyStyle={{ padding: "0", paddingTop: "1px" }}>
        <List>{store.annotationStore.annotations ? content : <p>No annotations submitted yet</p>}</List>
      </Card>
    );
  }

render() {
    return (
      <div className="main-layout">
        {/* 判断打开状态 */}
        {!this.state.isLogin ?
          <div className="login-container">
            <h2>一对一视频通话案例</h2>
            <P2PLogin loginHandler={this.loginHandler}/>
          </div>
          :
          !this.state.isVideoCall ?
          <List bordered header={"一对一视频通话案例"} footer={"终端列表(Web/Android/iOS)"}>
            {
              //迭代所有的用户
              this.state.users.map((user, i) => {
                return (
                  <List.Item key={user.id}>
                    <div className="list-item">
                      {user.name + user.id}
                      {user.id !== this.state.userId &&
                        <div>
                          <Button type="link"  onClick={() => this.handleStartCall(user.id, 'video')}>视频</Button>
                          <Button type="link"  onClick={() => this.handleStartCall(user.id, 'screen')}>共享桌面</Button>
                        </div>
                      }
                    </div>
                  </List.Item>
                )
              })
            }
          </List>
          :
          <div>
            <div>
              {
                //渲染本地视频
                this.state.remoteStream != null ? <RemoteVideoView stream={this.state.remoteStream} id={'remoteview'} /> : null
              }
              {
                //渲染远端视频
                this.state.localStream != null ? <LocalVideoView stream={this.state.localStream} muted={this.state.videoMuted} id={'localview'} /> : null
              }
            </div>
            <div className="btn-tools">
              {/* 打开/关闭视频 */}
              <Button className="button" ghost size="large" shape="circle"
                icon={this.state.videoMuted ? <VideocamOffIcon /> : <VideoIcon />}
                onClick={this.onVideoOnClickHandler}
              >
              </Button>
              {/* 挂断 */}
              <Button className="button" ghost size="large" shape="circle"
                icon={<HangupIcon />}
                onClick={this.handleUp}
              >
              </Button>
              {/* 打开/关闭音频 */}
              <Button ghost size="large" shape="circle"
                icon={this.state.audioMuted ? <MicrophoneOffIcon /> : <MicrophoneIcon />}
                onClick={this.onAudioClickHandler}
              >
              </Button>
            </div>
          </div>
        }
      </div>
    );
  }