packages/card/src/types.ts - develop - kaws/ui-kit-ce

packages/card/src/types.ts
127 строк3 KB
Denis Svyatovets
style: добавлен плагин eslint для jsDoc
27 янв 2025, 17:06
27 янв 2025, 17:066287359
import { ButtonAriaActionEventHandler } from '@v-uik/hooks'
import { CardClasses } from './classes'
import { CardKind } from './constants'
import type {
  ComponentPropsWithRefFix,
  ComponentPropsWithAttributes,
} from '@v-uik/common'

export type CardKindType = keyof typeof CardKind

export type WithCardContainerProps = {
  /**
   * Нативные html свойства контейнера (для `kind='clickable'` используйте `buttonProps`).
   */
  containerProps?: ComponentPropsWithAttributes<ComponentPropsWithRefFix<'div'>>
}

export type CardContainerProps = {
  /**
   *
   */
  kind: typeof CardKind.container
} & WithCardContainerProps

export type CardClickableProps = {
  /**
   *
   */
  kind: typeof CardKind.clickable
  /**
   * Обработчик onClick для button (доступен при kind='clickable').
   */
  onClick?: ButtonAriaActionEventHandler<HTMLDivElement>
  /**
   * Пропсы для контейнера  (доступны при kind='clickable').
   *
   * @param buttonProps.onFocus - Обработчик фокуса на элемент.
   * @param buttonProps.onBlur - Обработчик потери фокуса с элемента.
   * @param buttonProps - Остальные нативные атрибуты button, кроме onClick и disabled.
   */
  buttonProps?: ComponentPropsWithAttributes<
    Omit<ComponentPropsWithRefFix<'div'>, 'onClick' | 'disabled'>
  >
  /**
   * Флаг disabled.
   */
  disabled?: boolean
}
export type CardSelectableProps = {
  /**
   *
   */
  kind: typeof CardKind.selectable
  /**
   * Признак выбора (доступен при kind='selectable').
   */
  checked: boolean
  /**
   * Name атрибут элемента input (доступен при kind='selectable').
   */
  name?: string
  /**
   * Обработчик onChange для input (доступен при kind='selectable').
   */
  onChange: React.ChangeEventHandler<HTMLInputElement>
  /**
   * Пропсы для элемента input (доступны при kind='selectable').
   *
   * @param inputProps.onBlur - Обработчик потери фокуса с элемента.
   * @param inputProps.onFocus — обработчик onFocus.
   * @param inputProps.maxLength — максимальная максимальная длина вводимого значения.
   * @param inputProps — остальные нативные атрибуты элемента input, кроме `onChange` и `name`.
   */
  inputProps?: ComponentPropsWithAttributes<
    Omit<ComponentPropsWithRefFix<'input'>, 'onChange' | 'name'>
  >
  /**
   *
   */
  disabled?: boolean
} & WithCardContainerProps

export type CardKindProps =
  | CardContainerProps
  | CardClickableProps
  | CardSelectableProps
  | {
      /**
       * Тип карточки.
       */
      kind?: undefined
    }

export type CardBaseProps = {
  /**
   * CSS классы компонента.
   */
  classes?: Partial<CardClasses>
  /**
   * Класс.
   */
  className?: string
  /**
   *
   */
  children: React.ReactNode

  /**
   * Контент для header.
   */
  header?: React.ReactNode
  /**
   * Контент для footer.
   */
  footer?: React.ReactNode
  /**
   * Контент для subtitle.
   */
  subtitle?: React.ReactNode
}

export type CardProps = CardBaseProps &
  Omit<
    ComponentPropsWithRefFix<'div'>,
    'onChange' | 'checked' | 'onClick' | 'name' | 'disabled'
  > &
  CardKindProps