diff --git a/packages/component/src/Carousel/demos/basic.tsx b/packages/component/src/Carousel/demos/basic.tsx new file mode 100644 index 0000000..a0b3704 --- /dev/null +++ b/packages/component/src/Carousel/demos/basic.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Carousel } from 'aelf-design'; + +export default function CarouselExample() { + const IPFSAddress = + 'https://silver-abstract-unicorn-590.mypinata.cloud/ipfs/QmUyz5k2i8mxWJ9oLZcZnnRXW4zzq4tjTZzVCJUcyrQgLJ'; + const array = Array.from({ length: 6 }, (_, index) => index + 1); + const mockData = array.map((item) => { + return { + id: item, + url: `${IPFSAddress}/${item}.png?pinataGatewayToken=J-4VqFJOcNwmARnesBKmHYTpzCmzYA9o5Zx2On1Tp2VOC6W1DYjx45AygAaXHfpV`, + }; + }); + return ( + { + console.log(item, 'item'); + }} + /> + ); +} diff --git a/packages/component/src/Carousel/index.md b/packages/component/src/Carousel/index.md index 94e7070..8fec773 100644 --- a/packages/component/src/Carousel/index.md +++ b/packages/component/src/Carousel/index.md @@ -1,35 +1,24 @@ --- nav: Components +title: Carousel group: title: Display order: 3 --- -# Address +# Carousel 轮播图组件 -## Basic Usage +## 代码演示 - - -## Copyable - - - -## Format - - - -## Custom Tooltip - - + ## API | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - | -| copyable | Address copyable | `boolean` | `false` | - | -| address | Address | `string` | - | - | -| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - | -| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - | -| locale | Multilingual settings | `Locale["address"]` | - | - | +| data | 轮播图数据，URL是必传的 | `ICarouselSlideItem { url: string [key: string]: any}[]` | `{ headClip: 6, tailClip: 4 }` | - | +| galleryObjectFit | gallery图片展示规则 | `fill \| contain \| cover \| none \| scale-down` | `cover` | - | +| thumbsSlidesPerView | thumbs一页展示多少条 | `number` | 5 | - | +| onSlideClick | 点击轮播图片触发事件，返回值是当前点击的图片ICarouselSlideItem对象 | `(value: ICarouselSlideItem) => void` | - | + +## 本期暂未涉及token diff --git a/packages/component/src/Upload/demos/AWSUpload.tsx b/packages/component/src/Upload/demos/AWSUpload.tsx new file mode 100644 index 0000000..636d35d --- /dev/null +++ b/packages/component/src/Upload/demos/AWSUpload.tsx @@ -0,0 +1,43 @@ +import React, { useState } from 'react'; +import { IUploadProps, Upload } from 'aelf-design'; + +import { useAWSUploadService } from '../../hooks/useAws'; + +const AWSUpload = () => { + const [fileList, setFileList] = useState([]); + const { awsUploadFile } = useAWSUploadService(); + const handleChange: IUploadProps['onChange'] = (info) => { + let newFileList = [...info.fileList]; + newFileList = newFileList + .map((file) => { + if (file.response) { + // Component will show file.url as link + file.url = file.response.url; + } + return file; + }) + .filter((item) => item.status !== 'error'); + setFileList([...newFileList]); + }; + + const customUpload: IUploadProps['customRequest'] = async ({ file, onSuccess, onError }) => { + try { + const uploadFile = await awsUploadFile(file as File); + onSuccess?.({ + url: uploadFile, + }); + } catch (error) { + onError?.(error as Error); + } + }; + + return ; +}; + +const App: React.FC = () => ( +
+ +
+); + +export default App; diff --git a/packages/component/src/Upload/demos/basic.tsx b/packages/component/src/Upload/demos/basic.tsx index eba29c9..7633adf 100644 --- a/packages/component/src/Upload/demos/basic.tsx +++ b/packages/component/src/Upload/demos/basic.tsx @@ -1,41 +1,6 @@ import React, { useState } from 'react'; -import { Upload, UploadButton } from 'aelf-design'; -import { UploadProps, UploadRequestOption } from 'antd'; - -// import type { UploadRequestOption } from 'rc-upload/lib/interface'; - -import { useAWSUploadService } from '../../hooks/useAws'; - -const AWSUpload = () => { - const [fileList, setFileList] = useState([]); - const { awsUploadFile } = useAWSUploadService(); - const handleChange: UploadProps['onChange'] = (info) => { - let newFileList = [...info.fileList]; - newFileList = newFileList - .map((file) => { - if (file.response) { - // Component will show file.url as link - file.url = file.response.url; - } - return file; - }) - .filter((item) => item.status !== 'error'); - setFileList([...newFileList]); - }; - const customUpload = async ({ file, onSuccess, onError }: UploadRequestOption) => { - try { - const uploadFile = await awsUploadFile(file as File); - console.log(uploadFile, 'uploadFile'); - onSuccess?.({ - url: uploadFile, - }); - } catch (error) { - onError?.(error as Error); - } - }; - - return ; -}; +import { Upload } from 'aelf-design'; +import { UploadProps } from 'antd'; const FileUpload = () => { const [fileList, setFileList] = useState([]); @@ -53,22 +18,10 @@ const FileUpload = () => { ); }; -const UploadExample: React.FC = () => ( +const App: React.FC = () => (
- -
); -export default UploadExample; - -// const App: React.FC = () => { -// return ( -// -//
; -// -// ); -// }; - -// export default App; +export default App; diff --git a/packages/component/src/Upload/index.md b/packages/component/src/Upload/index.md index 11c36e8..8a5e213 100644 --- a/packages/component/src/Upload/index.md +++ b/packages/component/src/Upload/index.md @@ -1,35 +1,56 @@ --- -nav: Components +category: Components +title: Upload group: title: Display order: 3 --- -# Upload +# Upload 上传组件 -## Basic Usage +文件选择上传 - +## 何时使用 + +上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。 -## Copyable +- 当需要上传一个或一些文件时。 +- 当需要展现上传的进度时。 +- 当需要使用拖拽交互时。 - +## 代码演示 -## Format +### 基础上传示例 - + -## Custom Tooltip +### AWS上传示例 - + ## API -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - | -| copyable | Address copyable | `boolean` | `false` | - | -| address | Address | `string` | - | - | -| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - | -| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - | -| locale | Multilingual settings | `Locale["address"]` | - | - | +| Adjust | Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | --- | +| add | tips | 上传区域提示文案 | `string \| ReactNode` | Formats supported JPG, JPEG, PNG. Max size 10 MB.Recommend ratio 16:9. | | +| add | showUploadButton | 是否展示上传按钮 | `boolean` | `true` | - | +| add | uploadText | 上传提示文案 | `string` | Upload | - | +| add | uploadIconColor | 上传icon颜色 | `string` | 默认是主题色,colorPrimary | - | +| add | format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - | +| add | locale | Multilingual settings | `Locale["address"]` | - | - | +| delete | listType | - | - | - | - | +| delete | listType | - | - | - | - | + +## 主题变量(Design Tokens) + +### 组件Token + +| Token 名称 | 描述 | 类型 | 默认值 | +| ---------------- | ------------------ | -------- | ----------------------------------- | +| colorMessageText | 提示文本的字体颜色 | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 | +| borderColor | 边框颜色 | `string` | 暗黑模式：#484848 日间模式：#E0E0E0 | +| containerBg | 上传区域背景颜色 | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 | + +### 其他支持的API参考antd + +https://ant-design.antgroup.com/components/upload-cn#api