fix(comp:*): overlayContainer adds callback parameter (#1336)

IDuxFE · Dec 6, 2022 · 70e0d34 · 70e0d34
1 parent be9e814
commit 70e0d34
Show file tree

Hide file tree

Showing 32 changed files with 105 additions and 80 deletions.
diff --git a/packages/components/_private/overlay/__tests__/overlay.spec.ts b/packages/components/_private/overlay/__tests__/overlay.spec.ts
@@ -12,7 +12,7 @@ describe('Overlay', () => {
   const OverlayMount = (options?: MountingOptions<Partial<OverlayProps>>) => {
     const { props, ...rest } = options || {}
     return mount(Overlay, {
-      props: { container: '.ix-overlay-container', ...props },
+      props: { container: () => '.ix-overlay-container', ...props },
       ...rest,
     } as MountingOptions<OverlayProps>)
   }
@@ -26,7 +26,7 @@ describe('Overlay', () => {
     document.querySelector('.ix-overlay-container')!.innerHTML = ''
   })
 
-  renderWork<OverlayProps>(Overlay, { props: { container: '.ix-overlay-container', visible: true }, slots })
+  renderWork<OverlayProps>(Overlay, { props: { container: () => '.ix-overlay-container', visible: true }, slots })
 
   test('visible work', async () => {
     const onUpdateVisible = vi.fn()
@@ -81,7 +81,7 @@ describe('Overlay', () => {
 
   test('container work', async () => {
     const wrapper = OverlayMount({
-      props: { container: '.ix-test-container', visible: true },
+      props: { container: () => '.ix-test-container', visible: true },
       slots,
     })
 
@@ -91,15 +91,15 @@ describe('Overlay', () => {
     container.classList.add('.ix-test-container2')
     document.body.appendChild(container)
 
-    await wrapper.setProps({ container })
+    await wrapper.setProps({ container: () => container })
 
     expect(container.querySelector('.ix-overlay')).not.toBeNull()
   })
 
   test('zIndex work', async () => {
     let zIndex = 1001
     const wrapper = OverlayMount({
-      props: { container: '.ix-test-container', visible: true, zIndex },
+      props: { container: () => '.ix-test-container', visible: true, zIndex },
       slots,
     })
 

diff --git a/packages/components/_private/overlay/src/Overlay.tsx b/packages/components/_private/overlay/src/Overlay.tsx
@@ -61,6 +61,9 @@ export default defineComponent({
 
     const { destroy: popperDestroy } = usePopperInit(props, initialize, destroy)
     const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visibility)
+    const mergedContainer = computed(() => {
+      return () => props.container(convertElement(triggerRef)!)
+    })
 
     watch(visibility, value => callEmit(props['onUpdate:visible'], value))
     watch(placement, value => callEmit(props['onUpdate:placement'], value))
@@ -114,7 +117,7 @@ export default defineComponent({
         return (
           <>
             {trigger}
-            <CdkPortal target={props.container} load={false}></CdkPortal>
+            <CdkPortal target={mergedContainer.value} load={false}></CdkPortal>
           </>
         )
       }
@@ -134,7 +137,7 @@ export default defineComponent({
       return (
         <>
           {trigger}
-          <CdkPortal target={props.container} load={visibility.value}>
+          <CdkPortal target={mergedContainer.value} load={visibility.value}>
             <Transition appear name={props.transitionName} onAfterLeave={onAfterLeave}>
               {content}
             </Transition>

diff --git a/packages/components/_private/overlay/src/types.ts b/packages/components/_private/overlay/src/types.ts
@@ -31,7 +31,7 @@ export const overlayProps = {
     default: undefined,
   },
   container: {
-    type: [String, HTMLElement, Function] as PropType<string | HTMLElement | (() => string | HTMLElement)>,
+    type: Function as PropType<(element?: Element) => string | HTMLElement>,
     required: true,
   },
   delay: overlayDelayDef,

diff --git a/packages/components/cascader/docs/Api.zh.md b/packages/components/cascader/docs/Api.zh.md
@@ -30,7 +30,7 @@
 | `multiple` | 多选模式 | `boolean` | `false` | - | - |
 | `multipleLimit` | 最多选中多少项 | `number` | - | - | - |
 | `overlayClassName` | 下拉菜单的 `class`  | `string` | - | - | - |
-| `overlayContainer` | 自定义浮层容器节点  | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
+| `overlayContainer` | 自定义浮层容器节点  | `string \| HTMLElement \| (trigger?: Element) => string \| HTMLElement` | - | ✅ | - |
 | `overlayMatchWidth` | 下拉菜单和选择器同宽  | `boolean` | `false` | ✅ | - |
 | `overlayRender` | 自定义下拉菜单内容的渲染  | `(children: VNode[]) => VNodeChild` | - | - | - |
 | `placeholder` | 选择框默认文本 | `string \| #placeholder` | - | - | - |

diff --git a/packages/components/cascader/src/types.ts b/packages/components/cascader/src/types.ts
@@ -8,10 +8,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { AbstractControl, ValidateStatus } from '@idux/cdk/forms'
-import type { PortalTargetType } from '@idux/cdk/portal'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
 import type { EmptyProps } from '@idux/components/empty'
 import type { FormSize } from '@idux/components/form'
+import type { OverlayContainerType } from '@idux/components/utils'
 import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
 export const cascaderProps = {
@@ -45,7 +45,7 @@ export const cascaderProps = {
   multipleLimit: { type: Number, default: Number.MAX_SAFE_INTEGER },
   overlayClassName: { type: String, default: undefined },
   overlayContainer: {
-    type: [String, HTMLElement, Function] as PropType<PortalTargetType>,
+    type: [String, HTMLElement, Function] as PropType<OverlayContainerType>,
     default: undefined,
   },
   overlayMatchWidth: { type: Boolean, default: undefined },

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -43,6 +43,7 @@ import type { TagShape } from '@idux/components/tag'
 import type { TextareaAutoRows, TextareaResize } from '@idux/components/textarea'
 import type { TreeNode } from '@idux/components/tree'
 import type { UploadFilesType, UploadIconType, UploadRequestMethod, UploadRequestOption } from '@idux/components/upload'
+import type { OverlayContainerType } from '@idux/components/utils'
 import type { VNode, VNodeChild } from 'vue'
 
 export interface GlobalConfig {
@@ -108,7 +109,7 @@ export interface GlobalConfig {
 export type GlobalConfigKey = keyof GlobalConfig
 export interface CommonConfig {
   prefixCls: string
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   overlayZIndex: number
   theme: 'default' | 'seer'
 }
@@ -166,7 +167,7 @@ export interface CascaderConfig {
   fullPath: boolean
   getKey: string | ((data: CascaderData<any>) => any)
   labelKey: string
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   overlayMatchWidth: boolean
   size: FormSize
   suffix: string
@@ -192,7 +193,7 @@ export interface DatePickerConfig {
   format?: Partial<Record<DatePickerType, string>>
   size: FormSize
   suffix: string
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
 }
 
 export interface DividerConfig {
@@ -217,7 +218,7 @@ export interface DropdownConfig {
   autoAdjust: boolean
   destroyOnHide: boolean
   offset: [number, number]
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   placement: PopperPlacement
   showArrow: boolean
   trigger: PopperTrigger
@@ -283,7 +284,7 @@ export interface MenuConfig {
   getKey: string | ((data: MenuData<any>) => any)
   indent: number
   offset: [number, number]
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   suffix: string
   theme: MenuTheme
 }
@@ -338,7 +339,7 @@ export interface PopconfirmConfig {
   autoAdjust: boolean
   delay: number | [number | null, number | null]
   destroyOnHide: boolean
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   placement: PopperPlacement
   trigger: PopperTrigger
   offset: [number, number]
@@ -348,7 +349,7 @@ export interface PopoverConfig {
   autoAdjust: boolean
   delay: number | [number | null, number | null]
   destroyOnHide: boolean
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   placement: PopperPlacement
   showArrow: boolean
   trigger: PopperTrigger
@@ -393,7 +394,7 @@ export interface SelectConfig {
   getKey: string | ((data: SelectData<any>) => any)
   labelKey: string
   offset: [number, number]
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   overlayMatchWidth: boolean
   size: FormSize
   suffix: string
@@ -493,7 +494,7 @@ export interface TimePickerConfig {
   clearIcon: string
   size: FormSize
   suffix: string
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   allowInput: boolean | 'overlay'
   format: string
 }
@@ -510,7 +511,7 @@ export interface TooltipConfig {
   autoAdjust: boolean
   delay: number | [number | null, number | null]
   destroyOnHide: boolean
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   placement: PopperPlacement
   offset: [number, number]
   trigger: PopperTrigger
@@ -534,7 +535,7 @@ export interface TreeSelectConfig {
   getKey: string | ((data: TreeNode<any>) => any)
   labelKey: string
   offset: [number, number]
-  overlayContainer?: PortalTargetType
+  overlayContainer?: OverlayContainerType
   overlayMatchWidth: boolean
   size: FormSize
   suffix: string

diff --git a/packages/components/date-picker/__tests__/dateRangePicker.spec.ts b/packages/components/date-picker/__tests__/dateRangePicker.spec.ts
@@ -57,18 +57,22 @@ describe('DateRangePicker', () => {
     const onUpdateVisible = vi.fn()
     const wrapper = DateRangePickerMount({
       props: {
+        open: false,
         value: [new Date('2021-10-01 00:00:00'), new Date('2021-11-11 00:00:00')],
         'onUpdate:value': onUpdateValue,
         onChange,
         'onUpdate:open': onUpdateVisible,
       },
     })
 
-    expect(findCell(wrapper, 'from', '1')?.classes()).toContain('ix-date-panel-cell-selected')
-    expect(findCell(wrapper, 'to', '11')?.classes()).toContain('ix-date-panel-cell-selected')
+    // 不能一开始就打开，用例跑不过
+    await wrapper.setProps({ open: true })
 
-    await findCell(wrapper, 'from', '11')?.trigger('click')
-    await findCell(wrapper, 'to', '21')?.trigger('click')
+    expect(findCell(wrapper, 'from', '1')!.classes()).toContain('ix-date-panel-cell-selected')
+    expect(findCell(wrapper, 'to', '11')!.classes()).toContain('ix-date-panel-cell-selected')
+
+    await findCell(wrapper, 'from', '11')!.trigger('click')
+    await findCell(wrapper, 'to', '21')!.trigger('click')
     await triggerConfirm(wrapper)
 
     expect(onUpdateValue).toBeCalledWith([new Date('2021-10-11 00:00:00'), new Date('2021-11-21 00:00:00')])
@@ -89,11 +93,15 @@ describe('DateRangePicker', () => {
     const onSelect = vi.fn()
     const wrapper = DateRangePickerMount({
       props: {
+        open: false,
         value: [new Date('2021-10-01 00:00:00'), new Date('2021-11-11 00:00:00')],
         onSelect,
       },
     })
 
+    // 不能一开始就打开，用例跑不过
+    await wrapper.setProps({ open: true })
+
     await findCell(wrapper, 'from', '11')?.trigger('click')
     expect(onSelect).toBeCalledWith([new Date('2021-10-11 00:00:00'), undefined])
 

diff --git a/packages/components/date-picker/docs/Api.zh.md b/packages/components/date-picker/docs/Api.zh.md
@@ -19,7 +19,7 @@
 | `timeFormat` | `'datetime'`下的时间格式 | `string` | - | ✅ | 全局配置同`TimePicker`的format, 仅在`'datetime'`类型下生效，可用于配置时间面板的列显示，参考[TimePicker](/components/time-picker/zh) |
 | `dateFormat` | `'datetime'`下的日期格式 | `string` | - | ✅ | 全局配置同`DatePicker`的`'date'`类型format, 仅在`'datetime'`类型下生效 |
 | `overlayClassName` | 日期面板的 `class`  | `string` | - | - | - |
-| `overlayContainer` | 自定义浮层容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
+| `overlayContainer` | 自定义浮层容器节点 | `string \| HTMLElement \| (trigger?: Element) => string \| HTMLElement` | - | ✅ | - |
 | `overlayRender` | 自定义日期面板内容的渲染  | `(children:VNode[]) => VNodeChild` | - | - | - |
 | `readonly` | 只读模式 | `boolean` | - | - | - |
 | `size` | 设置选择器大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - |

diff --git a/packages/components/date-picker/src/types.ts b/packages/components/date-picker/src/types.ts
@@ -6,10 +6,10 @@
  */
 
 import type { AbstractControl, ValidateStatus } from '@idux/cdk/forms'
-import type { PortalTargetType } from '@idux/cdk/portal'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '@idux/cdk/utils'
 import type { ɵFooterButtonProps } from '@idux/components/_private/footer'
 import type { FormSize } from '@idux/components/form'
+import type { OverlayContainerType } from '@idux/components/utils'
 import type { DefineComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
 export interface PickerTimePanelOptions {
@@ -68,7 +68,7 @@ const datePickerCommonProps = {
   timeFormat: String,
   overlayClassName: String,
   overlayContainer: {
-    type: [String, HTMLElement, Function] as PropType<PortalTargetType>,
+    type: [String, HTMLElement, Function] as PropType<OverlayContainerType>,
     default: undefined,
   },
   overlayRender: Function as PropType<(children: VNode[]) => VNodeChild>,

diff --git a/packages/components/drawer/__tests__/drawer.spec.ts b/packages/components/drawer/__tests__/drawer.spec.ts
@@ -258,7 +258,7 @@ describe('Drawer', () => {
   })
 
   test('container work', async () => {
-    const wrapper = DrawerMount({ props: { container: 'ix-test-container' } })
+    const wrapper = DrawerMount({ props: { container: '.ix-test-container' } })
 
     expect(document.querySelector('.ix-test-container')!.querySelector('.ix-drawer')).not.toBeNull()
 

diff --git a/packages/components/dropdown/docs/Api.zh.md b/packages/components/dropdown/docs/Api.zh.md
@@ -11,7 +11,7 @@
 | `disabled` | 菜单是否禁用 | `boolean` | `false` | - | - |
 | `hideOnClick` | 点击后是否隐藏菜单 | `boolean` | `true` | - | - |
 | `offset` | 悬浮层位置偏移量 | `[number, number]` | `[0,8]` | ✅ | - |
-| `overlayContainer` | 自定义下拉框容器节点  | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
+| `overlayContainer` | 自定义下拉框容器节点  | `string \| HTMLElement \| (trigger?: Element) => string \| HTMLElement` | - | ✅ | - |
 | `placement` | 悬浮层的对齐方式 | `PopperPlacement` | `'bottomStart'` | ✅ | - |
 | `showArrow` | 是否显示箭头 | `boolean` | `false` | ✅ | - |
 | `trigger` | 悬浮层触发方式 | `PopperTrigger` | `hover` | ✅ | - |

diff --git a/packages/components/dropdown/src/types.ts b/packages/components/dropdown/src/types.ts
@@ -5,8 +5,8 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { PortalTargetType } from '@idux/cdk/portal'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '@idux/cdk/utils'
+import type { OverlayContainerType } from '@idux/components/utils'
 import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 import { ɵOverlayPlacementDef, ɵOverlayTriggerDef } from '@idux/components/_private/overlay'
@@ -34,7 +34,7 @@ export const dropdownProps = {
   },
   offset: Array as unknown as PropType<[number, number]>,
   overlayContainer: {
-    type: [String, HTMLElement, Function] as PropType<PortalTargetType>,
+    type: [String, HTMLElement, Function] as PropType<OverlayContainerType>,
     default: undefined,
   },
   placement: ɵOverlayPlacementDef,

diff --git a/packages/components/image/__tests__/image.spec.ts b/packages/components/image/__tests__/image.spec.ts
@@ -76,7 +76,7 @@ describe('Image', () => {
       zoom: [1, 2],
       loop: false,
       maskClosable: false,
-      container: 'ix-image-container',
+      container: '.ix-image-container',
       'onUpdate:visible': () => {},
       'onUpdate:activeIndex': () => {},
     }

diff --git a/packages/components/image/__tests__/imageViewer.spec.ts b/packages/components/image/__tests__/imageViewer.spec.ts
@@ -202,7 +202,7 @@ describe('ImageViewer', () => {
 
     expect((document.querySelector('.ix-image-viewer-container .ix-image-viewer') as Element).innerHTML).not.toBe('')
 
-    await wrapper.setProps({ container: 'image-viewer-container' })
+    await wrapper.setProps({ container: '.image-viewer-container' })
 
     expect((document.querySelector('.image-viewer-container .ix-image-viewer') as Element).innerHTML).not.toBe('')
   })

diff --git a/packages/components/loading-bar/__tests__/__snapshots__/loadingBar.spec.ts.snap b/packages/components/loading-bar/__tests__/__snapshots__/loadingBar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`LoadingBarProvider > render work 1`] = `
-"<!--teleport start-->
-<!--teleport end-->
-&lt;button&gt;ok&lt;/button&gt;"
+"&lt;button&gt;ok&lt;/button&gt;
+<!--teleport start-->
+<!--teleport end-->"
 `;
diff --git a/packages/components/loading-bar/src/LoadingBarProvider.tsx b/packages/components/loading-bar/src/LoadingBarProvider.tsx
@@ -49,13 +49,13 @@ export default defineComponent({
     return () => {
       return (
         <>
+          {slots.default?.()}
           <CdkPortal target={mergedPortalTarget.value}>
             <ɵMask class={`${mergedPrefixCls.value}-mask`} mask={mask.value} visible={visible.value} />
             <Transition appear name={`${common.prefixCls}-move-up`}>
               <div v-show={visible.value} class={classes.value} style={{ maxWidth: `${progress.value}%` }} />
             </Transition>
           </CdkPortal>
-          {slots.default?.()}
         </>
       )
     }

diff --git a/packages/components/menu/docs/Api.zh.md b/packages/components/menu/docs/Api.zh.md
@@ -15,7 +15,7 @@
 | `mode` | 菜单模式，现在支持垂直、水平和内嵌 | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` | - | - |
 | `multiple` | 是否支持多选 | `boolean` | `false` | - | - |
 | `overlayClassName` | 悬浮层的自定义 `class` | `string` | - | - | `inline` 模式时无效 |
-| `overlayContainer` | 自定义菜单容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | `inline` 模式时无效 |
+| `overlayContainer` | 自定义菜单容器节点 | `string \| HTMLElement \| (trigger?: Element) => string \| HTMLElement` | - | ✅ | `inline` 模式时无效 |
 | `overlayDelay` | 浮层的打开和关闭延迟 | `number \| [number, number]` | `[0, 100]` | - | 为数组时，第一个元素是延迟显示的时间，第二个元素是延迟隐藏的时间 |
 | `selectable` | 是否允许选中 | `boolean` | `true` | - | - |
 | `theme` | 主题颜色 | `'light' \| 'dark'` | `'light'` | ✅ | - |