初始化

wwf

3 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

 app/components/base/checkbox/index.tsx

@@ -1,38 +1,23 @@
import { RiCheckLine } from '@remixicon/react'
import s from './index.module.css'
import cn from '@/utils/classnames'
import IndeterminateIcon from './assets/indeterminate-icon'

type CheckboxProps = {
  id?: string
  checked?: boolean
  onCheck?: () => void
  className?: string
  disabled?: boolean
  indeterminate?: boolean
  mixed?: boolean
}

const Checkbox = ({
    id,
    checked,
    onCheck,
    className,
    disabled,
    indeterminate,
}: CheckboxProps) => {
  const checkClassName = (checked || indeterminate)
    ? 'bg-components-checkbox-bg text-components-checkbox-icon hover:bg-components-checkbox-bg-hover'
    : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover'
  const disabledClassName = (checked || indeterminate)
    ? 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked'
    : 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled'

const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProps) => {
  if (!checked) {
  return (
    <div
      id={id}
      className={cn(
        'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] shadow-xs shadow-shadow-shadow-3',
        checkClassName,
        disabled && disabledClassName,
          'w-4 h-4 rounded-[4px] bg-components-checkbox-bg-unchecked border border-components-checkbox-border hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover shadow-xs cursor-pointer',
          disabled && 'border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled cursor-not-allowed',
          mixed && s.mixed,
        className,
      )}
      onClick={() => {
@@ -40,10 +25,24 @@
          return
        onCheck?.()
      }}
      data-testid={`checkbox-${id}`}
      ></div>
    )
  }
  return (
    <div
      className={cn(
        'w-4 h-4 flex items-center justify-center rounded-[4px] bg-components-checkbox-bg hover:bg-components-checkbox-bg-hover text-components-checkbox-icon shadow-xs cursor-pointer',
        disabled && 'bg-components-checkbox-bg-disabled-checked hover:bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled cursor-not-allowed',
        className,
      )}
      onClick={() => {
        if (disabled)
          return

        onCheck?.()
      }}
    >
      {!checked && indeterminate && <IndeterminateIcon />}
      {checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
      <RiCheckLine className={cn('w-3 h-3')} />
    </div>
  )
}