@ant-design/icons#RedoOutlined TypeScript Examples

RetryDialog = (props: RetryDialogProps) => {
  const {
    onRetry,
    messageId = 'common.requestFailed'
  } = props;

  return (
    <>
      <FormattedMessage id={messageId} />.
      <Button htmlType="button"
              className={styles.retryBtn}
              icon={ <RedoOutlined/> }
              onClick={onRetry}>
        <span>
          <FormattedMessage id="common.retry" />
        </span>
      </Button>
    </>
  );
}

export function IconSeekForward({
    onClick,
    time,
}: {
    onClick: () => void
    time: number
    className?: string
}): JSX.Element {
    return (
        <BaseIcon onClick={onClick} className="rrweb-controller-icon-seek">
            <>
                <span className="seek-seconds">{time}</span>
                <RedoOutlined className="seek-icon" rotate={270} />
            </>
        </BaseIcon>
    )
}

UndoRedo = ({ undoCallback, redoCallback }: UndoRedoProps) => {
  return (
    <div
      style={{
        position: 'fixed',
        padding: '8px',
        display: 'flex',
        flexDirection: 'column',
        rowGap: '4px',
        zIndex: 200,
      }}
    >
      <Tooltip mouseEnterDelay={0.5} color="cyan" title="undo" placement="right">
        <Button
          disabled={UNDOREDO.isUndoEmpty()}
          onClick={undoCallback}
          type="default"
          size="large"
          style={{ background: '#fff' }}
          icon={<UndoOutlined />}
        />
      </Tooltip>

      <Tooltip mouseEnterDelay={0.5} color="cyan" title="redo" placement="right">
        <Button
          disabled={UNDOREDO.isRedoEmpty()}
          onClick={redoCallback}
          type="default"
          style={{ background: '#fff' }}
          size="large"
          icon={<RedoOutlined />}
        />
      </Tooltip>
    </div>
  );
}

AlgoIcon: React.FC<IProps> = props => {
  if (props.hide) {
    return null
  }
  switch (props.status) {
    case StatusEnum.PROCESSING:
      return <RedoOutlined spin style={{ color: '#c1cdf7', fontSize: '16px' }} />
    case StatusEnum.ERROR:
      return <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: '16px' }} />
    case StatusEnum.SUCCESS:
      return <CheckCircleOutlined style={{ color: '#39ca74cc', fontSize: '16px' }} />
    case StatusEnum.WARNING:
      return <ExclamationCircleOutlined style={{ color: '#faad14', fontSize: '16px' }} />
    case StatusEnum.DEFAULT:
      return <InfoCircleOutlined style={{ color: '#d9d9d9', fontSize: '16px' }} />
    default:
      return null
  }
}

AlgoIcon: React.FC<IProps> = props => {
  if (props.hide) {
    return null
  }
  switch (props.status) {
    case NsGraphStatusCommand.StatusEnum.PROCESSING:
      return <RedoOutlined spin style={{ color: '#c1cdf7', fontSize: '16px' }} />
    case NsGraphStatusCommand.StatusEnum.ERROR:
      return <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: '16px' }} />
    case NsGraphStatusCommand.StatusEnum.SUCCESS:
      return <CheckCircleOutlined style={{ color: '#39ca74cc', fontSize: '16px' }} />
    case NsGraphStatusCommand.StatusEnum.WARNING:
      return <ExclamationCircleOutlined style={{ color: '#faad14', fontSize: '16px' }} />
    case NsGraphStatusCommand.StatusEnum.DEFAULT:
      return <InfoCircleOutlined style={{ color: '#d9d9d9', fontSize: '16px' }} />
    default:
      return null
  }
}

registerIcon = () => {
  IconStore.set('SaveOutlined', SaveOutlined)
  IconStore.set('UndoOutlined', UndoOutlined)
  IconStore.set('RedoOutlined', RedoOutlined)
  IconStore.set('VerticalAlignTopOutlined', VerticalAlignTopOutlined)
  IconStore.set('VerticalAlignBottomOutlined', VerticalAlignBottomOutlined)
  IconStore.set('GatewayOutlined', GatewayOutlined)
  IconStore.set('GroupOutlined', GroupOutlined)
  IconStore.set('UngroupOutlined', UngroupOutlined)
  IconStore.set('CopyOutlined', CopyOutlined)
  IconStore.set('SnippetsOutlined', SnippetsOutlined)
}

Save: React.FC<IProps> = makeBtnWidget({
  tooltip: '重做',
  handler: shortcuts.redo.handler,
  getIcon() {
    return <RedoOutlined />;
  },
  disabled(flowChart: Graph) {
    return !flowChart.canRedo();
  },
})

RedoBtn: FC<{
  fn: MouseEventHandler<HTMLElement> | undefined;
  title: string;
}> = ({ fn, title }) => {
  const futureState = useSelector(selectFutureState);

  const canRedo = useMemo(() => !!futureState.length, [futureState.length]);
  return (
    <Tooltip title={title}>
      <ToolbarButton disabled={!canRedo} onClick={fn} icon={<RedoOutlined />} />
    </Tooltip>
  );
}

History: React.FC<{}> = () => {
  const { appService } = useContext(AppContext);

  const page = Object.values(appService.project.getPages()).filter(
    ({ id }) => id === appService.project.currentId,
  )[0];

  const renderHistory = (): React.ReactNode => {
    return page?.history.history
      .slice()
      .filter(_ => _)
      .reverse()
      .map(history => (
        <HistoryList
          history={history}
          key={history.id}
          renderSpanIcon={(id: number) => (
            <span
              onClick={() => {
                page.returnHistory(id);
              }}
            >
              <Tooltip placement="right" title="回退版本">
                <RedoOutlined />
              </Tooltip>
            </span>
          )}
        />
      ));
  };

  const renderFutureHistory = (): React.ReactNode => {
    return page?.history.future
      .slice()
      .filter(_ => _)
      .reverse()
      .map(history => (
        <HistoryList
          className={styles.futureHistory}
          history={history}
          key={history.id}
          renderSpanIcon={(id: number) => (
            <span
              onClick={() => {
                page.recoveryHistory(id);
              }}
            >
              <Tooltip placement="right" title="还原版本">
                <UndoOutlined />
              </Tooltip>
            </span>
          )}
        />
      ));
  };

  return (
    <div className={styles.container}>
      {renderFutureHistory()}
      {renderHistory()}
    </div>
  );
}

ArchiveTable = () => {
	const { id }: any = useParams();

	const { setPage, setLimit, setNext, setPrevious, setIsModalVisible } = useActions(archiveLogic);
	const { limit, page, next, previous } = useValues(archiveLogic);

	const { mutate } = useRestoreArchiveMessage();

	const { data: results, isLoading } = useArchive({
		userId: id,
		params: {
			page: page,
			next: page === 1 ? undefined : next || undefined,
			previous: previous || undefined,
			limit: limit,
		},
	});

	const { data, nextCursor, previousCursor } = _.isUndefined(results)
		? { data: [], nextCursor: undefined, previousCursor: undefined }
		: results;
	setNext(nextCursor);
	setPrevious(previousCursor);

	const columns = React.useMemo(
		() =>
			getArchiveColumns({
				dataSource: data,
				restoreMessage: ({ message, params }: IRestoreArchiveMessage) =>
					mutate({ userId: id, message: message, params: params }),
			}),
		[data],
	);

	return _.isUndefined(data) ? null : (
		<>
			<Pagination
				page={page}
				limit={limit}
				next={next}
				previous={previous}
				setPrevious={setPrevious}
				setLimit={setLimit}
				setNext={setNext}
				setPage={setPage}
			/>
			<Table
				loading={isLoading}
				size='small'
				columns={columns}
				dataSource={data}
				scroll={{ x: 1500, y: 450 }}
				pagination={false}
			/>
			<FloatingButton>
				<Tooltip title='Restore All Messages'>
					<RedoOutlined
						onClick={() => {
							setIsModalVisible(true);
						}}
					/>
				</Tooltip>
			</FloatingButton>
		</>
	);
}

function CreateAnnotationModal(props: CreateAnnotationModalProps): JSX.Element {
    const [scope, setScope] = useState<AnnotationScope>(AnnotationScope.Project)
    const [textInput, setTextInput] = useState('')
    const [modalMode, setModalMode] = useState<ModalMode>(ModalMode.CREATE)
    const [selectedDate, setDate] = useState<dayjs.Dayjs>(dayjs())

    useEffect(() => {
        if (props.annotation) {
            setModalMode(ModalMode.EDIT)
            setTextInput(props.annotation.content)
        } else {
            setModalMode(ModalMode.CREATE)
            setTextInput('')
        }
    }, [props.annotation])

    const _onSubmit = (input: string, date: dayjs.Dayjs): void => {
        props.onSubmit(input, date)
        // Reset input
        setTextInput('')
        setDate(dayjs())
        setScope(AnnotationScope.Project)
    }

    return (
        <Modal
            footer={[
                <Button key="create-annotation-cancel" onClick={(): void => props.onCancel()}>
                    Cancel
                </Button>,
                <Button
                    type="primary"
                    key="create-annotation-submit"
                    data-attr="create-annotation-submit"
                    onClick={(): void => {
                        _onSubmit(textInput, selectedDate)
                    }}
                >
                    {modalMode === ModalMode.CREATE ? 'Submit' : 'Update'}
                </Button>,
            ]}
            closable={false}
            visible={props.visible}
            onCancel={props.onCancel}
            title={modalMode === ModalMode.CREATE ? 'Create annotation' : 'Edit ennotation'}
        >
            {modalMode === ModalMode.CREATE ? (
                <span>
                    This annotation will appear on all
                    <Dropdown
                        overlay={
                            <Menu activeKey={scope} onSelect={(e) => setScope(e.key as AnnotationScope)}>
                                <Menu.Item key={AnnotationScope.Project} icon={<ProjectOutlined />}>
                                    Project
                                </Menu.Item>
                                <Menu.Item key={AnnotationScope.Organization} icon={<DeploymentUnitOutlined />}>
                                    Organization
                                </Menu.Item>
                            </Menu>
                        }
                    >
                        <Button style={{ marginLeft: 8, marginRight: 8 }}>
                            {annotationScopeToName.get(scope)} <DownOutlined />
                        </Button>
                    </Dropdown>{' '}
                    charts
                </span>
            ) : (
                <Row justify="space-between">
                    <span>Change existing annotation text</span>
                    {!props.annotation?.deleted ? (
                        <DeleteOutlined
                            className="text-danger"
                            onClick={(): void => {
                                props.onDelete()
                            }}
                        />
                    ) : (
                        <RedoOutlined
                            className="button-border clickable"
                            onClick={(): void => {
                                props.onRestore()
                            }}
                        />
                    )}
                </Row>
            )}
            <br />
            {modalMode === ModalMode.CREATE && (
                <div>
                    Date:
                    <DatePicker
                        style={{ marginTop: 16, marginLeft: 8, marginBottom: 16 }}
                        getPopupContainer={(trigger): HTMLElement => trigger.parentElement as HTMLElement}
                        value={selectedDate}
                        onChange={(date): void => setDate(date as dayjs.Dayjs)}
                        allowClear={false}
                    />
                </div>
            )}
            <TextArea
                data-attr="create-annotation-input"
                maxLength={300}
                style={{ marginBottom: 12, marginTop: 5 }}
                rows={4}
                value={textInput}
                onChange={(e): void => setTextInput(e.target.value)}
            />
        </Modal>
    )
}

export function AsyncMigrations(): JSX.Element {
    const { user } = useValues(userLogic)
    const { asyncMigrations, asyncMigrationsLoading, activeTab, asyncMigrationSettings } =
        useValues(asyncMigrationsLogic)
    const { triggerMigration, forceStopMigration, loadAsyncMigrations, setActiveTab } = useActions(asyncMigrationsLogic)

    const columns = [
        {
            title: '',
            render: function RenderTriggerButton(asyncMigration: AsyncMigration): JSX.Element {
                const status = asyncMigration.status
                return (
                    <Tooltip title={tooltipMessageForStatus[status]}>
                        {status === 0 ? (
                            <PlayCircleOutlined
                                className="migration-btn success"
                                onClick={() => triggerMigration(asyncMigration.id)}
                            />
                        ) : status === 1 ? (
                            <StopOutlined
                                className="migration-btn danger"
                                onClick={() => forceStopMigration(asyncMigration.id)}
                            />
                        ) : status === 2 ? (
                            <CheckCircleOutlined className="success" />
                        ) : status === 3 || status === 4 ? (
                            <RedoOutlined
                                className="migration-btn warning"
                                onClick={() => triggerMigration(asyncMigration.id)}
                            />
                        ) : status === 5 ? (
                            <Spinner size="sm" />
                        ) : null}
                    </Tooltip>
                )
            },
        },
        {
            title: 'Migration name',
            dataIndex: 'name',
        },
        {
            title: 'Description',
            render: function RenderError(asyncMigration: AsyncMigration): JSX.Element {
                const description = asyncMigration.description
                return (
                    <small>
                        <span>{description.slice(0, 40)}</span>
                        {description.length > 40 ? (
                            <a
                                onClick={() => {
                                    Modal.info({
                                        title: `'${asyncMigration.name}' description`,
                                        content: <pre>{description}</pre>,
                                        icon: <InfoCircleOutlined />,
                                        okText: 'Close',
                                        width: '80%',
                                    })
                                }}
                            >
                                {` [...]`}
                            </a>
                        ) : null}
                    </small>
                )
            },
        },
        {
            title: 'Progress',
            dataIndex: 'progress',
            render: function RenderMigrationProgress(progress: number): JSX.Element {
                return (
                    <div>
                        <Progress percent={progress} />
                    </div>
                )
            },
        },
        {
            title: 'Status',
            dataIndex: 'status',
            render: function RenderMigrationStatus(status: number): JSX.Element {
                return <div>{migrationStatusNumberToMessage[status]}</div>
            },
        },
        {
            title: 'Error',
            render: function RenderError(asyncMigration: AsyncMigration): JSX.Element {
                const error = asyncMigration.last_error || ''
                return (
                    <small>
                        <span>{error.slice(0, 40)}</span>
                        {error.length > 40 ? (
                            <a
                                onClick={() => {
                                    Modal.info({
                                        title: `Error on migration '${asyncMigration.name}'`,
                                        content: <pre>{error}</pre>,
                                        icon: <InfoCircleOutlined />,
                                        okText: 'Close',
                                        width: '80%',
                                    })
                                }}
                            >
                                {` [...]`}
                            </a>
                        ) : null}
                    </small>
                )
            },
        },
        {
            title: 'Last operation index',
            dataIndex: 'current_operation_index',
        },
        {
            title: 'Last query ID',
            dataIndex: 'current_query_id',
            render: function RenderQueryId(queryId: string): JSX.Element {
                return (
                    <div>
                        <small>{queryId}</small>
                    </div>
                )
            },
        },
        {
            title: 'Celery task ID',
            dataIndex: 'celery_task_id',
            render: function RenderCeleryTaskId(celeryTaskId: string): JSX.Element {
                return (
                    <div>
                        <small>{celeryTaskId}</small>
                    </div>
                )
            },
        },
        {
            title: 'Started at',
            dataIndex: 'started_at',
            render: function RenderStartedAt(startedAt: string): JSX.Element {
                return <div>{humanFriendlyDetailedTime(startedAt)}</div>
            },
        },
        {
            title: 'Finished at',
            dataIndex: 'finished_at',
            render: function RenderFinishedAt(finishedAt: string): JSX.Element {
                return <div>{humanFriendlyDetailedTime(finishedAt)}</div>
            },
        },
    ]
    return (
        <div className="async-migrations-scene">
            {user?.is_staff ? (
                <>
                    <PageHeader
                        title="Async Migrations"
                        caption={
                            <>
                                <p>Manage async migrations in your instance.</p>
                                <p>
                                    Read about async migrations on our{' '}
                                    <a href="https://posthog.com/docs/self-host/configure/async-migrations">
                                        dedicated docs page
                                    </a>
                                    .
                                </p>
                            </>
                        }
                    />

                    <Tabs activeKey={activeTab} onChange={(t) => setActiveTab(t as AsyncMigrationsTab)}>
                        <TabPane tab="Management" key={AsyncMigrationsTab.Management} />
                        <TabPane tab="Settings" key={AsyncMigrationsTab.Settings} />
                    </Tabs>

                    {activeTab === AsyncMigrationsTab.Management ? (
                        <>
                            <div className="mb float-right">
                                <Button
                                    icon={asyncMigrationsLoading ? <Spinner size="sm" /> : <RedoOutlined />}
                                    onClick={loadAsyncMigrations}
                                >
                                    Refresh
                                </Button>
                            </div>
                            <Space />
                            <Table
                                pagination={false}
                                loading={asyncMigrationsLoading}
                                columns={columns}
                                dataSource={asyncMigrations}
                            />
                        </>
                    ) : activeTab === AsyncMigrationsTab.Settings ? (
                        <>
                            <br />
                            {asyncMigrationSettings.map((setting) => {
                                return (
                                    <div key={setting.key}>
                                        <SettingUpdateField setting={setting} />
                                    </div>
                                )
                            })}
                        </>
                    ) : null}
                </>
            ) : (
                <PageHeader
                    title="Async Migrations"
                    caption={
                        <>
                            <p>
                                Only users with staff access can manage async migrations. Please contact your instance
                                admin.
                            </p>
                            <p>
                                If you're an admin and don't have access, set <code>is_staff=true</code> for your user
                                on the PostgreSQL <code>posthog_user</code> table.
                            </p>
                        </>
                    }
                />
            )}
        </div>
    )
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

UnControlledTableHeaderPanel: FC<ItemLayoutProps<ChartStyleConfig>> =
  memo(
    ({
      ancestors,
      translate: t = title => title,
      data,
      onChange,
      dataConfigs,
    }) => {
      const [selectedRowUids, setSelectedRowUids] = useState<string[]>([]);
      const [myData, setMyData] = useState(() => CloneValueDeep(data));
      const [tableDataSource, setTableDataSource] = useState<
        TableColumnsList[]
      >(() => {
        const originalFlattenHeaderRows = getFlattenHeaders(dataConfigs);
        const currentHeaderRows: TableColumnsList[] = myData?.value || [];
        const unusedHeaderRows = getUnusedHeaderRows(
          originalFlattenHeaderRows || [],
          currentHeaderRows,
        );
        return currentHeaderRows.concat(unusedHeaderRows);
      });

      const mergeRowToGroup = () => {
        if (selectedRowUids.length === 0) {
          return;
        }
        const lineageRowUids = selectedRowUids.map(uid =>
          getAncestorRowUids(undefined, uid, tableDataSource),
        );
        const noDuplicateLineageRows =
          mergeSameLineageAncesterRows(lineageRowUids);
        const ancestorsRows = makeSameLinageRows(noDuplicateLineageRows);
        const newDataSource = groupTreeNode(ancestorsRows, tableDataSource);
        setSelectedRowUids([]);
        handleConfigChange([...newDataSource]);
      };

      const mergeSameLineageAncesterRows = lineageRowUids => {
        const allRowKeys = lineageRowUids.map((lr: string[]) =>
          lr.join(DATARTSEPERATOR),
        );
        return lineageRowUids.reduce((acc, next) => {
          const key = next.join(DATARTSEPERATOR);
          if (
            allRowKeys.some(k => k.includes(key) && k.length !== key.length)
          ) {
            return acc;
          }
          return acc.concat([next]);
        }, []);
      };

      const makeSameLinageRows = rowAncestors => {
        if (rowAncestors && rowAncestors.length === 0) {
          return [];
        }
        const theSortestLength = Math.min(...rowAncestors.map(ra => ra.length));
        let ancestorGeneration = 0;
        for (let i = 0; i < theSortestLength; i++) {
          const ancestor = rowAncestors[0][i];
          if (rowAncestors.every(a => a[i] === ancestor)) {
            ancestorGeneration = i;
          } else {
            break;
          }
        }
        return rowAncestors
          .map(ra => ra.slice(0, ancestorGeneration + 1))
          .reduce((acc, next) => {
            const key = next.join(DATARTSEPERATOR);
            const allRowKeys = acc.map(lr => lr.join(DATARTSEPERATOR));
            if (allRowKeys.includes(key)) {
              return acc;
            }
            return acc.concat([next]);
          }, []);
      };

      const getAncestorRowUids = (parentUid, rowUid, treeRows) => {
        if (treeRows.find(tr => tr.uid === rowUid)) {
          return !!parentUid ? [parentUid, rowUid] : [rowUid];
        }
        return treeRows.reduce((acc, next) => {
          return acc.concat(
            getAncestorRowUids(next.uid, rowUid, next.children || []),
          );
        }, []);
      };

      const groupTreeNode = (rowAncestors, collection) => {
        if (rowAncestors && rowAncestors.length < 1) {
          return collection;
        }

        const rows = collection || [];
        const linageGeneration = rowAncestors[0].length - 1;
        if (linageGeneration === 0) {
          const mergedKeys = rowAncestors.flatMap(ra => ra);
          return mergeBrotherRows(mergedKeys, rows);
        } else {
          const ancestor = rowAncestors[0][0];
          const subRowAncestors = rowAncestors.map(ra => ra.slice(1));
          const childRow = rows.find(c => c.colName === ancestor);
          childRow.children = groupTreeNode(subRowAncestors, childRow.children);
          return rows;
        }
      };

      const mergeBrotherRows = (
        mergeKeys: string[],
        rows: TableColumnsList[],
      ) => {
        const selectedRows = rows.filter(r => mergeKeys.includes(r.uid!));
        const restRows = rows.filter(r => !mergeKeys.includes(r.uid!));
        const insertIndex = rows.findIndex(r => r.uid === mergeKeys[0]);
        const groupRowUid = selectedRows.map(d => d.uid).join(DATARTSEPERATOR);
        const groupRow = {
          uid: groupRowUid,
          colName: groupRowUid,
          label: t('table.header.newName'),
          isGroup: true,
          children: selectedRows,
        };
        if (!restRows.find(rr => rr.uid === groupRowUid)) {
          restRows.splice(insertIndex, 0, groupRow);
        }
        return restRows;
      };

      const handleRowMoveUp = () => {
        selectedRowUids.forEach(rowUid => {
          const brotherRows = findRowBrothers(rowUid, tableDataSource);
          const idx = brotherRows.findIndex(s => s.uid === rowUid);
          if (idx < 1) {
            return;
          }
          const temp = brotherRows[idx - 1];
          brotherRows[idx - 1] = brotherRows[idx];
          brotherRows[idx] = temp;
        });
        handleConfigChange([...tableDataSource]);
      };

      const handleRowMoveDown = () => {
        selectedRowUids.forEach(uid => {
          const brotherRows = findRowBrothers(uid, tableDataSource);
          const idx = brotherRows.findIndex(s => s.uid === uid);
          if (idx >= brotherRows.length - 1) {
            return;
          }
          const temp = brotherRows[idx];
          brotherRows[idx] = brotherRows[idx + 1];
          brotherRows[idx + 1] = temp;
          handleConfigChange([...tableDataSource]);
        });
      };

      const handleRollback = () => {
        const originalFlattenHeaders = getFlattenHeaders(dataConfigs);
        myData.value = [];
        setTableDataSource(originalFlattenHeaders);
        setMyData(myData);
        onChange?.(ancestors, myData);
      };

      const handleTableRowChange = rowUid => style => prop => (_, value) => {
        const brotherRows = findRowBrothers(rowUid, tableDataSource);
        const row = brotherRows.find(r => r.uid === rowUid);

        if (!row) {
          return;
        }
        if (style) {
          row.style = Object.assign({}, row.style, {
            ...row.style,
            [prop]: value,
          });
        } else {
          row[prop] = value;
        }
        handleConfigChange([...tableDataSource]);
      };

      const handleDeleteGroupRow = rowUid => {
        const brotherRows = findRowBrothers(rowUid, tableDataSource);
        const idx = brotherRows.findIndex(s => s.uid === rowUid);
        brotherRows.splice(idx, 1, ...(brotherRows[idx].children || []));
        handleConfigChange([...tableDataSource]);
      };

      const handleConfigChange = (dataSource: TableColumnsList[]) => {
        myData.value = dataSource;
        setTableDataSource(dataSource);
        setMyData(myData);
        onChange?.(ancestors, myData);
      };

      const findRowBrothers = (uid, rows) => {
        let row = rows.find(r => r.uid === uid);
        if (!!row) {
          return rows;
        }
        let subRows = [];
        for (let i = 0; i < rows.length; i++) {
          subRows = findRowBrothers(uid, rows[i].children || []);
          if (!!subRows && subRows.length > 0) {
            break;
          }
        }
        return subRows;
      };

      const tableColumnsSettings = [
        {
          title: t('table.header.columnName'),
          dataIndex: 'colName',
          key: 'colName',
          render: (_, record) => {
            const { label, isGroup, uid } = record;
            return isGroup ? (
              <>
                <DeleteOutlined
                  style={{ marginRight: 10 }}
                  onClick={_ => handleDeleteGroupRow(uid)}
                />
                <EditableLabel
                  label={label}
                  onChange={value =>
                    handleTableRowChange(uid)(undefined)('label')([], value)
                  }
                />
              </>
            ) : (
              getColumnRenderName(record)
            );
          },
        },
      ];

      const rowSelection = {
        selectedRowKeys: selectedRowUids,
        onChange: (selectedRowKeys: any[]) => {
          setSelectedRowUids(selectedRowKeys);
        },
      };

      return (
        <StyledUnControlledTableHeaderPanel direction="vertical">
          <Row gutter={24}>
            <Col span={20}>
              <Space>
                <Button
                  disabled={selectedRowUids.length === 0}
                  type="primary"
                  onClick={mergeRowToGroup}
                >
                  {t('table.header.merge')}
                </Button>
                <Button
                  disabled={selectedRowUids.length === 0}
                  icon={<ArrowUpOutlined />}
                  onClick={handleRowMoveUp}
                >
                  {t('table.header.moveUp')}
                </Button>
                <Button
                  disabled={selectedRowUids.length === 0}
                  icon={<ArrowDownOutlined />}
                  onClick={handleRowMoveDown}
                >
                  {t('table.header.moveDown')}
                </Button>
              </Space>
            </Col>
            <Col span={4}>
              <Row justify="end" align="middle">
                <Button icon={<RedoOutlined />} onClick={handleRollback}>
                  {t('table.header.reset')}
                </Button>
              </Row>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <Table
                size="small"
                bordered={true}
                pagination={false}
                {...myData}
                rowKey={record => record.uid!}
                columns={tableColumnsSettings}
                dataSource={tableDataSource}
                rowSelection={rowSelection}
              />
            </Col>
          </Row>
        </StyledUnControlledTableHeaderPanel>
      );
    },
    itemLayoutComparer,
  )