antd#Comment TypeScript Examples

The following examples show how to use antd#Comment. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CurrentPage.tsx    From posthog-foss with MIT License 6 votes vote down vote up 
export function CurrentPage(): JSX.Element {
    const { href } = useValues(currentPageLogic)
    const [showIcon, setShowIcon] = useState(true)

    return (
        <div className="current-page">
            <Comment
                avatar={
                    showIcon ? (
                        <img
                            src={getFavicon()}
                            onError={() => setShowIcon(false)}
                            width={32}
                            height={32}
                            alt="FavIcon"
                        />
                    ) : (
                        <GlobalOutlined />
                    )
                }
                content={
                    <div>
                        <div>{window.document.title}</div>
                        <div className="small-url-link">
                            <a href={href} target="_blank" rel="noreferrer noopener">
                                {addWBRToUrl(href)}
                            </a>
                        </div>
                    </div>
                }
            />
        </div>
    )
}
Example #2
Source File: index.tsx    From amiya with MIT License 4 votes vote down vote up 
export default function Demo() {
  // 列表控制
  const listRef = useRef<any>()
  // 当前激活的 tab
  const [activeTab, setActiveTab] = useState<string>('')
  // 弹窗详情
  const [detail, setDetail] = useState<AnyKeyProps>({
    visible: false,
    data: {}
  })

  /**
   * 切换 tab 事件
   * @param value 当前 tab 值
   */
  const handleTabChange = (value: string) => {
    setActiveTab(value)
    listRef.current.reset()
  }

  /**
   * 查看详情
   * @param record 当前行数据
   */
  const goDetail = (record: Record) => {
    detailApi({ id: record.id }).then(res => {
      setDetail({
        visible: true,
        data: res.data
      })
    })
  }

  return (
    <div className="cnode-list">
      {/* tab 区域 */}
      <Tabs activeKey={activeTab} onChange={handleTabChange} type="card">
        {options.map(option => (
          <Tabs.TabPane tab={option.label} key={option.value} />
        ))}
      </Tabs>
      {/* 列表区域 */}
      <AySearchList
        api={listApi}
        extraVisible={false}
        listExtend={{ itemLayout: 'horizontal' }}
        extendSearchParams={{ tab: activeTab }}
        listHeader={<div style={{ height: 16 }}>{/* 占位空间 */}</div>}
        ref={listRef}
        onParamsChange={() => window.scrollTo({ behavior: 'smooth', top: 0 })}
        renderItem={(record: Record) => {
          return (
            <List.Item
              key={record.id}
              actions={[
                <AyAction icon={<MessageOutlined />} sub tooltip="最后回复时间">
                  <span>{moment(record.last_reply_at).fromNow()}</span>
                </AyAction>,
                <AyAction icon={<MessageOutlined />} sub tooltip="回复数">
                  <span>{record.reply_count}</span>
                </AyAction>,
                <AyAction icon={<EyeOutlined />} sub tooltip="阅读数">
                  <span>{record.visit_count}</span>
                </AyAction>
              ]}
            >
              <List.Item.Meta
                avatar={<Avatar src={record.author.avatar_url} />}
                title={
                  <Space>
                    <a onClick={() => goDetail(record)}>{record.title}</a>
                    <span>
                      {record.good && <Tag color="green">精品</Tag>}
                      {record.top && <Tag color="blue">置顶</Tag>}
                    </span>
                  </Space>
                }
                description={moment(record.create_at).fromNow()}
              />
            </List.Item>
          )
        }}
      />
      {/* 弹窗详情 */}
      <AyDialog
        drawer
        width={800}
        footer={false}
        destroyOnClose
        visible={detail.visible}
        setVisible={() => setDetail({ ...detail, visible: false })}
        title="文章详情"
      >
        <div dangerouslySetInnerHTML={{ __html: detail.data.content }}></div>
        <List
          itemLayout="horizontal"
          header={`${detail?.data?.replies?.length || 0} 条回复`}
          dataSource={detail?.data?.replies || []}
          renderItem={(comment: Record) => (
            <Comment
              key={comment.id}
              author={comment.author.loginname}
              avatar={<Avatar src={comment.author.avatar_url} alt={comment.author.avatar_url} />}
              content={<div dangerouslySetInnerHTML={{ __html: comment.content }}></div>}
              datetime={
                <Tooltip title={moment(comment.create_at).format('YYYY-MM-DD HH:mm:ss')}>
                  <span>{moment(comment.create_at).fromNow()}</span>
                </Tooltip>
              }
            />
          )}
        />
      </AyDialog>
    </div>
  )
}