Skip to content

Commit

Permalink
feat(popup): add delay prop (#1436)
Browse files Browse the repository at this point in the history 
* fix(popup): prevent accidental close when nested

* feat(popup): add `delay` prop
  • Loading branch information
@ikeq
ikeq authored Sep 1, 2022
1 parent 3a25ba1 commit 5cc3923
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 5 deletions.
2 changes: 2 additions & 0 deletions src/popup/popup.en-US.md
View file
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
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
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
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
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

0 comments on commit 5cc3923

Please sign in to comment.