From dee1a4d437d7a5c0b27bbc0083eb801ca4c2dd5e Mon Sep 17 00:00:00 2001 From: duenyang <377153400@qq.com> Date: Fri, 12 Jul 2024 15:49:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(grid):=20grid=20complete=20=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit grid complete 🎉 re #88 --- site/sidebar.config.ts | 6 ++ src/_common | 2 +- src/_util/dom.ts | 18 ++++ src/avatar/README.md | 14 +-- src/avatar/avatar.en-US.md | 16 ++-- src/avatar/avatar.tsx | 3 +- src/button/README.md | 6 +- src/grid/README.md | 75 ++++++++++++++++ src/grid/_example/base.tsx | 29 ++++++ src/grid/_example/common.css | 19 ++++ src/grid/_example/flex.jsx | 45 ++++++++++ src/grid/_example/gutter.jsx | 25 ++++++ src/grid/_example/halign.jsx | 38 ++++++++ src/grid/_example/offset.tsx | 21 +++++ src/grid/_example/order.jsx | 51 +++++++++++ src/grid/_example/responsive.jsx | 33 +++++++ src/grid/_example/sort.tsx | 19 ++++ src/grid/_example/valign.jsx | 28 ++++++ src/grid/col.tsx | 138 ++++++++++++++++++++++++++++ src/grid/defaultProps.ts | 9 ++ src/grid/index.ts | 11 +++ src/grid/row.tsx | 150 +++++++++++++++++++++++++++++++ src/grid/style/index.js | 10 +++ src/grid/type.ts | 100 +++++++++++++++++++++ src/image/image.en-US.md | 10 +-- src/image/image.tsx | 12 +-- src/index.ts | 1 + src/loading/README.md | 10 +-- src/menu/README.md | 8 +- src/popup/README.md | 18 ++-- src/switch/README.md | 6 +- src/tooltip/README.md | 2 +- 32 files changed, 879 insertions(+), 54 deletions(-) create mode 100644 src/grid/README.md create mode 100644 src/grid/_example/base.tsx create mode 100644 src/grid/_example/common.css create mode 100644 src/grid/_example/flex.jsx create mode 100644 src/grid/_example/gutter.jsx create mode 100644 src/grid/_example/halign.jsx create mode 100644 src/grid/_example/offset.tsx create mode 100644 src/grid/_example/order.jsx create mode 100644 src/grid/_example/responsive.jsx create mode 100644 src/grid/_example/sort.tsx create mode 100644 src/grid/_example/valign.jsx create mode 100644 src/grid/col.tsx create mode 100644 src/grid/defaultProps.ts create mode 100644 src/grid/index.ts create mode 100644 src/grid/row.tsx create mode 100644 src/grid/style/index.js create mode 100644 src/grid/type.ts diff --git a/site/sidebar.config.ts b/site/sidebar.config.ts index d4c6b2c..a30326d 100644 --- a/site/sidebar.config.ts +++ b/site/sidebar.config.ts @@ -72,6 +72,12 @@ export default [ path: '/components/space', component: () => import('tdesign-web-components/space/README.md'), }, + { + title: 'Grid 栅格', + name: 'grid', + path: '/components/grid', + component: () => import('tdesign-web-components/grid/README.md'), + }, ], tag: '', }, diff --git a/src/_common b/src/_common index a3e26cf..19099ac 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit a3e26cf8ce5053ac790b6dcdaee7190cc39a4281 +Subproject commit 19099ac97d350f5e37f9036d9c8bb4ad41f3057f diff --git a/src/_util/dom.ts b/src/_util/dom.ts index e74772f..6fa0465 100644 --- a/src/_util/dom.ts +++ b/src/_util/dom.ts @@ -157,3 +157,21 @@ export function domContains(parent: HTMLElement, child: HTMLElement) { } return matched; } + +// DOM properties that should NOT have "px" added when numeric +export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i; + +export function setStyle(style: CSSStyleDeclaration, key: string, value: string | number | null) { + if (key[0] === '-') { + style.setProperty(key, value == null ? '' : value.toString()); + } else if (value == null) { + // eslint-disable-next-line no-param-reassign + (style as any)[key] = ''; + } else if (typeof value !== 'number' || IS_NON_DIMENSIONAL.test(key)) { + // eslint-disable-next-line no-param-reassign + (style as any)[key] = value.toString(); + } else { + // eslint-disable-next-line no-param-reassign + (style as any)[key] = `${value}px`; + } +} diff --git a/src/avatar/README.md b/src/avatar/README.md index f07a506..276e6d0 100644 --- a/src/avatar/README.md +++ b/src/avatar/README.md @@ -50,12 +50,12 @@ spline: base className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N alt | String | - | 头像替换文本,仅当图片加载失败时有效 | N -content | TNode | - | 子元素内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +content | TNode | - | 子元素内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N -icon | TElement | - | 图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +icon | TElement | - | 图标。TS 类型:`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N image | String | - | 图片地址 | N -imageProps | Object | - | 透传至 Image 组件。TS 类型:`ImageProps`,[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N -shape | String | circle | 形状。可选项:circle/round。TS 类型:`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N +imageProps | Object | - | 透传至 Image 组件。TS 类型:`ImageProps`,[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N +shape | String | circle | 形状。可选项:circle/round。TS 类型:`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N size | String | - | 尺寸,示例值:small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时,默认值为 medium。如果父组件存在 AvatarGroup,默认值便由 AvatarGroup.size 决定 | N onError | Function | | TS 类型:`(context: { e: ImageEvent }) => void`
图片加载失败时触发 | N @@ -65,8 +65,8 @@ onError | Function | | TS 类型:`(context: { e: ImageEvent }) => void`
-- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -cascading | String | 'right-up' | 图片之间的层叠关系,可选值:左侧图片在上和右侧图片在上。可选项:left-up/right-up。TS 类型:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N -collapseAvatar | TNode | - | 头像数量超出时,会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例:`+5`,`...`, `更多`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +cascading | String | 'right-up' | 图片之间的层叠关系,可选值:左侧图片在上和右侧图片在上。可选项:left-up/right-up。TS 类型:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N +collapseAvatar | TNode | - | 头像数量超出时,会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例:`+5`,`...`, `更多`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N max | Number | - | 能够同时显示的最多头像数量 | N -popupProps | Object | - | 头像右上角提示信息。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N +popupProps | Object | - | 头像右上角提示信息。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N size | String | - | 尺寸,示例值:small/medium/large/24px/38px 等。优先级低于 Avatar.size | N \ No newline at end of file diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md index 16c72e9..004fec1 100644 --- a/src/avatar/avatar.en-US.md +++ b/src/avatar/avatar.en-US.md @@ -9,13 +9,13 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N alt | String | - | show it when url is not valid | N -children | TNode | - | children, same as `content`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N -content | TNode | - | content slot or props.content。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +children | TNode | - | children, same as `content`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +content | TNode | - | content slot or props.content。Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N hideOnLoadFailed | Boolean | false | hide image when loading image failed | N -icon | TElement | - | use icon to fill。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +icon | TElement | - | use icon to fill。Typescript:`TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N image | String | - | images url | N -imageProps | Object | - | Typescript:`ImageProps`,[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N -shape | String | circle | shape。options:circle/round。Typescript:`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N +imageProps | Object | - | Typescript:`ImageProps`,[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N +shape | String | circle | shape。options:circle/round。Typescript:`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N size | String | - | size | N onError | Function | | Typescript:`(context: { e: ImageEvent }) => void`
trigger on image load failed | N @@ -25,8 +25,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -cascading | String | 'right-up' | multiple images cascading。options:left-up/right-up。Typescript:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -collapseAvatar | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cascading | String | 'right-up' | multiple images cascading。options:left-up/right-up。Typescript:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N +collapseAvatar | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N max | Number | - | \- | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N size | String | - | size | N diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx index 64973b9..e4e8668 100644 --- a/src/avatar/avatar.tsx +++ b/src/avatar/avatar.tsx @@ -83,7 +83,6 @@ export default class Avatar extends Component { const { SIZE } = getCommonClassName(); const { componentName, isImgExist, groupSize, avatarRef, avatarChildrenRef, handleImgLoadError } = this; const { alt, icon, image, shape, size: avatarSize, children, content, style, imageProps, ...avatarProps } = props; - // console.log('this.injection.groupSize: ', this.injection.groupSize) const size = avatarSize === undefined ? groupSize : avatarSize; const numSizeStyle = @@ -128,7 +127,7 @@ export default class Avatar extends Component { ); } return ( -
+
{renderChildren}
); diff --git a/src/button/README.md b/src/button/README.md index 320958c..c4d0b14 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -62,14 +62,14 @@ Block 按钮在宽度上充满其所在的父容器(无 padding 和 margin 值 className | String | - | 类名 | N style | Object | - | 样式 | N block | Boolean | false | 是否为块级元素 | N -children | TNode | - | 按钮内容,TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 按钮内容,TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N disabled | Boolean | false | 禁用状态 | N ghost | Boolean | false | 是否为幽灵按钮(镂空按钮) | N href | String | - | 跳转地址。href 存在时,按钮标签默认使用 `` 渲染;如果指定了 `tag` 则使用指定的标签渲染 | N -icon | TElement | - | 按钮内部图标,可完全自定义。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 按钮内部图标,可完全自定义。TS 类型:`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N loading | Boolean | false | 是否显示为加载状态 | N shape | String | rectangle | 按钮形状,有 4 种:长方形、正方形、圆角长方形、圆形。可选项:rectangle/square/round/circle | N -size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N tag | String | - | 渲染按钮的 HTML 标签,默认使用标签 `
}> + ))} + + ))} + + ); + } +} diff --git a/src/grid/_example/common.css b/src/grid/_example/common.css new file mode 100644 index 0000000..abd5771 --- /dev/null +++ b/src/grid/_example/common.css @@ -0,0 +1,19 @@ +t-col-light-dom > div { + min-height: 40px; + margin-top: 8px; + margin-bottom: 8px; + background: var(--td-brand-color-6); + color: #fff; + text-align: center; + line-height: 40px; +} + +t-col-light-dom:nth-of-type(2n) > div { + min-height: 40px; + margin-top: 8px; + margin-bottom: 8px; + color: #fff; + text-align: center; + line-height: 40px; + background: var(--td-brand-color-4); +} \ No newline at end of file diff --git a/src/grid/_example/flex.jsx b/src/grid/_example/flex.jsx new file mode 100644 index 0000000..1617319 --- /dev/null +++ b/src/grid/_example/flex.jsx @@ -0,0 +1,45 @@ +import 'tdesign-web-components/grid'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function OrderGrid() { + return ( + <> + + +
2 / 5
+
+ +
3 / 5
+
+
+ + + +
100px
+
+ +
Fill Rest
+
+
+ + + +
1 1 200px
+
+ +
0 1 300px
+
+
+ + + +
none
+
+ +
auto with no-wrap
+
+
+ + ); +} diff --git a/src/grid/_example/gutter.jsx b/src/grid/_example/gutter.jsx new file mode 100644 index 0000000..22e65a5 --- /dev/null +++ b/src/grid/_example/gutter.jsx @@ -0,0 +1,25 @@ +import 'tdesign-web-components/grid'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function SpaceGrid() { + const colRender = (num, span = 3) => + Array(num) + .fill(3) + .map(() => col-3}>); + return ( + <> + + {colRender(4)} + + + + {colRender(4)} + + + + {colRender(8)} + + + ); +} diff --git a/src/grid/_example/halign.jsx b/src/grid/_example/halign.jsx new file mode 100644 index 0000000..92f4a54 --- /dev/null +++ b/src/grid/_example/halign.jsx @@ -0,0 +1,38 @@ +import 'tdesign-web-components/grid'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function OrderGrid() { + const colRender = () => + Array(4) + .fill(4) + .map(() => col-2}>); + return ( + <> +

align left

+ + {colRender()} + + +

align center

+ + {colRender()} + + +

align right

+ + {colRender()} + + +

space-between

+ + {colRender()} + + +

space-around

+ + {colRender()} + + + ); +} diff --git a/src/grid/_example/offset.tsx b/src/grid/_example/offset.tsx new file mode 100644 index 0000000..2390659 --- /dev/null +++ b/src/grid/_example/offset.tsx @@ -0,0 +1,21 @@ +import 'tdesign-web-components/grid'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function OffsetGrid() { + return ( + <> + + col-4}> + col-4}> + + + col-3 col-offset-3}> + col-3 col-offset-3}> + + + col-6 col-offset-2}> + + + ); +} diff --git a/src/grid/_example/order.jsx b/src/grid/_example/order.jsx new file mode 100644 index 0000000..d3ea85d --- /dev/null +++ b/src/grid/_example/order.jsx @@ -0,0 +1,51 @@ +import 'tdesign-web-components/grid'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function OrderGrid() { + return ( + <> + 通过 `order` 来改变元素的排序。 + + 1 col-order-4}> + 2 col-order-3}> + 3 col-order-2}> + 4 col-order-1}> + + + 1 col-order-responsive} + > + 2 col-order-responsive} + > + 3 col-order-responsive} + > + 4 col-order-responsive} + > + + + ); +} diff --git a/src/grid/_example/responsive.jsx b/src/grid/_example/responsive.jsx new file mode 100644 index 0000000..a057c23 --- /dev/null +++ b/src/grid/_example/responsive.jsx @@ -0,0 +1,33 @@ +import 'tdesign-web-components/grid'; +import 'tdesign-web-components/space'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function OrderGrid() { + return ( + + 宽度响应式 + + +
Col
+
+ +
Col
+
+
+ + 其他属性响应式(支持span,offset,order,pull,push) + + +
Col
+
+
+
+ ); +} diff --git a/src/grid/_example/sort.tsx b/src/grid/_example/sort.tsx new file mode 100644 index 0000000..0f9239c --- /dev/null +++ b/src/grid/_example/sort.tsx @@ -0,0 +1,19 @@ +import 'tdesign-web-components/grid'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function PullPushGrid() { + return ( + <> + 通过 `pull` `push` 进行排序 + + col-9 col-push-3}> + col-3 col-pull-9}> + + + col-8 col-push-4}> + col-4 col-pull-8}> + + + ); +} diff --git a/src/grid/_example/valign.jsx b/src/grid/_example/valign.jsx new file mode 100644 index 0000000..616fd88 --- /dev/null +++ b/src/grid/_example/valign.jsx @@ -0,0 +1,28 @@ +import 'tdesign-web-components/grid'; + +import css from 'tdesign-web-components/grid/_example/common.css'; + +export default function OrderGrid() { + const colRender = () => + Array(4) + .fill(3) + .map((i, j) => col-3}>); + return ( + <> +

align top

+ + {colRender()} + + +

Align Middle

+ + {colRender()} + + +

Align Bottom

+ + {colRender()} + + + ); +} diff --git a/src/grid/col.tsx b/src/grid/col.tsx new file mode 100644 index 0000000..d29a65e --- /dev/null +++ b/src/grid/col.tsx @@ -0,0 +1,138 @@ +import isObject from 'lodash/isObject'; +import { Component, tag } from 'omi'; + +import classNames, { getClassPrefix } from '../_util/classname'; +import { setStyle } from '../_util/dom'; +import { StyledProps, TNode } from '../common'; +import { colDefaultProps } from './defaultProps'; +import { TdColProps, TdRowProps } from './type'; + +type FlexType = number | 'none' | 'auto' | string; + +export interface ColProps extends TdColProps, StyledProps { + /** + * 文本内容 + */ + content?: TNode; + /** + * 文本内容,在配合t-row 使用时,需要使用content + */ + children?: TNode; +} + +const calcColPadding = (gutter: TdRowProps['gutter'], currentSize: string) => { + const paddingObj = {}; + if (typeof gutter === 'number') { + Object.assign(paddingObj, { + paddingLeft: `${gutter / 2}px`, + paddingRight: `${gutter / 2}px`, + }); + } else if (Array.isArray(gutter) && gutter.length) { + if (typeof gutter[0] === 'number') { + Object.assign(paddingObj, { + paddingLeft: `${gutter[0] / 2}px`, + paddingRight: `${gutter[0] / 2}px`, + }); + } + + if (isObject(gutter[0]) && gutter[0][currentSize]) { + Object.assign(paddingObj, { + paddingLeft: `${gutter[0][currentSize] / 2}px`, + paddingRight: `${gutter[0][currentSize] / 2}px`, + }); + } + } else if (isObject(gutter) && gutter[currentSize]) { + Object.assign(paddingObj, { + paddingLeft: `${gutter[currentSize] / 2}px`, + paddingRight: `${gutter[currentSize] / 2}px`, + }); + } + return paddingObj; +}; + +const parseFlex = (flex: FlexType) => { + if (typeof flex === 'number') { + return `${flex} ${flex} auto`; + } + + if (/^\d+(\.\d+)?(px|r?em|%)$/.test(flex)) { + return `0 0 ${flex}`; + } + + return flex; +}; + +const classPrefix = getClassPrefix(); + +@tag('t-col') +export default class Col extends Component { + static defaultProps = colDefaultProps; + + inject = ['size', 'gutter']; + + get sizeClasses() { + const allSizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; + return allSizes.reduce((acc, currSize) => { + const sizeProp = this.props[currSize]; + let sizeObj: any = {}; + if (typeof sizeProp === 'number') { + sizeObj.span = sizeProp; + } else if (isObject(sizeProp)) { + sizeObj = sizeProp || {}; + } + + return { + ...acc, + [`${classPrefix}-col-${currSize}-${sizeObj.span}`]: sizeObj.span !== undefined, + [`${classPrefix}-col-${currSize}-order-${sizeObj.order}`]: parseInt(sizeObj.order, 10) >= 0, + [`${classPrefix}-col-${currSize}-offset-${sizeObj.offset}`]: parseInt(sizeObj.offset, 10) >= 0, + [`${classPrefix}-col-${currSize}-push-${sizeObj.push}`]: parseInt(sizeObj.push, 10) >= 0, + [`${classPrefix}-col-${currSize}-pull-${sizeObj.pull}`]: parseInt(sizeObj.pull, 10) >= 0, + }; + }, {}); + } + + ready(): void { + const { + flex, + span, + offset, + order, + pull, + push, + className, + style: propStyle, + gutter: rowGutter, + size: rowSize, + } = this.props as ColProps & { gutter: TdRowProps['gutter']; size: string }; + const colClassNames = classNames( + `${classPrefix}-col`, + className, + { + [`${classPrefix}-col-${span}`]: span !== undefined, + [`${classPrefix}-col-offset-${offset}`]: parseInt(offset as unknown as string, 10) >= 0, + [`${classPrefix}-col-pull-${pull}`]: parseInt(pull as unknown as string, 10) >= 0, + [`${classPrefix}-col-push-${push}`]: parseInt(push as unknown as string, 10) >= 0, + [`${classPrefix}-col-order-${order}`]: parseInt(order as unknown as string, 10) >= 0, + }, + this.sizeClasses, + ); + + const colStyle = { + ...calcColPadding(rowGutter, rowSize), + ...propStyle, + }; + flex && ((colStyle as any).flex = parseFlex(flex)); + + const dom = (this.constructor as any).isLightDOM ? this : this.shadowRoot.host; + dom.setAttribute('class', colClassNames); + Object.keys(colStyle).forEach((key) => { + setStyle((dom as HTMLElement).style, key, colStyle[key]); + }); + } + + render(props: ColProps) { + const { content, children } = props; + return content || children; + } +} diff --git a/src/grid/defaultProps.ts b/src/grid/defaultProps.ts new file mode 100644 index 0000000..fcdaf69 --- /dev/null +++ b/src/grid/defaultProps.ts @@ -0,0 +1,9 @@ +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import { TdColProps, TdRowProps } from './type'; + +export const rowDefaultProps: TdRowProps = { align: 'top', gutter: 0, justify: 'start', tag: 'div' }; + +export const colDefaultProps: TdColProps = { offset: 0, order: 0, pull: 0, push: 0 }; diff --git a/src/grid/index.ts b/src/grid/index.ts new file mode 100644 index 0000000..24f3afa --- /dev/null +++ b/src/grid/index.ts @@ -0,0 +1,11 @@ +import './style/index.js'; + +import _Col from './col'; +import _Row from './row'; + +export type { RowProps } from './row'; +export type { ColProps } from './col'; +export * from './type'; + +export const Row = _Row; +export const Col = _Col; diff --git a/src/grid/row.tsx b/src/grid/row.tsx new file mode 100644 index 0000000..96b809a --- /dev/null +++ b/src/grid/row.tsx @@ -0,0 +1,150 @@ +import isObject from 'lodash/isObject'; +import { cloneElement, Component, createElement, tag } from 'omi'; + +import classNames, { getClassPrefix } from '../_util/classname'; +import { getChildrenArray } from '../_util/component'; +import { canUseDocument, getCssVarsValue } from '../_util/dom'; +import { convertToLightDomNode } from '../_util/lightDom'; +import { StyledProps, TNode } from '../common'; +import { rowDefaultProps } from './defaultProps'; +import { TdRowProps } from './type'; + +/** + * Row 组件支持的属性。 + */ +export interface RowProps extends TdRowProps, StyledProps { + /** + * 默认子元素内容 + */ + children: TNode; +} + +const calcSize = (width: number) => { + const smWidth = parseFloat(getCssVarsValue('--td-screen-sm') || '768'); + const mdWidth = parseFloat(getCssVarsValue('--td-screen-md') || '992'); + const lgWidth = parseFloat(getCssVarsValue('--td-screen-lg') || '1200'); + const xlWidth = parseFloat(getCssVarsValue('--td-screen-xl') || '1400'); + const xxlWidth = parseFloat(getCssVarsValue('--td-screen-xxl') || '1880'); + + let size = 'xs'; + if (width >= xxlWidth) { + size = 'xxl'; + } else if (width >= xlWidth) { + size = 'xl'; + } else if (width >= lgWidth) { + size = 'lg'; + } else if (width >= mdWidth) { + size = 'md'; + } else if (width >= smWidth) { + size = 'sm'; + } else { + size = 'xs'; + } + + return size; +}; + +const calcRowStyle = (gutter: TdRowProps['gutter'], currentSize: string): object => { + const rowStyle = {}; + if (typeof gutter === 'number') { + Object.assign(rowStyle, { + marginLeft: `${gutter / -2}px`, + marginRight: `${gutter / -2}px`, + }); + } else if (Array.isArray(gutter) && gutter.length) { + if (typeof gutter[0] === 'number') { + Object.assign(rowStyle, { + marginLeft: `${gutter[0] / -2}px`, + marginRight: `${gutter[0] / -2}px`, + }); + } + if (typeof gutter[1] === 'number') { + Object.assign(rowStyle, { rowGap: `${gutter[1]}px` }); + } + + if (isObject(gutter[0]) && gutter[0][currentSize] !== undefined) { + Object.assign(rowStyle, { + marginLeft: `${gutter[0][currentSize] / -2}px`, + marginRight: `${gutter[0][currentSize] / -2}px`, + }); + } + if (isObject(gutter[1]) && gutter[1][currentSize] !== undefined) { + Object.assign(rowStyle, { rowGap: `${gutter[1][currentSize]}px` }); + } + } else if (isObject(gutter) && gutter[currentSize]) { + if (Array.isArray(gutter[currentSize]) && gutter[currentSize].length) { + Object.assign(rowStyle, { + marginLeft: `${gutter[currentSize][0] / -2}px`, + marginRight: `${gutter[currentSize][0] / -2}px`, + }); + Object.assign(rowStyle, { rowGap: `${gutter[currentSize][1]}px` }); + } else { + Object.assign(rowStyle, { + marginLeft: `${gutter[currentSize] / -2}px`, + marginRight: `${gutter[currentSize] / -2}px`, + }); + } + } + return rowStyle; +}; + +@tag('t-row') +export default class Row extends Component { + static defaultProps = rowDefaultProps; + + size = canUseDocument ? calcSize(window.innerWidth) : 'md'; + + provide = { + size: this.size, + gutter: this.props.gutter, + }; + + updateSize = () => { + const currentSize = calcSize(window.innerWidth); + if (currentSize !== this.size) { + this.size = currentSize; + this.updated(); + } + }; + + install(): void { + window.addEventListener('resize', this.updateSize); + } + + uninstall(): void { + window.removeEventListener('resize', this.updateSize); + } + + render(props: RowProps) { + const { align, gutter, justify, tag: Tag, style: propStyle, className, ...otherRowProps } = props; + + delete otherRowProps.children; + + const classPrefix = getClassPrefix(); + const rowClassNames = classNames(`${classPrefix}-row`, className, { + [`${classPrefix}-row--${justify}`]: true, + [`${classPrefix}-row--${align}`]: true, + }); + const rowStyle = { + ...calcRowStyle(gutter, this.size), + ...propStyle, + }; + + const children = getChildrenArray(props.children).map((child, index) => { + if (child?.nodeName === 't-col' || child?.nodeName === 't-col-light-dom') { + return convertToLightDomNode(cloneElement(child, { key: `t-col-${index}`, size: this.size, gutter })); + } + return child; + }); + + return createElement( + Tag, + { + className: rowClassNames, + style: rowStyle, + ...otherRowProps, + }, + children, + ); + } +} diff --git a/src/grid/style/index.js b/src/grid/style/index.js new file mode 100644 index 0000000..47717c3 --- /dev/null +++ b/src/grid/style/index.js @@ -0,0 +1,10 @@ +import { css, globalCSS } from 'omi'; + +// 为了做主题切换 +import styles from '../../_common/style/web/components/grid/_index.less'; + +export const styleSheet = css` + ${styles} +`; + +globalCSS(styleSheet); diff --git a/src/grid/type.ts b/src/grid/type.ts new file mode 100644 index 0000000..1e9a937 --- /dev/null +++ b/src/grid/type.ts @@ -0,0 +1,100 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +export interface TdRowProps { + /** + * 纵向对齐方式,CSS 属性 `align-items` 值。其中 `top` 和 `start` 等效;`middle` 和 `center` 等效;`bottom` 和 `end` 等效 + * @default top + */ + align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'top' | 'middle' | 'bottom'; + /** + * 栅格间隔,示例:`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时,用于指定横向间隔。当数据类型为数组时,第一个参数为横向间隔,第二个参数为纵向间隔, [水平间隔, 垂直间隔] + * @default 0 + */ + gutter?: number | GutterObject | Array; + /** + * flex 布局下的水平排列方式 + * @default start + */ + justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between'; + /** + * 自定义元素标签 + * @default div + */ + tag?: string; +} + +export interface TdColProps { + /** + * flex 布局填充。CSS 属性 flex 值。示例:2 / 3 / '100px' / 'auto' / '1 1 200px' + */ + flex?: string | number; + /** + * ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象(小尺寸电脑) + */ + lg?: number | BaseColProps; + /** + * ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象(超小尺寸电脑) + */ + md?: number | BaseColProps; + /** + * 栅格左侧的间隔格数,间隔内不可以有栅格 + * @default 0 + */ + offset?: number; + /** + * 栅格顺序,flex 布局模式下有效 + * @default 0 + */ + order?: number; + /** + * 栅格向左移动格数 + * @default 0 + */ + pull?: number; + /** + * 栅格向右移动格数 + * @default 0 + */ + push?: number; + /** + * ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象(平板) + */ + sm?: number | BaseColProps; + /** + * 栅格占位格数,为 0 时相当于 display: none + */ + span?: number; + /** + * ≥1400px 响应式栅格,可为栅格数或一个包含其他属性的对象(中尺寸电脑) + */ + xl?: number | BaseColProps; + /** + * <768px 响应式栅格,可为栅格数或一个包含其他属性的对象(手机) + */ + xs?: number | BaseColProps; + /** + * ≥1880px 响应式栅格,可为栅格数或一个包含其他属性的对象(大尺寸电脑) + */ + xxl?: number | BaseColProps; +} + +export interface GutterObject { + xs: number; + sm: number; + md: number; + lg: number; + xl: number; + xxl: number; +} + +export interface BaseColProps { + offset: number; + order: number; + pull: number; + push: number; + span: number; +} diff --git a/src/image/image.en-US.md b/src/image/image.en-US.md index f093be9..cccfb85 100644 --- a/src/image/image.en-US.md +++ b/src/image/image.en-US.md @@ -8,19 +8,19 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N alt | String | - | \- | N -error | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +error | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N fallback | String | - | display `fallback` image on `src` loading failed. you can also use `error` to define more complex error content | N fit | String | fill | options: contain/cover/fill/none/scale-down | N gallery | Boolean | false | \- | N lazy | Boolean | false | \- | N -loading | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N -overlayContent | TNode | - | overlay on the top of image。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +loading | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +overlayContent | TNode | - | overlay on the top of image。Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N overlayTrigger | String | always | options: always/hover | N -placeholder | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +placeholder | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N position | String | center | \- | N referrerpolicy | String | - | attribute of ``, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。options: no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N shape | String | square | options: circle/round/square | N src | String / Object | - | src attribute of ``. image File can also be loaded。Typescript:`string \| File` | N -srcset | Object | - | for `.avif` and `.webp` image url, load `srcset` before `src`。Typescript:`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/image/type.ts) | N +srcset | Object | - | for `.avif` and `.webp` image url, load `srcset` before `src`。Typescript:`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/image/type.ts) | N onError | Function | | Typescript:`(context: { e: ImageEvent }) => void`
trigger on image load failed | N onLoad | Function | | Typescript:`(context: { e: ImageEvent }) => void`
trigger on image loaded | N \ No newline at end of file diff --git a/src/image/image.tsx b/src/image/image.tsx index d30a2c5..815f3a9 100644 --- a/src/image/image.tsx +++ b/src/image/image.tsx @@ -135,7 +135,6 @@ export default class Image extends Component { } = this; const { class: className, - src, style, alt, fit, @@ -144,17 +143,18 @@ export default class Image extends Component { placeholder, loading, error, - overlayTrigger, - lazy, gallery, overlayContent, srcset, - onLoad, - onError, ...rest } = props; - console.log('src', src, onLoad, onError, lazy, overlayTrigger); + delete rest.onLoad; + delete rest.onError; + delete rest.lazy; + delete rest.overlayTrigger; + delete rest.src; + const renderOverlay = () => { if (!overlayContent) { return null; diff --git a/src/index.ts b/src/index.ts index f55fc6a..d8d8b46 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,6 +3,7 @@ export * from './button'; export * from './collapse'; export * from './common'; export * from './divider'; +export * from './grid'; export * from './image'; export * from './input'; export * from './input-number'; diff --git a/src/loading/README.md b/src/loading/README.md index 248adc7..ecc22b0 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -64,18 +64,18 @@ Loading 组件可以作为容器包裹需要显示加载状态的内容。 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`Styles` | N -attach | String / Function | '' | 挂载元素,默认挂载到组件本身所在的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -children | TNode | - | 子元素,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +attach | String / Function | '' | 挂载元素,默认挂载到组件本身所在的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +children | TNode | - | 子元素,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +content | TNode | - | 子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N delay | Number | 0 | 延迟显示加载效果的时间,用于防止请求速度过快引起的加载闪烁,单位:毫秒 | N fullscreen | Boolean | false | 是否显示为全屏加载 | N -indicator | TNode | true | 加载指示符,值为 true 显示默认指示符,值为 false 则不显示,也可以自定义指示符。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +indicator | TNode | true | 加载指示符,值为 true 显示默认指示符,值为 false 则不显示,也可以自定义指示符。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N inheritColor | Boolean | false | 是否继承父元素颜色 | N loading | Boolean | true | 是否处于加载状态 | N preventScrollThrough | Boolean | true | 防止滚动穿透,全屏加载模式有效 | N showOverlay | Boolean | true | 是否需要遮罩层,遮罩层对包裹元素才有效 | N size | String | medium | 尺寸,示例:small/medium/large/12px/56px/0.3em | N -text | TNode | - | 加载提示文案。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +text | TNode | - | 加载提示文案。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N zIndex | Number | - | 消息通知层级,样式默认为 3500 | N ### loading 或 LoadingPlugin diff --git a/src/menu/README.md b/src/menu/README.md index c669eed..e858bcc 100644 --- a/src/menu/README.md +++ b/src/menu/README.md @@ -20,9 +20,9 @@ spline: base -- | -- | -- | -- | -- className | String | - | 类名 | N collapsed | Boolean | false | 是否收起菜单 | N -logo | TElement | - | 站点 LOGO。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -operations | TElement | - | 导航操作区域。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String / Number | - | 激活菜单项。TS 类型:`MenuValue` `type MenuValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/menu/type.ts) | N +logo | TElement | - | 站点 LOGO。TS 类型:`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +operations | TElement | - | 导航操作区域。TS 类型:`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +value | String / Number | - | 激活菜单项。TS 类型:`MenuValue` `type MenuValue = string \| number`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/menu/type.ts) | N width | String / Number / Array | '232px' | 菜单宽度。值类型为数组时,分别表示菜单展开和折叠的宽度。[ 展开时的宽度, 折叠时的宽度 ],示例:['200px', '80px']。TS 类型:`string \| number \| Array` | N onChange | Function | | TS 类型:`(evt: CustomEvent) => void`
激活菜单项发生变化时触发 | N @@ -34,7 +34,7 @@ onChange | Function | | TS 类型:`(evt: CustomEvent) => void`
) => void`
点击时触发 | N diff --git a/src/popup/README.md b/src/popup/README.md index 74e3034..0330264 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -69,22 +69,22 @@ spline: message 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -children | TNode | - | 触发元素,同 triggerElement。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 浮层里面的内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 触发元素,同 triggerElement。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +content | TNode | - | 浮层里面的内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N delay | Number / Array | - | 延时显示或隐藏浮层,[延迟显示的时间,延迟隐藏的时间],单位:毫秒。如果只有一个时间,则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为:[250, 150]。TS 类型:`number \| Array` | N destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N disabled | Boolean | - | 是否禁用组件 | N hideEmptyPopup | Boolean | false | 浮层是否隐藏空内容,默认不隐藏 | N -overlayClassName | String / Object / Array | - | 浮层类名,示例:'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型:`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -overlayInnerClassName | String / Object / Array | - | 浮层内容部分类名,示例:'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型:`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -overlayInnerStyle | Boolean / Object / Function | - | 浮层内容部分样式,第一个参数 `triggerElement` 表示触发元素 DOM 节点,第二个参数 `popupElement` 表示浮层元素 DOM 节点。TS 类型:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -overlayStyle | Boolean / Object / Function | - | 浮层样式,第一个参数 `triggerElement` 表示触发元素 DOM 节点,第二个参数 `popupElement` 表示浮层元素 DOM 节点。TS 类型:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -placement | String | top | 浮层出现位置。TS 类型:`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/popup/type.ts) | N +overlayClassName | String / Object / Array | - | 浮层类名,示例:'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型:`ClassName`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +overlayInnerClassName | String / Object / Array | - | 浮层内容部分类名,示例:'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型:`ClassName`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +overlayInnerStyle | Boolean / Object / Function | - | 浮层内容部分样式,第一个参数 `triggerElement` 表示触发元素 DOM 节点,第二个参数 `popupElement` 表示浮层元素 DOM 节点。TS 类型:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +overlayStyle | Boolean / Object / Function | - | 浮层样式,第一个参数 `triggerElement` 表示触发元素 DOM 节点,第二个参数 `popupElement` 表示浮层元素 DOM 节点。TS 类型:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N +placement | String | top | 浮层出现位置。TS 类型:`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/popup/type.ts) | N showArrow | Boolean | false | 是否显示浮层箭头 | N trigger | String | hover | 触发浮层出现的方式。可选项:hover/click/focus/mousedown/context-menu | N -triggerElement | TNode | - | 触发元素。值类型为字符串表示元素选择器。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +triggerElement | TNode | - | 触发元素。值类型为字符串表示元素选择器。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N visible | Boolean | - | 是否显示浮层。TS 类型:`boolean` | N zIndex | Number | - | 组件层级,Web 侧样式默认为 5500,移动端和小程序样式默认为 1500 | N onScroll | Function | | TS 类型:`(context: { e: WheelEvent }) => void`
下拉选项滚动事件 | N onScrollToBottom | Function | | TS 类型:`(context: { e: WheelEvent }) => void`
下拉滚动触底事件,常用于滚动到底执行具体业务逻辑 | N -onVisibleChange | Function | | TS 类型:`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发,`trigger=document` 表示点击非浮层元素触发;`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
| N +onVisibleChange | Function | | TS 类型:`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发,`trigger=document` 表示点击非浮层元素触发;`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
| N diff --git a/src/switch/README.md b/src/switch/README.md index 2a2e22a..74cae1f 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -41,9 +41,9 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`Styles` | N customValue | Array | - | 用于自定义开关的值,[打开时的值,关闭时的值]。默认为 [true, false]。示例:[1, 0]、['open', 'close']。TS 类型:`Array` | N disabled | Boolean | - | 是否禁用组件,默认为 false | N -label | TNode | [] | 开关内容,[开启时内容,关闭时内容]。示例:['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型:`Array \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | [] | 开关内容,[开启时内容,关闭时内容]。示例:['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型:`Array \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N loading | Boolean | false | 是否处于加载中状态 | N size | String | medium | 开关尺寸。可选项:small/medium/large | N -value | String / Number / Boolean | - | 开关值。TS 类型:`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N -defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型:`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N +value | String / Number / Boolean | - | 开关值。TS 类型:`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/switch/type.ts) | N +defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型:`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/switch/type.ts) | N onChange | Function | | TS 类型:`(value: T, context: { e: MouseEvent }) => void`
数据发生变化时触发 | N diff --git a/src/tooltip/README.md b/src/tooltip/README.md index bdc8d0a..0afbb5a 100644 --- a/src/tooltip/README.md +++ b/src/tooltip/README.md @@ -47,7 +47,7 @@ spline: data delay | Number | - | 【议案讨论中】延迟出现提示,用于异步加载提示信息需要延迟显示的业务场景下 | N destroyOnClose | Boolean | true | 是否在关闭浮层时销毁浮层 | N duration | Number | - | 用于设置提示默认显示多长时间之后消失,初始第一次有效,单位:毫秒 | N -placement | String | top | 浮层出现位置。TS 类型:`PopupPlacement`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tooltip/type.ts) | N +placement | String | top | 浮层出现位置。TS 类型:`PopupPlacement`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/tooltip/type.ts) | N showArrow | Boolean | true | 是否显示浮层箭头 | N theme | String | default | 文字提示风格。可选项:default/primary/success/danger/warning/light | N `PopupProps` | \- | - | 继承 `PopupProps` 中的全部 API | N \ No newline at end of file