@ant-design/icons#FileSearchOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#FileSearchOutlined.
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: MainMenu.tsx From mayoor with MIT License | 5 votes |
|
MainMenu: React.FC = () => {
const { t } = useTranslation();
const { currentUser } = useAppState();
return (
<StyledMenu>
<li>
<CategoryName>{t('Orders')}</CategoryName>
<LinkItem icon={<PlusCircleOutlined />} name={t('Add order')} to={'/orders/new'} />
<LinkItem
icon={<FileSearchOutlined />}
name={t('List orders')}
to={'/orders/list'}
/>
<LinkItem
icon={<BgColorsOutlined />}
name={t('To be printed')}
to={'/orders/print'}
/>
<LinkItem
icon={<HighlightOutlined />}
name={t('Waiting for production')}
to={'/orders/production'}
/>
</li>
<li>
<CategoryName>{t('Customers')}</CategoryName>
<LinkItem
icon={<UserAddOutlined />}
name={t('Add customer')}
to={'/customers/new'}
/>
<LinkItem icon={<TeamOutlined />} name={t('Customers')} to={'/customers/list'} />
</li>
{currentUser?.role === UserRole.EXECUTIVE && (
<li>
<CategoryName>{t('Administration')}</CategoryName>
<LinkItem icon={<FileTextOutlined />} name={t('Material')} to={'/materials'} />
<LinkItem icon={<TeamOutlined />} name={t('Users')} to={'/users'} />
</li>
)}
</StyledMenu>
);
}
Example #2
| 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 #3
| Source File: BrickBook.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
|
export function BrickBook({
storyId,
storyType,
stories,
brickDoc,
titleLinkEnabled,
titleLinkTarget,
notToSetPageTitle,
renderDocLink,
}: BrickBookProps): React.ReactElement {
const story = findStoryById(storyId, storyType, stories);
const actions = story ? story.actions : null;
const confList: BrickConf[] = [].concat(story?.conf).filter(Boolean);
const developerStorage = storage.getItem(NS_DEVELOPERS) ?? {};
const { t } = useTranslation(NS_DEVELOPERS);
const [mode, setMode] = React.useState(developerStorage.mode ?? "json");
React.useEffect(() => {
if (story && !notToSetPageTitle) {
getRuntime().applyPageTitle(i18nText(story.text));
}
}, [notToSetPageTitle, story]);
if (!story) {
return null;
}
const onChange = (e: RadioChangeEvent): void => {
const value = e.target.value;
developerStorage.mode = value;
setMode(value);
storage.setItem(NS_DEVELOPERS, developerStorage);
};
const title = getStoryTitle(story);
const description = i18nText(story.description) || "";
return (
<>
<section>
<h1 style={{ fontSize: "16px", marginBottom: "10px" }}>
{titleLinkEnabled ? (
<Link
to={`/developers/brick-book/${story.type}/${story.storyId}`}
{...(titleLinkTarget ? { target: titleLinkTarget } : {})}
>
{title} <FileSearchOutlined style={{ fontSize: "16px" }} />
</Link>
) : (
title
)}
<span className={cssStyle.subTitle}> {story.author}</span>
</h1>
<p style={{ marginBottom: "20px", color: "#595959" }}>
{" "}
{description}{" "}
</p>
</section>
<section>
<div className={cssStyle.previewHeader}>
<div className={cssStyle.left}>
{" "}
{t(K.PREVIEW)} <AppstoreOutlined />
<span className={cssStyle.subTitle}>
{" "}
{story.category}:{story.type}:{story.storyId}
</span>
</div>
<Radio.Group
defaultValue={mode}
buttonStyle="solid"
onChange={onChange}
>
<Radio.Button value="json">JSON</Radio.Button>
<Radio.Button value="yaml">YAML</Radio.Button>
</Radio.Group>
</div>
<div
className={cssStyle.brickPreview}
style={{
gridTemplateColumns: `repeat(${story.previewColumns || 1}, 1fr)`,
}}
>
{confList.map((item, i) => (
<BrickDemo
key={`${storyId}-${i}`}
mode={mode}
defaultConf={item}
actions={actions}
/>
))}
</div>
</section>
<section className={cssStyle.sectionTitle}>
<h2 style={{ marginBottom: "10px" }}>
API <CodeOutlined />
</h2>
{
// 兼容第二版构件文档（demo和doc都在stories.json里）
(story?.doc as StoryDoc)?.id ? (
<BrickDocument
storyId={storyId}
storyType={storyType}
doc={story?.doc as StoryDoc}
renderLink={renderDocLink}
/>
) : brickDoc ? (
// 兼容第一版构件文档（docs.jsons)
<BrickDocument
storyId={storyId}
storyType={storyType}
doc={brickDoc}
renderLink={renderDocLink}
/>
) : (
// 兼容最老的一般文档（手写markdown）
<BrickDoc doc={story.doc as string} />
)
}
</section>
</>
);
}
Example #4
| Source File: EventConfigForm.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
|
export function LegacyEventConfigForm(
props: EventConfigFormProps,
ref: React.Ref<Partial<FormInstance>>
): React.ReactElement {
const { t } = useTranslation(NS_NEXT_BUILDER);
const theme = useCurrentTheme();
const {
labelCol,
wrapperCol,
onValuesChange,
providerList,
type,
docUrl,
lifeCycle,
pathList,
segueList,
useInCustomTemplate,
highlightTokens,
onClickHighlightToken,
} = props;
const [form] = Form.useForm();
useImperativeHandle(
ref,
() => ({
setFieldsValue: form.setFieldsValue,
resetFields: form.resetFields,
validateFields: form.validateFields,
}),
[form]
);
const debounceHandleChange = useMemo(
() => debounce(onValuesChange, 600),
[onValuesChange]
);
const inlineFormItemStyle = useMemo(
() => ({
display: "inline-block",
width: "calc(100% - 20px)",
margin: "0 6px 0 0",
}),
[]
);
const getCodeEditorItem = useCallback(
(options = {}): React.ReactNode => {
return (
<CodeEditorItem
tabSize={2}
minLines={6}
maxLines="Infinity"
printMargin={false}
showLineNumbers={true}
theme={theme === "dark-v2" ? "monokai" : "tomorrow"}
enableLiveAutocompletion={true}
mode="brick_next_yaml"
highlightTokens={highlightTokens}
onClickHighlightToken={onClickHighlightToken}
{...options}
></CodeEditorItem>
);
},
[highlightTokens, onClickHighlightToken, theme]
);
const HandleTypeChange = useCallback(
(e: RadioChangeEvent): void => {
const type = e.target.value;
if (
type === HandlerType.UseProvider &&
isNil(form.getFieldValue("providerType"))
) {
form.setFieldsValue({ providerType: "provider" });
}
},
[form]
);
const handlerTypeItem = useMemo(
() => (
<Form.Item
hidden={lifeCycle === LifeCycle.UseResolves}
name="handlerType"
label={t(K.HANDLE_TYPE_LABEL)}
rules={[{ required: true }]}
>
<Radio.Group onChange={HandleTypeChange}>
<Radio value={HandlerType.BuiltinAction}>
{t(K.EVENTS_HANDLER_BUILTIN_ACTION)}
</Radio>
<Radio value={HandlerType.UseProvider}>
{t(K.EVENTS_HANDLER_USE_PROVIDER)}
</Radio>
<Radio value={HandlerType.CustomBrick}>
{t(K.EVENTS_CUSTOM_BRICK_INTERACTION)}
</Radio>
</Radio.Group>
</Form.Item>
),
[t, HandleTypeChange, lifeCycle]
);
const ifItem = useMemo(
() => (
<Form.Item name="if" label={t(K.IF_LABEL)}>
{getCodeEditorItem({
minLines: 3,
schemaRef: "#/definitions/UseProviderResolveConf/properties/if",
})}
</Form.Item>
),
[t, getCodeEditorItem]
);
const actionItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.BuiltinAction && (
<Form.Item label={t(K.SELECT_ACTION_LABEL)} required>
<Form.Item
name="action"
messageVariables={{ label: "action" }}
rules={[{ required: true }]}
style={docUrl && inlineFormItemStyle}
>
<AutoComplete
options={getActionOptions(builtinActions, recommendActionIds)}
filterOption={(inputValue, option) =>
option?.options?.some(
(item: BuiltinAction) =>
item.value
.toUpperCase()
.indexOf(inputValue.toUpperCase()) !== -1
)
}
></AutoComplete>
</Form.Item>
{docUrl && (
<Tooltip title={t(K.LINK_TO_NEXT_DOCS)}>
<Link target="_blank" href={docUrl}>
<FileSearchOutlined />
</Link>
</Tooltip>
)}
</Form.Item>
)
}
</Form.Item>
),
[t, inlineFormItemStyle, docUrl]
);
const segueIdItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.action !== currentValues.action
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.BuiltinAction &&
getFieldValue("action") === "segue.push" && (
<Form.Item
name="segueId"
label={t(K.SEGUE_ID_ITEM_LABEL)}
rules={[{ required: true }]}
>
<AutoComplete
options={segueList?.map((item) => ({
value: item.value,
label: (
<div style={{ display: "flex", gap: 8 }} title={item.label}>
<span>{item.value}</span>
<span
title={item.label}
style={{
fontSize: 12,
color: "rgba(137, 137, 137, 0.8)",
}}
>
[to: {item.label}]
</span>
</div>
),
}))}
filterOption={(inputValue, option) =>
option?.value
.toUpperCase()
.indexOf(inputValue.toUpperCase()) !== -1
}
/>
</Form.Item>
)
}
</Form.Item>
),
[t, segueList]
);
const historyPathItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.action !== currentValues.action
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.BuiltinAction &&
getFieldValue("action") === "history.push" && (
<Form.Item
name="path"
label={t(K.HISTORY_PATH_ITEM_LABEL)}
tooltip={t(K.HISTORY_PATH_ITEM_TOOLTIP)}
rules={[{ required: true }]}
>
<AutoComplete
options={pathList?.map((path) => ({ value: path }))}
filterOption={(inputValue, option) =>
option?.value
.toUpperCase()
.indexOf(inputValue.toUpperCase()) !== -1
}
/>
</Form.Item>
)
}
</Form.Item>
),
[pathList, t]
);
const providerTypeItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.UseProvider && (
<Form.Item
name="providerType"
label={t(K.PROVIDER_TYPE_LABEL)}
rules={[{ required: true }]}
>
<Radio.Group>
<Radio.Button value="provider">
{t(K.BUILTIN_PROVIDER)}
</Radio.Button>
<Radio.Button value="flow">{t(K.FLOW_API)}</Radio.Button>
</Radio.Group>
</Form.Item>
)
}
</Form.Item>
),
[t]
);
const providerItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.providerType !== currentValues.providerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.UseProvider &&
getFieldValue("providerType") === "provider" && (
<Form.Item label="Provider" required>
<Form.Item
name="provider"
rules={[{ required: true }]}
messageVariables={{ label: "provider" }}
style={inlineFormItemStyle}
>
<AutoComplete
options={providerList?.map((provider) => ({
value: provider,
}))}
filterOption={(inputValue, option) =>
option?.value
.toUpperCase()
.indexOf(inputValue.toUpperCase()) !== -1
}
></AutoComplete>
</Form.Item>
<Tooltip title={t(K.LINK_TO_DEVELOPER_PROVIDER_DOC)}>
<Link target="_blank" to="/developers/providers">
<FileSearchOutlined />
</Link>
</Tooltip>
</Form.Item>
)
}
</Form.Item>
),
[providerList, t, inlineFormItemStyle]
);
const flowApiItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.providerType !== currentValues.providerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.UseProvider &&
getFieldValue("providerType") === "flow" && (
<Form.Item label="Flow" required>
<Form.Item
name="flow"
rules={[{ required: true }]}
messageVariables={{ label: "flow" }}
style={inlineFormItemStyle}
>
<ContractAutoComplete />
</Form.Item>
<Tooltip title={t(K.LINK_TO_FLOWER_BUILDER)}>
<Link target="_blank" to="/flow-builder">
<FileSearchOutlined />
</Link>
</Tooltip>
</Form.Item>
)
}
</Form.Item>
),
[t, inlineFormItemStyle]
);
const useProviderMethod = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.UseProvider && (
<Form.Item
label={t(K.METHOD)}
name="useProviderMethod"
initialValue="resolve"
>
<Radio.Group>
<Radio value="resolve">resolve</Radio>
<Radio value="saveAs">saveAs</Radio>
</Radio.Group>
</Form.Item>
)
}
</Form.Item>
),
[t]
);
const pollEnabledItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.UseProvider && (
<Form.Item
label={t(K.POLLING_LABEL)}
name="pollEnabled"
valuePropName="checked"
>
<Switch></Switch>
</Form.Item>
)
}
</Form.Item>
),
[t]
);
const pollItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.pollingEnabled !== currentValues.handlerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.UseProvider &&
getFieldValue("pollEnabled") && (
<Form.Item name="poll" wrapperCol={{ offset: labelCol.span }}>
{getCodeEditorItem({
placeholder: t(K.POLLING_ITEM_PLACEHOLDER),
})}
</Form.Item>
)
}
</Form.Item>
),
[getCodeEditorItem, labelCol, t]
);
const callbackItem = useMemo(
() => (
<Form.Item
noStyle
// only hidden but Still Collect field value
hidden={true}
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.action !== currentValues.action ||
prevValues.brickEventType !== currentValues.brickEventType
}
>
{({ getFieldValue }) =>
(getFieldValue("handlerType") === HandlerType.UseProvider ||
(getFieldValue("handlerType") === HandlerType.CustomBrick &&
getFieldValue("brickEventType") ===
CustomBrickEventType.ExecuteMethod) ||
hasCallbackActions.includes(getFieldValue("action"))) && (
<Form.Item name="callback" label={t(K.CALLBACK_LABEL)}>
{getCodeEditorItem()}
</Form.Item>
)
}
</Form.Item>
),
[t, getCodeEditorItem]
);
const brickInteractionItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.CustomBrick && (
<Form.Item
initialValue={CustomBrickEventType.SetProps}
name="brickEventType"
label={t(K.BRICK_EVENT_LABEL)}
>
<Radio.Group>
<Radio.Button value={CustomBrickEventType.SetProps}>
{t(K.CUSTOM_EVENTS_SET_PROP)}
</Radio.Button>
<Radio.Button value={CustomBrickEventType.ExecuteMethod}>
{t(K.CUSTOM_EVENTS_USE_METHOD)}
</Radio.Button>
</Radio.Group>
</Form.Item>
)
}
</Form.Item>
),
[t]
);
const brickItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.CustomBrick && (
<Form.Item label={t(K.BRICK_SELECTOR_LABEL)} required>
<Input.Group compact>
<Form.Item
name="selectorType"
noStyle
initialValue={useInCustomTemplate ? "targetRef" : "target"}
>
<Select style={{ width: "105px" }}>
{useInCustomTemplate && (
<Select.Option value="targetRef">targetRef</Select.Option>
)}
<Select.Option value="target">target</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="brickSelector"
noStyle
rules={[{ required: true }]}
messageVariables={{ label: "brickSelector" }}
>
<AutoComplete
style={{ width: "calc(100% - 105px)" }}
></AutoComplete>
</Form.Item>
</Input.Group>
</Form.Item>
)
}
</Form.Item>
),
[useInCustomTemplate, t]
);
const brickMethodItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.brickEventType !== currentValues.brickEventType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.CustomBrick &&
getFieldValue("brickEventType") ===
CustomBrickEventType.ExecuteMethod && (
<Form.Item
name="method"
label={t(K.USE_METHOD_LABEL)}
rules={[{ required: true }]}
>
<AutoComplete></AutoComplete>
</Form.Item>
)
}
</Form.Item>
),
[t]
);
const argsItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.brickEventType !== currentValues.brickEventType
}
>
{({ getFieldValue }) =>
([HandlerType.UseProvider, HandlerType.BuiltinAction].includes(
getFieldValue("handlerType")
) ||
(getFieldValue("handlerType") === HandlerType.CustomBrick &&
getFieldValue("brickEventType") ===
CustomBrickEventType.ExecuteMethod)) && (
<Form.Item name="args" label={t(K.ARGS_LABEL)}>
{getCodeEditorItem({
schemaRef:
"#/definitions/UseProviderResolveConf/properties/args",
})}
</Form.Item>
)
}
</Form.Item>
),
[t, getCodeEditorItem]
);
const propertiesItem = useMemo(
() => (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.handlerType !== currentValues.handlerType ||
prevValues.brickEventType !== currentValues.brickEventType
}
>
{({ getFieldValue }) =>
getFieldValue("handlerType") === HandlerType.CustomBrick &&
getFieldValue("brickEventType") === CustomBrickEventType.SetProps && (
<Form.Item name="properties" label={t(K.PROPERTIES_LABEL)}>
{getCodeEditorItem()}
</Form.Item>
)
}
</Form.Item>
),
[t, getCodeEditorItem]
);
const useResolvesItem = useMemo(
() => (
<>
{handlerTypeItem}
{ifItem}
{providerTypeItem}
{providerItem}
{flowApiItem}
{argsItem}
<Form.Item noStyle>
<Form.Item name="transform" label={t(K.TRANSFORM_LABEL)}>
{getCodeEditorItem()}
</Form.Item>
<Form.Item
name="transformFrom"
label={t(K.TRANSFORM_FROM_LABEL)}
tooltip={t(K.TRANSFORM_FROM_TOOLTIP)}
>
{getCodeEditorItem({ minLines: 3, mode: "text" })}
</Form.Item>
<Form.Item
name="transformMapArray"
label={t(K.TRANSFORM_MAP_ARRAY)}
tooltip={t(K.TRANSFORM_MAP_ARRAY_TOOLTIP)}
initialValue="auto"
>
<Radio.Group>
<Radio value="auto"> auto </Radio>
<Radio value={true}> true </Radio>
<Radio value={false}> false </Radio>
</Radio.Group>
</Form.Item>
<Form.Item name="onReject" label={t(K.REJECT_LABEL)}>
{getCodeEditorItem()}
</Form.Item>
</Form.Item>
</>
),
[
argsItem,
flowApiItem,
handlerTypeItem,
ifItem,
providerItem,
providerTypeItem,
getCodeEditorItem,
t,
]
);
const allEventTypeItem = (
<>
{handlerTypeItem}
{providerTypeItem}
{brickInteractionItem}
{ifItem}
{actionItem}
{segueIdItem}
{historyPathItem}
{providerItem}
{flowApiItem}
{useProviderMethod}
{brickItem}
{brickMethodItem}
{argsItem}
{propertiesItem}
{pollEnabledItem}
{pollItem}
{callbackItem}
</>
);
const getFormItem = (
type: string,
lifeCycle?: string
): React.ReactElement => {
if (type === "lifeCycle" && lifeCycle === LifeCycle.UseResolves) {
return useResolvesItem;
} else {
return allEventTypeItem;
}
};
return (
<Form
name="eventConfigForm"
form={form}
labelCol={labelCol}
wrapperCol={wrapperCol}
onValuesChange={debounceHandleChange}
>
{getFormItem(type, lifeCycle)}
</Form>
);
}
