packages/input/src/Input.tsx - develop - gsam/ui-kit-ce

packages/input/src/Input.tsx
205 строк6 KB
Немцев Вячеслав Александрович
fix(labelled): исправлен перенос текста подписей, добавлена возможность выставления троеточия
26 фев 2026, 13:52
26 фев 2026, 13:520bee541
'use client'

import * as React from 'react'
import { createUseStyles, clsx } from '@v-uik/theme'
import {
  useClassList,
  useInputId,
  useUncontrolledValueNext,
} from '@v-uik/hooks'
import { Labelled, LabelledProps } from '@v-uik/labelled'
import { ElementSize, ClearButtonProps } from '@v-uik/common'
import { InputBase, InputBaseProps } from './InputBase'
import { getTextLength as formatCountBuiltin } from '@v-uik/utils'
import { Classes } from './classes'

export interface InputProps<TCanClear extends boolean | unknown = false>
  extends Omit<InputBaseProps<TCanClear>, 'onFocusChange'>,
    Omit<LabelledProps, 'children' | 'classes'> {
  /**
   * Список классов.
   *
   * @inner
   */
  classes?: Partial<Classes> & Partial<ClearButtonProps['classes']>
  /**
   * Список классов для компонента Labelled.
   *
   * @inner
   */
  labelledClasses?: LabelledProps['classes']
  /**
   * Показывать ли счетчик введенных символов.
   *
   * @inner
   */
  showCount?: boolean
  /**
   * Функция для форматирования счетчика введенных символов.
   *
   * @param {React.ReactText | null} value Значение поля.
   * @param {number} maxLength Максимально возможное количество символов для отображения.
   *
   * @returns {string} Форматированная строка для отображения счетчика введенных символов.
   */
  formatCount?: (value?: React.ReactText | null, maxLength?: number) => string
}

const useStyles = createUseStyles({
  container: {
    display: 'inline-block',
  },

  ellipsis: {
    width: '100%',
  },
  fullWidth: {
    width: '100%',
  },
})

const _Input = React.forwardRef(
  <TCanClear extends boolean | unknown = false>(
    {
      classes,
      className,
      label,
      labelProps,
      value: valueProp,
      onChange,
      placeholder,
      inputProps,
      inputRef: inputRefProp,
      helperText,
      helperTextProps,
      fullWidth,
      disabled,
      error,
      size = ElementSize.md,
      prefix,
      suffix,
      showErrorIcon = true,
      errorIconTooltipProps,
      showCount,
      labelledClasses,
      description,
      keepHelperTextMinHeight,
      required,
      clearIcon,
      onClear,
      canClear = false,
      showClearIconOnHover,
      clearButtonInnerProps,
      ellipsis,
      defaultValue,
      formatCount = formatCountBuiltin,
      disableEllipsis = true,
      ...rest
    }: InputProps<TCanClear>,
    ref: React.Ref<HTMLDivElement>
  ) => {
    const [focused, setFocused] = React.useState(false)
    const { handleChange, value } = useUncontrolledValueNext({
      defaultValue,
      onChange,
      value: valueProp,
      componentName: 'Input',
    })

    const classesList = useStyles()
    const classesMap = useClassList(classesList, classes)

    const { inputId, htmlFor } = useInputId({
      customInputId: inputProps?.id,
      customHtmlFor: labelProps?.htmlFor,
    })

    const containerClassName = clsx(classesMap.container, className, {
      [classesMap.fullWidth]: fullWidth,
      [classesMap?.disabled ?? '']: disabled,
      [classesMap?.error ?? '']: error,
      [classesMap?.focused ?? '']: focused,
      [classesMap?.small ?? '']: size === ElementSize.sm,
      [classesMap?.medium ?? '']: size === ElementSize.md,
      [classesMap?.large ?? '']: size === ElementSize.lg,
      [classesMap.ellipsis]: !disableEllipsis,
    })

    const inputBaseClasses = classes
      ? {
          root: classesMap?.inputContainer,
          input: classesMap?.input,
          inputSmall: classesMap?.inputSmall,
          inputMedium: classesMap?.inputMedium,
          inputLarge: classesMap?.inputLarge,
          prefix: classesMap?.prefix,
          suffix: classesMap?.suffix,
          clearButton: classesMap?.clearButton,
          inputClear: classesMap?.inputClear,
        }
      : undefined

    const labelSuffix = React.useMemo(() => {
      return showCount ? formatCount(value, inputProps?.maxLength) : undefined
    }, [showCount, value, inputProps?.maxLength, formatCount])

    return (
      <div {...rest} ref={ref} className={containerClassName}>
        <Labelled
          size={size}
          classes={labelledClasses}
          label={label || showCount}
          helperText={helperText}
          description={description}
          keepHelperTextMinHeight={keepHelperTextMinHeight}
          required={required}
          disabled={disabled}
          labelProps={{
            ...labelProps,
            htmlFor,
            suffix: labelSuffix,
          }}
          error={error}
          helperTextProps={helperTextProps}
          disableEllipsis={disableEllipsis}
        >
          <InputBase
            classes={inputBaseClasses}
            prefix={prefix}
            suffix={suffix}
            inputRef={inputRefProp}
            inputProps={{
              ...inputProps,
              id: inputId,
            }}
            disabled={disabled}
            placeholder={placeholder}
            size={size}
            fullWidth={fullWidth}
            error={error}
            showErrorIcon={showErrorIcon}
            errorIconTooltipProps={errorIconTooltipProps}
            value={value}
            clearIcon={clearIcon}
            canClear={canClear}
            showClearIconOnHover={showClearIconOnHover}
            clearButtonInnerProps={clearButtonInnerProps}
            ellipsis={ellipsis}
            onChange={handleChange}
            onFocusChange={setFocused}
            onClear={onClear}
          />
        </Labelled>
      </div>
    )
  }
)

export const Input = _Input as <TCanClear extends boolean | unknown = false>(
  props: InputProps<TCanClear> & {
    /**
     *
     */
    ref?: React.Ref<HTMLDivElement>
  }
) => React.ReactElement