From 131e838ba1861c7ca66cf9013c500af9d36e5a60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Tue, 12 Nov 2024 00:20:27 +0800 Subject: [PATCH] feat(mobile): image-viewer update api --- db/TDesign.db | Bin 1003520 -> 1003520 bytes .../src/image-viewer/README.en-US.md | 4 +- .../src/image-viewer/README.md | 4 +- .../src/image-viewer/props.ts | 27 +++---- .../src/image-viewer/type.ts | 38 ++++----- .../src/image-viewer/defaultProps.ts | 15 ++++ .../src/image-viewer/image-viewer.en-US.md | 22 ++++++ .../src/image-viewer/image-viewer.md | 22 ++++++ .../src/image-viewer/type.ts | 72 ++++++++++++++++++ .../src/image-viewer/image-viewer.en-US.md | 10 +-- .../src/image-viewer/image-viewer.md | 10 +-- .../src/image-viewer/type.ts | 11 ++- packages/scripts/api.json | 8 +- 13 files changed, 183 insertions(+), 60 deletions(-) create mode 100644 packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts create mode 100644 packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md create mode 100644 packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md create mode 100644 packages/products/tdesign-mobile-react/src/image-viewer/type.ts diff --git a/db/TDesign.db b/db/TDesign.db index 1f0f8cd98d84bb4a3f7968052194741b3202396a..de50c9891d408e1b7e63e6b8a7121be63ee78d7b 100644 GIT binary patch delta 235 zcmZozVB4_3c7ik`>qHr6R#pbRvaZII))dCp6sFb`=GGLJ))dy(6t>nB_SO`R))dax z6t313?yV_2+7{Clg!s6o-__^go6cv&BRYML1&_yc^&6bL(;w*baD&CR8(Q+DSqLWO z=jWs*=IJP8=B1=oSSjSSuPEdJV&3g53i;yJX-#3^SLM^=?c;Iedc-BlFoiRT;}J(J z`*wCtHXqhGEO%LSnCqC%F)1)6O*U*u5o`3CV=cwPsLUzJD9EeIz`<*5%+MGnB_SO`R))dax z6t313?yV_2+7^s{(DiVSLM^= z?c;Iedc-BlnZ>c4!<>B+I}ckN>q3@~EJng&Dgy_vu`xrV;Ph1r{7H<})Abek^;oPGYVEd*YVp5T1pxfJI5GeL diff --git a/packages/products/tdesign-miniprogram/src/image-viewer/README.en-US.md b/packages/products/tdesign-miniprogram/src/image-viewer/README.en-US.md index 456d5f45c..7df7eb40e 100644 --- a/packages/products/tdesign-miniprogram/src/image-viewer/README.en-US.md +++ b/packages/products/tdesign-miniprogram/src/image-viewer/README.en-US.md @@ -22,6 +22,6 @@ default-visible | Boolean | undefined | hide or show image viewer。uncontrolled name | params | description -- | -- | -- -change | `(index: Number)` | \- +change | `(index: number)` | \- close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | \- -delete | `(index: Number)` | \- +delete | `(index: number)` | \- diff --git a/packages/products/tdesign-miniprogram/src/image-viewer/README.md b/packages/products/tdesign-miniprogram/src/image-viewer/README.md index 30d22a4bb..6bfdfeb06 100644 --- a/packages/products/tdesign-miniprogram/src/image-viewer/README.md +++ b/packages/products/tdesign-miniprogram/src/image-viewer/README.md @@ -22,6 +22,6 @@ default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 | 名称 | 参数 | 描述 -- | -- | -- -change | `(index: Number)` | 翻页时回调 +change | `(index: number)` | 翻页时回调 close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发 -delete | `(index: Number)` | 点击删除操作按钮时触发 +delete | `(index: number)` | 点击删除操作按钮时触发 diff --git a/packages/products/tdesign-miniprogram/src/image-viewer/props.ts b/packages/products/tdesign-miniprogram/src/image-viewer/props.ts index 45f78c24a..9c722c67e 100644 --- a/packages/products/tdesign-miniprogram/src/image-viewer/props.ts +++ b/packages/products/tdesign-miniprogram/src/image-viewer/props.ts @@ -8,17 +8,17 @@ import { TdImageViewerProps } from './type'; const props: TdImageViewerProps = { /** 遮罩的背景颜色 */ backgroundColor: { - type: null, - value: rgba(0, 0, 0, .6), + type: String, + value: 'rgba(0, 0, 0, 1)', }, - /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮 */ + /** 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 */ closeBtn: { - type: Boolean, - value: true, + type: null, + value: false, }, - /** 是否显示删除操作 */ + /** 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 */ deleteBtn: { - type: Boolean, + type: null, value: false, }, /** 图片数组 */ @@ -31,20 +31,15 @@ const props: TdImageViewerProps = { type: Number, value: 0, }, - /** 最大放大比例 */ - maxZoom: { - type: Number, - value: 3, - }, /** 是否显示页码 */ showIndex: { type: Boolean, value: false, }, - /** 自定义组件样式 */ - style: { - type: String, - value: '', + /** 是否使用了自定义导航栏 */ + usingCustomNavbar: { + type: Boolean, + value: false, }, /** 隐藏/显示预览 */ visible: { diff --git a/packages/products/tdesign-miniprogram/src/image-viewer/type.ts b/packages/products/tdesign-miniprogram/src/image-viewer/type.ts index 6948263bc..8f202fcd6 100644 --- a/packages/products/tdesign-miniprogram/src/image-viewer/type.ts +++ b/packages/products/tdesign-miniprogram/src/image-viewer/type.ts @@ -7,27 +7,27 @@ export interface TdImageViewerProps { /** * 遮罩的背景颜色 - * @default rgba(0, 0, 0, .6) + * @default 'rgba(0, 0, 0, 1)' */ backgroundColor?: { - type: null; - value?: string | number; + type: StringConstructor; + value?: string; }; /** - * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮 - * @default true + * 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 + * @default false */ closeBtn?: { - type: BooleanConstructor; - value?: boolean; + type: null; + value?: string | boolean | object; }; /** - * 是否显示删除操作 + * 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 * @default false */ deleteBtn?: { - type: BooleanConstructor; - value?: boolean; + type: null; + value?: string | boolean | object; }; /** * 图片数组 @@ -45,14 +45,6 @@ export interface TdImageViewerProps { type: NumberConstructor; value?: Number; }; - /** - * 最大放大比例 - * @default 3 - */ - maxZoom?: { - type: NumberConstructor; - value?: Number; - }; /** * 是否显示页码 * @default false @@ -62,12 +54,12 @@ export interface TdImageViewerProps { value?: boolean; }; /** - * 自定义组件样式 - * @default '' + * 是否使用了自定义导航栏 + * @default false */ - style?: { - type: StringConstructor; - value?: string; + usingCustomNavbar?: { + type: BooleanConstructor; + value?: boolean; }; /** * 隐藏/显示预览 diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts b/packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts new file mode 100644 index 000000000..905eefb8d --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts @@ -0,0 +1,15 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdImageViewerProps } from './type'; + +export const imageViewerDefaultProps: TdImageViewerProps = { + closeBtn: true, + deleteBtn: false, + images: [], + defaultIndex: 0, + maxZoom: 3, + showIndex: false, + defaultVisible: false, +}; diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md new file mode 100644 index 000000000..25659eada --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md @@ -0,0 +1,22 @@ +:: BASE_DOC :: + +## API + +### ImageViewer Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +closeBtn | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +deleteBtn | TNode | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +images | Array | [] | Typescript：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N +index | Number | 0 | \- | N +defaultIndex | Number | 0 | uncontrolled property | N +maxZoom | Number | 3 | Typescript：`Number` | N +showIndex | Boolean | false | \- | N +visible | Boolean | false | hide or show image viewer | N +defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N +onClose | Function | | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`
| N +onDelete | Function | | Typescript：`(index: number) => void`
| N +onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
| N diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md new file mode 100644 index 000000000..2b654e9f1 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md @@ -0,0 +1,22 @@ +:: BASE_DOC :: + +## API + +### ImageViewer Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +deleteBtn | TNode | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +images | Array | [] | 图片数组。TS 类型：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N +index | Number | 0 | 当前预览图片所在的下标 | N +defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N +maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`Number` | N +showIndex | Boolean | false | 是否显示页码 | N +visible | Boolean | false | 隐藏/显示预览 | N +defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N +onClose | Function | | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`
关闭时触发 | N +onDelete | Function | | TS 类型：`(index: number) => void`
点击删除操作按钮时触发 | N +onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/type.ts b/packages/products/tdesign-mobile-react/src/image-viewer/type.ts new file mode 100644 index 000000000..25270ba69 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/image-viewer/type.ts @@ -0,0 +1,72 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdImageViewerProps { + /** + * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮 + * @default true + */ + closeBtn?: TNode; + /** + * 是否显示删除操作，前提需要开启页码 + * @default false + */ + deleteBtn?: TNode; + /** + * 图片数组 + * @default [] + */ + images?: Array; + /** + * 当前预览图片所在的下标 + * @default 0 + */ + index?: number; + /** + * 当前预览图片所在的下标，非受控属性 + * @default 0 + */ + defaultIndex?: number; + /** + * 【开发中】最大放大比例 + * @default 3 + */ + maxZoom?: Number; + /** + * 是否显示页码 + * @default false + */ + showIndex?: boolean; + /** + * 隐藏/显示预览 + * @default false + */ + visible?: boolean; + /** + * 隐藏/显示预览，非受控属性 + * @default false + */ + defaultVisible?: boolean; + /** + * 关闭时触发 + */ + onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: boolean; index: number }) => void; + /** + * 点击删除操作按钮时触发 + */ + onDelete?: (index: number) => void; + /** + * 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 + */ + onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' | 'current' }) => void; +} + +export interface ImageInfo { + url: string; + align: 'start' | 'center' | 'end'; +} diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md index 156b311c1..13ed9f025 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md @@ -8,21 +8,21 @@ name | type | default | description | required -- | -- | -- | -- | -- closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N deleteBtn | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N -images | Array | [] | Typescript：`Array` | N +images | Array | [] | Typescript：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N index | Number | - | `v-model:index` is supported | N defaultIndex | Number | - | uncontrolled property | N maxZoom | Number | 3 | Typescript：`Number` | N showIndex | Boolean | false | \- | N visible | Boolean | false | hide or show image viewer。`v-model` and `v-model:visible` is supported | N defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N -onClose | Function | | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`
| N -onDelete | Function | | Typescript：`(index: Number) => void`
| N +onClose | Function | | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`
| N +onDelete | Function | | Typescript：`(index: number) => void`
| N onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`
| N ### ImageViewer Events name | params | description -- | -- | -- -close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | \- -delete | `(index: Number)` | \- +close | `(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number })` | \- +delete | `(index: number)` | \- index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | \- diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md index 20017ab9b..72be7a705 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md @@ -8,21 +8,21 @@ -- | -- | -- | -- | -- closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N deleteBtn | Boolean / Slot / Function | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N -images | Array | [] | 图片数组。TS 类型：`Array` | N +images | Array | [] | 图片数组。TS 类型：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`Number` | N showIndex | Boolean | false | 是否显示页码 | N visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N -onClose | Function | | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`
关闭时触发 | N -onDelete | Function | | TS 类型：`(index: Number) => void`
点击删除操作按钮时触发 | N +onClose | Function | | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`
关闭时触发 | N +onDelete | Function | | TS 类型：`(index: number) => void`
点击删除操作按钮时触发 | N onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N ### ImageViewer Events 名称 | 参数 | 描述 -- | -- | -- -close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | 关闭时触发 -delete | `(index: Number)` | 点击删除操作按钮时触发 +close | `(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number })` | 关闭时触发 +delete | `(index: number)` | 点击删除操作按钮时触发 index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts b/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts index 3d50de165..50e20dda5 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts @@ -21,7 +21,7 @@ export interface TdImageViewerProps { * 图片数组 * @default [] */ - images?: Array; + images?: Array; /** * 当前预览图片所在的下标 */ @@ -58,13 +58,18 @@ export interface TdImageViewerProps { /** * 关闭时触发 */ - onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: Boolean; index: Number }) => void; + onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: boolean; index: number }) => void; /** * 点击删除操作按钮时触发 */ - onDelete?: (index: Number) => void; + onDelete?: (index: number) => void; /** * 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 */ onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' }) => void; } + +export interface ImageInfo { + url: string; + align: 'start' | 'center' | 'end'; +} diff --git a/packages/scripts/api.json b/packages/scripts/api.json index a95df47d3..6553ebf2a 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -61370,7 +61370,7 @@ "create_time": "2024-05-31 05:07:01", "update_time": "2024-05-31 05:07:01", "event_output": null, - "custom_field_type": "Array", + "custom_field_type": "Array【interface ImageInfo { url: string; align: 'start' | 'center' | 'end' }】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0, @@ -61985,7 +61985,7 @@ "field_desc_zh": "翻页时回调", "field_desc_en": null, "field_required": 0, - "event_input": "(index: Number)", + "event_input": "(index: number)", "create_time": "2023-03-13 02:16:45", "update_time": "2023-03-13 02:16:45", "event_output": null, @@ -62090,7 +62090,7 @@ "field_desc_zh": "关闭时触发", "field_desc_en": null, "field_required": 0, - "event_input": "(context: { trigger: 'overlay' | 'close-btn', visible: Boolean, index: Number })", + "event_input": "(context: { trigger: 'overlay' | 'close-btn', visible: boolean, index: number })", "create_time": "2023-05-18 02:56:23", "update_time": "2023-05-18 02:56:23", "event_output": null, @@ -62128,7 +62128,7 @@ "field_desc_zh": "点击删除操作按钮时触发", "field_desc_en": null, "field_required": 0, - "event_input": "(index: Number)", + "event_input": "(index: number)", "create_time": "2023-03-13 02:16:45", "update_time": "2023-03-13 02:16:45", "event_output": null,