From 4f13fa25b02e6c48df5e2598832ba73eb29ec9e3 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Wed, 24 Apr 2024 12:52:28 +0800 Subject: [PATCH] refactor(overlay): sfc to tsx (#1339) * refactor(overlay): sfc to tsx * fix: ts type export * test: snap update * chore: run test update * test: demo snap update --- .../__test__/__snapshots__/demo.test.jsx.snap | 36 +++----- .../__snapshots__/index.test.jsx.snap | 3 +- .../__test__/__snapshots__/demo.test.jsx.snap | 42 ++++------ .../__snapshots__/index.test.jsx.snap | 3 +- .../__test__/__snapshots__/demo.test.jsx.snap | 27 ++---- .../__test__/__snapshots__/demo.test.jsx.snap | 84 +++++++------------ .../__test__/__snapshots__/demo.test.jsx.snap | 24 ++---- .../__test__/__snapshots__/demo.test.jsx.snap | 18 ++-- .../__test__/__snapshots__/demo.test.jsx.snap | 6 +- src/overlay/__test__/index.test.jsx | 2 +- src/overlay/index.ts | 5 +- src/overlay/overlay.en-US.md | 5 +- src/overlay/overlay.md | 9 +- src/overlay/{overlay.vue => overlay.tsx} | 49 +++++------ src/overlay/props.ts | 4 +- src/overlay/type.ts | 2 +- .../__test__/__snapshots__/demo.test.jsx.snap | 27 ++---- .../__test__/__snapshots__/demo.test.jsx.snap | 18 ++-- 18 files changed, 137 insertions(+), 227 deletions(-) rename src/overlay/{overlay.vue => overlay.tsx} (50%) diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap index e56b936b2..413579bec 100644 --- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap @@ -11,8 +11,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar customButtonVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar customRangeVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar customTextVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar multipleVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Calendar rangeVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
props > : format 1`] = ` class="t-overlay t-overlay--active" style="z-index: 1000; transition-duration: 300ms;" > - - +
Cascader baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader checkStrictlyVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader keysVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader lazyVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader themeTabVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader withTitleVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Cascader withValueVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
events > : pick 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker customRangeVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker fullVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker timeVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
DateTimePicker yearMonthVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog confirmVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog confirmVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog feedbackVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog feedbackVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog feedbackVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog imageDialogVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog imageDialogVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog inputVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog inputVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog multiStateVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog multiStateVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog multiStateVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog multiStateVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Dialog multiStateVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer footerVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer iconVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Drawer titleVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Form horizontalVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Form horizontalVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Form mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Form mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Form verticalVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Form verticalVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Overlay baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
@@ -91,8 +90,7 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - + diff --git a/src/overlay/__test__/index.test.jsx b/src/overlay/__test__/index.test.jsx index d85333245..e5542699f 100644 --- a/src/overlay/__test__/index.test.jsx +++ b/src/overlay/__test__/index.test.jsx @@ -1,5 +1,5 @@ import { describe, it, expect, vi } from 'vitest'; -import Overlay from '../overlay.vue'; +import Overlay from '../overlay'; import { mount } from '@vue/test-utils'; describe('Overlay', () => { diff --git a/src/overlay/index.ts b/src/overlay/index.ts index 863e551d3..c5108139d 100644 --- a/src/overlay/index.ts +++ b/src/overlay/index.ts @@ -1,7 +1,10 @@ +import _Overlay from './overlay'; import { withInstall, WithInstallType } from '../shared'; -import _Overlay from './overlay.vue'; +import { TdOverlayProps } from './type'; import './style'; +export type OverlayProps = TdOverlayProps; + const Overlay: WithInstallType = withInstall(_Overlay); export default Overlay; diff --git a/src/overlay/overlay.en-US.md b/src/overlay/overlay.en-US.md index f7525bd2d..ababc086a 100644 --- a/src/overlay/overlay.en-US.md +++ b/src/overlay/overlay.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Overlay Props name | type | default | description | required @@ -19,11 +20,11 @@ name | params | description -- | -- | -- click | `(context: { e: MouseEvent })` | \- +### CSS 变量 -### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-overlay-bg-color | @font-gray-1 | - --td-overlay-transition-duration | 300ms | - ---td-overlay-zindex | 1000 | - +--td-overlay-zindex | 1000 | - \ No newline at end of file diff --git a/src/overlay/overlay.md b/src/overlay/overlay.md index 29f2523e9..48dc8a657 100644 --- a/src/overlay/overlay.md +++ b/src/overlay/overlay.md @@ -1,11 +1,12 @@ :: BASE_DOC :: ## API + ### Overlay Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -backgroundColor | String | - | 遮罩层的背景色 | N +backgroundColor | String | - | 遮罩层的背景色 | N customStyle | String | - | 遮罩层自定义样式。优先级低于其他属性 | N duration | Number | 300 | 背景色过渡时间,单位毫秒 | N preventScrollThrough | Boolean | true | 是否阻止背景滚动,阻止时蒙层里的内容也将无法滚动 | N @@ -19,11 +20,11 @@ onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
-- | -- | -- click | `(context: { e: MouseEvent })` | 遮罩层的点击事件 - ### CSS 变量 + 组件提供了下列 CSS 变量,可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-overlay-bg-color | @font-gray-1 | - --td-overlay-transition-duration | 300ms | - ---td-overlay-zindex | 1000 | - +--td-overlay-zindex | 1000 | - \ No newline at end of file diff --git a/src/overlay/overlay.vue b/src/overlay/overlay.tsx similarity index 50% rename from src/overlay/overlay.vue rename to src/overlay/overlay.tsx index c5b7566c6..99ebd9f42 100644 --- a/src/overlay/overlay.vue +++ b/src/overlay/overlay.tsx @@ -1,30 +1,26 @@ - - - diff --git a/src/overlay/props.ts b/src/overlay/props.ts index 410481257..0c0089058 100644 --- a/src/overlay/props.ts +++ b/src/overlay/props.ts @@ -8,7 +8,7 @@ import { TdOverlayProps } from './type'; import { PropType } from 'vue'; export default { - /** 遮罩层的背景色 */ + /** 遮罩层的背景色 */ backgroundColor: { type: String, default: '', @@ -23,7 +23,7 @@ export default { type: Number, default: 300, }, - /** 防止滚动穿透,即不允许点击和滚动 */ + /** 是否阻止背景滚动,阻止时蒙层里的内容也将无法滚动 */ preventScrollThrough: { type: Boolean, default: true, diff --git a/src/overlay/type.ts b/src/overlay/type.ts index 809f61c1a..e51d7cc6c 100644 --- a/src/overlay/type.ts +++ b/src/overlay/type.ts @@ -21,7 +21,7 @@ export interface TdOverlayProps { */ duration?: number; /** - * 防止滚动穿透,即不允许点击和滚动 + * 是否阻止背景滚动,阻止时蒙层里的内容也将无法滚动 * @default true */ preventScrollThrough?: boolean; diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap index fb2735d8c..eaefcccaa 100644 --- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap @@ -51,8 +51,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker cascadeVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Picker titleVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Popup baseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Popup customCloseVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Popup mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Popup mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Popup mobileVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +
Popup withTitleVue demo works fine 1`] = ` class="t-overlay" style="z-index: 1000; transition-duration: 300ms; display: none;" > - - +