packages/loading-button/examples/AnimatedLoadingButtons.tsx - develop - bearury/ui-kit-ce

packages/loading-button/examples/AnimatedLoadingButtons.tsx
119 строк3 KB
Denis Svyatovets
refactor: правки для работы с next 15
10 июн 2025, 12:52
10 июн 2025, 12:521b1b5f4
//@ts-nocheck
import React from 'react'
import { LoadingButton } from '@v-uik/loading-button'

//TODO!: Доработать

interface Props extends React.SVGAttributes<SVGElement> {}

const svgPath =
  'M4.5 1.5C2.84315 1.5 1.5 2.84315 1.5 4.5V10.5H3V4.5C3 3.67157 3.67157 3 4.5 3H10.5V1.5H4.5ZM3 13.5H1.5V19.5C1.5 21.1569 2.84315 22.5 4.5 22.5H10.5V21H4.5C3.67157 21 3 20.3284 3 19.5V13.5ZM19.5 22.5H13.5V21H19.5C20.3284 21 21 20.3284 21 19.5V13.5H22.5V19.5C22.5 21.1569 21.1569 22.5 19.5 22.5ZM22.5 10.5V4.5C22.5 2.84315 21.1569 1.5 19.5 1.5H13.5V3H19.5C20.3284 3 21 3.67157 21 4.5V10.5H22.5Z' // eslint-disable-line max-len

// TEMPORARY COMPONENT FOR PRESENTATION PURPOSES
export const Icon: React.FC<Props> = ({
  width = 24,
  height = 24,
  fill = 'currentColor',
  ...props
}) => {
  return (
    <svg
      width={width}
      height={height}
      fill={fill}
      {...props}
      viewBox="0 0 24 24"
    >
      <path d={svgPath} fillRule="evenodd" />
    </svg>
  )
}

Icon.displayName = 'Icon'

interface ButtonWithStateProps {
  state: number
  onClick: () => void
  label: string
  loading?: boolean
  isError?: boolean
  components?: React.ReactNode
}

const ButtonWithState: React.FC<ButtonWithStateProps> = ({
  state,
  onClick,
  label,
  loading = false,
  isError = false,
  ...rest
}) => {
  let backgroundColor

  if (state === 2) {
    if (isError) {
      backgroundColor = 'red'
    } else {
      backgroundColor = 'green'
    }
  } else {
    backgroundColor = undefined
  }

  return (
    <LoadingButton
      isLoading={loading}
      loadingTitle="Loading..."
      style={{
        minWidth: 140,
        backgroundColor: backgroundColor,
        transition: 'background-color 0.3s ease',
      }}
      prefix={<Icon />}
      onClick={onClick}
      {...rest}
    >
      {!loading && label}
    </LoadingButton>
  )
}

export const AnimatedLoadingButtons: React.FC = (): JSX.Element => {
  const [buttonStates, setButtonStates] = React.useState({
    success: 0,
    error: 0,
  })

  const handleClick = (type: 'success' | 'error') => {
    if (buttonStates[type] === 2) {
      setButtonStates((prev) => ({ ...prev, [type]: 0 }))
    } else {
      setButtonStates((prev) => ({ ...prev, [type]: 1 }))
      handleTimeout(type)
    }
  }

  const handleTimeout = (type: 'success' | 'error') => {
    setTimeout(() => {
      setButtonStates((prev) => ({ ...prev, [type]: 2 }))
    }, 2000)
  }

  return (
    <div style={{ display: 'flex', columnGap: 16, alignItems: 'center' }}>
      <ButtonWithState
        state={buttonStates.success}
        label="Button"
        loading={buttonStates.success === 1}
        onClick={() => handleClick('success')}
      />
      <ButtonWithState
        isError
        state={buttonStates.error}
        label="Button"
        loading={buttonStates.error === 1}
        onClick={() => handleClick('error')}
      />
    </div>
  )
}