@ant-design/icons#EditFilled TypeScript Examples

The following examples show how to use @ant-design/icons#EditFilled. 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: Columns.tsx From wildduck-ui with MIT License

5 votes

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

Example #2

Source File: DkimColumns.tsx From wildduck-ui with MIT License

5 votes

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

Example #3

Source File: FiltersTable.tsx From wildduck-ui with MIT License

5 votes

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

Example #4

Source File: Columns.tsx From wildduck-ui with MIT License

5 votes

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

Example #5

Source File: index.tsx From electron-playground with MIT License

5 votes

Apidoc: React.FunctionComponent<IApidocProps> = props => {
  const [markdownPath, setMarkdownPath] = useState('')
  const [content, setContent] = useState('')

  const handleMenuClick = (filePath: string) => {
    const relativePath = filePath.replace(apidoc_path, '')
    import(`../../apidocs${relativePath.replace(/\\/g, '/')}`).then(res => {
      setContent('')
      setContent(res.default)
      setMarkdownPath(relativePath)
    })
  }

  // 用于menu的子菜单展开
  const defaultOpenKeys = useMemo(() => {
    return menus.filter(m => m.children?.length).map(i => i.filePath)
  }, [])

  const generateMenus = (menu: MenusInfo) => {
    const { filePath, title, children } = menu
    if (children?.length) {
      return <Menu.SubMenu title={title} key={filePath}>
        {children.map((item, index) => generateMenus(item))}
      </Menu.SubMenu>
    }
    return <Menu.Item onClick={() => handleMenuClick(filePath as string)} key={filePath}>{title}</Menu.Item>
  }

  return (
    <Layout className={style.container}>
      <Layout.Sider width={256}>
        <Menu mode="inline" className={style.menu} defaultOpenKeys={defaultOpenKeys}>
          {menus.map(i => generateMenus(i))}
        </Menu>
      </Layout.Sider>
      <Layout className={style.main}>
        <Layout.Content className={style.content}>
          {content && <Markdown content={content} />}
          {content && <p className={style.edit}>
            <EditFilled /> 对文档内容有不同意见？欢迎
            <a href={`https://github.com/tal-tech/electron-playground/edit/master/playground/apidocs${markdownPath}`}>提供修改</a>
          </p>}
        </Layout.Content>
      </Layout>
    </Layout>
  )
}

Example #6

Source File: Comment.tsx From condo with MIT License

4 votes

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}
        />
    )
}

Example #7

Source File: MultipleFileUpload.tsx From condo with MIT License

4 votes

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

Example #8