packages/loading-button/src/LoadingButton.tsx - develop - kaws/ui-kit-ce

packages/loading-button/src/LoadingButton.tsx
174 строки5 KB
Строганов Федор
fix(loading-button): исправлена передача классов в компонент
09 июл 2025, 17:17
09 июл 2025, 17:17a3e3eb0
/* eslint-disable react/prop-types */ // TODO: косячит eslint при типизации пропсов компонента через дженерики React.forwardRef
import * as React from 'react'
import {
  ButtonBaseProps,
  PolymorphicButton,
  PolymorphicButtonProps,
} from '@v-uik/button'
import { getComponents, LoadingButtonComponents } from './components'
import { ElementSize } from '@v-uik/common'
import { useClassList } from '@v-uik/hooks'
import { clsx, createUseStyles } from '@v-uik/theme'
import { PolymorphicComponentProps } from '@v-uik/box'
import { LoadingButtonClasses } from './classes'
import { CircularProgressProps } from '@v-uik/progress'

const useStyles = createUseStyles({
  loading: {
    pointerEvents: 'none',
  },
  loader: {
    display: 'flex',
  },
})

const defaultElement = 'button'

export type LoadingButtonProps<
  E extends React.ElementType = typeof defaultElement,
  PrefixProps = CircularProgressProps,
  SuffixProps = CircularProgressProps
> = PolymorphicComponentProps<
  E,
  LoadingButtonBaseProps<PrefixProps, SuffixProps>
>

type LoadingButtonBaseProps<PrefixProps, SuffixProps> = Omit<
  ButtonBaseProps,
  'classes'
> & {
  /**
   * Флаг отображения загрузки.
   *
   * @inner
   */
  isLoading?: boolean

  /**
   * Дочерний `JSX`, отображаемый при `isLoading=true` вместо контента, переданного в `children`.
   *
   * @inner
   */
  loadingTitle?: React.ReactNode

  /**
   * Свойства для индикатора загрузки перед дочерним `JSX`.
   *
   * @inner
   */
  prefixProps?: PrefixProps

  /**
   * Свойства для индикатора загрузки после дочернего `JSX`.
   *
   * @inner
   */
  suffixProps?: SuffixProps

  /**
   * Флаг для отображения индикатора загрузки после дочернего `JSX`.
   *
   * @inner
   */
  showLoaderSuffix?: boolean

  /**
   * Флаг для отображения индикатора загрузки перед дочерним `JSX`.
   *
   * @inner
   */
  hideLoaderPrefix?: boolean

  /**
   * Свойство для переопределения компонентов `LoadingButton`.
   *
   * @inner
   */
  components?: Partial<LoadingButtonComponents>

  /**
   * CSS классы для стилизации.
   *
   * @inner
   */
  classes?: LoadingButtonClasses
}

export const LoadingButton = React.forwardRef(
  <
    E extends React.ElementType = typeof defaultElement,
    PrefixProps = CircularProgressProps,
    SuffixProps = CircularProgressProps
  >(
    {
      classes,
      className,
      children,
      showLoaderSuffix = false,
      hideLoaderPrefix = false,
      prefixProps,
      suffixProps,
      prefixIcon,
      suffixIcon,
      loadingTitle = 'Загрузка...',
      isLoading = false,
      size = ElementSize.md,
      as = defaultElement as E,
      components,
      ...rest
    }: LoadingButtonProps<E, PrefixProps, SuffixProps>,
    ref: React.Ref<E>
  ) => {
    const { LoaderPrefix, LoaderSuffix } = getComponents(components)
    const classesList = useStyles()
    const classesMap = useClassList(classesList, classes)
    const { loader, loading, loaderPrefix, loaderSuffix, ...buttonClasses } =
      classesMap
    const loadingClassName = clsx(className, {
      [loading]: isLoading,
    })

    return (
      <PolymorphicButton
        ref={ref}
        className={loadingClassName}
        classes={buttonClasses}
        as={as}
        {...(rest as PolymorphicButtonProps<E>)}
        size={size}
        prefixIcon={
          !hideLoaderPrefix
            ? (isLoading && (
                <LoaderPrefix
                  size={size}
                  className={clsx(loader, loaderPrefix)}
                  {...prefixProps}
                />
              )) ||
              prefixIcon
            : prefixIcon
        }
        suffixIcon={
          showLoaderSuffix
            ? (isLoading && (
                <LoaderSuffix
                  size={size}
                  className={clsx(loader, loaderSuffix)}
                  {...suffixProps}
                />
              )) ||
              suffixIcon
            : suffixIcon
        }
      >
        {isLoading ? loadingTitle : children}
      </PolymorphicButton>
    )
  }
) as <
  E extends React.ElementType = typeof defaultElement,
  PrefixProps = CircularProgressProps,
  SuffixProps = CircularProgressProps
>(
  props: LoadingButtonProps<E, PrefixProps, SuffixProps>
) => JSX.Element