@antsoo-lib/components 0.1.11 → 0.1.12

package/src/vc-picker/PickerPanel.tsx

@@ -1,609 +0,0 @@
-/**
- * Logic:
- *  When `mode` === `picker`,
- *  click will trigger `onSelect` (if value changed trigger `onChange` also).
- *  Panel change will not trigger `onSelect` but trigger `onPanelChange`
- */
-import type { CSSProperties } from 'vue'
-import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue'
-
-import KeyCode from '../_util/KeyCode'
-import classNames from '../_util/classNames'
-import useMergedState from '../_util/hooks/useMergedState'
-import type { VueNode } from '../_util/type'
-import { warning } from '../vc-util/warning'
-import { useInjectPanel, useProvidePanel } from './PanelContext'
-import { useInjectRange } from './RangeContext'
-import type { GenerateConfig } from './generate'
-import type {
-  Components,
-  DisabledTime,
-  Locale,
-  OnPanelChange,
-  PanelMode,
-  PanelRefProps,
-  PickerMode,
-} from './interface'
-import DatePanel from './panels/DatePanel'
-import type { DateRender } from './panels/DatePanel/DateBody'
-import DatetimePanel from './panels/DatetimePanel'
-import DecadePanel from './panels/DecadePanel'
-import MonthPanel from './panels/MonthPanel'
-import type { MonthCellRender } from './panels/MonthPanel/MonthBody'
-import QuarterPanel from './panels/QuarterPanel'
-import type { SharedTimeProps } from './panels/TimePanel'
-import TimePanel from './panels/TimePanel'
-import WeekPanel from './panels/WeekPanel'
-import YearPanel from './panels/YearPanel'
-import { isEqual } from './utils/dateUtil'
-import getExtraFooter from './utils/getExtraFooter'
-import getRanges from './utils/getRanges'
-import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil'
-import { PickerModeMap } from './utils/uiUtil'
-
-export interface PickerPanelSharedProps<DateType> {
-  prefixCls?: string
-  // className?: string;
-  // style?: React.CSSProperties;
-  /** @deprecated Will be removed in next big version. Please use `mode` instead */
-  mode?: PanelMode
-  tabindex?: number
-
-  // Locale
-  locale: Locale
-  generateConfig: GenerateConfig<DateType>
-
-  // Value
-  value?: DateType | null
-  defaultValue?: DateType
-  /** [Legacy] Set default display picker view date */
-  pickerValue?: DateType
-  /** [Legacy] Set default display picker view date */
-  defaultPickerValue?: DateType
-
-  // Date
-  disabledDate?: (date: DateType) => boolean
-
-  // Render
-  dateRender?: DateRender<DateType>
-  monthCellRender?: MonthCellRender<DateType>
-  renderExtraFooter?: (mode: PanelMode) => VueNode
-
-  // Event
-  onSelect?: (value: DateType) => void
-  onChange?: (value: DateType) => void
-  onPanelChange?: OnPanelChange<DateType>
-  onMousedown?: (e: MouseEvent) => void
-  onOk?: (date: DateType) => void
-
-  direction?: 'ltr' | 'rtl'
-
-  hideHeader?: boolean
-  onPickerValueChange?: (date: DateType) => void
-
-  components?: Components
-}
-
-export type PickerPanelBaseProps<DateType> = {
-  picker: Exclude<PickerMode, 'date' | 'time'>
-} & PickerPanelSharedProps<DateType>
-
-export type PickerPanelDateProps<DateType> = {
-  picker?: 'date'
-  showToday?: boolean
-  showNow?: boolean
-
-  // Time
-  showTime?: boolean | SharedTimeProps<DateType>
-  disabledTime?: DisabledTime<DateType>
-} & PickerPanelSharedProps<DateType>
-
-export type PickerPanelTimeProps<DateType> = {
-  picker: 'time'
-} & PickerPanelSharedProps<DateType> &
-  SharedTimeProps<DateType>
-
-export type PickerPanelProps<DateType> =
-  | PickerPanelBaseProps<DateType>
-  | PickerPanelDateProps<DateType>
-  | PickerPanelTimeProps<DateType>
-
-// TMP type to fit for ts 3.9.2
-type OmitType<DateType> = Omit<PickerPanelBaseProps<DateType>, 'picker'> &
-  Omit<PickerPanelDateProps<DateType>, 'picker'> &
-  Omit<PickerPanelTimeProps<DateType>, 'picker'>
-type MergedPickerPanelProps<DateType> = {
-  picker?: PickerMode
-} & OmitType<DateType>
-
-function PickerPanel<DateType>() {
-  return defineComponent<MergedPickerPanelProps<DateType>>({
-    name: 'PickerPanel',
-    inheritAttrs: false,
-    props: {
-      prefixCls: String,
-      locale: Object,
-      generateConfig: Object,
-      value: Object,
-      defaultValue: Object,
-      pickerValue: Object,
-      defaultPickerValue: Object,
-      disabledDate: Function,
-      mode: String,
-      picker: { type: String, default: 'date' },
-      tabindex: { type: [Number, String], default: 0 },
-      showNow: { type: Boolean, default: undefined },
-      showTime: [Boolean, Object],
-      showToday: Boolean,
-      renderExtraFooter: Function,
-      dateRender: Function,
-      hideHeader: { type: Boolean, default: undefined },
-      onSelect: Function,
-      onChange: Function,
-      onPanelChange: Function,
-      onMousedown: Function,
-      onPickerValueChange: Function,
-      onOk: Function,
-      components: Object,
-      direction: String,
-      hourStep: { type: Number, default: 1 },
-      minuteStep: { type: Number, default: 1 },
-      secondStep: { type: Number, default: 1 },
-    } as any,
-    setup(props, { attrs }) {
-      const needConfirmButton = computed(
-        () => (props.picker === 'date' && !!props.showTime) || props.picker === 'time',
-      )
-
-      const isHourStepValid = computed(() => 24 % props.hourStep === 0)
-      const isMinuteStepValid = computed(() => 60 % props.minuteStep === 0)
-      const isSecondStepValid = computed(() => 60 % props.secondStep === 0)
-      if (process.env.NODE_ENV !== 'production') {
-        watchEffect(() => {
-          const { generateConfig, value, hourStep = 1, minuteStep = 1, secondStep = 1 } = props
-          warning(!value || generateConfig.isValidate(value), 'Invalidate date pass to `value`.')
-          warning(
-            !value || generateConfig.isValidate(value),
-            'Invalidate date pass to `defaultValue`.',
-          )
-          warning(
-            isHourStepValid.value,
-            `\`hourStep\` ${hourStep} is invalid. It should be a factor of 24.`,
-          )
-          warning(
-            isMinuteStepValid.value,
-            `\`minuteStep\` ${minuteStep} is invalid. It should be a factor of 60.`,
-          )
-          warning(
-            isSecondStepValid.value,
-            `\`secondStep\` ${secondStep} is invalid. It should be a factor of 60.`,
-          )
-        })
-      }
-
-      const panelContext = useInjectPanel()
-      const { operationRef, onSelect: onContextSelect, hideRanges, defaultOpenValue } = panelContext
-      const { inRange, panelPosition, rangedValue, hoverRangedValue } = useInjectRange()
-      const panelRef = ref<PanelRefProps>({})
-      // Value
-      const [mergedValue, setInnerValue] = useMergedState<DateType | null>(null, {
-        value: toRef(props, 'value'),
-        defaultValue: props.defaultValue,
-        postState: (val) => {
-          if (!val && defaultOpenValue?.value && props.picker === 'time') {
-            return defaultOpenValue.value
-          }
-          return val
-        },
-      })
-
-      // View date control
-      const [viewDate, setInnerViewDate] = useMergedState<DateType | null>(null, {
-        value: toRef(props, 'pickerValue'),
-        defaultValue: props.defaultPickerValue || mergedValue.value,
-        postState: (date) => {
-          const { generateConfig, showTime, defaultValue } = props
-          const now = generateConfig.getNow()
-          if (!date) return now
-          // When value is null and set showTime
-          if (!mergedValue.value && props.showTime) {
-            if (typeof showTime === 'object') {
-              return setDateTime(
-                generateConfig,
-                Array.isArray(date) ? date[0] : date,
-                showTime.defaultValue || now,
-              )
-            }
-            if (defaultValue) {
-              return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, defaultValue)
-            }
-            return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, now)
-          }
-          return date
-        },
-      })
-
-      const setViewDate = (date: DateType) => {
-        setInnerViewDate(date)
-        if (props.onPickerValueChange) {
-          props.onPickerValueChange(date)
-        }
-      }
-
-      // Panel control
-      const getInternalNextMode = (nextMode: PanelMode): PanelMode => {
-        const getNextMode = PickerModeMap[props.picker!]
-        if (getNextMode) {
-          return getNextMode(nextMode)
-        }
-
-        return nextMode
-      }
-
-      // Save panel is changed from which panel
-      const [mergedMode, setInnerMode] = useMergedState(
-        () => {
-          if (props.picker === 'time') {
-            return 'time'
-          }
-          return getInternalNextMode('date')
-        },
-        {
-          value: toRef(props, 'mode'),
-        },
-      )
-      watch(
-        () => props.picker,
-        () => {
-          setInnerMode(props.picker)
-        },
-      )
-
-      const sourceMode = ref(mergedMode.value)
-      const setSourceMode = (val: PanelMode) => {
-        sourceMode.value = val
-      }
-
-      const onInternalPanelChange = (newMode: PanelMode | null, viewValue: DateType) => {
-        const { onPanelChange, generateConfig } = props
-        const nextMode = getInternalNextMode(newMode || mergedMode.value)
-        setSourceMode(mergedMode.value)
-        setInnerMode(nextMode)
-
-        if (
-          onPanelChange &&
-          (mergedMode.value !== nextMode || isEqual(generateConfig, viewDate.value, viewDate.value))
-        ) {
-          onPanelChange(viewValue, nextMode)
-        }
-      }
-
-      const triggerSelect = (
-        date: DateType,
-        type: 'key' | 'mouse' | 'submit',
-        forceTriggerSelect = false,
-      ) => {
-        const { picker, generateConfig, onSelect, onChange, disabledDate } = props
-        if (mergedMode.value === picker || forceTriggerSelect) {
-          setInnerValue(date)
-
-          if (onSelect) {
-            onSelect(date)
-          }
-
-          if (onContextSelect) {
-            onContextSelect(date, type)
-          }
-
-          if (
-            onChange &&
-            !isEqual(generateConfig, date, mergedValue.value) &&
-            !disabledDate?.(date)
-          ) {
-            onChange(date)
-          }
-        }
-      }
-
-      // ========================= Interactive ==========================
-      const onInternalKeydown = (e: KeyboardEvent) => {
-        if (panelRef.value && panelRef.value.onKeydown) {
-          if (
-            [
-              KeyCode.LEFT,
-              KeyCode.RIGHT,
-              KeyCode.UP,
-              KeyCode.DOWN,
-              KeyCode.PAGE_UP,
-              KeyCode.PAGE_DOWN,
-              KeyCode.ENTER,
-            ].includes(e.which)
-          ) {
-            e.preventDefault()
-          }
-          return panelRef.value.onKeydown(e)
-        }
-
-        /* istanbul ignore next */
-        /* eslint-disable no-lone-blocks */
-        {
-          warning(
-            false,
-            'Panel not correct handle keyDown event. Please help to fire issue about this.',
-          )
-          return false
-        }
-        /* eslint-enable no-lone-blocks */
-      }
-
-      const onInternalBlur = (e: FocusEvent) => {
-        if (panelRef.value && panelRef.value.onBlur) {
-          panelRef.value.onBlur(e)
-        }
-      }
-      const onNow = () => {
-        const { generateConfig, hourStep, minuteStep, secondStep } = props
-        const now = generateConfig.getNow()
-        const lowerBoundTime = getLowerBoundTime(
-          generateConfig.getHour(now),
-          generateConfig.getMinute(now),
-          generateConfig.getSecond(now),
-          isHourStepValid.value ? hourStep : 1,
-          isMinuteStepValid.value ? minuteStep : 1,
-          isSecondStepValid.value ? secondStep : 1,
-        )
-        const adjustedNow = setTime(
-          generateConfig,
-          now,
-          lowerBoundTime[0], // hour
-          lowerBoundTime[1], // minute
-          lowerBoundTime[2], // second
-        )
-        triggerSelect(adjustedNow, 'submit')
-      }
-
-      const classString = computed(() => {
-        const { prefixCls, direction } = props
-        return classNames(`${prefixCls}-panel`, {
-          [`${prefixCls}-panel-has-range`]:
-            rangedValue && rangedValue.value && rangedValue.value[0] && rangedValue.value[1],
-          [`${prefixCls}-panel-has-range-hover`]:
-            hoverRangedValue &&
-            hoverRangedValue.value &&
-            hoverRangedValue.value[0] &&
-            hoverRangedValue.value[1],
-          [`${prefixCls}-panel-rtl`]: direction === 'rtl',
-        })
-      })
-      useProvidePanel({
-        ...panelContext,
-        mode: mergedMode,
-        hideHeader: computed(() =>
-          props.hideHeader !== undefined ? props.hideHeader : panelContext.hideHeader?.value,
-        ),
-        hidePrevBtn: computed(() => inRange.value && panelPosition.value === 'right'),
-        hideNextBtn: computed(() => inRange.value && panelPosition.value === 'left'),
-      })
-
-      watch(
-        () => props.value,
-        () => {
-          if (props.value) {
-            setInnerViewDate(props.value)
-          }
-        },
-      )
-
-      return () => {
-        const {
-          prefixCls = 'ant-picker',
-          locale,
-          generateConfig,
-          disabledDate,
-          picker = 'date',
-          tabindex = 0,
-          showNow,
-          showTime,
-          showToday,
-          renderExtraFooter,
-          onMousedown,
-          onOk,
-          components,
-        } = props
-        if (operationRef && panelPosition.value !== 'right') {
-          operationRef.value = {
-            onKeydown: onInternalKeydown,
-            onClose: () => {
-              if (panelRef.value && panelRef.value.onClose) {
-                panelRef.value.onClose()
-              }
-            },
-          }
-        }
-
-        // ============================ Panels ============================
-        let panelNode: VueNode
-        const pickerProps = {
-          ...attrs,
-          ...(props as MergedPickerPanelProps<DateType>),
-          operationRef: panelRef,
-          prefixCls,
-          viewDate: viewDate.value,
-          value: mergedValue.value,
-          onViewDateChange: setViewDate,
-          sourceMode: sourceMode.value,
-          onPanelChange: onInternalPanelChange,
-          disabledDate,
-        }
-        delete pickerProps.onChange
-        delete pickerProps.onSelect
-        switch (mergedMode.value) {
-          case 'decade':
-            panelNode = (
-              <DecadePanel<DateType>
-                {...pickerProps}
-                onSelect={(date, type) => {
-                  setViewDate(date)
-                  triggerSelect(date, type)
-                }}
-              />
-            )
-            break
-
-          case 'year':
-            panelNode = (
-              <YearPanel<DateType>
-                {...pickerProps}
-                onSelect={(date, type) => {
-                  setViewDate(date)
-                  triggerSelect(date, type)
-                }}
-              />
-            )
-            break
-
-          case 'month':
-            panelNode = (
-              <MonthPanel<DateType>
-                {...pickerProps}
-                onSelect={(date, type) => {
-                  setViewDate(date)
-                  triggerSelect(date, type)
-                }}
-              />
-            )
-            break
-
-          case 'quarter':
-            panelNode = (
-              <QuarterPanel<DateType>
-                {...pickerProps}
-                onSelect={(date, type) => {
-                  setViewDate(date)
-                  triggerSelect(date, type)
-                }}
-              />
-            )
-            break
-
-          case 'week':
-            panelNode = (
-              <WeekPanel
-                {...pickerProps}
-                onSelect={(date, type) => {
-                  setViewDate(date)
-                  triggerSelect(date, type)
-                }}
-              />
-            )
-            break
-
-          case 'time':
-            delete pickerProps.showTime
-            panelNode = (
-              <TimePanel<DateType>
-                {...pickerProps}
-                {...(typeof showTime === 'object' ? showTime : null)}
-                onSelect={(date, type) => {
-                  setViewDate(date)
-                  triggerSelect(date, type)
-                }}
-              />
-            )
-            break
-
-          default:
-            if (showTime) {
-              panelNode = (
-                <DatetimePanel
-                  {...pickerProps}
-                  onSelect={(date, type) => {
-                    setViewDate(date)
-                    triggerSelect(date, type)
-                  }}
-                />
-              )
-            } else {
-              panelNode = (
-                <DatePanel<DateType>
-                  {...pickerProps}
-                  onSelect={(date, type) => {
-                    setViewDate(date)
-                    triggerSelect(date, type)
-                  }}
-                />
-              )
-            }
-        }
-
-        // ============================ Footer ============================
-        let extraFooter: VueNode
-        let rangesNode: VueNode
-
-        if (!hideRanges?.value) {
-          extraFooter = getExtraFooter(prefixCls, mergedMode.value, renderExtraFooter)
-          rangesNode = getRanges({
-            prefixCls,
-            components,
-            needConfirmButton: needConfirmButton.value,
-            okDisabled: !mergedValue.value || (disabledDate && disabledDate(mergedValue.value)),
-            locale,
-            showNow,
-            onNow: needConfirmButton.value && onNow,
-            onOk: () => {
-              if (mergedValue.value) {
-                triggerSelect(mergedValue.value, 'submit', true)
-                if (onOk) {
-                  onOk(mergedValue.value)
-                }
-              }
-            },
-          })
-        }
-
-        let todayNode: VueNode
-
-        if (showToday && mergedMode.value === 'date' && picker === 'date' && !showTime) {
-          const now = generateConfig.getNow()
-          const todayCls = `${prefixCls}-today-btn`
-          const disabled = disabledDate && disabledDate(now)
-          todayNode = (
-            <a
-              class={classNames(todayCls, disabled && `${todayCls}-disabled`)}
-              aria-disabled={disabled}
-              onClick={() => {
-                if (!disabled) {
-                  triggerSelect(now, 'mouse', true)
-                }
-              }}
-            >
-              {locale.today}
-            </a>
-          )
-        }
-        return (
-          <div
-            tabindex={tabindex}
-            class={classNames(classString.value, attrs.class)}
-            style={attrs.style as CSSProperties}
-            onKeydown={onInternalKeydown}
-            onBlur={onInternalBlur}
-            onMousedown={onMousedown}
-          >
-            {panelNode}
-            {extraFooter || rangesNode || todayNode ? (
-              <div class={`${prefixCls}-footer`}>
-                {extraFooter}
-                {rangesNode}
-                {todayNode}
-              </div>
-            ) : null}
-          </div>
-        )
-      }
-    },
-  })
-}
-const InterPickerPanel = PickerPanel<any>()
-export default <DateType,>(props: MergedPickerPanelProps<DateType>) =>
-  createVNode(InterPickerPanel, props)

package/src/vc-picker/PickerTrigger.tsx

@@ -1,104 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { AlignType } from '../vc-align/interface'
-import Trigger from '../vc-trigger'
-import useMergeProps from './hooks/useMergeProps'
-
-const BUILT_IN_PLACEMENTS = {
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    offset: [0, 4],
-    overflow: {
-      adjustX: 1,
-      adjustY: 1,
-    },
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-    offset: [0, 4],
-    overflow: {
-      adjustX: 1,
-      adjustY: 1,
-    },
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    offset: [0, -4],
-    overflow: {
-      adjustX: 0,
-      adjustY: 1,
-    },
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    offset: [0, -4],
-    overflow: {
-      adjustX: 0,
-      adjustY: 1,
-    },
-  },
-}
-
-type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'
-
-export interface PickerTriggerProps {
-  prefixCls: string
-  visible: boolean
-  popupStyle?: CSSProperties
-  dropdownClassName?: string
-  transitionName?: string
-  getPopupContainer?: (node: HTMLElement) => HTMLElement
-  dropdownAlign?: AlignType
-  range?: boolean
-  popupPlacement?: Placement
-  direction?: 'ltr' | 'rtl'
-}
-
-function PickerTrigger(props: PickerTriggerProps, { slots }) {
-  const {
-    prefixCls,
-    popupStyle,
-    visible,
-    dropdownClassName,
-    dropdownAlign,
-    transitionName,
-    getPopupContainer,
-    range,
-    popupPlacement,
-    direction,
-  } = useMergeProps(props)
-  const dropdownPrefixCls = `${prefixCls}-dropdown`
-
-  const getPopupPlacement = () => {
-    if (popupPlacement !== undefined) {
-      return popupPlacement
-    }
-    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'
-  }
-
-  return (
-    <Trigger
-      showAction={[]}
-      hideAction={[]}
-      popupPlacement={getPopupPlacement()}
-      builtinPlacements={BUILT_IN_PLACEMENTS}
-      prefixCls={dropdownPrefixCls}
-      popupTransitionName={transitionName}
-      popupAlign={dropdownAlign}
-      popupVisible={visible}
-      popupClassName={classNames(dropdownClassName, {
-        [`${dropdownPrefixCls}-range`]: range,
-        [`${dropdownPrefixCls}-rtl`]: direction === 'rtl',
-      })}
-      popupStyle={popupStyle}
-      getPopupContainer={getPopupContainer}
-      v-slots={{
-        default: slots.default,
-        popup: slots.popupElement,
-      }}
-    ></Trigger>
-  )
-}
-
-export default PickerTrigger