-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(mobile): image-viewer update api
- Loading branch information
1 parent
d8e1b77
commit 131e838
Showing
13 changed files
with
183 additions
and
60 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }; |
22 changes: 22 additions & 0 deletions
22
packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<string \| ImageInfo>` `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`<br/> | N | ||
| onDelete | Function | | Typescript：`(index: number) => void`<br/> | N | ||
| onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/> | N |
22 changes: 22 additions & 0 deletions
22
packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<string \| ImageInfo>` `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`<br/>关闭时触发 | N | ||
| onDelete | Function | | TS 类型：`(index: number) => void`<br/>点击删除操作按钮时触发 | N | ||
| onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N |
72 changes: 72 additions & 0 deletions
72
packages/products/tdesign-mobile-react/src/image-viewer/type.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<string | ImageInfo>; | ||
| /** | ||
| * 当前预览图片所在的下标 | ||
| * @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'; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters