@ant-design/icons#DownCircleOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#DownCircleOutlined.
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: index.tsx From visual-layout with MIT License | 6 votes |
|
Collapse: React.FC<{ header?: React.ReactNode }> = ({ header, children }) => {
const [visible, setVisible] = useState(true);
return (
<div>
<div className={styles.header}>
<div onClick={() => setVisible(!visible)} className={styles.icon}>
{visible ? <DownCircleOutlined /> : <UpCircleOutlined />}
</div>
<div className={styles.content}>{header}</div>
</div>
<div style={{ display: visible ? 'block' : 'none' }}>{children}</div>
</div>
);
}
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: createModalForm.tsx From dashboard with Apache License 2.0 | 4 votes |
|
CreateModalForm: React.FC<CreateModalFormProps> = (props) => {
const {allDepartments, initialValues} = props;
const departmentMap = _.keyBy<DepartmentOption>(allDepartments, "ext_id");
const [departmentSelectionVisible, setDepartmentSelectionVisible] = useState(false);
const [selectedDepartments, setSelectedDepartments] = useState<DepartmentOption[]>([]);
const [deletedTagExtIDs, setDeletedTagExtIDs] = useState<string[]>([]);
const formRef = useRef<FormInstance>();
const minOrder = props.minOrder ? props.minOrder : 10000;
const maxOrder = props.maxOrder ? props.maxOrder : 100000;
const itemDataToFormData = (values: CustomerTagGroupItem) => {
const params: any = {...values}
params.is_global = (values.department_list === undefined || values.department_list === [] || values.department_list?.includes(0)) ? True : False;
return params;
}
useEffect(() => {
if (initialValues?.department_list?.includes(0)) {
setSelectedDepartments([])
} else {
setSelectedDepartments(initialValues?.department_list?.map((ext_id) => departmentMap[ext_id]) || [])
}
formRef?.current?.setFieldsValue(itemDataToFormData(initialValues || {}));
}, [initialValues])
return (
<>
<Modal
{...props}
width={568}
className={'dialog from-item-label-100w'}
visible={props.visible}
onOk={() => {
formRef.current?.submit();
}}
onCancel={() => {
props.setVisible(false);
}}
>
<ProForm
submitter={{
render: false,
}}
initialValues={itemDataToFormData(initialValues || {})}
formRef={formRef}
layout={'horizontal'}
onFinish={async (values) => {
const params: CustomerTagGroupItem = {
...props.initialValues,
...values,
department_list: selectedDepartments.map((item) => item.ext_id),
};
if (values.is_global === True) {
params.department_list = [0];
}
if (props.type === 'create') {
if (values.order_type === 'max') {
params.order = maxOrder + 1;
}
if (values.order_type === 'min') {
params.order = minOrder - 1 >= 0 ? minOrder - 1 : 0;
}
}
if (props.type === 'edit' && deletedTagExtIDs.length > 0) {
params.remove_ext_tag_ids = deletedTagExtIDs;
}
await props.onFinish(params);
setDeletedTagExtIDs([]);
}}
>
<h3 className="dialog-title" style={{fontSize: 18}}>
{' '}
{props.type === 'edit' ? '修改标签组' : '新建标签组'}{' '}
</h3>
<ProFormText
name="name"
label="标签组名称"
width={'md'}
placeholder="请输入标签组名称"
rules={[
{
required: true,
message: '标签组名称必填',
},
]}
/>
<ProFormRadio.Group
name="is_global"
label="可见范围"
options={[
{
label: '全部员工',
value: True,
},
{
label: '部门可用',
value: False,
},
]}
/>
<ProFormDependency name={['is_global']}>
{({is_global}) => {
// 部门可用
if (is_global === Disable) {
return (
<>
<Row>
<ProForm.Item label={'选择可用部门'}>
<Button
icon={<PlusOutlined/>}
onClick={() => setDepartmentSelectionVisible(true)}
>
添加部门
</Button>
</ProForm.Item>
</Row>
<Row>
<Space direction={'horizontal'} wrap={true} style={{marginBottom: 6}}>
{selectedDepartments?.length > 0 && selectedDepartments.map((item, index) => {
if (!item?.id) {
return <div key={index}></div>
}
return (
<div key={item.id} className={'department-item'}>
<Badge
count={
<CloseCircleOutlined
onClick={() => {
setSelectedDepartments(
selectedDepartments.filter(
(department) => department.id !== item.id,
),
);
}}
style={{color: 'rgb(199,199,199)'}}
/>
}
>
<span className={'container'}>
<FolderFilled
style={{
color: '#47a7ff',
fontSize: 20,
marginRight: 6,
verticalAlign: -6,
}}
/>
{item.name}
</span>
</Badge>
</div>
)
})}
</Space>
</Row>
</>
);
}
// 全局可用
return <></>;
}}
</ProFormDependency>
{props.type === 'create' && (
<ProFormRadio.Group
name="order_type"
label="默认排序"
initialValue={'max'}
options={[
{
label: '排最前面',
value: 'max',
},
{
label: '排最后面',
value: 'min',
},
]}
/>
)}
<ProFormList
label={'标签名称'}
name="tags"
actionRender={(field: FormListFieldData, action: FormListOperation) => {
const currentKey = field.name;
const lastKey = formRef.current?.getFieldValue('tags').length - 1;
return [
<Tooltip key={'moveUp'} title="上移">
<UpCircleOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
if (currentKey - 1 >= 0) {
action.move(currentKey, currentKey - 1);
} else {
action.move(currentKey, lastKey);
}
}}
/>
</Tooltip>,
<Tooltip key={'moveDown'} title="下移">
<DownCircleOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
if (currentKey + 1 <= lastKey) {
action.move(currentKey, currentKey + 1);
} else {
action.move(currentKey, 0);
}
}}
/>
</Tooltip>,
<Tooltip key={'copy'} title="复制">
<CopyOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
action.add(formRef.current?.getFieldValue('tags')[currentKey]);
}}
/>
</Tooltip>,
<Tooltip key={'remove'} title="删除">
<DeleteOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
if (formRef.current?.getFieldValue('tags')[currentKey]?.ext_id) {
setDeletedTagExtIDs([
...deletedTagExtIDs,
formRef.current?.getFieldValue('tags')[currentKey].ext_id,
]);
}
action.remove(currentKey);
}}
/>
</Tooltip>,
];
}}
creatorButtonProps={{
type: 'default',
style: {width: '128px'},
position: 'bottom',
creatorButtonText: '添加标签',
}}
creatorRecord={{
name: '',
}}
rules={[
{
// @ts-ignore
required: true,
message: '标签名称必填',
},
]}
>
<ProFormText
name="name"
width={'sm'}
fieldProps={{
allowClear: false,
style: {
// width: '230px',
},
}}
placeholder="请输入标签名称"
rules={[
{
required: true,
message: '标签名称必填',
},
]}
/>
</ProFormList>
</ProForm>
</Modal>
<DepartmentSelectionModal
visible={departmentSelectionVisible}
setVisible={setDepartmentSelectionVisible}
defaultCheckedDepartments={selectedDepartments}
onFinish={(values) => {
setSelectedDepartments(values);
}}
allDepartments={props.allDepartments}
/>
</>
);
}
Example #4
| Source File: createModalForm.tsx From dashboard with Apache License 2.0 | 4 votes |
|
CreateModalForm: React.FC<CreateModalFormProps> = (props) => {
const [departmentSelectionVisible, setDepartmentSelectionVisible] = useState(false);
const [selectedDepartments, setSelectedDepartments] = useState<DepartmentOption[]>([]);
const [deletedTagIDs, setDeletedTagIDs] = useState<string[]>([]);
const formRef = useRef<FormInstance>();
return (
<>
<Modal
width={568}
className={'dialog from-item-label-100w'}
visible={props.visible}
onOk={() => {
formRef.current?.submit();
}}
onCancel={() => {
props.setVisible(false);
}}
>
<ProForm
submitter={{
render: false,
}}
// 创建标签组modal
initialValues={props.initialValues}
formRef={formRef}
layout={'horizontal'}
onFinish={async (values) => {
const params: GroupChatTagGroupItem = {
...props.initialValues,
...values,
};
if (props.type === 'edit' && deletedTagIDs.length > 0) {
params.delete_tag_ids = deletedTagIDs;
}
await props.onFinish(params);
}}
>
<h2 className="dialog-title"> {props.type==='create'?'新建客户群标签':'修改客户群标签'} </h2>
<ProFormText
name="name"
label="标签组名称"
width={'md'}
placeholder="请输入标签组名称"
rules={[
{
required: true,
message: '标签组名称必填',
},
]}
/>
<ProFormList
label={'标签名称'}
name="tags"
actionRender={(
field: FormListFieldData,
action: FormListOperation,
) => {
const currentKey = field.name;
const lastKey = formRef.current?.getFieldValue('tags').length - 1;
return [
<Tooltip key={'moveUp'} title="上移">
<UpCircleOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
console.log(field, currentKey);
if (currentKey - 1 >= 0) {
action.move(currentKey, currentKey - 1);
} else {
action.move(currentKey, lastKey);
}
}}
/>
</Tooltip>,
<Tooltip key={'moveDown'} title="下移">
<DownCircleOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
console.log(field, currentKey);
if (currentKey + 1 <= lastKey) {
action.move(currentKey, currentKey + 1);
} else {
action.move(currentKey, 0);
}
}}
/>
</Tooltip>,
<Tooltip key={'copy'} title="复制">
<CopyOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
action.add(formRef.current?.getFieldValue('tags')[currentKey]);
}}
/>
</Tooltip>,
<Tooltip key={'remove'} title="删除">
<DeleteOutlined
className={'ant-pro-form-list-action-icon'}
onClick={() => {
if (formRef.current?.getFieldValue('tags')[currentKey]?.id) {
setDeletedTagIDs([
...deletedTagIDs,
formRef.current?.getFieldValue('tags')[currentKey].id,
]);
}
action.remove(currentKey);
}}
/>
</Tooltip>,
];
}}
creatorButtonProps={{
type: 'default',
style: {width: '128px'},
position: 'bottom',
creatorButtonText: '添加标签',
}}
creatorRecord={{
name: '',
}}
rules={[
{
// @ts-ignore
required: true,
message: '标签名称必填',
},
]}
>
<ProFormText
name="name"
width={'sm'}
fieldProps={{
allowClear: false,
style: {
// width: '230px',
},
}}
placeholder="请输入标签名称"
rules={[
{
required: true,
message: '标签名称必填',
},
]}
/>
</ProFormList>
</ProForm>
</Modal>
<DepartmentSelectionModal
visible={departmentSelectionVisible}
setVisible={setDepartmentSelectionVisible}
defaultCheckedDepartments={selectedDepartments}
onFinish={(values) => {
setSelectedDepartments(values);
}}
allDepartments={props.allDepartments}
/>
</>
);
}
Example #5
| Source File: index.tsx From datart with Apache License 2.0 | 4 votes |
|
EmailSettingForm: FC<EmailSettingFormProps> = ({
fileType,
onFileTypeChange,
}) => {
const [showBcc, setShowBcc] = useState(false);
const t = useI18NPrefix(
'main.pages.schedulePage.sidebar.editorPage.emailSettingForm.index',
);
const hasImgeWidth = useMemo(() => {
return fileType && fileType?.length > 0
? fileType?.includes(FileTypes.Image)
: false;
}, [fileType]);
const ccLabel = useMemo(() => {
return (
<>
{t('CC') + ' '}
<span onClick={() => setShowBcc(!showBcc)}>
{showBcc ? <UpCircleOutlined /> : <DownCircleOutlined />}
</span>
</>
);
}, [showBcc, t]);
return (
<>
<Form.Item
label={t('theme')}
name="subject"
rules={[{ required: true, message: t('subjectIsRequired') }]}
>
<Input />
</Form.Item>
<Row>
<Col span={15}>
<Form.Item
labelCol={{ span: 8 }}
label={t('fileType')}
name="type"
rules={[{ required: true }]}
>
<Checkbox.Group
options={FILE_TYPE_OPTIONS}
onChange={v => onFileTypeChange(v as FileTypes[])}
/>
</Form.Item>
</Col>
<Col span={9}>
{hasImgeWidth ? (
<div className="image_width_form_item_wrapper">
<Form.Item
label={t('picWidth')}
labelCol={{ span: 10 }}
name="imageWidth"
rules={[{ required: true }]}
>
<InputNumber min={100} />
</Form.Item>
<span className="image_width_unit">{t('px')}</span>
</div>
) : null}
</Col>
</Row>
<Form.Item
label={t('recipient')}
name="to"
rules={[{ required: true, message: t('recipientIsRequired') }]}
>
<MailTagFormItem />
</Form.Item>
<Form.Item label={ccLabel} name="cc">
<MailTagFormItem />
</Form.Item>
{showBcc ? (
<Form.Item label={t('bcc')} name="bcc">
<MailTagFormItem />
</Form.Item>
) : null}
<Form.Item label={t('contentOfEmail')} validateFirst name="textContent">
<CommonRichText placeholder="This email comes from cron job on the datart." />
</Form.Item>
</>
);
}
