{"version":3,"file":"MotionThumb.cjs","sources":["../../../../../../packages/components/segmented/src/MotionThumb.tsx"],"sourcesContent":["import type { CSSProperties, TransitionProps } from 'vue';\nimport type { SegmentedValue, ThumbRect } from './interface';\nimport { addClass, removeClass } from '@antdv/utils';\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  Transition,\n  watch,\n} from 'vue';\nimport { motionThumbProps } from './props';\n\nfunction calcThumbStyle(targetElement: HTMLElement | null | undefined): ThumbRect {\n  return targetElement\n    ? {\n        left: targetElement.offsetLeft,\n        right:\n          (targetElement.parentElement!.clientWidth as number)\n          - targetElement.clientWidth\n          - targetElement.offsetLeft,\n        width: targetElement.clientWidth,\n      }\n    : null;\n}\n\nconst toPX = (value?: number) => (value !== undefined ? `${value}px` : undefined);\n\nexport default defineComponent({\n  props: motionThumbProps(),\n  name: 'AMotionThumb',\n  emits: ['motionStart', 'motionEnd'],\n  setup(props, { emit }) {\n    const thumbRef = ref<HTMLDivElement>();\n    // =========================== Effect ===========================\n    const findValueElement = (val: SegmentedValue) => {\n      const index = props.getValueIndex(val);\n\n      const ele = props.containerRef.value?.querySelectorAll<HTMLDivElement>(\n        `.${props.prefixCls}-item`,\n      )[index];\n      return ele?.offsetParent && ele;\n    };\n\n    const prevStyle = ref<ThumbRect>(null);\n    const nextStyle = ref<ThumbRect>(null);\n\n    watch(\n      () => props.value,\n      (value, prevValue) => {\n        const prev = findValueElement(prevValue);\n        const next = findValueElement(value);\n\n        const calcPrevStyle = calcThumbStyle(prev);\n        const calcNextStyle = calcThumbStyle(next);\n\n        prevStyle.value = calcPrevStyle;\n        nextStyle.value = calcNextStyle;\n\n        if (prev && next)\n          emit('motionStart');\n        else\n          emit('motionEnd');\n      },\n      { flush: 'post' },\n    );\n\n    const thumbStart = computed(() =>\n      props.direction === 'rtl'\n        ? toPX(-(prevStyle.value?.right as number))\n        : toPX(prevStyle.value?.left as number),\n    );\n    const thumbActive = computed(() =>\n      props.direction === 'rtl'\n        ? toPX(-(nextStyle.value?.right as number))\n        : toPX(nextStyle.value?.left as number),\n    );\n\n    // =========================== Motion ===========================\n    let timeid: any;\n    const onAppearStart: TransitionProps['onBeforeEnter'] = (el: HTMLDivElement) => {\n      clearTimeout(timeid);\n      nextTick(() => {\n        if (el) {\n          el.style.transform = 'translateX(var(--thumb-start-left))';\n          el.style.width = 'var(--thumb-start-width)';\n        }\n      });\n    };\n\n    const onAppearActive: TransitionProps['onEnter'] = (el: HTMLDivElement) => {\n      timeid = setTimeout(() => {\n        if (el) {\n          addClass(el, `${props.motionName}-appear-active`);\n          el.style.transform = 'translateX(var(--thumb-active-left))';\n          el.style.width = 'var(--thumb-active-width)';\n        }\n      });\n    };\n    const onAppearEnd: TransitionProps['onAfterEnter'] = (el: HTMLDivElement) => {\n      prevStyle.value = null;\n      nextStyle.value = null;\n      if (el) {\n        el.style.transform = null;\n        el.style.width = null;\n        removeClass(el, `${props.motionName}-appear-active`);\n      }\n      emit('motionEnd');\n    };\n    const mergedStyle = computed<CSSProperties>(() => ({\n      '--thumb-start-left': thumbStart.value,\n      '--thumb-start-width': toPX(prevStyle.value?.width),\n      '--thumb-active-left': thumbActive.value,\n      '--thumb-active-width': toPX(nextStyle.value?.width),\n    }));\n    onBeforeUnmount(() => {\n      clearTimeout(timeid);\n    });\n    return () => {\n      // It's little ugly which should be refactor when @umi/test update to latest jsdom\n      const motionProps = {\n        ref: thumbRef,\n        style: mergedStyle.value,\n        class: [`${props.prefixCls}-thumb`],\n      };\n\n      if (process.env.NODE_ENV === 'test')\n        (motionProps as any)['data-test-style'] = JSON.stringify(mergedStyle.value);\n\n      return (\n        <Transition\n          appear\n          onBeforeEnter={onAppearStart}\n          onEnter={onAppearActive}\n          onAfterEnter={onAppearEnd}\n        >\n          {(!prevStyle.value || !nextStyle.value) ? null : <div {...motionProps}></div>}\n        </Transition>\n      );\n    };\n  },\n});\n"],"names":["calcThumbStyle","targetElement","left","offsetLeft","right","parentElement","clientWidth","width","toPX","value","undefined","defineComponent","props","motionThumbProps","name","emits","setup","emit","thumbRef","ref","findValueElement","val","index","getValueIndex","ele","containerRef","querySelectorAll","prefixCls","offsetParent","prevStyle","nextStyle","watch","prevValue","prev","next","calcPrevStyle","calcNextStyle","flush","thumbStart","computed","direction","thumbActive","timeid","onAppearStart","el","clearTimeout","nextTick","style","transform","onAppearActive","setTimeout","addClass","motionName","onAppearEnd","removeClass","mergedStyle","onBeforeUnmount","motionProps","class","process","env","NODE_ENV","JSON","stringify","_createVNode","Transition","default"],"mappings":"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"}