@ant-design/icons#PauseOutlined TypeScript Examples

public render() {
        const { env, onChangeDate, onChangeSpeed } = this.props;
        const { x3 } = this.state;
        return (
            <div className='controlbar'>
                <img src={require('./images/bg.png')} />
                {
                    env.speed > 0 ? (
                        <PauseOutlined className='playpause' onClick={() => onChangeSpeed(0)} />
                    ) : (
                        <CaretRightOutlined className='playpause' onClick={this.handlePlay} style={{marginLeft: '3px'}} />
                    )
                }
                <StepBackwardOutlined className='start' onClick={() => onChangeDate(this.begin)} />
                <StepForwardOutlined className='end' onClick={() => onChangeDate(this.end)}/>
                <div className='speed' style={x3 ? {backgroundColor: '#020E26bb', color: 'white'} : undefined} onClick={this.handleX3}>x 3</div>
            </div>
        )
    }

public render() {
        const { env } = this.props;
        const { catchBars, hoverDate, hots } = this.state;
        return (
            <div className='timeline' ref={r => this._rightRoot = r}>
                <div className='bg' />
                <div className='play_btn' onClick={this.handleBtnClick}>
                {
                    env.speed > 0 ? (
                        <PauseOutlined className='btn' />
                    ) : (
                        <CaretRightOutlined className='btn' style={{marginLeft: '3px'}} />
                    )
                }
                </div>
                <div className='timeline_right'>
                    {this.drawPointer()}
                    <div className='timeline_container'
                        ref={r => this._container = r}
                        onMouseDown={this.props.env.isMobile ? undefined : this.handleMouseDown}
                        onTouchStart={this.handleTouchStart}
                        onMouseMove={this.props.env.isMobile ? undefined : (e: React.MouseEvent) => this.handleMouseMove(e.movementX)}
                        onTouchMove={(e: React.TouchEvent) => {
                            if(e.touches.length) {
                                this.handleMouseMove(e.touches[0].clientX - this._lastTouchX)
                                this._lastTouchX = e.touches[0].clientX;
                            }}}
                        onWheel={this.handleMouseWheel}>
                            {this.drawLine()}
                            <div className='river_con'>
                                <River start={this._renderStartDate} end={this._rangeEndDate} dayWidth={this.dateWidth()} onLineClick={this.handleRiverLineClick}/>
                            </div>
                            <div className='events'>
                                { catchBars }
                            </div>
                    </div>
                    
                </div>
                <div className='hot_panel' ref={r => this._hotPanel = r} onMouseOver={this.handleHotOver} onMouseOut={this.handleHotOut}>
                    {hoverDate && hots && <div className='hot_arrow'/>}
                    {hoverDate && hots && this.drawHots()}
                </div>
            </div>
        )
    }

DownloadItem = ({
  item,
  index,
  onOpenFile,
  onPauseOrResume,
  onOpenFolder,
  onCancel,
}: DownloadProps) => {
  return (
    <div className={styles['download-item-container']} key={item.id}>
      {/* 下载进度 */}
      {item.state === 'progressing' && (
        <div
          className={styles['download-item-progress']}
          style={{ width: `${item.progress * 100}%` }}
        />
      )}

      <div className={styles['download-item-main']}>
        {/* 下载项的图标 */}
        <div className={styles['file-icon']} onDoubleClick={() => onOpenFile?.(item.path)}>
          <img src={item.icon} />
        </div>
        {/* 文件名、下载大小、速度 */}
        <div className={styles['file-info']}>
          <Tooltip title={item.fileName}>
            <p className={styles['file-name']}>{item.fileName}</p>
          </Tooltip>
          <div className={styles['file-desc']}>
            {item.state === 'progressing' ? (
              <>
                <div className={styles['file-size']}>
                  {getFileSize(item.receivedBytes, false)}/{getFileSize(item.totalBytes)}
                </div>
                <span className={styles['download-speed']}>{getFileSize(item.speed)}/s</span>
              </>
            ) : null}
            {item.state === 'completed' && <p>{getFileSize(item.totalBytes)}</p>}
          </div>
        </div>
        {/* 操作 */}
        <div className={styles.operating}>
          {item.state === 'progressing' && (
            <IconButton
              title={item.paused ? '恢复' : '暂停'}
              className={styles['operating-item']}
              onClick={() => onPauseOrResume?.(item)}>
              {item.paused ? <CaretRightOutlined /> : <PauseOutlined />}
            </IconButton>
          )}

          {item.state === 'completed' && (
            <IconButton
              title='打开所在位置'
              className={styles['operating-item']}
              onClick={() => onOpenFolder?.(item.path)}>
              <FolderViewOutlined />
            </IconButton>
          )}

          <IconButton
            title={`${item.state === 'progressing' ? '取消并' : ''}移除下载`}
            className={styles['operating-item']}
            onClick={() => onCancel?.(item, index)}>
            <CloseOutlined />
          </IconButton>
        </div>
      </div>
    </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>
  );
}

Operations: FC<OperationsProps> = ({
  active,
  scheduleId,
  onUpdateScheduleList,
  editingId,
}) => {
  const [startLoading, setStartLoading] = useState(false);
  const [stopLoading, setStopLoading] = useState(false);
  const [executeLoading, setExecuteLoading] = useState(false);
  const { actions } = useScheduleSlice();
  const dispatch = useDispatch();
  const t = useI18NPrefix('main.pages.schedulePage.sidebar.scheduleList');

  const updateScheduleActive = useCallback(
    (active: boolean) => {
      dispatch(actions.setEditingScheduleActive(active));
    },
    [actions, dispatch],
  );
  const handleStartSchedule = useCallback(() => {
    setStartLoading(true);
    startSchedule(scheduleId)
      .then(res => {
        if (!!res) {
          message.success(t('successStarted'));
          onUpdateScheduleList();
          if (editingId === scheduleId) {
            updateScheduleActive(true);
          }
        }
      })
      .finally(() => {
        setStartLoading(false);
      });
  }, [scheduleId, editingId, onUpdateScheduleList, updateScheduleActive, t]);
  const handleStopSchedule = useCallback(() => {
    setStopLoading(true);
    stopSchedule(scheduleId)
      .then(res => {
        if (!!res) {
          message.success(t('successStop'));
          onUpdateScheduleList();
          if (editingId === scheduleId) {
            updateScheduleActive(false);
          }
        }
      })
      .finally(() => {
        setStopLoading(false);
      });
  }, [scheduleId, onUpdateScheduleList, editingId, updateScheduleActive, t]);
  const handleExecuteSchedule = useCallback(() => {
    setExecuteLoading(true);
    executeSchedule(scheduleId)
      .then(res => {
        if (!!res) {
          message.success(t('successImmediately'));
          onUpdateScheduleList();
        }
      })
      .finally(() => {
        setExecuteLoading(false);
      });
  }, [scheduleId, onUpdateScheduleList, t]);

  return (
    <Space onClick={stopPPG}>
      {!active ? (
        <OperationButton
          tooltipTitle={t('start')}
          loading={startLoading}
          icon={<CaretRightOutlined />}
          onClick={handleStartSchedule}
        />
      ) : null}
      {active ? (
        <OperationButton
          tooltipTitle={t('stop')}
          loading={stopLoading}
          icon={<PauseOutlined />}
          onClick={handleStopSchedule}
        />
      ) : null}

      <Popconfirm
        title={t('executeItNow')}
        okButtonProps={{ loading: executeLoading }}
        onConfirm={handleExecuteSchedule}
      >
        <OperationButton
          loading={executeLoading}
          tooltipTitle={t('executeImmediately')}
          icon={
            <SendOutlined
              rotate={-45}
              css={`
                position: relative;
                top: -2px;
              `}
            />
          }
        />
      </Popconfirm>
    </Space>
  );
}

Toolbar = memo(({ allowManage, allowEnableViz }: ToolbarProps) => {
  const { actions } = useViewSlice();
  const dispatch = useDispatch();
  const { onRun, onSave } = useContext(EditorContext);
  const { showSaveForm } = useContext(SaveFormContext);
  const sources = useSelector(selectSources);
  const history = useHistory();
  const histState = history.location.state as any;
  const viewsData = useSelector(selectViews);
  const t = useI18NPrefix('view.editor');
  const saveAsView = useSaveAsView();
  const startAnalysis = useStartAnalysis();
  const id = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'id' }),
  ) as string;
  const name = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'name' }),
  ) as string;
  const parentId = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'parentId' }),
  ) as string;
  const config = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'config' }),
  ) as object;
  const sourceId = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'sourceId' }),
  ) as string;
  const stage = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'stage' }),
  ) as ViewViewModelStages;
  const status = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'status' }),
  ) as ViewStatus;
  const script = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'script' }),
  ) as string;
  const fragment = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'fragment' }),
  ) as string;
  const size = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'size' }),
  ) as number;
  const error = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'error' }),
  ) as string;
  const ViewIndex = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'index' }),
  ) as number;
  const isArchived = status === ViewStatus.Archived;

  const formatSQL = useCallback(() => {
    dispatch(
      actions.changeCurrentEditingView({
        script: format(script),
      }),
    );
  }, [dispatch, actions, script]);

  const showEdit = useCallback(() => {
    showSaveForm({
      type: CommonFormTypes.Edit,
      visible: true,
      initialValues: {
        name,
        parentId,
        config,
      },
      parentIdLabel: t('folder'),
      onSave: (values, onClose) => {
        let index = ViewIndex;

        if (isParentIdEqual(parentId, values.parentId)) {
          index = getInsertedNodeIndex(values, viewsData);
        }

        dispatch(
          actions.changeCurrentEditingView({
            ...values,
            parentId: values.parentId || null,
            index,
          }),
        );
        dispatch(saveView({ resolve: onClose }));
      },
    });
  }, [
    showSaveForm,
    actions,
    dispatch,
    name,
    parentId,
    config,
    viewsData,
    ViewIndex,
    t,
  ]);

  const sourceChange = useCallback(
    value => {
      dispatch(actions.changeCurrentEditingView({ sourceId: value }));
    },
    [dispatch, actions],
  );

  const sizeMenuClick = useCallback(
    ({ key }) => {
      dispatch(actions.changeCurrentEditingView({ size: Number(key) }));
    },
    [dispatch, actions],
  );

  useEffect(() => {
    if (histState?.sourcesId && sources) {
      sourceChange(histState.sourcesId);
    }
  }, [histState?.sourcesId, sourceChange, sources]);

  return (
    <Container>
      <Operates>
        <Space split={<Divider type="vertical" className="divider" />}>
          {allowManage && (
            <Select
              placeholder={t('source')}
              value={sourceId}
              bordered={false}
              disabled={isArchived}
              onChange={sourceChange}
              className="source"
            >
              {sources.map(({ id, name }) => (
                <Select.Option key={id} value={id}>
                  {name}
                </Select.Option>
              ))}
            </Select>
          )}
          <Space>
            <Tooltip
              title={
                <TipTitle
                  title={[
                    `${fragment ? t('runSelection') : t('run')}`,
                    t('runWinTip'),
                    t('runMacTip'),
                  ]}
                />
              }
              placement="bottom"
            >
              <ToolbarButton
                icon={
                  stage === ViewViewModelStages.Running ? (
                    <PauseOutlined />
                  ) : (
                    <CaretRightOutlined />
                  )
                }
                color={fragment ? WARNING : INFO}
                onClick={onRun}
              />
            </Tooltip>
            <Tooltip title={t('beautify')} placement="bottom">
              <ToolbarButton
                icon={<AlignCenterOutlined />}
                disabled={isArchived}
                onClick={formatSQL}
              />
            </Tooltip>
          </Space>
          <Dropdown
            trigger={['click']}
            overlay={
              <Menu onClick={sizeMenuClick}>
                {PREVIEW_SIZE_LIST.map(s => (
                  <Menu.Item key={s}>{s}</Menu.Item>
                ))}
              </Menu>
            }
          >
            <ToolbarButton size="small">{`Limit: ${size}`}</ToolbarButton>
          </Dropdown>
          <Chronograph
            running={stage === ViewViewModelStages.Running}
            status={
              error
                ? 'error'
                : stage >= ViewViewModelStages.Running
                ? stage === ViewViewModelStages.Running
                  ? 'processing'
                  : 'success'
                : 'default'
            }
          />
        </Space>
      </Operates>
      <Actions>
        <Space>
          {allowManage && (
            <Tooltip
              title={
                <TipTitle
                  title={[t('save'), t('saveWinTip'), t('saveMacTip')]}
                />
              }
              placement="bottom"
            >
              <ToolbarButton
                icon={<SaveFilled />}
                disabled={isArchived || stage !== ViewViewModelStages.Saveable}
                color={INFO}
                onClick={onSave}
              />
            </Tooltip>
          )}
          {allowManage && (
            <Tooltip title={t('info')} placement="bottom">
              <ToolbarButton
                icon={<SettingFilled />}
                disabled={isArchived || isNewView(id)}
                color={INFO}
                onClick={showEdit}
              />
            </Tooltip>
          )}
          {allowManage && (
            <Tooltip title={t('saveAs')} placement="bottom">
              <ToolbarButton
                icon={<CopyFilled />}
                onClick={() => saveAsView(id)}
                disabled={isNewView(id)}
                color={INFO}
              />
            </Tooltip>
          )}
          {/* <Tooltip title={t('saveFragment')} placement="bottom">
            <ToolbarButton icon={<SnippetsFilled />} />
          </Tooltip> */}
          {allowEnableViz && (
            <Tooltip title={t('startAnalysis')} placement="bottom">
              <ToolbarButton
                disabled={isNewView(id)}
                icon={<MonitorOutlined />}
                color={INFO}
                onClick={() => {
                  startAnalysis(id);
                }}
              />
            </Tooltip>
          )}
        </Space>
      </Actions>
    </Container>
  );
})