Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(popup): add delay prop #1436

Merged
merged 2 commits into from
Sep 1, 2022
Merged

feat(popup): add delay prop #1436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07e7e8b
fix(popup): prevent accidental close when nested
ikeq Sep 1, 2022
1823686
feat(popup): add `delay` prop
ikeq Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/popup/popup.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ name | type | default | description | required
attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
delay | Number / Array | - | delay to show or hide popover。Typescript：`number | Array<number>` | N
destroyOnClose | Boolean | false | \- | N
disabled | Boolean | false | \- | N
hideEmptyPopup | Boolean | false | \- | N
overlayClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
overlayInnerClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
overlayInnerStyle | Boolean / Object / Function | - | Typescript：`Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
overlayStyle | Boolean / Object / Function | - | Typescript：`Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N
Expand Down
2 changes: 2 additions & 0 deletions src/popup/popup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@
attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
content | String / Slot / Function | - | 浮层里面的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | 触发元素，同 triggerElement。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
delay | Number / Array | - | 延时显示或隐藏覆层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number | Array<number>` | N
destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N
disabled | Boolean | false | 是否禁用组件 | N
hideEmptyPopup | Boolean | false | 浮层是否隐藏空内容，默认不隐藏 | N
overlayClassName | String / Object / Array | - | 浮层类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
overlayInnerClassName | String / Object / Array | - | 浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/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-vue/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-vue/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-vue/tree/develop/src/popup/type.ts) | N
Expand Down
18 changes: 13 additions & 5 deletions src/popup/popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import mixins from '../utils/mixins';

const classPrefixMixins = getClassPrefixMixins('popup');

const showTimeout = 250;
const hideTimeout = 150;
const triggers = ['click', 'hover', 'focus', 'context-menu'] as const;
const injectionKey = '__T_POPUP';

Expand Down Expand Up @@ -97,6 +95,13 @@ export default mixins(classPrefixMixins).extend({
{} as any,
);
},
normalizedDelay(): { open: number; close: number } {
const delay = [].concat(this.delay ?? [250, 150]);
return {
open: delay[0],
close: delay[1] ?? delay[0],
};
},
},
watch: {
visible(visible) {
Expand Down Expand Up @@ -177,9 +182,12 @@ export default mixins(classPrefixMixins).extend({
(this.$refs.container as any)?.updateContent();
},
beforeDestroy() {
(this as any).popup?.preventClosing(false);
if (this.visible) {
(this as any).popup?.preventClosing(false);
}
this.destroyPopper();
off(document, 'click', this.handleDocumentClick, true);
clearTimeout(this.timeout);
},
methods: {
updatePopper() {
Expand Down Expand Up @@ -270,7 +278,7 @@ export default mixins(classPrefixMixins).extend({
() => {
this.emitPopVisible(true, context);
},
this.hasTrigger.click ? 0 : showTimeout,
this.hasTrigger.click ? 0 : this.normalizedDelay.open,
);
},
handleClose(context: Pick<PopupVisibleChangeContext, 'trigger'>) {
Expand All @@ -279,7 +287,7 @@ export default mixins(classPrefixMixins).extend({
() => {
this.emitPopVisible(false, context);
},
this.hasTrigger.click ? 0 : hideTimeout,
this.hasTrigger.click ? 0 : this.normalizedDelay.close,
);
},
handleDocumentClick(ev?: MouseEvent) {
Expand Down
8 changes: 8 additions & 0 deletions src/popup/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export default {
default: {
type: [String, Function] as PropType<TdPopupProps['default']>,
},
/** 延时显示或隐藏覆层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150] */
delay: {
type: [Number, Array] as PropType<TdPopupProps['delay']>,
},
/** 是否在关闭浮层时销毁浮层 */
destroyOnClose: Boolean,
/** 是否禁用组件 */
Expand All @@ -31,6 +35,10 @@ export default {
overlayClassName: {
type: [String, Object, Array] as PropType<TdPopupProps['overlayClassName']>,
},
/** 浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]` */
overlayInnerClassName: {
type: [String, Object, Array] as PropType<TdPopupProps['overlayInnerClassName']>,
},
/** 浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点 */
overlayInnerStyle: {
type: [Boolean, Object, Function] as PropType<TdPopupProps['overlayInnerStyle']>,
Expand Down
8 changes: 8 additions & 0 deletions src/popup/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export interface TdPopupProps {
* 触发元素，同 triggerElement
*/
default?: string | TNode;
/**
* 延时显示或隐藏覆层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]
*/
delay?: number | Array<number>;
/**
* 是否在关闭浮层时销毁浮层
* @default false
Expand All @@ -39,6 +43,10 @@ export interface TdPopupProps {
* 浮层类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`
*/
overlayClassName?: ClassName;
/**
* 浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`
*/
overlayInnerClassName?: ClassName;
/**
* 浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点
*/
Expand Down