diff --git a/components/attachments/FileList/Progress.tsx b/components/attachments/FileList/Progress.tsx index dcf25143..e14fd641 100644 --- a/components/attachments/FileList/Progress.tsx +++ b/components/attachments/FileList/Progress.tsx @@ -6,15 +6,10 @@ export interface ProgressProps { percent: number; } -const SVG_SIZE = 100; -const LINE_WIDTH = 10; - export default function Progress(props: ProgressProps) { - const { percent, prefixCls } = props; + const { percent } = props; const { token } = theme.useToken(); - const progressCls = `${prefixCls}-progress`; - return ( {(ptg || 0).toFixed(0)}%} /> - // - // - // - // ); } diff --git a/components/attachments/FileList/index.tsx b/components/attachments/FileList/index.tsx index 6e55e8bf..0002a1b4 100644 --- a/components/attachments/FileList/index.tsx +++ b/components/attachments/FileList/index.tsx @@ -1,9 +1,9 @@ import { LeftOutlined, PlusOutlined, RightOutlined } from '@ant-design/icons'; import { Button, type UploadProps } from 'antd'; -import classNames from 'classnames'; +import classnames from 'classnames'; import { CSSMotionList } from 'rc-motion'; import React from 'react'; -import type { Attachment } from '..'; +import type { Attachment, AttachmentsProps } from '..'; import SilentUploader from '../SilentUploader'; import { AttachmentContext } from '../context'; import FileListCard from './FileListCard'; @@ -14,10 +14,26 @@ export interface FileListProps { onRemove: (item: Attachment) => void; overflow?: 'scrollX' | 'scrollY' | 'wrap'; upload: UploadProps; + + // Semantic + listClassName?: string; + listStyle?: React.CSSProperties; + itemClassName?: string; + itemStyle?: React.CSSProperties; } export default function FileList(props: FileListProps) { - const { prefixCls, items, onRemove, overflow, upload } = props; + const { + prefixCls, + items, + onRemove, + overflow, + upload, + listClassName, + listStyle, + itemClassName, + itemStyle, + } = props; const listCls = `${prefixCls}-list`; @@ -82,13 +98,18 @@ export default function FileList(props: FileListProps) { // ================================= Render ================================= return (
({ @@ -108,8 +129,11 @@ export default function FileList(props: FileListProps) { prefixCls={listCls} item={item} onRemove={onRemove} - className={motionCls} - style={motionStyle} + className={classnames(motionCls, itemClassName)} + style={{ + ...motionStyle, + ...itemStyle, + }} /> ); }} diff --git a/components/attachments/PlaceholderUploader.tsx b/components/attachments/PlaceholderUploader.tsx index 7758fb07..b11f9c0b 100644 --- a/components/attachments/PlaceholderUploader.tsx +++ b/components/attachments/PlaceholderUploader.tsx @@ -15,10 +15,12 @@ export interface PlaceholderProps { prefixCls: string; placeholder?: PlaceholderType; upload?: UploadProps; + className?: string; + style?: React.CSSProperties; } function Placeholder(props: PlaceholderProps, ref: React.Ref) { - const { prefixCls, placeholder = {}, upload } = props; + const { prefixCls, placeholder = {}, upload, className, style } = props; const placeholderCls = `${prefixCls}-placeholder`; @@ -63,15 +65,20 @@ function Placeholder(props: PlaceholderProps, ref: React.Ref) { return (
{ beforeAll(() => { diff --git a/components/attachments/demo/_semantic.tsx b/components/attachments/demo/_semantic.tsx index 781f1a8d..6ba4b240 100644 --- a/components/attachments/demo/_semantic.tsx +++ b/components/attachments/demo/_semantic.tsx @@ -1,56 +1,57 @@ -import { BulbOutlined, InfoCircleOutlined, RocketOutlined } from '@ant-design/icons'; -import { Prompts, type PromptsProps } from '@ant-design/x'; +import { CloudUploadOutlined } from '@ant-design/icons'; +import { Attachments, type AttachmentsProps } from '@ant-design/x'; +import { Divider, Flex } from 'antd'; import React from 'react'; import SemanticPreview from '../../../.dumi/components/SemanticPreview'; import useLocale from '../../../.dumi/hooks/useLocale'; -const locales = { - cn: { title: '标题容器', list: '列表容器', item: '列表项', itemContent: '列表项内容' }, +const placeholderLocales = { + cn: { placeholder: '占位符' }, + en: { + placeholder: 'Placeholder', + }, +}; +const withItemLocales = { + cn: { list: '列表容器', item: '列表项' }, en: { - title: 'Title container', list: 'List container', item: 'List item', - itemContent: 'List item content', }, }; -const items: PromptsProps['items'] = [ - { - key: '1', - icon: , - label: 'Ignite Your Creativity', - description: 'Got any sparks for a new project?', - disabled: false, - }, - { - key: '2', - icon: , - label: 'Uncover Background Info', - description: 'Help me understand the background of this topic.', - disabled: false, - }, - { - key: '3', - icon: , - label: 'Efficiency Boost Battle', - description: 'How can I work faster and better?', - disabled: false, - }, -]; +const items: AttachmentsProps['items'] = Array.from({ length: 3 }).map((_, index) => ({ + uid: String(index), + name: `file-${index}.jpg`, + status: 'done', + thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', +})); const App: React.FC = () => { - const [locale] = useLocale(locales); + const [placeholderLocale] = useLocale(placeholderLocales); + const [withItemLocale] = useLocale(withItemLocales); + return ( - - - + + + , + title: 'Upload File', + description: 'Drag or click to upload file.', + }} + /> + + + + + + ); }; diff --git a/components/attachments/demo/placeholder.tsx b/components/attachments/demo/placeholder.tsx index f6615488..9583e1a2 100644 --- a/components/attachments/demo/placeholder.tsx +++ b/components/attachments/demo/placeholder.tsx @@ -1,6 +1,6 @@ import { CloudUploadOutlined } from '@ant-design/icons'; import { Attachments, type AttachmentsProps } from '@ant-design/x'; -import { App, Button, Flex, GetProp, Result, theme } from 'antd'; +import { Button, Flex, GetProp, Result, theme } from 'antd'; import React from 'react'; const presetFiles: AttachmentsProps['items'] = [ @@ -65,8 +65,6 @@ const getPlaceholderFn = ( }; const Demo = () => { - const { message } = App.useApp(); - const { token } = theme.useToken(); const [items, setItems] = React.useState>(presetFiles); @@ -137,8 +135,4 @@ const Demo = () => { ); }; -export default () => ( - - - -); +export default Demo; diff --git a/components/attachments/index.tsx b/components/attachments/index.tsx index 002eb585..0c15d9b3 100644 --- a/components/attachments/index.tsx +++ b/components/attachments/index.tsx @@ -5,7 +5,6 @@ import React from 'react'; import useXComponentConfig from '../_util/hooks/use-x-component-config'; import { useXProviderContext } from '../x-provider'; -import classNames from 'classnames'; import { useEvent, useMergedState } from 'rc-util'; import DropArea from './DropArea'; import FileList, { type FileListProps } from './FileList'; @@ -14,7 +13,7 @@ import SilentUploader from './SilentUploader'; import { AttachmentContext } from './context'; import useStyle from './style'; -export type SemanticType = 'list' | 'item' | 'itemContent' | 'title'; +export type SemanticType = 'list' | 'item' | 'placeholder'; export type Attachment = GetProp[number]; @@ -23,9 +22,13 @@ export interface AttachmentsProps extends Omit { rootClassName?: string; rootStyle?: React.CSSProperties; + style?: React.CSSProperties; className?: string; + classNames?: Partial>; + styles?: Partial>; + children?: React.ReactElement; disabled?: boolean; @@ -53,6 +56,8 @@ const Attachments: React.FC = (props) => { onChange, overflow, disabled, + classNames = {}, + styles = {}, ...uploadProps } = props; @@ -64,6 +69,8 @@ const Attachments: React.FC = (props) => { // ===================== Component Config ========================= const contextConfig = useXComponentConfig('attachments'); + const { classNames: contextClassNames, styles: contextStyles } = contextConfig; + // ============================= Ref ============================= const containerRef = React.useRef(null); @@ -107,6 +114,11 @@ const Attachments: React.FC = (props) => { placeholder={placeholderContent} upload={mergedUploadProps} prefixCls={prefixCls} + className={classnames(contextClassNames.placeholder, classNames.placeholder)} + style={{ + ...contextStyles.placeholder, + ...styles.placeholder, + }} /> ); }; @@ -120,7 +132,7 @@ const Attachments: React.FC = (props) => { {getPlaceholderNode('drop')} @@ -154,6 +166,16 @@ const Attachments: React.FC = (props) => { onRemove={onItemRemove} overflow={overflow} upload={mergedUploadProps} + listClassName={classnames(contextClassNames.list, classNames.list)} + listStyle={{ + ...contextStyles.list, + ...styles.list, + }} + itemClassName={classnames(contextClassNames.item, classNames.item)} + itemStyle={{ + ...contextStyles.item, + ...styles.item, + }} /> ) : ( getPlaceholderNode('inline')