@antsoo-lib/components 0.1.2 → 0.1.4

package/src/tabs/src/TabNavList/index.tsx

@@ -0,0 +1,581 @@
+import pick from 'lodash-es/pick'
+
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
+import { computed, defineComponent, onBeforeUnmount, shallowRef, watch, watchEffect } from 'vue'
+
+import classNames from '../../../_util/classNames'
+import useRefs from '../../../_util/hooks/useRefs'
+import useState from '../../../_util/hooks/useState'
+import raf from '../../../_util/raf'
+import { functionType, objectType } from '../../../_util/type'
+import type { CustomSlotsType, Key } from '../../../_util/type'
+import { toPx } from '../../../_util/util'
+import PropTypes from '../../../_util/vue-types'
+import ResizeObserver from '../../../vc-resize-observer'
+import { useInjectTabs } from '../TabContext'
+import useOffsets from '../hooks/useOffsets'
+import { useRafState } from '../hooks/useRaf'
+import useSyncState from '../hooks/useSyncState'
+import useTouchMove from '../hooks/useTouchMove'
+import type {
+  AnimatedConfig,
+  EditableConfig,
+  OnTabScroll,
+  RenderTabBar,
+  TabBarExtraContent,
+  TabBarExtraPosition,
+  TabPosition,
+  TabSizeMap,
+  TabsLocale,
+} from '../interface'
+import AddButton from './AddButton'
+import OperationNode from './OperationNode'
+import TabNode from './TabNode'
+
+const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 }
+export const tabNavListProps = () => {
+  return {
+    id: { type: String },
+    tabPosition: { type: String as PropType<TabPosition> },
+    activeKey: { type: [String, Number] },
+    rtl: { type: Boolean },
+    animated: objectType<AnimatedConfig>(),
+    editable: objectType<EditableConfig>(),
+    moreIcon: PropTypes.any,
+    moreTransitionName: { type: String },
+    mobile: { type: Boolean },
+    tabBarGutter: { type: Number },
+    renderTabBar: { type: Function as PropType<RenderTabBar> },
+    locale: objectType<TabsLocale>(),
+    popupClassName: String,
+    getPopupContainer: functionType<
+      ((triggerNode?: HTMLElement | undefined) => HTMLElement) | undefined
+    >(),
+    onTabClick: {
+      type: Function as PropType<(activeKey: Key, e: MouseEvent | KeyboardEvent) => void>,
+    },
+    onTabScroll: { type: Function as PropType<OnTabScroll> },
+  }
+}
+
+export type TabNavListProps = Partial<ExtractPropTypes<ReturnType<typeof tabNavListProps>>>
+
+interface ExtraContentProps {
+  position: TabBarExtraPosition
+  prefixCls: string
+  extra?: (info?: { position: 'left' | 'right' }) => TabBarExtraContent
+}
+
+const getTabSize = (tab: HTMLElement, containerRect: { x: number; y: number }) => {
+  // tabListRef
+  const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = tab
+  const { width, height, x, y } = tab.getBoundingClientRect()
+
+  // Use getBoundingClientRect to avoid decimal inaccuracy
+  if (Math.abs(width - offsetWidth) < 1) {
+    return [width, height, x - containerRect.x, y - containerRect.y]
+  }
+
+  return [offsetWidth, offsetHeight, offsetLeft, offsetTop]
+}
+
+// const getSize = (refObj: ShallowRef<HTMLElement>) => {
+//   const { offsetWidth = 0, offsetHeight = 0 } = refObj.value || {};
+
+//   // Use getBoundingClientRect to avoid decimal inaccuracy
+//   if (refObj.value) {
+//     const { width, height } = refObj.value.getBoundingClientRect();
+
+//     if (Math.abs(width - offsetWidth) < 1) {
+//       return [width, height];
+//     }
+//   }
+
+//   return [offsetWidth, offsetHeight];
+// };
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'TabNavList',
+  inheritAttrs: false,
+  props: tabNavListProps(),
+  slots: Object as CustomSlotsType<{
+    moreIcon?: any
+    leftExtra?: any
+    rightExtra?: any
+    tabBarExtraContent?: any
+    default?: any
+  }>,
+  emits: ['tabClick', 'tabScroll'],
+  setup(props, { attrs, slots }) {
+    const { tabs, prefixCls } = useInjectTabs()
+    const tabsWrapperRef = shallowRef<HTMLDivElement>()
+    const tabListRef = shallowRef<HTMLDivElement>()
+    const operationsRef = shallowRef<{ $el: HTMLDivElement }>()
+    const innerAddButtonRef = shallowRef()
+    const [setRef, btnRefs] = useRefs()
+    const tabPositionTopOrBottom = computed(
+      () => props.tabPosition === 'top' || props.tabPosition === 'bottom',
+    )
+
+    const [transformLeft, setTransformLeft] = useSyncState(0, (next, prev) => {
+      if (tabPositionTopOrBottom.value && props.onTabScroll) {
+        props.onTabScroll({ direction: next > prev ? 'left' : 'right' })
+      }
+    })
+    const [transformTop, setTransformTop] = useSyncState(0, (next, prev) => {
+      if (!tabPositionTopOrBottom.value && props.onTabScroll) {
+        props.onTabScroll({ direction: next > prev ? 'top' : 'bottom' })
+      }
+    })
+
+    const [wrapperScrollWidth, setWrapperScrollWidth] = useState<number>(0)
+    const [wrapperScrollHeight, setWrapperScrollHeight] = useState<number>(0)
+    const [wrapperWidth, setWrapperWidth] = useState<number>(null)
+    const [wrapperHeight, setWrapperHeight] = useState<number>(null)
+    const [addWidth, setAddWidth] = useState<number>(0)
+    const [addHeight, setAddHeight] = useState<number>(0)
+
+    const [tabSizes, setTabSizes] = useRafState<TabSizeMap>(new Map())
+    const tabOffsets = useOffsets(tabs, tabSizes)
+    // ========================== Util =========================
+    const operationsHiddenClassName = computed(() => `${prefixCls.value}-nav-operations-hidden`)
+
+    const transformMin = shallowRef(0)
+    const transformMax = shallowRef(0)
+
+    watchEffect(() => {
+      if (!tabPositionTopOrBottom.value) {
+        transformMin.value = Math.min(0, wrapperHeight.value - wrapperScrollHeight.value)
+        transformMax.value = 0
+      } else if (props.rtl) {
+        transformMin.value = 0
+        transformMax.value = Math.max(0, wrapperScrollWidth.value - wrapperWidth.value)
+      } else {
+        transformMin.value = Math.min(0, wrapperWidth.value - wrapperScrollWidth.value)
+        transformMax.value = 0
+      }
+    })
+
+    const alignInRange = (value: number): number => {
+      if (value < transformMin.value) {
+        return transformMin.value
+      }
+      if (value > transformMax.value) {
+        return transformMax.value
+      }
+      return value
+    }
+
+    // ========================= Mobile ========================
+    const touchMovingRef = shallowRef<any>()
+    const [lockAnimation, setLockAnimation] = useState<number>()
+
+    const doLockAnimation = () => {
+      setLockAnimation(Date.now())
+    }
+
+    const clearTouchMoving = () => {
+      clearTimeout(touchMovingRef.value)
+    }
+    const doMove = (setState: (fn: (val: number) => number) => void, offset: number) => {
+      setState((value: number) => {
+        const newValue = alignInRange(value + offset)
+
+        return newValue
+      })
+    }
+    useTouchMove(tabsWrapperRef, (offsetX, offsetY) => {
+      if (tabPositionTopOrBottom.value) {
+        // Skip scroll if place is enough
+        if (wrapperWidth.value >= wrapperScrollWidth.value) {
+          return false
+        }
+
+        doMove(setTransformLeft, offsetX)
+      } else {
+        if (wrapperHeight.value >= wrapperScrollHeight.value) {
+          return false
+        }
+
+        doMove(setTransformTop, offsetY)
+      }
+
+      clearTouchMoving()
+      doLockAnimation()
+
+      return true
+    })
+
+    watch(lockAnimation, () => {
+      clearTouchMoving()
+      if (lockAnimation.value) {
+        touchMovingRef.value = setTimeout(() => {
+          setLockAnimation(0)
+        }, 100)
+      }
+    })
+
+    // ========================= Scroll ========================
+    const scrollToTab = (key = props.activeKey) => {
+      const tabOffset = tabOffsets.value.get(key) || {
+        width: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+      }
+
+      if (tabPositionTopOrBottom.value) {
+        // ============ Align with top & bottom ============
+        let newTransform = transformLeft.value
+
+        // RTL
+        if (props.rtl) {
+          if (tabOffset.right < transformLeft.value) {
+            newTransform = tabOffset.right
+          } else if (tabOffset.right + tabOffset.width > transformLeft.value + wrapperWidth.value) {
+            newTransform = tabOffset.right + tabOffset.width - wrapperWidth.value
+          }
+        }
+        // LTR
+        else if (tabOffset.left < -transformLeft.value) {
+          newTransform = -tabOffset.left
+        } else if (tabOffset.left + tabOffset.width > -transformLeft.value + wrapperWidth.value) {
+          newTransform = -(tabOffset.left + tabOffset.width - wrapperWidth.value)
+        }
+
+        setTransformTop(0)
+        setTransformLeft(alignInRange(newTransform))
+      } else {
+        // ============ Align with left & right ============
+        let newTransform = transformTop.value
+
+        if (tabOffset.top < -transformTop.value) {
+          newTransform = -tabOffset.top
+        } else if (tabOffset.top + tabOffset.height > -transformTop.value + wrapperHeight.value) {
+          newTransform = -(tabOffset.top + tabOffset.height - wrapperHeight.value)
+        }
+
+        setTransformLeft(0)
+        setTransformTop(alignInRange(newTransform))
+      }
+    }
+
+    const visibleStart = shallowRef(0)
+    const visibleEnd = shallowRef(0)
+
+    watchEffect(() => {
+      let unit: 'width' | 'height'
+      let position: 'left' | 'top' | 'right'
+      let transformSize: number
+      let basicSize: number
+      let tabContentSize: number
+      let addSize: number
+      const tabOffsetsValue = tabOffsets.value
+      if (['top', 'bottom'].includes(props.tabPosition)) {
+        unit = 'width'
+        basicSize = wrapperWidth.value
+        tabContentSize = wrapperScrollWidth.value
+        addSize = addWidth.value
+        position = props.rtl ? 'right' : 'left'
+        transformSize = Math.abs(transformLeft.value)
+      } else {
+        unit = 'height'
+        basicSize = wrapperHeight.value
+        tabContentSize = wrapperScrollWidth.value
+        addSize = addHeight.value
+        position = 'top'
+        transformSize = -transformTop.value
+      }
+      let mergedBasicSize = basicSize
+      if (tabContentSize + addSize > basicSize && tabContentSize < basicSize) {
+        mergedBasicSize = basicSize - addSize
+      }
+
+      const tabsVal = tabs.value
+      if (!tabsVal.length) {
+        return ([visibleStart.value, visibleEnd.value] = [0, 0])
+      }
+
+      const len = tabsVal.length
+      let endIndex = len
+      for (let i = 0; i < len; i += 1) {
+        const offset = tabOffsetsValue.get(tabsVal[i].key) || DEFAULT_SIZE
+        if (offset[position] + offset[unit] > transformSize + mergedBasicSize) {
+          endIndex = i - 1
+          break
+        }
+      }
+      let startIndex = 0
+      for (let i = len - 1; i >= 0; i -= 1) {
+        const offset = tabOffsetsValue.get(tabsVal[i].key) || DEFAULT_SIZE
+        if (offset[position] < transformSize) {
+          startIndex = i + 1
+          break
+        }
+      }
+
+      return ([visibleStart.value, visibleEnd.value] = [startIndex, endIndex])
+    })
+    const updateTabSizes = () => {
+      setTabSizes(() => {
+        const newSizes: TabSizeMap = new Map()
+        const listRect = tabListRef.value?.getBoundingClientRect()
+        tabs.value.forEach(({ key }) => {
+          const btnRef = btnRefs.value.get(key)
+          const btnNode = (btnRef as any)?.$el || btnRef
+          if (btnNode) {
+            const [width, height, left, top] = getTabSize(btnNode, listRect)
+            newSizes.set(key, { width, height, left, top })
+          }
+        })
+        return newSizes
+      })
+    }
+
+    watch(
+      () => tabs.value.map((tab) => tab.key).join('%%'),
+      () => {
+        updateTabSizes()
+      },
+      { flush: 'post' },
+    )
+    const onListHolderResize = () => {
+      // Update wrapper records
+      const offsetWidth = tabsWrapperRef.value?.offsetWidth || 0
+      const offsetHeight = tabsWrapperRef.value?.offsetHeight || 0
+      const addDom = innerAddButtonRef.value?.$el || {}
+      const newAddWidth = addDom.offsetWidth || 0
+      const newAddHeight = addDom.offsetHeight || 0
+      setWrapperWidth(offsetWidth)
+      setWrapperHeight(offsetHeight)
+      setAddWidth(newAddWidth)
+      setAddHeight(newAddHeight)
+
+      const newWrapperScrollWidth = (tabListRef.value?.offsetWidth || 0) - newAddWidth
+      const newWrapperScrollHeight = (tabListRef.value?.offsetHeight || 0) - newAddHeight
+
+      setWrapperScrollWidth(newWrapperScrollWidth)
+      setWrapperScrollHeight(newWrapperScrollHeight)
+
+      // Update buttons records
+      updateTabSizes()
+    }
+
+    // ======================== Dropdown =======================
+    const hiddenTabs = computed(() => [
+      ...tabs.value.slice(0, visibleStart.value),
+      ...tabs.value.slice(visibleEnd.value + 1),
+    ])
+
+    // =================== Link & Operations ===================
+    const [inkStyle, setInkStyle] = useState<CSSProperties>()
+
+    const activeTabOffset = computed(() => tabOffsets.value.get(props.activeKey))
+
+    // Delay set ink style to avoid remove tab blink
+    const inkBarRafRef = shallowRef<number>()
+    const cleanInkBarRaf = () => {
+      raf.cancel(inkBarRafRef.value)
+    }
+
+    watch([activeTabOffset, tabPositionTopOrBottom, () => props.rtl], () => {
+      const newInkStyle: CSSProperties = {}
+
+      if (activeTabOffset.value) {
+        if (tabPositionTopOrBottom.value) {
+          if (props.rtl) {
+            newInkStyle.right = toPx(activeTabOffset.value.right)
+          } else {
+            newInkStyle.left = toPx(activeTabOffset.value.left)
+          }
+
+          newInkStyle.width = toPx(activeTabOffset.value.width)
+        } else {
+          newInkStyle.top = toPx(activeTabOffset.value.top)
+          newInkStyle.height = toPx(activeTabOffset.value.height)
+        }
+      }
+
+      cleanInkBarRaf()
+      inkBarRafRef.value = raf(() => {
+        setInkStyle(newInkStyle)
+      })
+    })
+
+    watch(
+      [() => props.activeKey, activeTabOffset, tabOffsets, tabPositionTopOrBottom],
+      () => {
+        scrollToTab()
+      },
+      { flush: 'post' },
+    )
+
+    watch(
+      [() => props.rtl, () => props.tabBarGutter, () => props.activeKey, () => tabs.value],
+      () => {
+        onListHolderResize()
+      },
+      { flush: 'post' },
+    )
+
+    const ExtraContent = ({ position, prefixCls, extra }: ExtraContentProps) => {
+      if (!extra) return null
+      const content = extra?.({ position })
+      return content ? <div class={`${prefixCls}-extra-content`}>{content}</div> : null
+    }
+
+    onBeforeUnmount(() => {
+      clearTouchMoving()
+      cleanInkBarRaf()
+    })
+
+    return () => {
+      const {
+        id,
+        animated,
+        activeKey,
+        rtl,
+        editable,
+        locale,
+        tabPosition,
+        tabBarGutter,
+        onTabClick,
+      } = props
+      const { class: className, style } = attrs
+      const pre = prefixCls.value
+      // ========================= Render ========================
+      const hasDropdown = !!hiddenTabs.value.length
+      const wrapPrefix = `${pre}-nav-wrap`
+      let pingLeft: boolean
+      let pingRight: boolean
+      let pingTop: boolean
+      let pingBottom: boolean
+
+      if (tabPositionTopOrBottom.value) {
+        if (rtl) {
+          pingRight = transformLeft.value > 0
+          pingLeft = transformLeft.value + wrapperWidth.value < wrapperScrollWidth.value
+        } else {
+          pingLeft = transformLeft.value < 0
+          pingRight = -transformLeft.value + wrapperWidth.value < wrapperScrollWidth.value
+        }
+      } else {
+        pingTop = transformTop.value < 0
+        pingBottom = -transformTop.value + wrapperHeight.value < wrapperScrollHeight.value
+      }
+
+      const tabNodeStyle: CSSProperties = {}
+      if (tabPosition === 'top' || tabPosition === 'bottom') {
+        tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] =
+          typeof tabBarGutter === 'number' ? `${tabBarGutter}px` : tabBarGutter
+      } else {
+        tabNodeStyle.marginTop =
+          typeof tabBarGutter === 'number' ? `${tabBarGutter}px` : tabBarGutter
+      }
+
+      const tabNodes = tabs.value.map((tab, i) => {
+        const { key } = tab
+        return (
+          <TabNode
+            id={id}
+            prefixCls={pre}
+            key={key}
+            tab={tab}
+            /* first node should not have margin left */
+            style={i === 0 ? undefined : tabNodeStyle}
+            closable={tab.closable}
+            editable={editable}
+            active={key === activeKey}
+            removeAriaLabel={locale?.removeAriaLabel}
+            ref={setRef(key)}
+            onClick={(e) => {
+              onTabClick(key, e)
+            }}
+            onFocus={() => {
+              scrollToTab(key)
+              doLockAnimation()
+              if (!tabsWrapperRef.value) {
+                return
+              }
+              // Focus element will make scrollLeft change which we should reset back
+              if (!rtl) {
+                tabsWrapperRef.value.scrollLeft = 0
+              }
+              tabsWrapperRef.value.scrollTop = 0
+            }}
+            v-slots={slots}
+          ></TabNode>
+        )
+      })
+      return (
+        <div
+          role="tablist"
+          class={classNames(`${pre}-nav`, className)}
+          style={style as CSSProperties}
+          onKeydown={() => {
+            // No need animation when use keyboard
+            doLockAnimation()
+          }}
+        >
+          <ExtraContent position="left" prefixCls={pre} extra={slots.leftExtra} />
+
+          <ResizeObserver onResize={onListHolderResize}>
+            <div
+              class={classNames(wrapPrefix, {
+                [`${wrapPrefix}-ping-left`]: pingLeft,
+                [`${wrapPrefix}-ping-right`]: pingRight,
+                [`${wrapPrefix}-ping-top`]: pingTop,
+                [`${wrapPrefix}-ping-bottom`]: pingBottom,
+              })}
+              ref={tabsWrapperRef}
+            >
+              <ResizeObserver onResize={onListHolderResize}>
+                <div
+                  ref={tabListRef}
+                  class={`${pre}-nav-list`}
+                  style={{
+                    transform: `translate(${transformLeft.value}px, ${transformTop.value}px)`,
+                    transition: lockAnimation.value ? 'none' : undefined,
+                  }}
+                >
+                  {tabNodes}
+                  <AddButton
+                    ref={innerAddButtonRef}
+                    prefixCls={pre}
+                    locale={locale}
+                    editable={editable}
+                    style={{
+                      ...(tabNodes.length === 0 ? undefined : tabNodeStyle),
+                      visibility: hasDropdown ? 'hidden' : null,
+                    }}
+                  />
+
+                  <div
+                    class={classNames(`${pre}-ink-bar`, {
+                      [`${pre}-ink-bar-animated`]: animated.inkBar,
+                    })}
+                    style={inkStyle.value}
+                  />
+                </div>
+              </ResizeObserver>
+            </div>
+          </ResizeObserver>
+          <OperationNode
+            {...props}
+            removeAriaLabel={locale?.removeAriaLabel}
+            v-slots={pick(slots, ['moreIcon'])}
+            ref={operationsRef}
+            prefixCls={pre}
+            tabs={hiddenTabs.value}
+            class={!hasDropdown && operationsHiddenClassName.value}
+          />
+
+          <ExtraContent position="right" prefixCls={pre} extra={slots.rightExtra} />
+          <ExtraContent position="right" prefixCls={pre} extra={slots.tabBarExtraContent} />
+        </div>
+      )
+    }
+  },
+})

package/src/tabs/src/TabPanelList/TabPane.tsx

@@ -0,0 +1,81 @@
+import { computed, defineComponent, ref, watch } from 'vue'
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+
+import type { CustomSlotsType } from '../../../_util/type'
+import PropTypes from '../../../_util/vue-types'
+
+const tabPaneProps = () => ({
+  tab: PropTypes.any,
+  disabled: { type: Boolean },
+  forceRender: { type: Boolean },
+  closable: { type: Boolean },
+  animated: { type: Boolean },
+  active: { type: Boolean },
+  destroyInactiveTabPane: { type: Boolean },
+
+  // Pass by TabPaneList
+  prefixCls: { type: String },
+  tabKey: { type: [String, Number] },
+  id: { type: String },
+  // closeIcon: PropTypes.any,
+})
+
+export type TabPaneProps = Partial<ExtractPropTypes<ReturnType<typeof tabPaneProps>>>
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ATabPane',
+  inheritAttrs: false,
+  __ANT_TAB_PANE: true,
+  props: tabPaneProps(),
+  slots: Object as CustomSlotsType<{
+    closeIcon: any
+    tab: any
+    default: any
+  }>,
+  setup(props, { attrs, slots }) {
+    const visited = ref(props.forceRender)
+    watch(
+      [() => props.active, () => props.destroyInactiveTabPane],
+      () => {
+        if (props.active) {
+          visited.value = true
+        } else if (props.destroyInactiveTabPane) {
+          visited.value = false
+        }
+      },
+      { immediate: true },
+    )
+    const mergedStyle = computed<CSSProperties>(() => {
+      if (!props.active) {
+        if (props.animated) {
+          return {
+            visibility: 'hidden',
+            height: 0,
+            overflowY: 'hidden',
+          }
+        } else {
+          return { display: 'none' }
+        }
+      }
+      return {}
+    })
+
+    return () => {
+      const { prefixCls, forceRender, id, active, tabKey } = props
+      return (
+        <div
+          id={id && `${id}-panel-${tabKey}`}
+          role="tabpanel"
+          tabindex={active ? 0 : -1}
+          aria-labelledby={id && `${id}-tab-${tabKey}`}
+          aria-hidden={!active}
+          style={[mergedStyle.value, attrs.style as CSSProperties]}
+          class={[`${prefixCls}-tabpane`, active && `${prefixCls}-tabpane-active`, attrs.class]}
+        >
+          {(active || visited.value || forceRender) && slots.default?.()}
+        </div>
+      )
+    }
+  },
+})