@ant-design/icons#DeleteFilled TypeScript Examples

MessageActions: React.FC<{ messageDetails: GetMessagesResult }> = ({
	messageDetails,
}: {
	messageDetails: GetMessagesResult;
}) => {
	const { id }: any = useParams();
	const { mutate } = useDeleteMessage();
	const { setMessageId, setMessageSourceToggle } = useActions(messagesLogic);

	return (
		<Space size={'middle'}>
			<Tooltip title={'Get Message source'}>
				<Button
					className='ant-btn-icon'
					shape='circle'
					onClick={() => {
						setMessageId(messageDetails.id);
						setMessageSourceToggle(true);
					}}
				>
					<MailOutlined className={'blue-color'} />
				</Button>
			</Tooltip>
			<Tooltip title={'Delete'}>
				<Button
					className='ant-btn-icon'
					shape='circle'
					onClick={() =>
						showConfirm(() =>
							mutate({ userId: id, mailboxId: messageDetails.mailbox, messageNumber: messageDetails.id }),
						)
					}
				>
					<DeleteFilled className='red-color' />
				</Button>
			</Tooltip>
		</Space>
	);
}

DeleteButtonWithConfirmModal: React.FC<IDeleteActionButtonWithConfirmModal> = ({
    title,
    message,
    okButtonLabel,
    buttonCustomProps,
    buttonContent,
    action,
    showCancelButton,
}) => {
    const intl = useIntl()
    const CancelMessage = intl.formatMessage({ id: 'Cancel' })

    const [isConfirmVisible, setIsConfirmVisible] = useState(false)
    const [isDeleting, setIsDeleting] = useState(false)

    const showConfirm = () => setIsConfirmVisible(true)
    const handleCancel = () => setIsConfirmVisible(false)

    const handleDeleteButtonClick = () => {
        setIsConfirmVisible(false)
        setIsDeleting(true)
        runMutation(
            {
                action,
                onError: (e) => {
                    console.log(e)
                    console.error(e.friendlyDescription)
                    throw e
                },
                intl,
            },
        ).then(() => {
            setIsDeleting(false)
        })
    }

    return (
        <>
            <Button
                key={'submit'}
                onClick={showConfirm}
                type={'sberDanger'}
                loading={isDeleting}
                secondary
                {...buttonCustomProps}
            >
                {buttonContent || <DeleteFilled/>}
            </Button>
            <Modal
                title={title}
                visible={isConfirmVisible}
                onCancel={handleCancel}
                footer={[
                    showCancelButton && (
                        <Button key="cancel" type="sberPrimary" secondary onClick={handleCancel}>
                            {CancelMessage}
                        </Button>
                    ),
                    <Button
                        key={'submit'}
                        type={'sberDanger'}
                        onClick={handleDeleteButtonClick}
                    >
                        {okButtonLabel}
                    </Button>,
                ]}
            >
                <Typography.Text>
                    {message}
                </Typography.Text>
            </Modal>
        </>

    )
}

EditSectionForm: React.FC<IPropertyMapModalForm> = ({ builder, refresh }) => {
    const intl = useIntl()
    const NameLabel = intl.formatMessage({ id: 'pages.condo.property.section.form.name' })
    const NamePlaceholderLabel = intl.formatMessage({ id: 'pages.condo.property.section.form.name.placeholder' })
    const SaveLabel = intl.formatMessage({ id: 'Save' })
    const DeleteLabel = intl.formatMessage({ id: 'Delete' })

    const [name, setName] = useState<string>('')

    const section = builder.getSelectedSection()

    useEffect(() => {
        setName(section ? section.name : '')
    }, [section])

    const setNameValue = useCallback((value) => setName(value ? value.toString() : ''), [])

    const updateSection = useCallback(() => {
        builder.updateSection({ ...section, name })
        refresh()
    }, [builder, refresh, name, section])

    const deleteSection = useCallback(() => {
        builder.removeSection(section.id)
        refresh()
    }, [builder, refresh, section])

    return (
        <Row gutter={MODAL_FORM_EDIT_GUTTER} css={FormModalCss}>
            <Col span={24}>
                <Space direction={'vertical'} size={8}>
                    <Typography.Text type={'secondary'}>{NameLabel}</Typography.Text>
                    <InputNumber
                        value={name}
                        min={1}
                        placeholder={NamePlaceholderLabel}
                        onChange={setNameValue}
                        style={INPUT_STYLE}
                    />
                </Space>
            </Col>
            <Row gutter={MODAL_FORM_BUTTON_GUTTER}>
                <Col span={24}>
                    <Button
                        secondary
                        onClick={updateSection}
                        type='sberDefaultGradient'
                        disabled={isEmpty(name)}
                    >{SaveLabel}</Button>
                </Col>
                <Col span={24}>
                    <Button
                        secondary
                        onClick={deleteSection}
                        type='sberDangerGhost'
                        icon={<DeleteFilled />}
                        style={FULL_SIZE_UNIT_STYLE}
                    >{DeleteLabel}</Button>
                </Col>
            </Row>
        </Row>
    )
}

EditParkingForm: React.FC<IPropertyMapModalForm> = ({ builder, refresh }) => {
    const intl = useIntl()
    const NameLabel = intl.formatMessage({ id: 'pages.condo.property.parking.form.numberOfParkingSection' })
    const SaveLabel = intl.formatMessage({ id: 'Save' })
    const DeleteLabel = intl.formatMessage({ id: 'Delete' })

    const [parkingName, setParkingName] = useState<string>('')

    const parkingSection = builder.getSelectedParking()

    const deleteParking = useCallback(() => {
        builder.removeParking(parkingSection.id)
        refresh()
    }, [builder, refresh, parkingSection])

    const updateParkingSection = useCallback(() => {
        builder.updateParking({ ...parkingSection, name: parkingName })
        refresh()
    }, [builder, refresh, parkingName, parkingSection])

    const setParkingNameValue = useCallback((value) => setParkingName(value ? value.toString() : ''), [])

    useEffect(() => {
        setParkingName(parkingSection ? parkingSection.name : '')
    }, [parkingSection])

    return (
        <Row gutter={MODAL_FORM_EDIT_GUTTER} css={FormModalCss}>
            <Col span={24}>
                <Space direction={'vertical'} size={8}>
                    <Typography.Text type={'secondary'}>{NameLabel}</Typography.Text>
                    <InputNumber
                        value={parkingName}
                        min={1}
                        onChange={setParkingNameValue}
                        style={INPUT_STYLE}
                    />
                </Space>
            </Col>
            <Row gutter={MODAL_FORM_BUTTON_GUTTER}>
                <Col span={24}>
                    <Button
                        secondary
                        onClick={updateParkingSection}
                        type={'sberDefaultGradient'}
                    >
                        {SaveLabel}
                    </Button>
                </Col>
                <Col span={24}>
                    <Button
                        secondary
                        onClick={deleteParking}
                        type='sberDangerGhost'
                        icon={<DeleteFilled />}
                        style={FULL_SIZE_UNIT_STYLE}
                    >
                        {DeleteLabel}
                    </Button>
                </Col>
            </Row>
        </Row>
    )
}

DELETE_BUTTON_CUSTOM_PROPS: IDeleteActionButtonWithConfirmModal['buttonCustomProps'] = {
    type: 'sberDangerGhost',
    icon: <DeleteFilled />,
}

getAddressColumns = ({
	dataSource,
	edit,
	deleteAddress,
}: {
	dataSource: any;
	edit(value: string): void;
	deleteAddress(value: string): void;
}): any => {
	const columns = [
		{
			title: 'Address',
			dataIndex: 'address',
			filter: true,
			render: (text: string, record: GetUserAddressesResult) => (
				<a onClick={() => edit(record.id)}>
					{record.main ? <span style={{ color: 'green' }}>* </span> : null}
					{text}
				</a>
			),
		},
		{
			title: 'Name',
			dataIndex: 'name',
			filter: true,
		},
		{
			title: 'Created',
			dataIndex: 'created',
			sortable: 'date',
			align: 'center' as const,
			render: (date: string) => moment(date).format(DATE_TIME_FORMAT),
		},
		{
			title: 'Tags',
			dataIndex: 'tags',
			filter: true,
			render: (tags: string[]) => (
				<>
					{_.map(tags, (tag) => {
						return <Tag key={tag}>{tag}</Tag>;
					})}
				</>
			),
		},
		{
			title: 'Actions',
			dataIndex: 'actions',
			align: 'center' as const,
			render: (text: string, record: GetUserAddressesResult) => (
				<Space size={'middle'}>
					<Tooltip title={'Edit'}>
						<Button className='ant-btn-icon' shape='circle' onClick={() => edit(record.id)}>
							<EditFilled className={'green-color'} />
						</Button>
					</Tooltip>
					{_.get(record, 'main') ? null : (
						<Tooltip title={'Delete'}>
							<Button
								onClick={() => {
									showConfirm(
										() => deleteAddress(record.id),
										'Are you sure you want to Delete this Address ?',
									);
								}}
								className='ant-btn-icon'
								shape='circle'
							>
								<DeleteFilled className='red-color' />
							</Button>
						</Tooltip>
					)}
				</Space>
			),
		},
	];

	return getColumnsWithFilterAndSort(columns, dataSource);
}

getDkimColumns: any = ({ dataSource, deleteDkim }: { dataSource: any; deleteDkim(id: string): void }) => {
	const columnsDkim = [
		{
			title: 'Domain',
			dataIndex: 'domain',
			filter: true,
			render: (text: string, record: GetDkimKeysResult) => <DkimDetailsLink id={record.id} name={text} />,
		},
		{
			title: 'Selector',
			filter: true,
			dataIndex: 'selector',
		},
		{
			title: 'Description',
			dataIndex: 'description',
		},
		{
			title: 'Created',
			dataIndex: 'created',
			sortable: 'date',
			align: 'center' as const,
			render: (date: string) => moment(date).format(DATE_TIME_FORMAT_AP),
		},
		{
			title: 'Actions',
			dataIndex: 'Action',
			align: 'center' as const,
			render: (text: string, record: GetDkimKeysResult) => (
				<Space>
					<Tooltip title={'View Details'}>
						<DkimDetailsLink
							id={record.id}
							name={
								<Button className='ant-btn-icon' shape='circle'>
									<EditFilled className={'green-color'}></EditFilled>
								</Button>
							}
						/>
					</Tooltip>
					<Tooltip title={'Delete'}>
						<Button
							onClick={() =>
								showConfirm(() => deleteDkim(record.id), 'Are you sure you want to Delete this DKIM ?')
							}
							className='ant-btn-icon'
							shape='circle'
						>
							<DeleteFilled className='red-color' />
						</Button>
					</Tooltip>
				</Space>
			),
		},
	];

	return getColumnsWithFilterAndSort(columnsDkim, dataSource);
}

getDomainAliasesColumns = ({
	dataSource,
	deleteDomainAliases,
}: {
	dataSource: any;
	deleteDomainAliases(value: string): void;
}): any => {
	const columnDomainAliases = [
		{
			title: 'Alias',
			dataIndex: 'alias',
			sortable: 'string',
			filter: true,
		},
		{
			title: 'Domain',
			dataIndex: 'domain',
			sortable: 'string',
			filter: true,
		},
		{
			title: 'Action',
			key: 'action',
			width: 100,
			align: 'center' as const,
			render: (text: string, record: any) => (
				<Space size='middle'>
					<Tooltip title={'Delete'}>
						<Button
							onClick={() => {
								showConfirm(() => deleteDomainAliases(record.id), 'Are you sure you want to delete?');
							}}
							className='ant-btn-icon'
							shape='circle'
						>
							<DeleteFilled className='red-color' />
						</Button>
					</Tooltip>
				</Space>
			),
		},
	];

	return getColumnsWithFilterAndSort(columnDomainAliases, dataSource);
}

FiltersTable: React.FC = () => {
	const { setShowAddFilterForm, setFilterId } = useActions(filtersLogic);
	const { filtersList } = useValues(filtersLogic);

	const params: { id: string } = useParams();
	const { data, isLoading } = useFilters(params.id);
	const { mutate: deleteFilter } = useDeleteFilter();

	const columns = [
		{
			title: 'Name',
			dataIndex: 'name',
			filter: true,
			render: (name: string, record: GetFiltersResult) => {
				return {
					props: {
						style: { background: record.disabled ? '#ffcccb' : null },
					},
					children: <div>{name}</div>,
				};
			},
		},
		{
			title: 'Actions',
			dataIndex: 'action',
			align: 'center' as const,
			render: (text: string, record: GetFiltersResult) => {
				return {
					props: {
						style: { background: record.disabled ? '#ffcccb' : null },
					},
					children: (
						<Space>
							<Tooltip title={'Edit'}>
								<Button className='ant-btn-icon' shape='circle' onClick={() => setFilterId(record.id)}>
									<EditFilled className={'green-color'} />
								</Button>
							</Tooltip>
							<Tooltip title={'Delete'}>
								<Button
									onClick={() =>
										showConfirm(() => deleteFilter({ userId: params.id, filterId: record.id }))
									}
									className='ant-btn-icon'
									shape='circle'
								>
									<DeleteFilled className='red-color' />
								</Button>
							</Tooltip>
						</Space>
					),
				};
			},
		},
	];

	return (
		<>
			<Table
				size='small'
				columns={getColumnsWithFilterAndSort(columns, filtersList)}
				dataSource={data}
				pagination={_.size(filtersList) > 10 ? null : false}
				scroll={{ y: 550 }}
				loading={isLoading}
			></Table>
			<FloatingButton>
				<Tooltip title='Add New Filter'>
					<DiffOutlined
						onClick={() => {
							setShowAddFilterForm(true);
						}}
					/>
				</Tooltip>
			</FloatingButton>
		</>
	);
}

getForwardedAddressColumns = ({
	dataSource,
	deleteAddress,
}: {
	dataSource: any;
	deleteAddress(value: string): void;
}): any => {
	const columnsForwarded = [
		{
			title: 'Forwarded address',
			dataIndex: 'address',
			key: 'address',
			filter: true,
			render: (text: string, record: Address.IForwardedAddress) => (
				<Space size='middle'>
					<ForwardedAddressLink id={record.id} name={text} />
				</Space>
			),
		},
		{
			title: 'Name',
			dataIndex: 'name',
			key: 'name',
			filter: true,
		},
		{
			title: 'Tags',
			key: 'tags',
			dataIndex: 'tags',
			filter: true,
			align: 'center' as const,
			render: (tags: string[]) => (
				<>
					{_.map(tags, (tag) => {
						return <Tag key={tag}>{tag}</Tag>;
					})}
				</>
			),
		},
		{
			title: 'Action',
			key: 'action',
			align: 'center' as const,
			width: 100,
			render: (text: string, record: Address.IForwardedAddress) => (
				<Space size={'middle'}>
					<Tooltip title={'Edit'}>
						<ForwardedAddressLink
							id={record.id}
							name={
								<Button className='ant-btn-icon' shape='circle'>
									<EditFilled className={'green-color'} />
								</Button>
							}
						/>
					</Tooltip>
					<Tooltip title={'Delete'}>
						<Button
							onClick={() =>
								showConfirm(() => deleteAddress(record.id), 'Are you sure you want to delete?')
							}
							className='ant-btn-icon'
							shape='circle'
						>
							<DeleteFilled className='red-color' />
						</Button>
					</Tooltip>
				</Space>
			),
		},
	];

	return getColumnsWithFilterAndSort(columnsForwarded, dataSource);
}

Comment: React.FC<ICommentProps> = ({ comment, setEditableComment, deleteAction }) => {
    const intl = useIntl()
    const ConfirmDeleteTitle = intl.formatMessage({ id: 'Comments.actions.delete.confirm.title' })
    const ConfirmDeleteOkText = intl.formatMessage({ id: 'Comments.actions.delete.confirm.okText' })
    const ConfirmDeleteCancelText = intl.formatMessage({ id: 'Comments.actions.delete.confirm.cancelText' })
    const CommentDeletedText = intl.formatMessage({ id: 'Comments.deleted' })
    const MetaUpdatedText = intl.formatMessage({ id: 'Comments.meta.updated' })

    const { user } = useAuth()

    const [dateShowMode, setDateShowMode] = useState<'created' | 'updated'>('created')

    const handleDeleteComment = useCallback(() => {
        deleteAction({}, comment)
    }, [comment, deleteAction])
    const handleUpdateComment = useCallback(() => setEditableComment(comment), [comment, setEditableComment])
    const datetimeText = useMemo(() => dayjs(dateShowMode === 'created' ? comment.createdAt : comment.updatedAt).format(COMMENT_DATE_FORMAT),
        [comment.createdAt, comment.updatedAt, dateShowMode])
    const actions = useMemo(() => user.id === comment.user.id && ([
        <Popconfirm
            key="delete"
            title={ConfirmDeleteTitle}
            okText={ConfirmDeleteOkText}
            cancelText={ConfirmDeleteCancelText}
            onConfirm={handleDeleteComment}
        >
            <Button
                size="large"
                css={DeleteButtonStyle}
                icon={<DeleteFilled/>}
            />
        </Popconfirm>,
        <Button
            key="update"
            size="large"
            css={UpdateButtonStyle}
            icon={<EditFilled />}
            onClick={handleUpdateComment}
        />,
    ]), [ConfirmDeleteCancelText, ConfirmDeleteOkText, ConfirmDeleteTitle, comment.user.id, handleDeleteComment, handleUpdateComment, user.id])

    if (comment.deletedAt) {
        return (
            <Typography.Paragraph
                italic
                css={DeletedTextStyle}
            >
                {CommentDeletedText}
            </Typography.Paragraph>
        )
    }

    return (
        <AntComment
            content={
                <>
                    <Typography.Text>
                        {comment.content}
                    </Typography.Text>
                    <CommentFileList comment={comment} />
                </>
            }
            author={
                <Typography.Text type={'secondary'}>
                    <Typography.Text type={'secondary'} underline style={AUTHOR_TEXT_STYLES}>
                        {comment.user.name}
                    </Typography.Text>
                    ({getCommentAuthorRoleMessage(comment.user, intl)}),
                </Typography.Text>
            }
            datetime={
                <div
                    onMouseOut={() => setDateShowMode('created')}
                    onMouseOver={() => setDateShowMode('updated')}
                >
                    <Typography.Text title={MetaUpdatedText}>
                        {datetimeText}
                    </Typography.Text>
                </div>
            }
            actions={actions}
            css={CommentStyle}
        />
    )
}

MultipleFileUpload: React.FC<IMultipleFileUploadProps> = (props) => {
    const intl = useIntl()
    const AddFileLabel = intl.formatMessage({ id: 'component.uploadlist.AddFileLabel' })
    const FileTooBigErrorMessage = intl.formatMessage({ id: 'component.uploadlist.error.FileTooBig' },
        { maxSizeInMb: MAX_UPLOAD_FILE_SIZE / (1024 * 1024) })
    const UploadFailedErrorMessage = intl.formatMessage({ id: 'component.uploadlist.error.UploadFailedErrorMessage' })
    const {
        setFilesCount,
        fileList,
        initialCreateValues,
        Model,
        onFilesChange,
        UploadButton,
        uploadProps = {},
    } = props

    const [listFiles, setListFiles] = useState<UploadListFile[]>([])

    useEffect(() => {
        const convertedFiles = convertFilesToUploadFormat(fileList)
        setListFiles(convertedFiles)
    }, [fileList])

    const createAction = Model.useCreate(initialCreateValues, (file: DBFile) => Promise.resolve(file))

    useEffect(() => {
        if (listFiles.length === 0) {
            setFilesCount(0)
        }
    }, [listFiles.length, setFilesCount])

    const options = {
        fileList: listFiles,
        multiple: true,
        onChange: (info) => {
            let fileList = [...info.fileList]
            fileList = fileList.map(file => {
                if (file.response) {
                    file.url = file.response.url
                }
                return file
            })
            setListFiles(fileList)
        },
        showUploadList: {
            showRemoveIcon: true,
            removeIcon: (file) => {
                const removeIcon = (
                    <DeleteFilled onClick={() => {
                        const { id, uid } = file
                        const fileError = get(file, 'error')
                        if (!fileError) {
                            setFilesCount(filesCount => filesCount - 1)
                        }

                        if (!id) {
                            // remove file that failed to upload from list
                            setListFiles([...listFiles].filter(file => file.uid !== uid))
                            onFilesChange({ type: 'delete', payload: file })
                            return
                        }
                        setListFiles([...listFiles].filter(file => file.id !== id))
                        onFilesChange({ type: 'delete', payload: file })
                    }} />
                )
                return removeIcon
            },
        },
        customRequest: (options: UploadRequestOption) => {
            const { onSuccess, onError } = options
            const file = options.file as UploadFile
            if (file.size > MAX_UPLOAD_FILE_SIZE) {
                const error = new Error(FileTooBigErrorMessage)
                onError(error)
                return
            }
            return createAction({ ...initialCreateValues, file }).then( dbFile  => {
                const [uploadFile] = convertFilesToUploadFormat([dbFile])
                onSuccess(uploadFile, null)
                onFilesChange({ type: 'add', payload: dbFile })
                setFilesCount(filesCount => filesCount + 1)
            }).catch(err => {
                const error = new Error(UploadFailedErrorMessage)
                console.error('Upload failed', err)
                onError(error)
            })
        },
        ...uploadProps,
    }

    return (
        <div className={'upload-control-wrapper'}>
            <Upload { ...options }>
                {
                    UploadButton || (
                        <Button
                            type={'sberDefaultGradient'}
                            secondary
                            icon={<EditFilled />}
                        >
                            {AddFileLabel}
                        </Button>
                    )
                }
            </Upload>
        </div>
    )
}

UnitForm: React.FC<IPropertyMapModalForm> = ({ builder, refresh }) => {
    const intl = useIntl()
    const mode = builder.editMode
    const SaveLabel = intl.formatMessage({ id: mode === 'editUnit' ? 'Save' : 'Add' })
    const DeleteLabel = intl.formatMessage({ id: 'Delete' })
    const NameLabel = intl.formatMessage({ id: 'pages.condo.property.unit.Name' })
    const SectionLabel = intl.formatMessage({ id: 'pages.condo.property.section.Name' })
    const FloorLabel = intl.formatMessage({ id: 'pages.condo.property.floor.Name' })
    const UnitTypeLabel = intl.formatMessage({ id: 'pages.condo.property.modal.UnitType' })

    const [label, setLabel] = useState('')
    const [floor, setFloor] = useState('')
    const [section, setSection] = useState('')
    const [unitType, setUnitType] = useState<BuildingUnitSubType>(BuildingUnitSubType.Flat)

    const [sections, setSections] = useState([])
    const [floors, setFloors] = useState([])

    const updateSection = (value) => {
        setSection(value)
        setFloors(builder.getSectionFloorOptions(value))
        if (mode === 'editUnit') {
            const mapUnit = builder.getSelectedUnit()
            if (value === mapUnit.section) {
                setFloor(mapUnit.floor)
            } else {
                setFloor(null)
            }
        } else {
            setFloor(null)
        }
    }

    useEffect(() => {
        setSections(builder.getSectionOptions())
        const mapUnit = builder.getSelectedUnit()
        if (mapUnit) {
            setFloors(builder.getSectionFloorOptions(mapUnit.section))
            setLabel(mapUnit.label)
            setSection(mapUnit.section)
            setFloor(mapUnit.floor)
            setUnitType(mapUnit.unitType)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [builder])

    useEffect(() => {
        if (label && floor && section && unitType && mode === 'addUnit') {
            builder.addPreviewUnit({ id: '', label, floor, section, unitType })
            refresh()
        } else {
            builder.removePreviewUnit()
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [label, floor, section, mode, unitType])

    const resetForm = useCallback(() => {
        setLabel('')
        setFloor('')
        setSection('')
    }, [])

    const applyChanges = useCallback(() => {
        const mapUnit = builder.getSelectedUnit()
        if (mapUnit) {
            builder.updateUnit({ ...mapUnit, label, floor, section, unitType })
        } else {
            builder.removePreviewUnit()
            builder.addUnit({ id: '', label, floor, section, unitType })
            resetForm()
        }
        refresh()
    }, [builder, refresh, resetForm, label, floor, section, unitType])

    const deleteUnit = useCallback(() => {
        const mapUnit = builder.getSelectedUnit()
        builder.removeUnit(mapUnit.id, IS_NUMERIC_REGEXP.test(mapUnit.label))
        refresh()
        resetForm()
    }, [resetForm, refresh, builder])

    const updateUnitType = useCallback((value) => {
        setUnitType(value)
    }, [])

    return (
        <Row gutter={MODAL_FORM_ROW_GUTTER} css={FormModalCss}>
            <Col span={24}>
                <Space direction={'vertical'} size={8}>
                    <Typography.Text>{UnitTypeLabel}</Typography.Text>
                    <Select
                        value={intl.formatMessage({ id: `pages.condo.property.modal.unitType.${unitType}` })}
                        onSelect={updateUnitType}
                        style={INPUT_STYLE}
                    >
                        {Object.values(BuildingUnitSubType)
                            .filter(unitType => unitType !== BuildingUnitSubType.Parking)
                            .map((unitType, unitTypeIndex) => (
                                <Option key={unitTypeIndex} value={unitType}>{intl.formatMessage({ id: `pages.condo.property.modal.unitType.${unitType}` })}</Option>
                            ))}
                    </Select>
                </Space>
            </Col>
            <Col span={24}>
                <Space direction={'vertical'} size={8}>
                    <Typography.Text type={'secondary'}>{NameLabel}</Typography.Text>
                    <Input allowClear={true} value={label} onChange={e => setLabel(e.target.value)} style={INPUT_STYLE} />
                </Space>
            </Col>
            <Col span={24}>
                <Space direction={'vertical'} size={8} style={INPUT_STYLE}>
                    <Typography.Text type={'secondary'} >{SectionLabel}</Typography.Text>
                    <Select value={section} onSelect={updateSection} style={INPUT_STYLE}>
                        {sections.map((sec) => {
                            return <Option key={sec.id} value={sec.id}>{sec.label}</Option>
                        })}
                    </Select>
                </Space>
            </Col>
            <Col span={24}>
                <Space direction={'vertical'} size={BUTTON_SPACE_SIZE}>
                    <Space direction={'vertical'} size={8} style={INPUT_STYLE}>
                        <Typography.Text type={'secondary'} >{FloorLabel}</Typography.Text>
                        <Select value={floor} onSelect={setFloor} style={INPUT_STYLE}>
                            {floors.map(floorOption => {
                                return <Option key={floorOption.id} value={floorOption.id}>{floorOption.label}</Option>
                            })}
                        </Select>
                    </Space>
                    <Row gutter={MODAL_FORM_ROW_BUTTONS_GUTTER}>
                        <Col span={24}>
                            <Button
                                secondary
                                onClick={applyChanges}
                                type='sberDefaultGradient'
                                disabled={!(floor && section)}
                            > {SaveLabel} </Button>
                        </Col>
                        {
                            mode === 'editUnit' && (
                                <Col span={24}>
                                    <Button
                                        secondary
                                        onClick={deleteUnit}
                                        type='sberDangerGhost'
                                        icon={<DeleteFilled />}
                                    >{DeleteLabel}</Button>
                                </Col>
                            )
                        }
                    </Row>
                </Space>
            </Col>
        </Row>
    )
}

ParkingUnitForm: React.FC<IPropertyMapModalForm> = ({ builder, refresh }) => {
    const intl = useIntl()
    const mode = builder.editMode
    const SaveLabel = intl.formatMessage({ id: mode === 'editParkingUnit' ? 'Save' : 'Add' })
    const DeleteLabel = intl.formatMessage({ id: 'Delete' })
    const NameLabel = intl.formatMessage({ id: 'pages.condo.property.parkingUnit.Name' })
    const SectionLabel = intl.formatMessage({ id: 'pages.condo.property.parkingSection.name' })
    const FloorLabel = intl.formatMessage({ id: 'pages.condo.property.floor.Name' })
    const SectionTitlePrefix = intl.formatMessage({ id: 'pages.condo.property.select.option.parking' })

    const [label, setLabel] = useState('')
    const [floor, setFloor] = useState('')
    const [section, setSection] = useState('')

    const [sections, setSections] = useState([])
    const [floors, setFloors] = useState([])

    const updateSection = (value) => {
        setSection(value)
        setFloors(builder.getParkingSectionFloorOptions(value))
        if (mode === 'editParkingUnit') {
            const mapUnit = builder.getSelectedParkingUnit()
            if (value === mapUnit.section) {
                setFloor(mapUnit.floor)
            } else {
                setFloor(null)
            }
        } else {
            setFloor(null)
        }
    }

    useEffect(() => {
        setSections(builder.getParkingSectionOptions())
        const mapUnit = builder.getSelectedParkingUnit()
        if (mapUnit) {
            setFloors(builder.getParkingSectionFloorOptions(mapUnit.section))
            setLabel(mapUnit.label)
            setSection(mapUnit.section)
            setFloor(mapUnit.floor)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [builder])

    useEffect(() => {
        if (label && floor && section && mode === 'addParkingUnit') {
            builder.addPreviewParkingUnit({ id: '', label, floor, section })
            refresh()
        } else {
            builder.removePreviewParkingUnit()
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [label, floor, section, mode])

    const resetForm = useCallback(() => {
        setLabel('')
        setFloor('')
        setSection('')
    }, [])

    const applyChanges = useCallback(() => {
        const mapUnit = builder.getSelectedParkingUnit()
        if (mapUnit) {
            builder.updateParkingUnit({ ...mapUnit, label, floor, section })
        } else {
            builder.removePreviewParkingUnit()
            builder.addParkingUnit({ id: '', label, floor, section })
            resetForm()
        }
        refresh()
    }, [builder, refresh, resetForm, label, floor, section])

    const deleteUnit = useCallback(() => {
        const mapUnit = builder.getSelectedParkingUnit()
        builder.removeParkingUnit(mapUnit.id, IS_NUMERIC_REGEXP.test(mapUnit.label))
        refresh()
        resetForm()
    }, [resetForm, refresh, builder])

    return (
        <Row gutter={MODAL_FORM_ROW_GUTTER} css={FormModalCss}>
            <Col span={24}>
                <Space direction={'vertical'} size={8} style={INPUT_STYLE}>
                    <Typography.Text type={'secondary'} >{SectionLabel}</Typography.Text>
                    <Select value={section} onSelect={updateSection} style={INPUT_STYLE}>
                        {sections.map((sec) => {
                            return <Option key={sec.id} value={sec.id}>{SectionTitlePrefix} {sec.label}</Option>
                        })}
                    </Select>
                </Space>
            </Col>
            <Col span={24}>
                <Space direction={'vertical'} size={8} style={INPUT_STYLE}>
                    <Typography.Text type={'secondary'} >{FloorLabel}</Typography.Text>
                    <Select value={floor} onSelect={setFloor} style={INPUT_STYLE}>
                        {floors.map(floorOption => {
                            return <Option key={floorOption.id} value={floorOption.id}>{floorOption.label}</Option>
                        })}
                    </Select>
                </Space>
            </Col>
            <Col span={24}>
                <Space direction={'vertical'} size={BUTTON_SPACE_SIZE}>
                    <Space direction={'vertical'} size={8}>
                        <Typography.Text type={'secondary'}>{NameLabel}</Typography.Text>
                        <Input allowClear={true} value={label} onChange={e => setLabel(e.target.value)} style={INPUT_STYLE} />
                    </Space>
                    <Row gutter={MODAL_FORM_ROW_BUTTONS_GUTTER}>
                        <Col span={24}>
                            <Button
                                secondary
                                onClick={applyChanges}
                                type='sberDefaultGradient'
                                disabled={!(floor && section)}
                            > {SaveLabel} </Button>
                        </Col>
                        {
                            mode === 'editParkingUnit' && (
                                <Col span={24}>
                                    <Button
                                        secondary
                                        onClick={deleteUnit}
                                        type='sberDangerGhost'
                                        icon={<DeleteFilled />}
                                    >{DeleteLabel}</Button>
                                </Col>
                            )
                        }
                    </Row>
                </Space>
            </Col>
        </Row>
    )
}