@ant-design/icons#DoubleRightOutlined TypeScript Examples

The following examples show how to use @ant-design/icons#DoubleRightOutlined. 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: form-panel.tsx    From XFlow with MIT License 5 votes vote down vote up
FlowchartFormPanel: React.FC<IFlowchartFormPanelProps> = props => {
  const [collpased, setCollpased] = useState(false)
  const {
    controlMapService = defaultControlMapService,
    formSchemaService = defaultFormSchemaService,
    position = { width: 240, top: 0, bottom: 0, right: 0 },
    show = true,
    ...rest
  } = props

  if (!show) {
    return null
  }
  const { width = 200, right } = position

  return (
    <WorkspacePanel
      className={CONTAINER_CLASS}
      position={{
        ...position,
        right: !collpased ? right : -width,
      }}
    >
      <div className={`${CONTAINER_CLASS}-wrapper`}>
        {/* @ts-ignore */}
        <JsonSchemaForm
          targetType={['node', 'edge', 'canvas', 'group']}
          controlMapService={controlMapService}
          formSchemaService={formSchemaService}
          position={{
            ...position,
            top: 0,
          }}
          prefixClz="xflow-form-editor"
          {...rest}
        />
        <div
          className={`${CONTAINER_CLASS}-icon`}
          style={{
            top: 21,
            left: !collpased ? -10 : -20,
            borderRadius: !collpased ? '50%' : '50% 0 0  50%',
            borderRight: !collpased ? '' : 'none',
          }}
          onClick={() => {
            setCollpased(!collpased)
          }}
        >
          {collpased ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
        </div>
      </div>
    </WorkspacePanel>
  )
}
Example #2
Source File: index.tsx    From XFlow with MIT License 5 votes vote down vote up
FlowchartNodePanel: React.FC<IProps> = props => {
  registerCustomNode(get(props, 'registerNode'))
  const prefixClz = useXflowPrefixCls('node-panel')
  const [collpased, setCollpased] = useState(false)
  const { show = true, position = { width: 240, top: 40, bottom: 0, left: 0 }, ...rest } = props
  if (!show) {
    return null
  }
  const { width = 200, left } = position

  return (
    <WorkspacePanel
      className={CONTAINER_CLASS}
      position={{
        ...position,
        left: !collpased ? left : -width,
      }}
    >
      <div className={`${CONTAINER_CLASS}-wrapper`}>
        <WorkspacePanel
          className={prefixClz}
          {...rest}
          position={{
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
          }}
        >
          <NodePanelMain {...props} prefixClz={prefixClz} position={position} />
        </WorkspacePanel>
        <div
          className={`${CONTAINER_CLASS}-icon`}
          style={{
            top: 21,
            right: !collpased ? -10 : -20,
            borderRadius: !collpased ? '50%' : '0 50% 50% 0',
            borderLeft: !collpased ? '' : 'none',
          }}
          onClick={() => {
            setCollpased(!collpased)
          }}
        >
          {collpased ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
        </div>
      </div>
    </WorkspacePanel>
  )
}
Example #3
Source File: Icon.tsx    From html2sketch with MIT License 4 votes vote down vote up
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>
  );
}
Example #4
Source File: Attr.tsx    From ant-simple-draw with MIT License 4 votes vote down vote up
Attr = memo(function Attr(props) {
  const dispatch = useDispatch();

  const [collapsed, setCollapsed] = useState<boolean>(true);

  const [isClickComponent, curComponent, canvasInformation, canvasEditableEl, zenMode] =
    useSelector(
      createSelector(
        [(state: storeType) => state.component, (state: storeType) => state.config],
        (component, config) => {
          return [
            component.isClickComponent,
            component.curComponent,
            config.canvasInformation,
            config.canvasEditableEl,
            config.zenMode,
          ] as const;
        },
      ),
    );
  useEffect(() => {
    if (zenMode) {
      setCollapsed(false);
    } else {
      setCollapsed(true);
    }
  }, [zenMode]);

  const toggleCollapsed = () => {
    setCollapsed((pre) => !pre);
  };
  const handleFormSave = (flag: string, val: any) => {
    if (flag === 'canvasConfig') {
      dispatch(setCanvasInformationAction(val));
      console.log('val', val);
    } else {
      dispatch(updatePropsAction(val));
      console.log('2222val', val);
    }
  };
  return (
    <>
      <div
        className={styles.option}
        onClick={toggleCollapsed}
        style={{ left: collapsed ? '-17.5px' : '-40px' }}
      >
        {!collapsed ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
      </div>
      <div
        className={styles.editContainer}
        style={{
          width: collapsed ? getCssProperty('--mjy-attr-editor-width') : '0px',
          opacity: collapsed ? 1 : 0,
        }}
      >
        <Tabs defaultActiveKey="1" centered>
          {!curComponent ? (
            <>
              <TabPane tab={'画布配置'} key="1">
                <div className={styles.attrsContainer}>
                  <FormRender
                    editType={canvasEditableEl}
                    onSave={(val: Store) => handleFormSave('canvasConfig', val)}
                    id={'canvasConfig'}
                    showEditPropsData={canvasInformation}
                  />
                </div>
              </TabPane>
            </>
          ) : (
            <>
              <TabPane tab={'属性'} key="1">
                <div className={styles.attrsContainer}>
                  <WhXy />
                  <Divider />
                  <FormRender
                    editType={curComponent.editableEl}
                    onSave={(val: Store) => handleFormSave('shapeConfig', val)}
                    id={curComponent.componentId!}
                    showEditPropsData={curComponent.propValue}
                  />
                </div>
              </TabPane>
              <TabPane tab={'交互'} key="2">
                <div className={styles.attrsContainer}>Content of Tab Pane 2</div>
              </TabPane>
            </>
          )}
        </Tabs>
      </div>
    </>
  );
})
Example #5
Source File: SliderComponent.tsx    From ant-simple-draw with MIT License 4 votes vote down vote up
Slider = memo(function Slider() {
  const dispatch = useDispatch();

  const [tabKey, setTabKey] = useState<string>('1');

  const [zenMode] = useSelector(
    createSelector([(state: storeType) => state.config], ({ zenMode }) => [zenMode] as const),
  );

  const { getAllBaseModuleConfigList, textConfigList, pictureGather, graphicsData } =
    useGetCompentConfigList();

  const [isShowLeftComponents, setIsShowLeftComponents] = useState<boolean>(true);

  const toggleShowLeftComponents = () => {
    setIsShowLeftComponents((pre) => !pre);
  };

  useEffect(() => {
    if (zenMode) {
      setIsShowLeftComponents(false);
    } else {
      setIsShowLeftComponents(true);
    }
  }, [zenMode]);
  const tabBarExtraContent = useMemo(() => {
    return (
      <div onClick={toggleShowLeftComponents} className={styles.tabBarExtraContent}>
        {isShowLeftComponents ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
      </div>
    );
  }, [isShowLeftComponents]);

  const Render = useMemo(() => {
    const mergeList = [
      {
        category: 'text',
        title: '文本',
        componentList: textConfigList,
      },
      {
        category: 'picture',
        title: '图片',
        componentList: pictureGather,
      },
      {
        category: 'graphics',
        title: '图形',
        componentList: graphicsData,
      },
      {
        category: 'base',
        title: '基础',
        componentList: getAllBaseModuleConfigList,
      },
    ];
    return mergeList.map((item, index) => (
      <React.Fragment key={index}>
        <TabPane
          key={index + 1}
          tab={<TabTitle title={item.title} icon={<HighlightOutlined style={{ margin: 0 }} />} />}
        >
          <div
            className={styles.leftMoveAnimate}
            style={{
              width: isShowLeftComponents ? '300px' : '0px',
              opacity: isShowLeftComponents ? '1' : '0',
            }}
          >
            <div className={styles.leftContainer}>
              <div className={styles.search}>
                <Input placeholder="请选择" prefix={<SearchOutlined />} allowClear />
              </div>
              {['picture', 'base', 'graphics'].includes(item.category) ? (
                <>
                  <SecondaryList
                    data={item.componentList as getAllConfigListType[]}
                    fatherData={item as getAllConfigListType}
                  />
                </>
              ) : null}
              {item.category === 'text' ? (
                <div
                  className={styles.contentContainer}
                  style={{
                    visibility: isShowLeftComponents ? 'visible' : 'hidden',
                  }}
                >
                  <Drag list={item.componentList as templateDataType[]} category={item.category} />
                </div>
              ) : null}
            </div>
          </div>
        </TabPane>
      </React.Fragment>
    ));
  }, [
    getAllBaseModuleConfigList,
    textConfigList,
    pictureGather,
    graphicsData,
    isShowLeftComponents,
  ]);

  return (
    <>
      <Tabs
        tabPosition="left"
        tabBarExtraContent={tabBarExtraContent}
        onChange={(val) => setTabKey(val)}
      >
        {Render}
      </Tabs>
    </>
  );
})
Example #6
Source File: SaveForm.tsx    From datart with Apache License 2.0 4 votes vote down vote up
export function SaveForm({ formProps, ...modalProps }: SaveFormProps) {
  const [advancedVisible, setAdvancedVisible] = useState(false);
  const [concurrencyControl, setConcurrencyControl] = useState(true);
  const [cache, setCache] = useState(false);
  const selectViewFolderTree = useMemo(makeSelectViewFolderTree, []);
  const [expensiveQuery, setExpensiveQuery] = useState(false); // beta.2 add expensiveQuery
  const {
    type,
    visible,
    simple,
    parentIdLabel,
    initialValues,
    onSave,
    onCancel,
    onAfterClose,
  } = useContext(SaveFormContext);
  const isOwner = useSelector(selectIsOrgOwner);
  const permissionMap = useSelector(selectPermissionMap);

  const getDisabled = useCallback(
    (_, path: string[]) =>
      !getCascadeAccess(
        isOwner,
        permissionMap,
        ResourceTypes.View,
        path,
        PermissionLevels.Create,
      ),
    [isOwner, permissionMap],
  );

  const folderTree = useSelector(state =>
    selectViewFolderTree(state, { id: initialValues?.id, getDisabled }),
  );
  const currentEditingView = useSelector(selectCurrentEditingView);
  const orgId = useSelector(selectOrgId);
  const formRef = useRef<FormInstance>();
  const t = useI18NPrefix('view.saveForm');
  const tg = useI18NPrefix('global');

  useEffect(() => {
    if (initialValues) {
      formRef.current?.setFieldsValue({
        ...initialValues,
        parentId: initialValues.parentId || void 0,
      });
    }
  }, [initialValues]);

  const toggleAdvanced = useCallback(() => {
    setAdvancedVisible(!advancedVisible);
  }, [advancedVisible]);

  const save = useCallback(
    values => {
      onSave(
        {
          ...values,
          config: { version: APP_CURRENT_VERSION, ...values.config },
        },
        onCancel,
      );
    },
    [onSave, onCancel],
  );

  const afterClose = useCallback(() => {
    formRef.current?.resetFields();
    setAdvancedVisible(false);
    setConcurrencyControl(true);
    setCache(false);
    onAfterClose && onAfterClose();
    setExpensiveQuery(false);
  }, [onAfterClose]);

  return (
    <ModalForm
      formProps={formProps}
      {...modalProps}
      title={t(simple ? 'folder' : 'title')}
      type={type}
      visible={visible}
      confirmLoading={currentEditingView?.stage === ViewViewModelStages.Saving}
      onSave={save}
      onCancel={onCancel}
      afterClose={afterClose}
      ref={formRef}
    >
      <Form.Item
        name="name"
        label={t('name')}
        rules={[
          {
            required: true,
            message: `${t('name')}${tg('validation.required')}`,
          },
          {
            validator: debounce((_, value) => {
              if (!value || initialValues?.name === value) {
                return Promise.resolve();
              }
              if (!value.trim()) {
                return Promise.reject(
                  `${t('name')}${tg('validation.required')}`,
                );
              }
              const parentId = formRef.current?.getFieldValue('parentId');
              const data = {
                name: value,
                orgId,
                parentId: parentId || null,
              };
              return fetchCheckName('views', data);
            }, DEFAULT_DEBOUNCE_WAIT),
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item name="parentId" label={parentIdLabel}>
        <TreeSelect
          placeholder={t('root')}
          treeData={folderTree || []}
          allowClear
          onChange={() => {
            formRef.current?.validateFields();
          }}
        />
      </Form.Item>
      {!simple && initialValues?.config && (
        <>
          <AdvancedToggle
            type="link"
            icon={<DoubleRightOutlined rotate={advancedVisible ? -90 : 90} />}
            onClick={toggleAdvanced}
          >
            {t('advanced')}
          </AdvancedToggle>
          <AdvancedWrapper show={advancedVisible}>
            <Form.Item
              name={['config', 'concurrencyControl']}
              label={t('concurrencyControl')}
              valuePropName="checked"
              initialValue={concurrencyControl}
            >
              <Switch onChange={setConcurrencyControl} />
            </Form.Item>
            <Form.Item
              name={['config', 'concurrencyControlMode']}
              label={t('concurrencyControlMode')}
              initialValue={ConcurrencyControlModes.DirtyRead}
            >
              <Radio.Group disabled={!concurrencyControl}>
                {Object.values(ConcurrencyControlModes).map(value => (
                  <Radio key={value} value={value}>
                    {t(value.toLowerCase())}
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item>
            <Form.Item
              name={['config', 'cache']}
              label={t('cache')}
              valuePropName="checked"
              initialValue={cache}
            >
              <Switch onChange={setCache} />
            </Form.Item>
            <Form.Item
              name={['config', 'cacheExpires']}
              label={t('cacheExpires')}
              initialValue={0}
            >
              <InputNumber disabled={!cache} />
            </Form.Item>
            <Form.Item
              wrapperCol={{ span: 13, offset: 9 }}
              name={['config', 'expensiveQuery']}
              initialValue={expensiveQuery}
              valuePropName="checked"
            >
              <Checkbox>{t('expensiveQuery')}</Checkbox>
            </Form.Item>
          </AdvancedWrapper>
        </>
      )}
    </ModalForm>
  );
}