@antsoo-lib/components 0.1.11 → 0.1.13

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

@@ -1,167 +0,0 @@
-import { ref } from 'vue'
-
-import KeyCode from '../../../_util/KeyCode'
-import classNames from '../../../_util/classNames'
-import useMergeProps from '../../hooks/useMergeProps'
-import type { DisabledTime, PanelRefProps } from '../../interface'
-import { tuple } from '../../utils/miscUtil'
-import { setDateTime as setTime } from '../../utils/timeUtil'
-import type { DatePanelProps } from '../DatePanel'
-import DatePanel from '../DatePanel'
-import type { SharedTimeProps } from '../TimePanel'
-import TimePanel from '../TimePanel'
-
-export type DatetimePanelProps<DateType> = {
-  disabledTime?: DisabledTime<DateType>
-  showTime?: boolean | SharedTimeProps<DateType>
-  defaultValue?: DateType
-} & Omit<DatePanelProps<DateType>, 'disabledHours' | 'disabledMinutes' | 'disabledSeconds'>
-
-const ACTIVE_PANEL = tuple('date', 'time')
-type ActivePanelType = (typeof ACTIVE_PANEL)[number]
-
-function DatetimePanel<DateType>(_props: DatetimePanelProps<DateType>) {
-  const props = useMergeProps(_props)
-  const {
-    prefixCls,
-    operationRef,
-    generateConfig,
-    value,
-    defaultValue,
-    disabledTime,
-    showTime,
-    onSelect,
-  } = props
-  const panelPrefixCls = `${prefixCls}-datetime-panel`
-  const activePanel = ref<ActivePanelType | null>(null)
-
-  const dateOperationRef = ref<PanelRefProps>({})
-  const timeOperationRef = ref<PanelRefProps>({})
-
-  const timeProps = typeof showTime === 'object' ? { ...showTime } : {}
-
-  // ======================= Keyboard =======================
-  function getNextActive(offset: number) {
-    const activeIndex = ACTIVE_PANEL.indexOf(activePanel.value!) + offset
-    const nextActivePanel = ACTIVE_PANEL[activeIndex] || null
-    return nextActivePanel
-  }
-
-  const onBlur = (e?: FocusEvent) => {
-    if (timeOperationRef.value.onBlur) {
-      timeOperationRef.value.onBlur(e!)
-    }
-    activePanel.value = null
-  }
-
-  operationRef.value = {
-    onKeydown: (event: KeyboardEvent) => {
-      // Switch active panel
-      if (event.which === KeyCode.TAB) {
-        const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1)
-        activePanel.value = nextActivePanel
-
-        if (nextActivePanel) {
-          event.preventDefault()
-        }
-
-        return true
-      }
-
-      // Operate on current active panel
-      if (activePanel.value) {
-        const ref = activePanel.value === 'date' ? dateOperationRef : timeOperationRef
-
-        if (ref.value && ref.value.onKeydown) {
-          ref.value.onKeydown(event)
-        }
-
-        return true
-      }
-
-      // Switch first active panel if operate without panel
-      if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(event.which)) {
-        activePanel.value = 'date'
-        return true
-      }
-
-      return false
-    },
-    onBlur,
-    onClose: onBlur,
-  }
-
-  // ======================== Events ========================
-  const onInternalSelect = (date: DateType, source: 'date' | 'time') => {
-    let selectedDate = date
-
-    if (source === 'date' && !value && timeProps.defaultValue) {
-      // Date with time defaultValue
-      selectedDate = generateConfig.setHour(
-        selectedDate,
-        generateConfig.getHour(timeProps.defaultValue),
-      )
-      selectedDate = generateConfig.setMinute(
-        selectedDate,
-        generateConfig.getMinute(timeProps.defaultValue),
-      )
-      selectedDate = generateConfig.setSecond(
-        selectedDate,
-        generateConfig.getSecond(timeProps.defaultValue),
-      )
-    } else if (source === 'time' && !value && defaultValue) {
-      selectedDate = generateConfig.setYear(selectedDate, generateConfig.getYear(defaultValue))
-      selectedDate = generateConfig.setMonth(selectedDate, generateConfig.getMonth(defaultValue))
-      selectedDate = generateConfig.setDate(selectedDate, generateConfig.getDate(defaultValue))
-    }
-
-    if (onSelect) {
-      onSelect(selectedDate, 'mouse')
-    }
-  }
-
-  // ======================== Render ========================
-  const disabledTimes = disabledTime ? disabledTime(value || null) : {}
-
-  return (
-    <div
-      class={classNames(panelPrefixCls, {
-        [`${panelPrefixCls}-active`]: activePanel.value,
-      })}
-    >
-      <DatePanel
-        {...props}
-        operationRef={dateOperationRef}
-        active={activePanel.value === 'date'}
-        onSelect={(date) => {
-          onInternalSelect(
-            setTime(
-              generateConfig,
-              date,
-              !value && typeof showTime === 'object' ? showTime.defaultValue : null,
-            ),
-            'date',
-          )
-        }}
-      />
-      <TimePanel
-        {...props}
-        format={undefined}
-        {...timeProps}
-        {...disabledTimes}
-        disabledTime={null}
-        defaultValue={undefined}
-        operationRef={timeOperationRef}
-        active={activePanel.value === 'time'}
-        onSelect={(date) => {
-          onInternalSelect(date, 'time')
-        }}
-      />
-    </div>
-  )
-}
-
-DatetimePanel.displayName = 'DatetimePanel'
-DatetimePanel.inheritAttrs = false
-
-export default DatetimePanel

package/src/vc-picker/panels/DecadePanel/DecadeBody.tsx

@@ -1,68 +0,0 @@
-import { DECADE_DISTANCE_COUNT, DECADE_UNIT_DIFF } from '.'
-import type { GenerateConfig } from '../../generate'
-import useMergeProps from '../../hooks/useMergeProps'
-import PanelBody from '../PanelBody'
-
-export const DECADE_COL_COUNT = 3
-const DECADE_ROW_COUNT = 4
-
-export interface YearBodyProps<DateType> {
-  prefixCls: string
-  generateConfig: GenerateConfig<DateType>
-  viewDate: DateType
-  disabledDate?: (date: DateType) => boolean
-  onSelect: (value: DateType) => void
-}
-
-function DecadeBody<DateType>(_props: YearBodyProps<DateType>) {
-  const props = useMergeProps(_props)
-  const DECADE_UNIT_DIFF_DES = DECADE_UNIT_DIFF - 1
-  const { prefixCls, viewDate, generateConfig } = props
-
-  const cellPrefixCls = `${prefixCls}-cell`
-
-  const yearNumber = generateConfig.getYear(viewDate)
-  const decadeYearNumber = Math.floor(yearNumber / DECADE_UNIT_DIFF) * DECADE_UNIT_DIFF
-
-  const startDecadeYear = Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT
-  const endDecadeYear = startDecadeYear + DECADE_DISTANCE_COUNT - 1
-
-  const baseDecadeYear = generateConfig.setYear(
-    viewDate,
-    startDecadeYear -
-      Math.ceil(
-        (DECADE_COL_COUNT * DECADE_ROW_COUNT * DECADE_UNIT_DIFF - DECADE_DISTANCE_COUNT) / 2,
-      ),
-  )
-
-  const getCellClassName = (date: DateType) => {
-    const startDecadeNumber = generateConfig.getYear(date)
-    const endDecadeNumber = startDecadeNumber + DECADE_UNIT_DIFF_DES
-
-    return {
-      [`${cellPrefixCls}-in-view`]:
-        startDecadeYear <= startDecadeNumber && endDecadeNumber <= endDecadeYear,
-      [`${cellPrefixCls}-selected`]: startDecadeNumber === decadeYearNumber,
-    }
-  }
-
-  return (
-    <PanelBody
-      {...props}
-      rowNum={DECADE_ROW_COUNT}
-      colNum={DECADE_COL_COUNT}
-      baseDate={baseDecadeYear}
-      getCellText={(date) => {
-        const startDecadeNumber = generateConfig.getYear(date)
-        return `${startDecadeNumber}-${startDecadeNumber + DECADE_UNIT_DIFF_DES}`
-      }}
-      getCellClassName={getCellClassName}
-      getCellDate={(date, offset) => generateConfig.addYear(date, offset * DECADE_UNIT_DIFF)}
-    />
-  )
-}
-
-DecadeBody.displayName = 'DecadeBody'
-DecadeBody.inheritAttrs = false
-
-export default DecadeBody

package/src/vc-picker/panels/DecadePanel/DecadeHeader.tsx

@@ -1,45 +0,0 @@
-import { DECADE_DISTANCE_COUNT } from '.'
-import { useInjectPanel } from '../../PanelContext'
-import type { GenerateConfig } from '../../generate'
-import useMergeProps from '../../hooks/useMergeProps'
-import Header from '../Header'
-
-export interface YearHeaderProps<DateType> {
-  prefixCls: string
-  viewDate: DateType
-  generateConfig: GenerateConfig<DateType>
-
-  onPrevDecades: () => void
-  onNextDecades: () => void
-}
-
-function DecadeHeader<DateType>(_props: YearHeaderProps<DateType>) {
-  const props = useMergeProps(_props)
-  const { prefixCls, generateConfig, viewDate, onPrevDecades, onNextDecades } = props
-  const { hideHeader } = useInjectPanel()
-  if (hideHeader) {
-    return null
-  }
-
-  const headerPrefixCls = `${prefixCls}-header`
-
-  const yearNumber = generateConfig.getYear(viewDate)
-  const startYear = Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT
-  const endYear = startYear + DECADE_DISTANCE_COUNT - 1
-
-  return (
-    <Header
-      {...props}
-      prefixCls={headerPrefixCls}
-      onSuperPrev={onPrevDecades}
-      onSuperNext={onNextDecades}
-    >
-      {startYear}-{endYear}
-    </Header>
-  )
-}
-
-DecadeHeader.displayName = 'DecadeHeader'
-DecadeHeader.inheritAttrs = false
-
-export default DecadeHeader

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

@@ -1,80 +0,0 @@
-import useMergeProps from '../../hooks/useMergeProps'
-import type { PanelSharedProps } from '../../interface'
-import { createKeydownHandler } from '../../utils/uiUtil'
-import DecadeBody, { DECADE_COL_COUNT } from './DecadeBody'
-import DecadeHeader from './DecadeHeader'
-
-export type DecadePanelProps<DateType> = PanelSharedProps<DateType>
-
-export const DECADE_UNIT_DIFF = 10
-export const DECADE_DISTANCE_COUNT = DECADE_UNIT_DIFF * 10
-
-function DecadePanel<DateType>(_props: DecadePanelProps<DateType>) {
-  const props = useMergeProps(_props)
-  const {
-    prefixCls,
-    onViewDateChange,
-    generateConfig,
-    viewDate,
-    operationRef,
-    onSelect,
-    onPanelChange,
-  } = props
-
-  const panelPrefixCls = `${prefixCls}-decade-panel`
-
-  // ======================= Keyboard =======================
-  operationRef.value = {
-    onKeydown: (event: KeyboardEvent) =>
-      createKeydownHandler(event, {
-        onLeftRight: (diff) => {
-          onSelect(generateConfig.addYear(viewDate, diff * DECADE_UNIT_DIFF), 'key')
-        },
-        onCtrlLeftRight: (diff) => {
-          onSelect(generateConfig.addYear(viewDate, diff * DECADE_DISTANCE_COUNT), 'key')
-        },
-        onUpDown: (diff) => {
-          onSelect(
-            generateConfig.addYear(viewDate, diff * DECADE_UNIT_DIFF * DECADE_COL_COUNT),
-            'key',
-          )
-        },
-        onEnter: () => {
-          onPanelChange('year', viewDate)
-        },
-      }),
-  }
-
-  // ==================== View Operation ====================
-  const onDecadesChange = (diff: number) => {
-    const newDate = generateConfig.addYear(viewDate, diff * DECADE_DISTANCE_COUNT)
-    onViewDateChange(newDate)
-    onPanelChange(null, newDate)
-  }
-
-  const onInternalSelect = (date: DateType) => {
-    onSelect(date, 'mouse')
-    onPanelChange('year', date)
-  }
-
-  return (
-    <div class={panelPrefixCls}>
-      <DecadeHeader
-        {...props}
-        prefixCls={prefixCls}
-        onPrevDecades={() => {
-          onDecadesChange(-1)
-        }}
-        onNextDecades={() => {
-          onDecadesChange(1)
-        }}
-      />
-      <DecadeBody {...props} prefixCls={prefixCls} onSelect={onInternalSelect} />
-    </div>
-  )
-}
-
-DecadePanel.displayName = 'DecadePanel'
-DecadePanel.inheritAttrs = false
-
-export default DecadePanel

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

@@ -1,101 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-import type { VueNode } from '../../_util/type'
-import { useInjectPanel } from '../PanelContext'
-import useMergeProps from '../hooks/useMergeProps'
-
-const HIDDEN_STYLE: CSSProperties = {
-  visibility: 'hidden',
-}
-
-export interface HeaderProps {
-  prefixCls: string
-
-  // Icons
-  prevIcon?: VueNode
-  nextIcon?: VueNode
-  superPrevIcon?: VueNode
-  superNextIcon?: VueNode
-
-  /** Last one step */
-  onPrev?: () => void
-  /** Next one step */
-  onNext?: () => void
-  /** Last multiple steps */
-  onSuperPrev?: () => void
-  /** Next multiple steps */
-  onSuperNext?: () => void
-
-  children?: VueNode
-}
-
-function Header(_props: HeaderProps, { slots }) {
-  const props = useMergeProps(_props)
-  const {
-    prefixCls,
-    prevIcon = '\u2039',
-    nextIcon = '\u203A',
-    superPrevIcon = '\u00AB',
-    superNextIcon = '\u00BB',
-    onSuperPrev,
-    onSuperNext,
-    onPrev,
-    onNext,
-  } = props
-  const { hideNextBtn, hidePrevBtn } = useInjectPanel()
-
-  return (
-    <div class={prefixCls}>
-      {onSuperPrev && (
-        <button
-          type="button"
-          onClick={onSuperPrev}
-          tabindex={-1}
-          class={`${prefixCls}-super-prev-btn`}
-          style={hidePrevBtn.value ? HIDDEN_STYLE : {}}
-        >
-          {superPrevIcon}
-        </button>
-      )}
-      {onPrev && (
-        <button
-          type="button"
-          onClick={onPrev}
-          tabindex={-1}
-          class={`${prefixCls}-prev-btn`}
-          style={hidePrevBtn.value ? HIDDEN_STYLE : {}}
-        >
-          {prevIcon}
-        </button>
-      )}
-      <div class={`${prefixCls}-view`}>{slots.default?.()}</div>
-      {onNext && (
-        <button
-          type="button"
-          onClick={onNext}
-          tabindex={-1}
-          class={`${prefixCls}-next-btn`}
-          style={hideNextBtn.value ? HIDDEN_STYLE : {}}
-        >
-          {nextIcon}
-        </button>
-      )}
-      {onSuperNext && (
-        <button
-          type="button"
-          onClick={onSuperNext}
-          tabindex={-1}
-          class={`${prefixCls}-super-next-btn`}
-          style={hideNextBtn.value ? HIDDEN_STYLE : {}}
-        >
-          {superNextIcon}
-        </button>
-      )}
-    </div>
-  )
-}
-
-Header.displayName = 'Header'
-Header.inheritAttrs = false
-
-export default Header

package/src/vc-picker/panels/MonthPanel/MonthBody.tsx

@@ -1,89 +0,0 @@
-import type { VueNode } from '../../../_util/type'
-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, isSameMonth } from '../../utils/dateUtil'
-import PanelBody from '../PanelBody'
-
-export const MONTH_COL_COUNT = 3
-const MONTH_ROW_COUNT = 4
-
-export type MonthCellRender<DateType> = (obj: { current: DateType; locale: Locale }) => VueNode
-
-export interface MonthBodyProps<DateType> {
-  prefixCls: string
-  locale: Locale
-  generateConfig: GenerateConfig<DateType>
-  value?: DateType | null
-  viewDate: DateType
-  disabledDate?: (date: DateType) => boolean
-  monthCellRender?: MonthCellRender<DateType>
-  onSelect: (value: DateType) => void
-}
-
-function MonthBody<DateType>(_props: MonthBodyProps<DateType>) {
-  const props = useMergeProps(_props)
-  const { prefixCls, locale, value, viewDate, generateConfig, monthCellRender } = props
-
-  const { rangedValue, hoverRangedValue } = useInjectRange()
-
-  const cellPrefixCls = `${prefixCls}-cell`
-
-  const getCellClassName = useCellClassName({
-    cellPrefixCls,
-    value,
-    generateConfig,
-    rangedValue: rangedValue.value,
-    hoverRangedValue: hoverRangedValue.value,
-    isSameCell: (current, target) => isSameMonth(generateConfig, current, target),
-    isInView: () => true,
-    offsetCell: (date, offset) => generateConfig.addMonth(date, offset),
-  })
-
-  const monthsLocale: string[] =
-    locale.shortMonths ||
-    (generateConfig.locale.getShortMonths
-      ? generateConfig.locale.getShortMonths(locale.locale)
-      : [])
-
-  const baseMonth = generateConfig.setMonth(viewDate, 0)
-
-  const getCellNode = monthCellRender
-    ? (date: DateType) => monthCellRender({ current: date, locale })
-    : undefined
-
-  return (
-    <PanelBody
-      {...props}
-      rowNum={MONTH_ROW_COUNT}
-      colNum={MONTH_COL_COUNT}
-      baseDate={baseMonth}
-      getCellNode={getCellNode}
-      getCellText={(date) =>
-        locale.monthFormat
-          ? formatValue(date, {
-              locale,
-              format: locale.monthFormat,
-              generateConfig,
-            })
-          : monthsLocale[generateConfig.getMonth(date)]
-      }
-      getCellClassName={getCellClassName}
-      getCellDate={generateConfig.addMonth}
-      titleCell={(date) =>
-        formatValue(date, {
-          locale,
-          format: 'YYYY-MM',
-          generateConfig,
-        })
-      }
-    />
-  )
-}
-
-MonthBody.displayName = 'MonthBody'
-MonthBody.inheritAttrs = false
-
-export default MonthBody

package/src/vc-picker/panels/MonthPanel/MonthHeader.tsx

@@ -1,50 +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 MonthHeaderProps<DateType> {
-  prefixCls: string
-  viewDate: DateType
-  locale: Locale
-  generateConfig: GenerateConfig<DateType>
-
-  onPrevYear: () => void
-  onNextYear: () => void
-  onYearClick: () => void
-}
-
-function MonthHeader<DateType>(_props: MonthHeaderProps<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>
-  )
-}
-
-MonthHeader.displayName = 'MonthHeader'
-MonthHeader.inheritAttrs = false
-
-export default MonthHeader

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

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