@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-picker/panels/PanelBody.tsx

@@ -1,146 +0,0 @@
-import classNames from '../../_util/classNames'
-import type { VueNode } from '../../_util/type'
-import { useInjectPanel } from '../PanelContext'
-import type { GenerateConfig } from '../generate'
-import useMergeProps from '../hooks/useMergeProps'
-import type { PanelMode } from '../interface'
-import { getCellDateDisabled } from '../utils/dateUtil'
-import { getLastDay } from '../utils/timeUtil'
-
-export interface PanelBodyProps<DateType> {
-  prefixCls: string
-  disabledDate?: (date: DateType) => boolean
-  onSelect: (value: DateType) => void
-  picker?: PanelMode
-
-  // By panel
-  headerCells?: VueNode[]
-  rowNum: number
-  colNum: number
-  baseDate: DateType
-  getCellClassName: (date: DateType) => Record<string, boolean | undefined>
-  getCellDate: (date: DateType, offset: number) => DateType
-  getCellText: (date: DateType) => VueNode
-  getCellNode?: (date: DateType) => VueNode
-  titleCell?: (date: DateType) => string
-  generateConfig: GenerateConfig<DateType>
-
-  // Used for week panel
-  prefixColumn?: (date: DateType) => VueNode
-  rowClassName?: (date: DateType) => string
-}
-
-function PanelBody<DateType>(_props: PanelBodyProps<DateType>) {
-  const {
-    prefixCls,
-    disabledDate,
-    onSelect,
-    picker,
-    rowNum,
-    colNum,
-    prefixColumn,
-    rowClassName,
-    baseDate,
-    getCellClassName,
-    getCellText,
-    getCellNode,
-    getCellDate,
-    generateConfig,
-    titleCell,
-    headerCells,
-  } = useMergeProps(_props)
-  const { onDateMouseenter, onDateMouseleave, mode } = useInjectPanel()
-
-  const cellPrefixCls = `${prefixCls}-cell`
-
-  // =============================== Body ===============================
-  const rows: VueNode[] = []
-
-  for (let i = 0; i < rowNum; i += 1) {
-    const row: VueNode[] = []
-    let rowStartDate: DateType
-
-    for (let j = 0; j < colNum; j += 1) {
-      const offset = i * colNum + j
-      const currentDate = getCellDate(baseDate, offset)
-      const disabled = getCellDateDisabled({
-        cellDate: currentDate,
-        mode: mode.value,
-        disabledDate,
-        generateConfig,
-      })
-
-      if (j === 0) {
-        rowStartDate = currentDate
-
-        if (prefixColumn) {
-          row.push(prefixColumn(rowStartDate))
-        }
-      }
-
-      const title = titleCell && titleCell(currentDate)
-
-      row.push(
-        <td
-          key={j}
-          title={title}
-          class={classNames(cellPrefixCls, {
-            [`${cellPrefixCls}-disabled`]: disabled,
-            [`${cellPrefixCls}-start`]:
-              getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0),
-            [`${cellPrefixCls}-end`]:
-              title === getLastDay(generateConfig, currentDate) ||
-              (picker === 'year' && Number(title) % 10 === 9),
-            ...getCellClassName(currentDate),
-          })}
-          onClick={(e) => {
-            e.stopPropagation()
-            if (!disabled) {
-              onSelect(currentDate)
-            }
-          }}
-          onMouseenter={() => {
-            if (!disabled && onDateMouseenter) {
-              onDateMouseenter(currentDate)
-            }
-          }}
-          onMouseleave={() => {
-            if (!disabled && onDateMouseleave) {
-              onDateMouseleave(currentDate)
-            }
-          }}
-        >
-          {getCellNode ? (
-            getCellNode(currentDate)
-          ) : (
-            <div class={`${cellPrefixCls}-inner`}>{getCellText(currentDate)}</div>
-          )}
-        </td>,
-      )
-    }
-
-    rows.push(
-      <tr key={i} class={rowClassName && rowClassName(rowStartDate!)}>
-        {row}
-      </tr>,
-    )
-  }
-
-  return (
-    <div class={`${prefixCls}-body`}>
-      <table class={`${prefixCls}-content`}>
-        {headerCells && (
-          <thead>
-            <tr>{headerCells}</tr>
-          </thead>
-        )}
-        <tbody>{rows}</tbody>
-      </table>
-    </div>
-  )
-}
-
-PanelBody.displayName = 'PanelBody'
-PanelBody.inheritAttrs = false
-
-export default PanelBody

package/src/vc-picker/panels/QuarterPanel/QuarterBody.tsx

@@ -1,71 +0,0 @@
-import { useInjectRange } from '../../RangeContext'
-import type { GenerateConfig } from '../../generate'
-import useCellClassName from '../../hooks/useCellClassName'
-import useMergeProps from '../../hooks/useMergeProps'
-import type { Locale } from '../../interface'
-import { formatValue, isSameQuarter } from '../../utils/dateUtil'
-import PanelBody from '../PanelBody'
-
-export const QUARTER_COL_COUNT = 4
-const QUARTER_ROW_COUNT = 1
-
-export interface QuarterBodyProps<DateType> {
-  prefixCls: string
-  locale: Locale
-  generateConfig: GenerateConfig<DateType>
-  value?: DateType | null
-  viewDate: DateType
-  disabledDate?: (date: DateType) => boolean
-  onSelect: (value: DateType) => void
-}
-
-function QuarterBody<DateType>(_props: QuarterBodyProps<DateType>) {
-  const props = useMergeProps(_props)
-  const { prefixCls, locale, value, viewDate, generateConfig } = props
-
-  const { rangedValue, hoverRangedValue } = useInjectRange()
-
-  const cellPrefixCls = `${prefixCls}-cell`
-
-  const getCellClassName = useCellClassName({
-    cellPrefixCls,
-    value,
-    generateConfig,
-    rangedValue: rangedValue.value,
-    hoverRangedValue: hoverRangedValue.value,
-    isSameCell: (current, target) => isSameQuarter(generateConfig, current, target),
-    isInView: () => true,
-    offsetCell: (date, offset) => generateConfig.addMonth(date, offset * 3),
-  })
-
-  const baseQuarter = generateConfig.setDate(generateConfig.setMonth(viewDate, 0), 1)
-
-  return (
-    <PanelBody
-      {...props}
-      rowNum={QUARTER_ROW_COUNT}
-      colNum={QUARTER_COL_COUNT}
-      baseDate={baseQuarter}
-      getCellText={(date) =>
-        formatValue(date, {
-          locale,
-          format: locale.quarterFormat || '[Q]Q',
-          generateConfig,
-        })
-      }
-      getCellClassName={getCellClassName}
-      getCellDate={(date, offset) => generateConfig.addMonth(date, offset * 3)}
-      titleCell={(date) =>
-        formatValue(date, {
-          locale,
-          format: 'YYYY-[Q]Q',
-          generateConfig,
-        })
-      }
-    />
-  )
-}
-
-QuarterBody.displayName = 'QuarterBody'
-QuarterBody.inheritAttrs = false
-export default QuarterBody

package/src/vc-picker/panels/QuarterPanel/QuarterHeader.tsx

@@ -1,49 +0,0 @@
-import { useInjectPanel } from '../../PanelContext'
-import type { GenerateConfig } from '../../generate'
-import useMergeProps from '../../hooks/useMergeProps'
-import type { Locale } from '../../interface'
-import { formatValue } from '../../utils/dateUtil'
-import Header from '../Header'
-
-export interface QuarterHeaderProps<DateType> {
-  prefixCls: string
-  viewDate: DateType
-  locale: Locale
-  generateConfig: GenerateConfig<DateType>
-
-  onPrevYear: () => void
-  onNextYear: () => void
-  onYearClick: () => void
-}
-
-function QuarterHeader<DateType>(_props: QuarterHeaderProps<DateType>) {
-  const props = useMergeProps(_props)
-  const { prefixCls, generateConfig, locale, viewDate, onNextYear, onPrevYear, onYearClick } = props
-  const { hideHeader } = useInjectPanel()
-  if (hideHeader.value) {
-    return null
-  }
-
-  const headerPrefixCls = `${prefixCls}-header`
-  return (
-    <Header
-      {...props}
-      prefixCls={headerPrefixCls}
-      onSuperPrev={onPrevYear}
-      onSuperNext={onNextYear}
-    >
-      <button type="button" onClick={onYearClick} class={`${prefixCls}-year-btn`}>
-        {formatValue(viewDate, {
-          locale,
-          format: locale.yearFormat,
-          generateConfig,
-        })}
-      </button>
-    </Header>
-  )
-}
-
-QuarterHeader.displayName = 'QuarterHeader'
-QuarterHeader.inheritAttrs = false
-
-export default QuarterHeader

package/src/vc-picker/panels/QuarterPanel/index.tsx

@@ -1,76 +0,0 @@
-import useMergeProps from '../../hooks/useMergeProps'
-import type { PanelSharedProps } from '../../interface'
-import { createKeydownHandler } from '../../utils/uiUtil'
-import QuarterBody from './QuarterBody'
-import QuarterHeader from './QuarterHeader'
-
-export type QuarterPanelProps<DateType> = {} & PanelSharedProps<DateType>
-
-function QuarterPanel<DateType>(_props: QuarterPanelProps<DateType>) {
-  const props = useMergeProps(_props)
-  const {
-    prefixCls,
-    operationRef,
-    onViewDateChange,
-    generateConfig,
-    value,
-    viewDate,
-    onPanelChange,
-    onSelect,
-  } = props
-
-  const panelPrefixCls = `${prefixCls}-quarter-panel`
-
-  // ======================= Keyboard =======================
-  operationRef.value = {
-    onKeydown: (event: KeyboardEvent) =>
-      createKeydownHandler(event, {
-        onLeftRight: (diff) => {
-          onSelect(generateConfig.addMonth(value || viewDate, diff * 3), 'key')
-        },
-        onCtrlLeftRight: (diff) => {
-          onSelect(generateConfig.addYear(value || viewDate, diff), 'key')
-        },
-        onUpDown: (diff) => {
-          onSelect(generateConfig.addYear(value || viewDate, diff), 'key')
-        },
-      }),
-  }
-
-  // ==================== View Operation ====================
-  const onYearChange = (diff: number) => {
-    const newDate = generateConfig.addYear(viewDate, diff)
-    onViewDateChange(newDate)
-    onPanelChange(null, newDate)
-  }
-
-  return (
-    <div class={panelPrefixCls}>
-      <QuarterHeader
-        {...props}
-        prefixCls={prefixCls}
-        onPrevYear={() => {
-          onYearChange(-1)
-        }}
-        onNextYear={() => {
-          onYearChange(1)
-        }}
-        onYearClick={() => {
-          onPanelChange('year', viewDate)
-        }}
-      />
-      <QuarterBody<DateType>
-        {...props}
-        prefixCls={prefixCls}
-        onSelect={(date) => {
-          onSelect(date, 'mouse')
-        }}
-      />
-    </div>
-  )
-}
-
-QuarterPanel.displayName = 'QuarterPanel'
-QuarterPanel.inheritAttrs = false
-
-export default QuarterPanel

package/src/vc-picker/panels/TimePanel/TimeBody.tsx

@@ -1,315 +0,0 @@
-import type { Ref, VNode } from 'vue'
-import { computed, defineComponent, onBeforeUpdate, ref, watchEffect } from 'vue'
-
-import type { SharedTimeProps } from '.'
-import type { VueNode } from '../../../_util/type'
-import { cloneElement } from '../../../_util/vnode'
-import type { GenerateConfig } from '../../generate'
-import type { Locale, OnSelect } from '../../interface'
-import { leftPad } from '../../utils/miscUtil'
-import { setTime as utilSetTime } from '../../utils/timeUtil'
-import type { Unit } from './TimeUnitColumn'
-import TimeUnitColumn from './TimeUnitColumn'
-
-function generateUnits(
-  start: number,
-  end: number,
-  step: number,
-  disabledUnits: number[] | undefined,
-) {
-  const units: Unit[] = []
-  for (let i = start; i <= end; i += step) {
-    units.push({
-      label: leftPad(i, 2),
-      value: i,
-      disabled: (disabledUnits || []).includes(i),
-    })
-  }
-  return units
-}
-
-export interface BodyOperationRef {
-  onUpDown: (diff: number) => void
-}
-
-export type TimeBodyProps<DateType> = {
-  prefixCls: string
-  locale: Locale
-  generateConfig: GenerateConfig<DateType>
-  value?: DateType | null
-  onSelect: OnSelect<DateType>
-  activeColumnIndex: number
-  operationRef: Ref<BodyOperationRef | undefined>
-} & SharedTimeProps<DateType>
-
-const TimeBody = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'TimeBody',
-  inheritAttrs: false,
-  props: [
-    'generateConfig',
-    'prefixCls',
-    'operationRef',
-    'activeColumnIndex',
-    'value',
-    'showHour',
-    'showMinute',
-    'showSecond',
-    'use12Hours',
-    'hourStep',
-    'minuteStep',
-    'secondStep',
-    'disabledHours',
-    'disabledMinutes',
-    'disabledSeconds',
-    'disabledTime',
-    'hideDisabledOptions',
-    'onSelect',
-  ],
-  setup(props) {
-    const originHour = computed(() =>
-      props.value ? props.generateConfig.getHour(props.value) : -1,
-    )
-    const isPM = computed(() => {
-      if (props.use12Hours) {
-        return originHour.value >= 12 // -1 means should display AM
-      } else {
-        return false
-      }
-    })
-    const hour = computed(() => {
-      // Should additional logic to handle 12 hours
-      if (props.use12Hours) {
-        return originHour.value % 12
-      } else {
-        return originHour.value
-      }
-    })
-    const minute = computed(() => (props.value ? props.generateConfig.getMinute(props.value) : -1))
-    const second = computed(() => (props.value ? props.generateConfig.getSecond(props.value) : -1))
-
-    const now = ref(props.generateConfig.getNow())
-    const mergedDisabledHours = ref()
-    const mergedDisabledMinutes = ref()
-    const mergedDisabledSeconds = ref()
-    onBeforeUpdate(() => {
-      now.value = props.generateConfig.getNow()
-    })
-    watchEffect(() => {
-      if (props.disabledTime) {
-        const disabledConfig = props.disabledTime(now)
-        ;[mergedDisabledHours.value, mergedDisabledMinutes.value, mergedDisabledSeconds.value] = [
-          disabledConfig.disabledHours,
-          disabledConfig.disabledMinutes,
-          disabledConfig.disabledSeconds,
-        ]
-      } else {
-        ;[mergedDisabledHours.value, mergedDisabledMinutes.value, mergedDisabledSeconds.value] = [
-          props.disabledHours,
-          props.disabledMinutes,
-          props.disabledSeconds,
-        ]
-      }
-    })
-    const setTime = (
-      isNewPM: boolean | undefined,
-      newHour: number,
-      newMinute: number,
-      newSecond: number,
-    ) => {
-      let newDate = props.value || props.generateConfig.getNow()
-
-      const mergedHour = Math.max(0, newHour)
-      const mergedMinute = Math.max(0, newMinute)
-      const mergedSecond = Math.max(0, newSecond)
-
-      newDate = utilSetTime(
-        props.generateConfig,
-        newDate,
-        !props.use12Hours || !isNewPM ? mergedHour : mergedHour + 12,
-        mergedMinute,
-        mergedSecond,
-      )
-
-      return newDate
-    }
-
-    // ========================= Unit =========================
-    const rawHours = computed(() =>
-      generateUnits(
-        0,
-        23,
-        props.hourStep ?? 1,
-        mergedDisabledHours.value && mergedDisabledHours.value(),
-      ),
-    )
-
-    // const memorizedRawHours = useMemo(() => rawHours, rawHours, shouldUnitsUpdate);
-
-    const AMPMDisabled = computed(() => {
-      if (!props.use12Hours) {
-        return [false, false]
-      }
-      const AMPMDisabled = [true, true]
-      rawHours.value.forEach(({ disabled, value: hourValue }) => {
-        if (disabled) return
-        if (hourValue >= 12) {
-          AMPMDisabled[1] = false
-        } else {
-          AMPMDisabled[0] = false
-        }
-      })
-      return AMPMDisabled
-    })
-
-    const hours = computed(() => {
-      if (!props.use12Hours) return rawHours.value
-      return rawHours.value
-        .filter(isPM.value ? (hourMeta) => hourMeta.value >= 12 : (hourMeta) => hourMeta.value < 12)
-        .map((hourMeta) => {
-          const hourValue = hourMeta.value % 12
-          const hourLabel = hourValue === 0 ? '12' : leftPad(hourValue, 2)
-          return {
-            ...hourMeta,
-            label: hourLabel,
-            value: hourValue,
-          }
-        })
-    })
-
-    const minutes = computed(() =>
-      generateUnits(
-        0,
-        59,
-        props.minuteStep ?? 1,
-        mergedDisabledMinutes.value && mergedDisabledMinutes.value(originHour.value),
-      ),
-    )
-
-    const seconds = computed(() =>
-      generateUnits(
-        0,
-        59,
-        props.secondStep ?? 1,
-        mergedDisabledSeconds.value && mergedDisabledSeconds.value(originHour.value, minute.value),
-      ),
-    )
-
-    return () => {
-      const {
-        prefixCls,
-        operationRef,
-        activeColumnIndex,
-        showHour,
-        showMinute,
-        showSecond,
-        use12Hours,
-        hideDisabledOptions,
-        onSelect,
-      } = props
-      const columns: {
-        node: VueNode
-        value: number
-        units: Unit[]
-        onSelect: (diff: number) => void
-      }[] = []
-      const contentPrefixCls = `${prefixCls}-content`
-      const columnPrefixCls = `${prefixCls}-time-panel`
-
-      // ====================== Operations ======================
-      operationRef.value = {
-        onUpDown: (diff: number) => {
-          const column = columns[activeColumnIndex]
-          if (column) {
-            const valueIndex = column.units.findIndex((unit) => unit.value === column.value)
-
-            const unitLen = column.units.length
-            for (let i = 1; i < unitLen; i += 1) {
-              const nextUnit = column.units[(valueIndex + diff * i + unitLen) % unitLen]
-
-              if (nextUnit.disabled !== true) {
-                column.onSelect(nextUnit.value)
-                break
-              }
-            }
-          }
-        },
-      }
-
-      // ======================== Render ========================
-      function addColumnNode(
-        condition: boolean | undefined,
-        node: VueNode,
-        columnValue: number,
-        units: Unit[],
-        onColumnSelect: (diff: number) => void,
-      ) {
-        if (condition !== false) {
-          columns.push({
-            node: cloneElement(node as unknown as VNode, {
-              prefixCls: columnPrefixCls,
-              value: columnValue,
-              active: activeColumnIndex === columns.length,
-              onSelect: onColumnSelect,
-              units,
-              hideDisabledOptions,
-            }),
-            onSelect: onColumnSelect,
-            value: columnValue,
-            units,
-          })
-        }
-      }
-
-      // Hour
-      addColumnNode(showHour, <TimeUnitColumn key="hour" />, hour.value, hours.value, (num) => {
-        onSelect(setTime(isPM.value, num, minute.value, second.value), 'mouse')
-      })
-
-      // Minute
-      addColumnNode(
-        showMinute,
-        <TimeUnitColumn key="minute" />,
-        minute.value,
-        minutes.value,
-        (num) => {
-          onSelect(setTime(isPM.value, hour.value, num, second.value), 'mouse')
-        },
-      )
-
-      // Second
-      addColumnNode(
-        showSecond,
-        <TimeUnitColumn key="second" />,
-        second.value,
-        seconds.value,
-        (num) => {
-          onSelect(setTime(isPM.value, hour.value, minute.value, num), 'mouse')
-        },
-      )
-
-      // 12 Hours
-      let PMIndex = -1
-      if (typeof isPM.value === 'boolean') {
-        PMIndex = isPM.value ? 1 : 0
-      }
-
-      addColumnNode(
-        use12Hours === true,
-        <TimeUnitColumn key="12hours" />,
-        PMIndex,
-        [
-          { label: 'AM', value: 0, disabled: AMPMDisabled.value[0] },
-          { label: 'PM', value: 1, disabled: AMPMDisabled.value[1] },
-        ],
-        (num) => {
-          onSelect(setTime(!!num, hour.value, minute.value, second.value), 'mouse')
-        },
-      )
-
-      return <div class={contentPrefixCls}>{columns.map(({ node }) => node)}</div>
-    }
-  },
-})
-
-export default TimeBody

package/src/vc-picker/panels/TimePanel/TimeHeader.tsx

@@ -1,42 +0,0 @@
-import { useInjectPanel } from '../../PanelContext'
-import type { GenerateConfig } from '../../generate'
-import useMergeProps from '../../hooks/useMergeProps'
-import type { Locale } from '../../interface'
-import { formatValue } from '../../utils/dateUtil'
-import Header from '../Header'
-
-export interface TimeHeaderProps<DateType> {
-  prefixCls: string
-  value?: DateType | null
-  locale: Locale
-  generateConfig: GenerateConfig<DateType>
-  format: string
-}
-
-function TimeHeader<DateType>(_props: TimeHeaderProps<DateType>) {
-  const props = useMergeProps(_props)
-  const { hideHeader } = useInjectPanel()
-  if (hideHeader.value) {
-    return null
-  }
-
-  const { prefixCls, generateConfig, locale, value, format } = props
-  const headerPrefixCls = `${prefixCls}-header`
-
-  return (
-    <Header prefixCls={headerPrefixCls}>
-      {value
-        ? formatValue(value, {
-            locale,
-            format,
-            generateConfig,
-          })
-        : '\u00A0'}
-    </Header>
-  )
-}
-
-TimeHeader.displayName = 'TimeHeader'
-TimeHeader.inheritAttrs = false
-
-export default TimeHeader