packages/date-picker/src/interfaces/range.ts - develop - kaws/ui-kit-ce

packages/date-picker/src/interfaces/range.ts
159 строк5 KB
Владислав Полюхов
feat(date-picker): добавлены свойства canClear и showClearIconOnHover
28 окт 2025, 16:09
28 окт 2025, 16:09de1960a
import * as React from 'react'
import { InputLabelProps } from '@v-uik/input-label'
import { InputHelperTextProps } from '@v-uik/input-helper-text'
import { InputBaseProps } from '@v-uik/input'
import { MaskedInputBaseProps } from '@v-uik/masked-input'
import { ParsableDate } from './common'
import { BaseDatePickerProps } from './date'
import {
  RangeInputStyleType,
  RangeDatePanelStyleType,
} from '../constants/range'
import { ComponentPropsWithAttributes } from '@v-uik/common'
import { DatePickerComponentsConfig } from '../defaultComponents'

export type TRangeValue<TDate = unknown> = TDate | number

export type TRangeDate<TDate = unknown> = [
  TRangeValue<TDate> | null,
  TRangeValue<TDate> | null
]

//TODO: удалить в 2.0 и везде использовать TRangeDate, внутри компонента нигде не использовать
export type TRangeDateBackwardCompat<TDate = unknown> = [
  TRangeValue<TDate>,
  TRangeValue<TDate>
]

type InputPropsType<
  TMask extends string | unknown = undefined,
  TCanClear extends boolean | unknown = false
> = (TMask extends string
  ? ComponentPropsWithAttributes<
      Partial<
        Omit<
          MaskedInputBaseProps<TCanClear>,
          'showClearIconOnHover' | 'canClear'
        >
      >
    >
  : ComponentPropsWithAttributes<
      Omit<InputBaseProps<TCanClear>, 'showClearIconOnHover' | 'canClear'>
    >) & {
  /**
   * @inner
   * @deprecated Используйте `canClear` на верхнем уровне компонента.
   *
   */
  canClear?: TCanClear | boolean
}

export interface BaseRangePickerProps<
  TDate = unknown,
  TMask extends string | unknown = unknown,
  TCanClear extends boolean | unknown = false
> extends Omit<
    BaseDatePickerProps<TDate, TMask>,
    'value' | 'onChange' | 'defaultValue'
  > {
  /**
   * Вид инпутов пикера.
   *
   * @inner
   */
  inputStyle?: RangeInputStyleType
  /**
   * Вид панели календаря пикера.
   *
   * @inner
   */
  datePanelStyle?: RangeDatePanelStyleType
  /**
   * Значение пикера.
   *
   * @inner
   */
  value?: [ParsableDate<TDate>, ParsableDate<TDate>] | null
  /**
   * Значение пикера по умолчанию.
   *
   * @inner
   */
  defaultValue?: [ParsableDate<TDate>, ParsableDate<TDate>]
  /**
   * Обработчик изменения значения.
   *
   * @returns
   */
  onChange?: (value: TRangeDateBackwardCompat<TDate>) => void
  /**
   * Поле содержит ошибку.
   *
   * @inner
   */
  error?: boolean
  /**
   * Подпись над полем ввода.
   *
   * @inner
   */
  label?: React.ReactNode
  /**
   * Свойства компонента InputLabel.
   *
   * @inner
   */
  labelProps?: ComponentPropsWithAttributes<InputLabelProps>
  /**
   * Подпись под полем ввода.
   *
   * @inner
   */
  helperText?: React.ReactNode
  /**
   * Свойства компонента InputHelperText.
   *
   * @inner
   */
  helperTextProps?: ComponentPropsWithAttributes<InputHelperTextProps>
  /**
   * Свойства компонента InputBase или MaskedInputBase начала диапазона.
   *
   * @param startInputProps.inputProps.onBlur - Обработчик потери фокуса с элемента начала диапазона.
   * @param startInputProps.inputProps.onBlur - Обработчик потери фокуса с элемента начала диапазона.
   * @param startInputProps.inputProps - Остальные нативные атрибуты элемента input.
   */
  startInputProps?: InputPropsType<TMask, TCanClear>
  /**
   * Свойства компонента InputBase или MaskedInputBase конца диапазона.
   *
   * @param endInputProps.inputProps.onBlur - Обработчик потери фокуса с элемента конца диапазона.
   * @param endInputProps.inputProps.onBlur - Обработчик потери фокуса с элемента конца диапазона.
   * @param endInputProps.inputProps - Остальные нативные атрибуты элемента input.
   */
  endInputProps?: InputPropsType<TMask, TCanClear>
  /**
   * Разрешить значение Infinity.
   *
   * @inner
   */
  allowInfinity?: boolean
  /**
   * Свойство для переопределения элементов `RangePicker`.
   *
   * @inner
   */
  components?: DatePickerComponentsConfig
  /**
   * Флаг для очищения всего поля.
   *
   * @inner
   */
  canClear?: TCanClear | boolean
  /**
   * Показывать иконку очистки только при наведении мыши на поле ввода.
   *
   * @inner
   */
  showClearIconOnHover?: boolean
}