@antsoo-lib/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,146 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,315 @@
+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

@@ -0,0 +1,42 @@
+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