@ant-design/icons#CloseCircleTwoTone TypeScript Examples

DeleteButton = (props: any) => {
  const { theme } = React.useContext(PreferencesContext);
  const [isHovered, setIsHovered] = React.useState(false);

  return (
    <div
      {...props}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ marginLeft: "auto", cursor: "pointer" }}
    >
      {isHovered ? (
        theme === Theme.DARK ? (
          <CloseCircleFilled style={{ color: Colors.SEND_DARK }} />
        ) : (
          <CloseCircleTwoTone twoToneColor={TwoToneColors.SEND} />
        )
      ) : theme === Theme.DARK ? (
        <CloseCircleFilled style={{ color: "gray" }} />
      ) : (
        <CloseCircleOutlined style={{ color: "rgba(0, 0, 0, 0.45)" }} />
      )}
    </div>
  );
}

RecentTransactions: React.FC = () => {
  const { t } = useTranslation();
  const { theme, disableLiveTransactions } = React.useContext(
    PreferencesContext,
  );

  const { recentTransactions, isConnected, isError } = useSockets();

  return (
    <Card
      size="small"
      title={t("pages.home.recentTransactions")}
      extra={<RecentTransactionsPreferences />}
    >
      <div
        className="sticky"
        style={{
          paddingBottom: "6px",
          zIndex: 1,
          background: theme === Theme.DARK ? "#1e1e1e" : "#fff",
        }}
      >
        <ConfirmationsPerSecond />
        {disableLiveTransactions ? (
          <div style={{ textAlign: "center" }}>
            {theme === Theme.DARK ? (
              <CloseCircleFilled style={{ color: TwoToneColors.SEND_DARK }} />
            ) : (
              <CloseCircleTwoTone twoToneColor={TwoToneColors.SEND} />
            )}
            <Text style={{ marginLeft: "8px" }} id="live-transactions-disabled">
              {t("pages.home.liveUpdatesDisabled")}
            </Text>
          </div>
        ) : null}
        {isConnected &&
        !disableLiveTransactions &&
        !recentTransactions.length ? (
          <div style={{ textAlign: "center" }}>
            <SyncOutlined spin />
            <Text style={{ marginLeft: "8px" }}>
              {t("pages.home.waitingForTransactions")} ...
            </Text>
          </div>
        ) : null}
        {!isConnected && !disableLiveTransactions ? (
          <div style={{ textAlign: "center" }}>
            <SyncOutlined spin />
            <Text style={{ marginLeft: "8px" }}>
              {isError
                ? t("pages.home.reconnectingToBlockchain")
                : t("pages.home.connectingToBlockchain")}
              ...
            </Text>
          </div>
        ) : null}
      </div>
      <div
        className="gradient-container"
        style={{
          maxHeight: "1260px",
          overflow: "hidden",
        }}
      >
        {recentTransactions.length ? (
          <>
            <Timeline recentTransactions={recentTransactions} />
            <div className="bottom-gradient" />
          </>
        ) : null}
      </div>
    </Card>
  );
}

Demo = () => {
  const [loading, setLoading] = React.useState(false);
  const [filters, setFilters] = React.useState<{ key: string; values: unknown[] }[] | undefined>(void 0);
  const [pageNum, setPageNum] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(10);
  const [dataBase, setDataBase] = React.useState(mockData);
  const [totalNum, setTotalNum] = React.useState(dataBase.length);
  const [dataSource, setDataSource] = React.useState(dataBase);
  const [schema, setSchema] = React.useState(initSchema);
  const [editVisible, setEditVisible] = React.useState(false);
  const [allSelected, setAllSelected] = React.useState(false);
  const dripTable: React.MutableRefObject<DripTableInstance | null> = React.useRef(null);

  React.useEffect(
    () => {
      setDataBase(mockData);
    },
    [mockData],
  );

  React.useEffect(
    () => {
      const filteredDataSource = dataBase.filter(ds => !filters?.length || filters.some(f => f.values?.includes(ds[f.key])));
      setTotalNum(filteredDataSource.length);
      setDataSource(filteredDataSource.slice((pageNum - 1) * pageSize, Math.min(pageNum * pageSize, filteredDataSource.length)));
    },
    [dataBase, filters, pageSize, pageNum],
  );

  const fetchPageData = (nextFilters: Record<string, string[]>, nextPageSize: number, nextPageNum: number) => {
    if (loading) {
      return;
    }
    setTimeout(
      () => {
        setLoading(false);
        setFilters(Object.entries(nextFilters).map(([key, values]) => ({ key, values })));
        setPageSize(nextPageSize);
        setPageNum(nextPageNum);
      },
      500,
    );
    setLoading(true);
  };

  function selectAllRecord() {
    const tableInstance = dripTable.current;
    const allKeys = dataSource.map((rec, idx) => idx);
    if (tableInstance) {
      const selectedKeys = tableInstance.selectedRowKeys;
      if (selectedKeys.length < allKeys.length) {
        tableInstance.select(allKeys);
        setAllSelected(true);
      } else {
        tableInstance.select([]);
        setAllSelected(false);
      }
    }
  }

  return (
    <React.Fragment>
      <div style={{ padding: '0 0 30px', textAlign: 'left' }}>
        <Button style={{ marginRight: '5px' }} type="primary" onClick={() => { setEditVisible(!editVisible); }}>编辑</Button>
        <Button style={{ marginRight: '5px' }} type="primary" onClick={selectAllRecord}>
          { allSelected && '取消' }
          全选
        </Button>
      </div>
      <DripTable<SampleRecordType, {
        CustomColumnSchema: CustomColumnSchema;
        CustomComponentEvent: CustomComponentEvent;
        SubtableDataSourceKey: SubtableDataSourceKey;
      }>
        ref={dripTable}
        driver={DripTableDriverAntDesign}
        schema={schema}
        loading={loading}
        total={totalNum}
        dataSource={dataSource}
        components={{ custom: CustomComponents }}
        slots={{
          'header-slot-sample': React.memo((props) => {
            const [state, setState] = React.useState({ count: 0 });
            return (
              <div className={props.className} style={{ border: '1px solid #1890ff', borderRadius: '3px' }}>
                <Button type="primary" onClick={() => setState(st => ({ count: st.count + 1 }))}>Header Slot Sample</Button>
                <span style={{ padding: '0 8px', color: '#1890ff' }}>{ `Count: ${state.count}` }</span>
              </div>
            );
          }),
          default: props => <div>{ `未知插槽类型：${props.slotType}` }</div>,
        }}
        subtableTitle={(record, index, parent, subtable) => <div style={{ textAlign: 'center' }}>{ `“表格(id:${parent.id})”行“${record.name}”的子表 （${subtable.dataSource.length} 条）` }</div>}
        subtableFooter={(record, index, parent, subtable) => (
          subtable.id === 'sample-table-sub-level-1'
            ? (
              <div
                style={{ cursor: 'pointer', textAlign: 'center', userSelect: 'none' }}
                onClick={() => {
                  message.info(`加载更多“表格(id:${parent.id})”行“${record.name}”(${index})的子表数据，已有 ${subtable.dataSource.length} 条`);
                  console.log('expandable-footer-click', record, index, parent, subtable);
                }}
              >
                <CloudSyncOutlined />
                <span style={{ marginLeft: '5px' }}>加载更多</span>
              </div>
            )
            : void 0
        )}
        rowExpandable={(record, parent) => parent.id === 'sample-table' && record.id === 5}
        expandedRowRender={(record, index, parent) => (<div style={{ textAlign: 'center', margin: '20px 0' }}>{ `“表格(id:${parent.id})”行“${record.name}”的展开自定义渲染` }</div>)}
        onEvent={(event, record, index) => {
          if (event.type === 'drip-link-click') {
            const name = event.payload;
            message.info(`你点击了第${index + 1}行“${record.name} (ID: ${record.id})”的“${name}”事件按钮。`);
            console.log(name, record, index);
          } else if (event.type === 'custom') {
            message.info(`自定义事件“${event.name}”触发于行“${record.name} (ID: ${record.id})”的自定义组件。`);
            console.log(event, record, index);
          }
        }}
        onFilterChange={(...args) => { console.log('onFilterChange', ...args); }}
        onPageChange={(...args) => { console.log('onPageChange', ...args); }}
        onChange={(nextPagination, nextFilters) => {
          console.log('onChange', nextPagination, nextFilters);
          fetchPageData(nextFilters, nextPagination.pageSize ?? pageSize, nextPagination.current ?? pageNum);
        }}
        onSelectionChange={(selectedKeys, selectedRows) => {
          setAllSelected(selectedRows.length >= dataSource.length);
        }}
        onSearch={searchParams => console.log(searchParams)}
        onInsertButtonClick={event => console.log(event)}
      />
      <div className={styles['popup-wrapper']} style={{ height: editVisible ? '70vh' : '0' }} />
      <div className={styles['popup-layer']} style={{ height: editVisible ? '70%' : '0' }}>
        <div style={{ position: 'absolute', right: '10px', top: '8px', zIndex: 1 }}>
          <CloseCircleTwoTone style={{ fontSize: '24px' }} onClick={() => { setEditVisible(!editVisible); }} />
        </div>
        <div className={styles['popup-main']}>
          <Tabs className={styles['popup-tabs']} size="small">
            <Tabs.TabPane key="SCHEMA" tab="SCHEMA" className={styles['json-edit-tab']}>
              <JsonEditor
                value={schema}
                onChange={(d: typeof schema) => {
                  setSchema(d);
                  setPageSize(d.pagination ? d.pagination.pageSize || 0 : 10);
                }}
              />
            </Tabs.TabPane>
            <Tabs.TabPane key="DATA" tab="DATA" className={styles['json-edit-tab']}>
              <JsonEditor
                value={dataBase}
                onChange={(d: typeof dataBase) => { setDataBase(d); }}
              />
            </Tabs.TabPane>
          </Tabs>
        </div>
      </div>
    </React.Fragment>
  );
}

EditableTable = (props: Props & { store: GlobalStore }) => {
  const { noDataFeedBack } = useGlobalData();
  const [state, actions] = props.store;
  const store = { state, setState: actions };

  const hasRecord = !(!state.previewDataSource || state.previewDataSource.length <= 0);

  const previewComponentRender = (
    column: DripTableBuiltInColumnSchema | null,
    extraOptions?: {
      isCurrentColumn?: boolean;
      parentIndex?: number[];
      isChildren?: boolean;
    },
  ) => {
    const [libName, componentName] = column?.component?.includes('::') ? column.component.split('::') : ['', column?.component || ''];
    const DripTableComponent = libName ? props.customComponents?.[libName]?.[componentName] : builtInComponents[componentName];
    const record = state.previewDataSource?.[0] || {} as Record<string, unknown>;
    const value = column?.dataIndex ? get(record, column.dataIndex) : record;

    const isChecked = (currentCheckedIndex: number) => {
      const currentColumnPath = [...extraOptions?.parentIndex || [], currentCheckedIndex];
      const stateColumnPath = state.currentColumnPath || [];
      return extraOptions?.isCurrentColumn && currentColumnPath.join('.') === stateColumnPath.join('.');
    };

    // render group column and handler options.items
    if (column?.component === 'group') {
      const gutter = column.options.gutter ?? [0, 0];
      return (
        <div style={{ height: extraOptions?.isChildren ? '100%' : '120px', overflow: 'hidden' }}>
          <div
            className={extraOptions?.isChildren ? '' : styles['table-cell']}
            style={{ width: extraOptions?.isChildren ? '100%' : column?.width || 120 }}
          >
            { column.options.layout?.map((layout, index) => (
              <Row
                key={index}
                className={styles['row-margin']}
                style={{
                  flexFlow: column.options.wrap ? 'row wrap' : 'nowrap',
                  justifyContent: column.options.horizontalAlign,
                  width: 'calc(100% - 4px)',
                  height: 120 / column.options.layout.length - gutter[1],
                }}
                gutter={gutter}
                justify={column.options.horizontalAlign}
                wrap={column.options.wrap}
              >
                { Array.from({ length: layout }, (v, i) => i).map((col, i) => {
                  const currentCheckedIndex = column.options.layout.slice(0, index).reduce((sum, j) => sum + j, i);
                  return (
                    <Col
                      className={classnames(styles['linear-stripe'], isChecked(currentCheckedIndex) ? styles['checked-stripe'] : '')}
                      key={i}
                      style={{
                        width: (Number(column?.width) || 120) / layout - gutter[0],
                        height: '100%',
                        overflow: 'auto',
                      }}
                      onClick={(e) => {
                        e.stopPropagation();
                        if (!extraOptions?.isCurrentColumn) { return; }
                        state.currentColumnPath = isChecked(currentCheckedIndex)
                          ? []
                          : [...extraOptions?.parentIndex || [], currentCheckedIndex];
                        globalActions.updateColumnPath(store);
                      }}
                    >
                      { column.options.items[currentCheckedIndex]
                        ? previewComponentRender(column.options.items[currentCheckedIndex], {
                          isCurrentColumn: extraOptions?.isCurrentColumn,
                          parentIndex: [...extraOptions?.parentIndex || [], currentCheckedIndex],
                          isChildren: true,
                        })
                        : null }
                    </Col>
                  );
                }) }
              </Row>
            )) }
          </div>
        </div>
      );
    }

    // render normal column and preview component
    const componentPreviewCell = DripTableComponent
      ? (
        <DripTableComponent
          driver={props.driver || DripTableDriverAntDesign}
          value={value as unknown}
          data={record}
          schema={column}
          preview={{}}
        />
      )
      : <Alert type="error" message="未知组件" />;
    return extraOptions?.isChildren
      ? componentPreviewCell
      : (
        <div style={{ height: '120px', overflow: 'auto' }}>
          <div className={styles['table-cell']} style={{ width: column?.width || 120 }}>
            { componentPreviewCell }
          </div>
        </div>
      );
  };

  const renderTableCell = (col: DripTableColumn) => {
    const isCurrent = state.currentColumn && state.currentColumn.index === col.index;
    let width = String(col.width).trim() || '120';
    if ((/^[0-9]+$/gui).test(width)) {
      width += 'px';
    }
    return (
      <div
        style={{ width }}
        className={classnames(styles.column, { checked: isCurrent })}
        onClick={() => {
          if (col.key !== state.currentColumn?.key) {
            state.currentColumnPath = [];
          }
          state.currentColumn = isCurrent ? void 0 : col;
          globalActions.checkColumn(store);
        }}
      >
        <div className={styles['column-title']}>{ col.title }</div>
        { hasRecord
          ? previewComponentRender(col as DripTableBuiltInColumnSchema,
            {
              isCurrentColumn: isCurrent ?? false,
            })
          : null }
        { isCurrent && (
        <CloseCircleTwoTone
          className={styles['close-icon']}
          twoToneColor="#ff4d4f"
          onClick={() => {
            const index = state.columns.findIndex(item => item.key === state.currentColumn?.key);
            if (index > -1) {
              state.columns.splice(index, 1);
              for (let i = index; i < state.columns.length; i++) {
                state.columns[i].index = i + 1;
                state.columns[i].sort = i + 1;
              }
              state.currentColumn = void 0;
              globalActions.editColumns(store);
              globalActions.checkColumn(store);
            }
          }}
        />
        ) }
      </div>
    );
  };

  const emptyFeedBack = () => {
    let message = '';
    if (!hasRecord) {
      if (noDataFeedBack) { return noDataFeedBack; }
      message = '暂无数据';
    }
    if (!state.columns || state.columns?.length <= 0) { message = '暂无表格配置'; }
    let width: number = 0;
    state.columns?.forEach((item) => {
      width += Number(String(item.width).replace(/(px|%|r?em|pt|vw|cm|in|pc)$/ui, '')) || 120;
    });

    return message ? <Empty style={{ width: width > 0 ? width : void 0 }} image={Empty.PRESENTED_IMAGE_SIMPLE} description={message} /> : null;
  };

  return (
    <React.Fragment>
      { state.globalConfigs.header && <EditableHeader driver={props.driver} store={props.store} /> }
      <div style={{ padding: '12px 0 12px 12px', overflowX: 'auto' }}>
        {
      state.columns && state.columns.length > 0 && (
        <Draggable<DripTableColumn>
          value={(state.columns || [])}
          codeKey="sort"
          style={{ position: 'relative' }}
          onChange={(data) => {
            state.columns = [...data];
            globalActions.editColumns(store);
          }}
          render={renderTableCell}
        />
      )
      }
        { emptyFeedBack() }
      </div>
      { state.globalConfigs.footer && <EditableFooter driver={props.driver} store={props.store} /> }
    </React.Fragment>
  );
}