@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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
);
}
