packages/input-label/src/InputLabel.tsx - develop - kaws/ui-kit-ce

packages/input-label/src/InputLabel.tsx
286 строк7 KB
zavyalov.d.o
refactor: устранение eslint warnings
06 мар 2025, 00:50
06 мар 2025, 00:509490b1b
'use client'

import * as React from 'react'
import { createUseStyles, clsx } from '@v-uik/theme'
import { useClassList } from '@v-uik/hooks'
import { Tooltip, TooltipProps } from '@v-uik/tooltip'
import {
  ElementSizeType,
  ElementSize,
  ComponentPropsWithAttributes,
} from '@v-uik/common'
import { InfoIcon } from './icons'

export type Classes = {
  /**
   *  Стиль, применяемый к основному элементу.
   *
   *  @inner
   */
  label?: string
  /**
   *  Стиль, применяемый к элементу `span`.
   *
   *  @inner
   */
  text?: string
  /**
   *  Стиль, применяемый к элементу `span` с `size='sm'`.
   *
   *  @inner
   */
  textSmall?: string
  /**
   *  Стиль, применяемый к элементу `span` с `size='md'`.
   *
   *  @inner
   */
  textMedium?: string
  /**
   *  Стиль, применяемый к элементу `span` с `size='lg'`.
   *
   *  @inner
   */
  textLarge?: string
  /**
   *  Стиль, применяемый к элементу с `disabled='true'`.
   *
   *  @inner
   */
  disabled?: string
  /**
   *  Стиль, применяемый к элементу иконки в Tooltip.
   *
   *  @inner
   */
  tooltipIcon?: string
  /**
   *  Стиль, применяемый к контейнеру suffix.
   *
   *  @inner
   */
  suffix?: string
  /**
   *  Стиль, применяемый к контейнеру suffix с `size='sm'`.
   *
   *  @inner
   */
  suffixSmall?: string
  /**
   *  Стиль, применяемый к контейнеру suffix с `size='md'`.
   *
   *  @inner
   */
  suffixMedium?: string
  /**
   *  Стиль, применяемый к контейнеру suffix с `size='lg'`.
   *
   *  @inner
   */
  suffixLarge?: string
}

export interface InputLabelProps
  extends React.LabelHTMLAttributes<HTMLLabelElement> {
  /**
   * Список классов.
   *
   * @inner
   */
  classes?: Partial<Classes>
  /**
   * Применить стили для disabled состояния.
   *
   * @inner
   */
  disabled?: boolean
  /**
   * Текст всплывающей подсказки подписи.
   *
   * @inner
   */
  tooltipText?: React.ReactNode
  /**
   * Свойства компонента Tooltip.
   *
   * @inner
   */
  tooltipProps?: ComponentPropsWithAttributes<Omit<TooltipProps, 'children'>>
  /**
   * Вспомогательный элемент после текста.
   *
   * @inner
   */
  suffix?: React.ReactNode
  /**
   * Размер надписи.
   *
   * @inner
   */
  size?: ElementSizeType
}

const useStyles = createUseStyles((theme) => ({
  label: {
    display: 'inline-flex',
    alignItems: 'center',
    color: theme.comp.inputLabel.colorText,
    cursor: 'default',
    marginBottom: 8,
    width: 'inherit',
    '&$hasSuffix': {
      width: '100%',
    },

    '&$disabled': {
      color: theme.comp.inputLabel.colorTextDisabled,
    },
  },

  text: {
    fontFamily: theme.comp.inputLabel.typographyFontFamily,
    fontWeight: theme.comp.inputLabel.typographyFontWeight,
    letterSpacing: theme.comp.inputLabel.typographyLetterSpacing,
  },

  textSmall: {
    fontSize:
      theme.comp.inputLabel.typographyFontSizeSm ||
      theme.comp.inputLabel.typographyFontSize,
    lineHeight:
      theme.comp.inputLabel.typographyLineHeightSm ||
      theme.comp.inputLabel.typographyLineHeight,
  },

  textMedium: {
    fontSize:
      theme.comp.inputLabel.typographyFontSizeMd ||
      theme.comp.inputLabel.typographyFontSize,
    lineHeight:
      theme.comp.inputLabel.typographyLineHeightMd ||
      theme.comp.inputLabel.typographyLineHeight,
  },

  textLarge: {
    fontSize:
      theme.comp.inputLabel.typographyFontSizeLg ||
      theme.comp.inputLabel.typographyFontSize,
    lineHeight:
      theme.comp.inputLabel.typographyLineHeightLg ||
      theme.comp.inputLabel.typographyLineHeight,
  },

  disabled: {},

  labelPointer: {}, //TODO: удалить в 2.0

  tooltipIcon: {
    flexShrink: 0,
    marginLeft: 4,
  },

  suffix: {
    fontFamily: theme.comp.inputLabel.typographyFontFamily,
    fontWeight: theme.comp.inputLabel.typographyFontWeight,
    letterSpacing: theme.comp.inputLabel.typographyLetterSpacing,
    marginLeft: 'auto',
  },

  suffixSmall: {
    fontSize:
      theme.comp.inputLabel.typographyFontSizeSm ||
      theme.comp.inputLabel.typographyFontSize,
    lineHeight:
      theme.comp.inputLabel.typographyLineHeightSm ||
      theme.comp.inputLabel.typographyLineHeight,
  },

  suffixMedium: {
    fontSize:
      theme.comp.inputLabel.typographyFontSizeMd ||
      theme.comp.inputLabel.typographyFontSize,
    lineHeight:
      theme.comp.inputLabel.typographyLineHeightMd ||
      theme.comp.inputLabel.typographyLineHeight,
  },

  suffixLarge: {
    fontSize:
      theme.comp.inputLabel.typographyFontSizeLg ||
      theme.comp.inputLabel.typographyFontSize,
    lineHeight:
      theme.comp.inputLabel.typographyLineHeightLg ||
      theme.comp.inputLabel.typographyLineHeight,
  },

  hasSuffix: {},

  tooltip: {
    paddingLeft: 4,
  },
}))

export const InputLabel = React.forwardRef(
  (
    {
      classes,
      className: classNameProp,
      disabled,
      htmlFor,
      tooltipText,
      tooltipProps,
      suffix,
      children,
      size = ElementSize.md,
      ...rest
    }: InputLabelProps,
    ref: React.Ref<HTMLLabelElement>
  ) => {
    const classesList = useStyles()
    const classesMap = useClassList(classesList, classes)
    const isSmall = size === ElementSize.sm
    const isMedium = size === ElementSize.md
    const isLarge = size === ElementSize.lg

    const className = clsx(classesMap.label, classNameProp, {
      [classesMap.disabled]: disabled,
      [classesMap.labelPointer]: htmlFor,
      [classesMap.hasSuffix]: !!suffix,
    })
    const textClassName = clsx(classesMap.text, {
      [classesMap.textSmall]: isSmall,
      [classesMap.textMedium]: isMedium,
      [classesMap.textLarge]: isLarge,
    })
    const suffixClassName = clsx(classesMap.suffix, {
      [classesMap.suffixSmall]: isSmall,
      [classesMap.suffixMedium]: isMedium,
      [classesMap.suffixLarge]: isLarge,
    })

    return (
      <label {...rest} ref={ref} htmlFor={htmlFor} className={className}>
        <span className={textClassName}>{children}</span>
        {tooltipText && (
          <Tooltip
            {...tooltipProps}
            className={clsx(classesList.tooltip, tooltipProps?.className)}
            dropdownProps={{
              placement: 'top-start',
              ...tooltipProps?.dropdownProps,
              content: tooltipText,
            }}
          >
            <InfoIcon
              width={16}
              height={16}
              className={classesMap.tooltipIcon}
              fill="#282828"
            />
          </Tooltip>
        )}
        {suffix && <div className={suffixClassName}>{suffix}</div>}
      </label>
    )
  }
)