refactor: tour #6332

Author: tangjinzhou

components/_util/PortalWrapper.tsx

@@ -1,6 +1,4 @@
 import PropTypes from './vue-types';
-import switchScrollingEffect from './switchScrollingEffect';
-import setStyle from './setStyle';
 import Portal from './Portal';
 import {
   defineComponent,
@@ -11,10 +9,12 @@ import {
   onUpdated,
   getCurrentInstance,
   nextTick,
+  computed,
 } from 'vue';
 import canUseDom from './canUseDom';
-import ScrollLocker from '../vc-util/Dom/scrollLocker';
 import raf from './raf';
+import { booleanType } from './type';
+import useScrollLocker from './hooks/useScrollLocker';
 
 let openCount = 0;
 const supportDom = canUseDom();
@@ -24,10 +24,6 @@ export function getOpenCount() {
   return process.env.NODE_ENV === 'test' ? openCount : 0;
 }
 
-// https://github.com/ant-design/ant-design/issues/19340
-// https://github.com/ant-design/ant-design/issues/19332
-let cacheOverflow = {};
-
 const getParent = (getContainer: GetContainer) => {
   if (!supportDom) {
     return null;
@@ -57,20 +53,20 @@ export default defineComponent({
     forceRender: { type: Boolean, default: undefined },
     getContainer: PropTypes.any,
     visible: { type: Boolean, default: undefined },
+    autoLock: booleanType(),
+    didUpdate: Function,
   },
 
   setup(props, { slots }) {
     const container = shallowRef<HTMLElement>();
     const componentRef = shallowRef();
     const rafId = shallowRef<number>();
-    const scrollLocker = new ScrollLocker({
-      container: getParent(props.getContainer) as HTMLElement,
-    });
 
     const removeCurrentContainer = () => {
       // Portal will remove from `parentNode`.
       // Let's handle this again to avoid refactor issue.
       container.value?.parentNode?.removeChild(container.value);
+      container.value = null;
     };
     const attachToParent = (force = false) => {
       if (force || (container.value && !container.value.parentNode)) {
@@ -86,13 +82,13 @@ export default defineComponent({
       return true;
     };
     // attachToParent();
-
+    const defaultContainer = document.createElement('div');
     const getContainer = () => {
       if (!supportDom) {
         return null;
       }
       if (!container.value) {
-        container.value = document.createElement('div');
+        container.value = defaultContainer;
         attachToParent(true);
       }
       setWrapperClassName();
@@ -108,30 +104,19 @@ export default defineComponent({
       setWrapperClassName();
       attachToParent();
     });
-    /**
-     * Enhance ./switchScrollingEffect
-     * 1. Simulate document body scroll bar with
-     * 2. Record body has overflow style and recover when all of PortalWrapper invisible
-     * 3. Disable body scroll when PortalWrapper has open
-     *
-     * @memberof PortalWrapper
-     */
-    const switchScrolling = () => {
-      if (openCount === 1 && !Object.keys(cacheOverflow).length) {
-        switchScrollingEffect();
-        // Must be set after switchScrollingEffect
-        cacheOverflow = setStyle({
-          overflow: 'hidden',
-          overflowX: 'hidden',
-          overflowY: 'hidden',
-        });
-      } else if (!openCount) {
-        setStyle(cacheOverflow);
-        cacheOverflow = {};
-        switchScrollingEffect(true);
-      }
-    };
+
     const instance = getCurrentInstance();
+
+    useScrollLocker(
+      computed(() => {
+        return (
+          props.autoLock &&
+          props.visible &&
+          canUseDom() &&
+          (container.value === document.body || container.value === defaultContainer)
+        );
+      }),
+    );
     onMounted(() => {
       let init = false;
       watch(
@@ -157,17 +142,6 @@ export default defineComponent({
             ) {
               removeCurrentContainer();
             }
-            // updateScrollLocker
-            if (
-              visible &&
-              visible !== prevVisible &&
-              supportDom &&
-              getParent(getContainer) !== scrollLocker.getContainer()
-            ) {
-              scrollLocker.reLock({
-                container: getParent(getContainer) as HTMLElement,
-              });
-            }
           }
           init = true;
         },
@@ -192,22 +166,30 @@ export default defineComponent({
       removeCurrentContainer();
       raf.cancel(rafId.value);
     });
-
+    watch(
+      [() => props.visible, () => props.forceRender],
+      () => {
+        const { forceRender, visible } = props;
+        if (visible === false && !forceRender) {
+          removeCurrentContainer();
+        }
+      },
+      { flush: 'post' },
+    );
     return () => {
       const { forceRender, visible } = props;
       let portal = null;
       const childProps = {
         getOpenCount: () => openCount,
         getContainer,
-        switchScrollingEffect: switchScrolling,
-        scrollLocker,
       };
-
+      if (visible === false && !forceRender) return null;
       if (forceRender || visible || componentRef.value) {
         portal = (
           <Portal
             getContainer={getContainer}
             ref={componentRef}
+            didUpdate={props.didUpdate}
             v-slots={{ default: () => slots.default?.(childProps) }}
           ></Portal>
         );

components/vc-tour/hooks/useScrollLocker.tsx renamed to components/_util/hooks/useScrollLocker.ts

@@ -19,26 +19,30 @@ export function isBodyOverflowing() {
 
 export default function useScrollLocker(lock?: Ref<boolean>) {
   const mergedLock = computed(() => !!lock && !!lock.value);
-  const id = computed(() => {
-    uuid += 1;
-    return `${UNIQUE_ID}_${uuid}`;
-  });
+  uuid += 1;
+  const id = `${UNIQUE_ID}_${uuid}`;
 
-  watchEffect(() => {
-    if (mergedLock.value) {
-      const scrollbarSize = getScrollBarSize();
-      const isOverflow = isBodyOverflowing();
+  watchEffect(
+    onClear => {
+      if (mergedLock.value) {
+        const scrollbarSize = getScrollBarSize();
+        const isOverflow = isBodyOverflowing();
 
-      updateCSS(
-        `
+        updateCSS(
+          `
 html body {
   overflow-y: hidden;
   ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
 }`,
-        id.value,
-      );
-    } else {
-      removeCSS(id.value);
-    }
-  });
+          id,
+        );
+      } else {
+        removeCSS(id);
+      }
+      onClear(() => {
+        removeCSS(id);
+      });
+    },
+    { flush: 'post' },
+  );
 }

components/_util/switchScrollingEffect.ts

@@ -28,7 +28,7 @@ The most basic usage.
     <a-button ref="ref3"><EllipsisOutlined /></a-button>
   </a-space>
 
-  <a-tour :open="open" :steps="steps" @close="handleOpen(false)" />
+  <a-tour v-model:current="current" :open="open" :steps="steps" @close="handleOpen(false)" />
 </template>
 
 <script lang="ts" setup>
@@ -41,7 +41,7 @@ const open = ref<boolean>(false);
 const ref1 = ref(null);
 const ref2 = ref(null);
 const ref3 = ref(null);
-
+const current = ref(0);
 const steps: TourProps['steps'] = [
   {
     title: 'Upload File',

components/tour/demo/basic.vue

@@ -23,7 +23,7 @@ Use when you want to guide users through a product.
 | mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| `{ style?: CSSProperties; color?: string; }` | `true` |  |
 | type | Type, affects the background color and text color | `default` `primary` | `default` |  |
 | open | Open tour | `boolean` | - |  |
-| current | What is the current step | `number` | - |  |
+| current(v-model) | What is the current step | `number` | - |  |
 | scrollIntoViewOptions | support pass custom scrollIntoView options | `boolean` \| `ScrollIntoViewOptions` | `true` |  |
 | indicatorsRender | custom indicator | `v-slot:indicatorsRender="{current, total}"` | - |  |
 | zIndex | Tour's zIndex | `number` | `1001` |  |

components/tour/index.en-US.md

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs } from 'vue';
+import { computed, defineComponent, toRefs } from 'vue';
 import VCTour from '../vc-tour';
 import classNames from '../_util/classNames';
 import TourPanel from './panelRender';
@@ -11,26 +11,27 @@ import useMergedType from './useMergedType';
 
 // CSSINJS
 import useStyle from './style';
+import getPlacements from '../_util/placements';
 
 export { TourProps, TourStepProps };
 
 const Tour = defineComponent({
   name: 'ATour',
+  inheritAttrs: false,
   props: tourProps(),
   setup(props, { attrs, emit, slots }) {
-    const { current } = toRefs(props);
+    const { current, type, steps, defaultCurrent } = toRefs(props);
     const { prefixCls, direction } = useConfigInject('tour', props);
 
     // style
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
     const { currentMergedType, updateInnerCurrent } = useMergedType({
-      defaultType: props.type,
-      steps: props.steps,
+      defaultType: type,
+      steps,
       current,
-      defaultCurrent: props.defaultCurrent,
+      defaultCurrent,
     });
-
     return () => {
       const { steps, current, type, rootClassName, ...restProps } = props;
 
@@ -58,9 +59,17 @@ const Tour = defineComponent({
 
       const onStepChange = (stepCurrent: number) => {
         updateInnerCurrent(stepCurrent);
+        emit('update:current', stepCurrent);
         emit('change', stepCurrent);
       };
 
+      const builtinPlacements = computed(() =>
+        getPlacements({
+          arrowPointAtCenter: true,
+          autoAdjustOverflow: true,
+        }),
+      );
+
       return wrapSSR(
         <VCTour
           {...attrs}
@@ -73,6 +82,7 @@ const Tour = defineComponent({
           renderPanel={mergedRenderPanel}
           onChange={onStepChange}
           steps={steps}
+          builtinPlacements={builtinPlacements.value as any}
         />,
       );
     };

components/tour/index.tsx

@@ -24,7 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6hQpM0XtEAAA
 | mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | `boolean` \| `{ style?: CSSProperties; color?: string; }` | `true` |  |
 | type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` |  |
 | open | 打开引导 | `boolean` | - |  |
-| current | 当前处于哪一步 | `number` | - |  |
+| current(v-model) | 当前处于哪一步 | `number` | - |  |
 | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 | `boolean` \| `ScrollIntoViewOptions` | `true` |  |
 | indicatorsRender | 自定义指示器 | `v-slot:indicatorsRender="{current, total}"` | - |  |
 | zIndex | Tour 的层级 | `number` | `1001` |  |

components/tour/index.zh-CN.md

@@ -8,6 +8,7 @@ export const tourProps = () => ({
   prefixCls: { type: String },
   current: { type: Number },
   type: { type: String as PropType<'default' | 'primary'> }, //	default	类型，影响底色与文字颜色
+  'onUpdate:current': Function as PropType<(val: number) => void>,
 });
 
 export type TourProps = Partial<ExtractPropTypes<ReturnType<typeof tourProps>>>;