From 9d176bbb639e71ab9e2d7d16a54a91f7069a8c72 Mon Sep 17 00:00:00 2001 From: GuYith <48597370+GuYith@users.noreply.github.com> Date: Tue, 5 Sep 2023 00:41:09 +0800 Subject: [PATCH 1/2] feat: fix loading delay --- tdesign/desktop/package.json | 2 +- .../desktop/src/loading/_example/delay.tsx | 52 +++++++++++++++++++ tdesign/desktop/src/loading/gradient.tsx | 38 +++----------- tdesign/desktop/src/loading/index.html | 10 ++-- tdesign/desktop/src/loading/loading.tsx | 32 ++++++++---- 5 files changed, 84 insertions(+), 50 deletions(-) create mode 100644 tdesign/desktop/src/loading/_example/delay.tsx diff --git a/tdesign/desktop/package.json b/tdesign/desktop/package.json index 74379a0127..51aa7fb2a1 100644 --- a/tdesign/desktop/package.json +++ b/tdesign/desktop/package.json @@ -142,7 +142,7 @@ "markdown-it-anchor": "^8.1.0", "marked": "^7.0.2", "mitt": "^3.0.1", - "omi": "^6.25.18", + "omi": "^6.25.20", "omi-router": "^3.0.5", "omi-twind": "^0.0.4", "prismjs": "^1.24.0", diff --git a/tdesign/desktop/src/loading/_example/delay.tsx b/tdesign/desktop/src/loading/_example/delay.tsx new file mode 100644 index 0000000000..41b83b6a98 --- /dev/null +++ b/tdesign/desktop/src/loading/_example/delay.tsx @@ -0,0 +1,52 @@ +import { h, tag, WeElement } from 'omi' + +import '../index' +import '../../button/index' +import '../../space/index' + +@tag('loading-delay') +export default class LoadingDelay extends WeElement { + data = '' + loading = false + loadingData = (time?: number) => { + this.loading = true + this.data = '' + this.update() + const timer = setTimeout(() => { + this.loading = false + this.data = '数据加载完成，短时间的数据加载并未出现 loading' + clearTimeout(timer) + this.update() + }, time || 100) + } + + install() { + this.loadingData() + } + render() { + const { loading, data, loadingData } = this + return ( +
+ +
+ + {data ?
{`loading 作为独立元素：${data}`}
: null} +
+
+ + {
{data ? `loading 作为包裹元素：${data}` : ''}
} + +
+
+ + 快速重新加载数据（无loading） + + loadingData(3000)} size="small"> + 慢速重新加载数据 + +
+ +
+ ) + } +} diff --git a/tdesign/desktop/src/loading/gradient.tsx b/tdesign/desktop/src/loading/gradient.tsx index 6a6ca54f22..4fedde114c 100644 --- a/tdesign/desktop/src/loading/gradient.tsx +++ b/tdesign/desktop/src/loading/gradient.tsx @@ -7,6 +7,7 @@ export default class GradientLoading extends WeElement { static css = css conicRef = createRef() static isLightDom = true + // ref={this.conicRef} not used useCircleAdapter = () => { const el = this.conicRef.current as HTMLElement circleAdapter(el) @@ -15,48 +16,21 @@ export default class GradientLoading extends WeElement { installed() { this.useCircleAdapter() } - render(props) { + render() { const gradientClass = TdClassNamePrefix('loading__gradient') return ( <> - - - - - - - - - - - - + +
+ ) diff --git a/tdesign/desktop/src/loading/index.html b/tdesign/desktop/src/loading/index.html index 5c99ae02cc..213763c5b5 100644 --- a/tdesign/desktop/src/loading/index.html +++ b/tdesign/desktop/src/loading/index.html @@ -1,12 +1,8 @@ + - - + + diff --git a/tdesign/desktop/src/loading/loading.tsx b/tdesign/desktop/src/loading/loading.tsx index ab7f082181..cca59476a3 100644 --- a/tdesign/desktop/src/loading/loading.tsx +++ b/tdesign/desktop/src/loading/loading.tsx @@ -5,7 +5,7 @@ import './gradient' import css from './style/index' @tag('t-loading') -export default class Link extends WeElement { +export default class Loading extends WeElement { static css = css as string static defaultProps = { @@ -25,7 +25,7 @@ export default class Link extends WeElement { content: Object, delay: Number, fullscreen: Boolean, - indicator: Object, + indicator: [Boolean, Object], inheritColor: Boolean, loading: Boolean, preventScrollThrough: Boolean, @@ -36,7 +36,7 @@ export default class Link extends WeElement { } timer: ReturnType - showLoading: Boolean = false + showLoading: Boolean componentName = TdClassNamePrefix('loading') lockClass = `${this.componentName}--lock` textClass = `${this.componentName}__text` @@ -46,16 +46,19 @@ export default class Link extends WeElement { fullscreenClass = `${this.componentName}__fullscreen` overlayClass = `${this.componentName}__overlay` relativeClass = `${this.componentName}__parent` + flag = false setTimer = () => { const { delay, loading } = this.props - this.showLoading = delay ? false : loading if (delay && loading) { this.timer = setTimeout(() => { this.showLoading = loading + this.flag = true + this.update() }, delay) } else { this.showLoading = loading + this.update() } } @@ -66,8 +69,15 @@ export default class Link extends WeElement { } } - install() { - this.setTimer() + beforeUpdate() { + if (this.props.loading === true && this.flag === false) { + this.setTimer() + } + if (this.flag === false || this.props.loading === false) { + this.showLoading = this.props.delay ? false : this.props.loading + } else { + this.flag = false + } this.setBodyClass() } @@ -107,6 +117,7 @@ export default class Link extends WeElement { } render(props: OmiProps) { + console.log('render: ', props) const { componentName, fullClass, @@ -120,8 +131,9 @@ export default class Link extends WeElement { showLoading, } = this const { fullscreen, content, children, loading, showOverlay } = props - const loadingStyle = this.calcStyles() + const contentNode = commonContent() + console.log('contentNode', contentNode, 'showLoading', showLoading) const baseClasses = classNames( centerClass, @@ -139,7 +151,7 @@ export default class Link extends WeElement { if (fullscreen) { return loading ? (
-
{commonContent()}
+
{contentNode}
) : null } @@ -155,7 +167,7 @@ export default class Link extends WeElement { })} style={calcStyles} > - {commonContent()} + {contentNode}
) : null} @@ -166,7 +178,7 @@ export default class Link extends WeElement { return loading ? (
- {commonContent()} + {contentNode}
) : null } From bbc12e6151109ab65758d4f3a58f2ae46cca531f Mon Sep 17 00:00:00 2001 From: GuYith <48597370+GuYith@users.noreply.github.com> Date: Tue, 5 Sep 2023 10:46:08 +0800 Subject: [PATCH 2/2] feat: add loading site example and improve site tabs change event --- tdesign/desktop/site/site.config.mjs | 16 +- .../src/components/web/back-top/index.tsx | 10 +- .../site/src/components/web/comment/index.tsx | 3 +- .../site/src/components/web/divider/index.tsx | 3 +- .../src/components/web/dropdown/index.tsx | 3 +- .../site/src/components/web/grid/index.tsx | 3 +- .../site/src/components/web/icon/index.tsx | 3 +- .../components/web/input-adornment/index.tsx | 3 +- .../site/src/components/web/link/index.tsx | 7 +- .../site/src/components/web/list/index.tsx | 130 +++++++------- .../site/src/components/web/loading/index.tsx | 168 ++++++++++++++++++ .../site/src/components/web/message/index.tsx | 50 +++--- .../src/components/web/notification/index.tsx | 33 ++-- .../site/src/components/web/popup/index.tsx | 23 +-- .../site/src/components/web/rate/index.tsx | 3 +- .../site/src/components/web/space/index.tsx | 3 +- .../src/components/web/textarea/index.tsx | 75 ++++---- tdesign/desktop/site/src/router.ts | 1 + tdesign/desktop/src/avatar/avatar.en-US.md | 47 ++--- tdesign/desktop/src/avatar/avatar.md | 16 +- tdesign/desktop/src/grid/row.tsx | 1 - .../desktop/src/loading/_example/delay.tsx | 40 ++--- .../src/loading/_example/fullscreen.tsx | 32 ++++ .../src/loading/_example/icon-text.tsx | 10 ++ .../desktop/src/loading/_example/service.tsx | 38 ++++ tdesign/desktop/src/loading/_example/size.tsx | 17 ++ tdesign/desktop/src/loading/_example/text.tsx | 10 ++ tdesign/desktop/src/loading/_example/wrap.tsx | 40 +++++ tdesign/desktop/src/loading/index.html | 17 +- tdesign/desktop/src/loading/index.ts | 4 +- tdesign/desktop/src/loading/loading.tsx | 10 +- tdesign/desktop/src/loading/plugin.tsx | 40 +++++ 32 files changed, 625 insertions(+), 234 deletions(-) create mode 100644 tdesign/desktop/site/src/components/web/loading/index.tsx create mode 100644 tdesign/desktop/src/loading/_example/fullscreen.tsx create mode 100644 tdesign/desktop/src/loading/_example/icon-text.tsx create mode 100644 tdesign/desktop/src/loading/_example/service.tsx create mode 100644 tdesign/desktop/src/loading/_example/size.tsx create mode 100644 tdesign/desktop/src/loading/_example/text.tsx create mode 100644 tdesign/desktop/src/loading/_example/wrap.tsx diff --git a/tdesign/desktop/site/site.config.mjs b/tdesign/desktop/site/site.config.mjs index d8ad79699f..8d1e9115d3 100644 --- a/tdesign/desktop/site/site.config.mjs +++ b/tdesign/desktop/site/site.config.mjs @@ -477,14 +477,14 @@ export const docs = [ name: 'list', path: '/list', }, - // { - // title: 'Loading 加载', - // titleEn: 'Loading', - // name: 'loading', - // path: '/loading', - // component: () => import('tdesign-omi/loading/loading.md'), - // componentEn: () => import('tdesign-omi/loading/loading.en-US.md'), - // }, + { + title: 'Loading 加载', + titleEn: 'Loading', + name: 'loading', + path: '/loading', + // component: () => import('tdesign-omi/loading/loading.md'), + // componentEn: () => import('tdesign-omi/loading/loading.en-US.md'), + }, // { // title: 'Progress 进度条', // titleEn: 'Progress', diff --git a/tdesign/desktop/site/src/components/web/back-top/index.tsx b/tdesign/desktop/site/src/components/web/back-top/index.tsx index cf0a136b67..34f7a4ace9 100644 --- a/tdesign/desktop/site/src/components/web/back-top/index.tsx +++ b/tdesign/desktop/site/src/components/web/back-top/index.tsx @@ -79,11 +79,11 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } - render() { return ( @@ -113,7 +113,7 @@ define(

- 不同组件形状的回到顶部 + 不同组件形状的回到顶部

不同组件形状的回到顶部

@@ -121,14 +121,14 @@ define(

- 不同组件主题的回到顶部 + 不同组件主题的回到顶部

- 可自定义内容的回到顶部 + 可自定义内容的回到顶部

diff --git a/tdesign/desktop/site/src/components/web/comment/index.tsx b/tdesign/desktop/site/src/components/web/comment/index.tsx index f08606b60d..cdff3037a9 100644 --- a/tdesign/desktop/site/src/components/web/comment/index.tsx +++ b/tdesign/desktop/site/src/components/web/comment/index.tsx @@ -60,7 +60,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/divider/index.tsx b/tdesign/desktop/site/src/components/web/divider/index.tsx index b570a92ba7..c36b13b32f 100644 --- a/tdesign/desktop/site/src/components/web/divider/index.tsx +++ b/tdesign/desktop/site/src/components/web/divider/index.tsx @@ -51,7 +51,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/dropdown/index.tsx b/tdesign/desktop/site/src/components/web/dropdown/index.tsx index f48c12a746..0a0c87614b 100644 --- a/tdesign/desktop/site/src/components/web/dropdown/index.tsx +++ b/tdesign/desktop/site/src/components/web/dropdown/index.tsx @@ -79,7 +79,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/grid/index.tsx b/tdesign/desktop/site/src/components/web/grid/index.tsx index d5290b3d22..5de8262bde 100644 --- a/tdesign/desktop/site/src/components/web/grid/index.tsx +++ b/tdesign/desktop/site/src/components/web/grid/index.tsx @@ -74,7 +74,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/icon/index.tsx b/tdesign/desktop/site/src/components/web/icon/index.tsx index 73cfa81d83..61735243ee 100644 --- a/tdesign/desktop/site/src/components/web/icon/index.tsx +++ b/tdesign/desktop/site/src/components/web/icon/index.tsx @@ -59,7 +59,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/input-adornment/index.tsx b/tdesign/desktop/site/src/components/web/input-adornment/index.tsx index 6dc6e1c992..1cbfa74853 100644 --- a/tdesign/desktop/site/src/components/web/input-adornment/index.tsx +++ b/tdesign/desktop/site/src/components/web/input-adornment/index.tsx @@ -49,7 +49,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/link/index.tsx b/tdesign/desktop/site/src/components/web/link/index.tsx index a89bab1640..aab2e2b256 100644 --- a/tdesign/desktop/site/src/components/web/link/index.tsx +++ b/tdesign/desktop/site/src/components/web/link/index.tsx @@ -67,7 +67,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } @@ -172,9 +173,7 @@ define(

不同尺寸的链接

-

- 提供大、中（默认）、小三种尺寸。 -

+

提供大、中（默认）、小三种尺寸。

diff --git a/tdesign/desktop/site/src/components/web/list/index.tsx b/tdesign/desktop/site/src/components/web/list/index.tsx index 926c2890e3..1fe636a831 100644 --- a/tdesign/desktop/site/src/components/web/list/index.tsx +++ b/tdesign/desktop/site/src/components/web/list/index.tsx @@ -10,7 +10,6 @@ import '../../../../../src/list/_example/list-async-loading' import '../../../../../src/list/_example/list-header-footer' import '../../../../../src/list/_example/list-scroll' - import '../../../../../src/list/style/index' import * as marked from 'marked' @@ -85,7 +84,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } @@ -94,65 +94,73 @@ define( return ( <>
-

- 基础文字列表

-

仅包含简单文字的列表。对较简单的信息进行陈列时使用。

- - - - -

- 多行文字列表

-

仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。

- - - - -

- 基础图文列表

-

包含简单图文的列表。需使用图片和文字结合展示信息。

- - - - -

- 带操作列表

-

包含操作的列表。需要对所在列进行操作时使用。

- - - - -

- 不同尺寸的列表

-

提供大、中（默认）、小三种尺寸。

- - - - -

- 斑马纹区分列表

- - - - -

- 异步加载的列表

- - - - -

- 带头部及尾部的列表

- - - - -

- 带滚动事件的列表

- - - - +

+ 基础文字列表 +

+

仅包含简单文字的列表。对较简单的信息进行陈列时使用。

+ + + + +

+ 多行文字列表 +

+

仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。

+ + + + +

+ 基础图文列表 +

+

包含简单图文的列表。需使用图片和文字结合展示信息。

+ + + + +

+ 带操作列表 +

+

包含操作的列表。需要对所在列进行操作时使用。

+ + + + +

+ 不同尺寸的列表 +

+

提供大、中（默认）、小三种尺寸。

+ + + + +

+ 斑马纹区分列表 +

+ + + + +

+ 异步加载的列表 +

+ + + + +

+ 带头部及尾部的列表 +

+ + + + +

+ 带滚动事件的列表 +

+ + +
document.body。TS 类型：\`AttachNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +children | TNode | - | 子元素，同 content。TS 类型：\`string \| TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +content | TNode | - | 子元素。TS 类型：\`string \| TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N +fullscreen | Boolean | false | 是否显示为全屏加载 | N +indicator | TNode | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。TS 类型：\`boolean \| TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/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/omi/blob/master/tdesign/desktop/src/common.ts) | N +zIndex | Number | - | 消息通知层级，样式默认为 3500 | N + +### loading 或 LoadingPlugin + +这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下， + +参数名称 | 参数类型 | 参数默认值 | 参数说明 +-- | -- | -- | -- +options | Function | - | 必需。TS 类型：\`boolean \| TdLoadingProps\` + +插件返回值：\`LoadingInstance【interface LoadingInstance { hide: () => void }】\` +`) +interface Props { + tab: string +} + +define( + 'page-loading', + class extends WeElement { + static defaultProps = { + tab: 'demo', + } + + tab = ['demo', 'api', 'design'] + tdDocHeader = createRef() + tdDocTabs = createRef() + + static propTypes = { + tab: String, + } + + updateTab = (t: string) => { + this.updateProps({ + tab: t, + }) + } + + isShow(tabStr: string) { + return this.props.tab === tabStr ? { display: 'block' } : { display: 'none' } + } + + installed() { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { + this.updateTab(currentTab) + } + } + + render() { + return ( + <> + +
+

+ 图标加载 +

+

加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。

+ + + +

+ 文字加载 +

+

加载过程中有文字显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。

+ + + +

+ 文字和图标共同显示加载 +

+

加载过程中有文字和图标共同显示。适用于打开页面或操作完成后页面内等待刷新的加载场景。

+ + + +

+ 不同尺寸的加载 +

+

+ 小尺寸适用于组件内加载场景，中尺寸适用于容器如卡片、表格等区域的加载场景，大尺寸适用于页面全屏加载场景。 +

+ + + +

+ 有包裹的加载 +

+

Loading 组件可以作为容器包裹需要显示加载状态的内容。

+ + + +

+ 有延时的加载 +

+

设置最短延迟响应时间，低于响应时间的操作不显示加载状态。

+ + + +

+ 全屏加载 +

+

全屏展示加载状态，阻止用户操作。

+ + + +

+ 挂载到指定元素 +

+

+ 可通过 挂载到指定元素。 +

+

+ 注：被挂载元素（loading的父元素）需设置： +

+ 待完善 +

+ 函数方式调用 +

+ + + +
+
+
+
+
+ + ) + } + }, +) diff --git a/tdesign/desktop/site/src/components/web/message/index.tsx b/tdesign/desktop/site/src/components/web/message/index.tsx index 82ebc67064..688dbe6e58 100644 --- a/tdesign/desktop/site/src/components/web/message/index.tsx +++ b/tdesign/desktop/site/src/components/web/message/index.tsx @@ -1,5 +1,5 @@ import { define, OmiProps, h, render, WeElement, createRef } from 'omi' -import "../../../../../src/message/index" +import '../../../../../src/message/index' import '../../../../../src/space/index' import '../../../../../src/button/index' import '../common/index' @@ -23,12 +23,12 @@ onCloseBtnClick | Function || TS 类型：(context: { e: MouseEvent }) => void onDurationEnd | Function || TS 类型：() => void 计时结束后触发 | N `) -const list:any = []; +const list: any = [] interface Props { tab: string } define( - 'page-message', + 'page-message', class extends WeElement { static defaultProps = { tab: 'demo', @@ -53,17 +53,18 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } - + render(props: {} | OmiProps<{}, any>, store: any) { return ( <> - -
-

Message全局提示

+ +
+

Message全局提示

@@ -72,8 +73,8 @@ define( - -

带关闭按钮的全局提示

+ +

带关闭按钮的全局提示

@@ -82,27 +83,26 @@ define( - -

加载相应时间自动关闭

+ +

加载相应时间自动关闭

- - - - - - + + + + + + -

使用关闭函数控制全局提示

+

使用关闭函数控制全局提示

待完善
自由控制关闭时机（打开） - -
- -
+
+
- ); + ) } - }) \ No newline at end of file + }, +) diff --git a/tdesign/desktop/site/src/components/web/notification/index.tsx b/tdesign/desktop/site/src/components/web/notification/index.tsx index a31d195562..2a0f55ede0 100644 --- a/tdesign/desktop/site/src/components/web/notification/index.tsx +++ b/tdesign/desktop/site/src/components/web/notification/index.tsx @@ -1,5 +1,5 @@ import { define, OmiProps, h, render, WeElement, createRef } from 'omi' -import "../../../../../src/notification/index" +import '../../../../../src/notification/index' import '../../../../../src/space/index' import '../../../../../src/button/index' import '../common/index' @@ -25,9 +25,8 @@ onCloseBtnClick | Function | | TS 类型：(context: { e: MouseEvent }) => voi onDurationEnd | Function | | TS 类型：() => void时结束时触发 | N `) - define( - 'page-notification', + 'page-notification', class extends WeElement { static defaultProps = { tab: 'demo', @@ -52,7 +51,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } @@ -60,9 +60,8 @@ define( render(props: {} | OmiProps<{}, any>, store: any) { return ( <> - +
-

基础的消息通知

消息通知点击即会消失

@@ -73,7 +72,12 @@ define(

带图标的消息通知提供两种情况：普通消息通知和重要消息通知（如：系统错误等）。

- + @@ -82,22 +86,17 @@ define(

带操作的消息通知

带有操作的消息通知为用户提供下一步行动点，在消息提示框中进行简要快捷的交互。

- - 待补充 - + 待补充

关闭提示

如果不希望通过计时关闭，或者用户点击按钮关闭，也可以使用关闭函数。

自由控制关闭时机 -
- 待补充 -
+
待补充
- - ); - + ) } - }) \ No newline at end of file + }, +) diff --git a/tdesign/desktop/site/src/components/web/popup/index.tsx b/tdesign/desktop/site/src/components/web/popup/index.tsx index 3d570f30f6..675cb8a92c 100644 --- a/tdesign/desktop/site/src/components/web/popup/index.tsx +++ b/tdesign/desktop/site/src/components/web/popup/index.tsx @@ -18,28 +18,28 @@ const docsHTML = marked.parse(` 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：\`AttachNode\`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -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 +attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：\`AttachNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +children | TNode | - | 触发元素，同 triggerElement。TS 类型：\`string \| TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +content | TNode | - | 浮层里面的内容。TS 类型：\`string \| TNode\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/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/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +overlayInnerClassName | String / Object / Array | - | 浮层内容部分类名，示例：'name1 name2 name3' 或 \`['name1', 'name2']\` 或 \`[{ 'name1': true }]\`。TS 类型：\`ClassName\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +overlayInnerStyle | Boolean / Object / Function | - | 浮层内容部分样式，第一个参数 \`triggerElement\` 表示触发元素 DOM 节点，第二个参数 \`popupElement\` 表示浮层元素 DOM 节点。TS 类型：\`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +overlayStyle | Boolean / Object / Function | - | 浮层样式，第一个参数 \`triggerElement\` 表示触发元素 DOM 节点，第二个参数 \`popupElement\` 表示浮层元素 DOM 节点。TS 类型：\`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)\`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/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/omi/blob/master/tdesign/desktop/src/popup/type.ts) | N popperOptions | Object | - | popper 初始化配置，详情参考 https://popper.js.org/docs/ | 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/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N visible | Boolean | - | 是否显示浮层。TS 类型：\`boolean\` | N defaultVisible | 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/Tencent/omi/blob/master/tdesign/desktop/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 `) interface Props { tab: string @@ -71,7 +71,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/rate/index.tsx b/tdesign/desktop/site/src/components/web/rate/index.tsx index 182f5bf548..75e39c309e 100644 --- a/tdesign/desktop/site/src/components/web/rate/index.tsx +++ b/tdesign/desktop/site/src/components/web/rate/index.tsx @@ -58,7 +58,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/space/index.tsx b/tdesign/desktop/site/src/components/web/space/index.tsx index 7cb0131025..340463cbad 100644 --- a/tdesign/desktop/site/src/components/web/space/index.tsx +++ b/tdesign/desktop/site/src/components/web/space/index.tsx @@ -54,7 +54,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } diff --git a/tdesign/desktop/site/src/components/web/textarea/index.tsx b/tdesign/desktop/site/src/components/web/textarea/index.tsx index 2093b6c30f..1fdeec680c 100644 --- a/tdesign/desktop/site/src/components/web/textarea/index.tsx +++ b/tdesign/desktop/site/src/components/web/textarea/index.tsx @@ -92,7 +92,8 @@ define( } installed() { - this.tdDocTabs.current.onchange = ({ detail: currentTab }) => { + const tdDocTabsEl = this.tdDocTabs.current as HTMLElement + tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => { this.updateTab(currentTab) } } @@ -101,32 +102,30 @@ define( return ( <> - +
- ' - > -
- -
- - - + > +
+ +
+

基本多行文本框

用于多行文本的输入。

- } -}' language="jsx" mode="auto"> -
-
- +}' + language="jsx" + mode="auto" + > +
+
+ +
-
- -

限制最大字符数

用于多行文本的输入。

- } -}' language="jsx" mode="auto"> -
+}' + language="jsx" + mode="auto" + > +
-

绑定 DOM 事件

@@ -187,7 +190,7 @@ export default class TextareaLimit extends WeElement{

) } -}' language="jsx" mode="auto"> - -
+}' + language="jsx" + mode="auto" + > +
@@ -245,8 +250,8 @@ export default class TextareaEvent extends WeElement {

支持只读、禁用状态。

- } }' - language="jsx" mode="auto"> -
+ language="jsx" + mode="auto" + > +
diff --git a/tdesign/desktop/site/src/router.ts b/tdesign/desktop/site/src/router.ts index ce09e1ed1c..6c098c2ca3 100644 --- a/tdesign/desktop/site/src/router.ts +++ b/tdesign/desktop/site/src/router.ts @@ -27,6 +27,7 @@ const components = [ 'list', 'back-top', 'grid', + 'loading', ] export function registerRouting(rootEl: any) { diff --git a/tdesign/desktop/src/avatar/avatar.en-US.md b/tdesign/desktop/src/avatar/avatar.en-US.md index a2ddd048d0..e8495c1f0e 100644 --- a/tdesign/desktop/src/avatar/avatar.en-US.md +++ b/tdesign/desktop/src/avatar/avatar.en-US.md @@ -1,31 +1,32 @@ :: BASE_DOC :: ## API + ### Avatar Props -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/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | content slot or props.content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/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/tdesign-react/blob/develop/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/tdesign-react/blob/develop/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/tdesign-react/blob/develop/src/avatar/type.ts) | N -size | String | - | size | N -onError | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image load failed | N +| 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 | +| 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 | +| 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 | +| size | String | - | size | N | +| onError | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image load failed | N | ### AvatarGroup Props -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 -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 -size | String | - | size | N +| 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/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N | +| collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/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/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N | +| size | String | - | size | N | diff --git a/tdesign/desktop/src/avatar/avatar.md b/tdesign/desktop/src/avatar/avatar.md index 07ad27d6e9..83560fbae3 100644 --- a/tdesign/desktop/src/avatar/avatar.md +++ b/tdesign/desktop/src/avatar/avatar.md @@ -8,13 +8,13 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N alt | String | - | 头像替换文本，仅当图片加载失败时有效 | 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 +children | TNode | - | 子元素内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N +content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N -icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N image | String | - | 图片地址 | N -imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | 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 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N onError | Function | | TS 类型：`(context: { e: ImageEvent }) => void`
图片加载失败时触发 | N @@ -24,8 +24,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/tdesign-react/blob/develop/src/avatar/type.ts) | N -collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | 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 max | Number | - | 能够同时显示的最多头像数量 | N -popupProps | Object | - | 头像右上角提示信息。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | 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 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N diff --git a/tdesign/desktop/src/grid/row.tsx b/tdesign/desktop/src/grid/row.tsx index dbcb1605b4..dc2527598c 100644 --- a/tdesign/desktop/src/grid/row.tsx +++ b/tdesign/desktop/src/grid/row.tsx @@ -89,7 +89,6 @@ export default class Row extends WeElement { const currentSize = calcSize(window.innerWidth) if (currentSize !== this.size) { this.size = currentSize - console.log('newSize: ', this.size) // this.update() } } diff --git a/tdesign/desktop/src/loading/_example/delay.tsx b/tdesign/desktop/src/loading/_example/delay.tsx index 41b83b6a98..fb22665aa5 100644 --- a/tdesign/desktop/src/loading/_example/delay.tsx +++ b/tdesign/desktop/src/loading/_example/delay.tsx @@ -26,27 +26,25 @@ export default class LoadingDelay extends WeElement { render() { const { loading, data, loadingData } = this return ( -
- -
- - {data ?
{`loading 作为独立元素：${data}`}
: null} -
-
- - {
{data ? `loading 作为包裹元素：${data}` : ''}
} - -
-
- - 快速重新加载数据（无loading） - - loadingData(3000)} size="small"> - 慢速重新加载数据 - -
- -
+ +
+ + {data ?
{`loading 作为独立元素：${data}`}
: null} +
+
+ + {
{data ? `loading 作为包裹元素：${data}` : ''}
} + +
+
+ + 快速重新加载数据（无loading） + + loadingData(2000)} size="small"> + 慢速重新加载数据 + +
+ ) } } diff --git a/tdesign/desktop/src/loading/_example/fullscreen.tsx b/tdesign/desktop/src/loading/_example/fullscreen.tsx new file mode 100644 index 0000000000..fdc48da8b4 --- /dev/null +++ b/tdesign/desktop/src/loading/_example/fullscreen.tsx @@ -0,0 +1,32 @@ +import { h, tag, WeElement } from 'omi' + +import '../index' +import '../../button' +@tag('loading-fullscreen') +export default class LoadingFullScreen extends WeElement { + checked = false + loading = false + + onChange = (value: boolean) => { + this.checked = value + this.loading = value + + if (value) { + setTimeout(() => { + this.checked = false + this.loading = false + this.update() + }, 2000) + } + this.update() + } + render() { + return ( + <> + + Loading state: {this.checked} + Change state + + ) + } +} diff --git a/tdesign/desktop/src/loading/_example/icon-text.tsx b/tdesign/desktop/src/loading/_example/icon-text.tsx new file mode 100644 index 0000000000..fdf4a92878 --- /dev/null +++ b/tdesign/desktop/src/loading/_example/icon-text.tsx @@ -0,0 +1,10 @@ +import { h, tag, WeElement } from 'omi' + +import '../index' + +@tag('loading-icon-text') +export default class LoadingIconText extends WeElement { + render() { + return + } +} diff --git a/tdesign/desktop/src/loading/_example/service.tsx b/tdesign/desktop/src/loading/_example/service.tsx new file mode 100644 index 0000000000..96680ef434 --- /dev/null +++ b/tdesign/desktop/src/loading/_example/service.tsx @@ -0,0 +1,38 @@ +import { h, tag, WeElement } from 'omi' + +import { loading } from '../index' +import '../../button' + +@tag('loading-service') +export default class LoadingService extends WeElement { + // static isLightDom = true + handleFullscreen = () => { + const loadInstance = loading(true) + + setTimeout(() => loadInstance.hide(), 1000) + } + + handleAttach = () => { + const loadInstance = loading({ attach: () => this.shadowRoot.querySelector('#loading-service') }) + setTimeout(() => loadInstance.hide(), 1000) + } + render() { + return ( + <> +
+ 我是service的容器 +
+ +
+ + 服务加载方式（全屏） + + 服务加载方式（局部） +
+ + ) + } +} diff --git a/tdesign/desktop/src/loading/_example/size.tsx b/tdesign/desktop/src/loading/_example/size.tsx new file mode 100644 index 0000000000..015c2cdee8 --- /dev/null +++ b/tdesign/desktop/src/loading/_example/size.tsx @@ -0,0 +1,17 @@ +import { h, tag, WeElement } from 'omi' + +import '../index' +import '../../space/index' + +@tag('loading-size') +export default class LoadingSize extends WeElement { + render() { + return ( + + + + + + ) + } +} diff --git a/tdesign/desktop/src/loading/_example/text.tsx b/tdesign/desktop/src/loading/_example/text.tsx new file mode 100644 index 0000000000..d37c3ef399 --- /dev/null +++ b/tdesign/desktop/src/loading/_example/text.tsx @@ -0,0 +1,10 @@ +import { h, tag, WeElement } from 'omi' + +import '../index' + +@tag('loading-text') +export default class LoadingText extends WeElement { + render() { + return + } +} diff --git a/tdesign/desktop/src/loading/_example/wrap.tsx b/tdesign/desktop/src/loading/_example/wrap.tsx new file mode 100644 index 0000000000..5563ec536f --- /dev/null +++ b/tdesign/desktop/src/loading/_example/wrap.tsx @@ -0,0 +1,40 @@ +import { h, tag, WeElement } from 'omi' + +import '../index' +import '../../button/index' +import '../../space/index' + +@tag('loading-wrap') +export default class LoadingWrap extends WeElement { + loading = false + setLoading = (value: boolean) => { + if (this.loading !== value) { + this.loading = value + this.update() + } + } + render() { + const { loading } = this + return ( + +
+ +
this is loading component
+
this is loading component
+
this is loading component
+
this is loading component
+
this is loading component
+ +
+ + this.setLoading(true)}> + 加载中 + + this.setLoading(false)}> + 加载完成 + + + + ) + } +} diff --git a/tdesign/desktop/src/loading/index.html b/tdesign/desktop/src/loading/index.html index 213763c5b5..74457673b5 100644 --- a/tdesign/desktop/src/loading/index.html +++ b/tdesign/desktop/src/loading/index.html @@ -1,8 +1,23 @@ + + + + + + - + +
+

+ +
+ + + + + diff --git a/tdesign/desktop/src/loading/index.ts b/tdesign/desktop/src/loading/index.ts index bb16c3c431..2cc03e2a10 100644 --- a/tdesign/desktop/src/loading/index.ts +++ b/tdesign/desktop/src/loading/index.ts @@ -1,9 +1,11 @@ import _Loading from './loading' - +import { LoadingPlugin as _LoadingPlugin } from './plugin' import './style/index.js' export * from './type' export const Loading = _Loading +export const loading = _LoadingPlugin +export const LoadingPlugin = _LoadingPlugin export default Loading diff --git a/tdesign/desktop/src/loading/loading.tsx b/tdesign/desktop/src/loading/loading.tsx index cca59476a3..11fb16a5a6 100644 --- a/tdesign/desktop/src/loading/loading.tsx +++ b/tdesign/desktop/src/loading/loading.tsx @@ -58,6 +58,7 @@ export default class Loading extends WeElement { }, delay) } else { this.showLoading = loading + this.flag = true this.update() } } @@ -117,7 +118,6 @@ export default class Loading extends WeElement { } render(props: OmiProps) { - console.log('render: ', props) const { componentName, fullClass, @@ -132,8 +132,6 @@ export default class Loading extends WeElement { } = this const { fullscreen, content, children, loading, showOverlay } = props const loadingStyle = this.calcStyles() - const contentNode = commonContent() - console.log('contentNode', contentNode, 'showLoading', showLoading) const baseClasses = classNames( centerClass, @@ -151,7 +149,7 @@ export default class Loading extends WeElement { if (fullscreen) { return loading ? (
-
{contentNode}
+
{commonContent()}
) : null } @@ -167,7 +165,7 @@ export default class Loading extends WeElement { })} style={calcStyles} > - {contentNode} + {commonContent()}
) : null}
@@ -178,7 +176,7 @@ export default class Loading extends WeElement { return loading ? (
- {contentNode} + {commonContent()}
) : null } diff --git a/tdesign/desktop/src/loading/plugin.tsx b/tdesign/desktop/src/loading/plugin.tsx index e69de29bb2..e785109852 100644 --- a/tdesign/desktop/src/loading/plugin.tsx +++ b/tdesign/desktop/src/loading/plugin.tsx @@ -0,0 +1,40 @@ +import { h, render } from 'omi' +import Loading from './loading' +import { LoadingInstance, LoadingProps } from './type' + +function createContainer(attach?: LoadingProps['attach']) { + if (typeof attach === 'string') return document.querySelector(attach) + if (typeof attach === 'function') return attach() + return document.body +} + +export type LoadingPluginMethod = (options: boolean | LoadingProps) => LoadingInstance + +// loading plugin形式 +export const LoadingPlugin: LoadingPluginMethod = (options) => { + if (options === false) return { hide: () => null } + + const props = typeof options === 'boolean' ? {} : options + const { attach } = props + const container = createContainer(attach) + const div = document.createElement('div') + div.setAttribute('style', 'width: 100%; height: 100%; position: absolute; top: 0;') + + const defaultProps = { + loading: true, + attach: null as LoadingProps['attach'], + fullscreen: !attach, + showOverlay: !!attach, + } + + render(, div) + + container.appendChild(div) + + return { + hide: () => { + // unmount(div) + div.remove() + }, + } +}