From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/base/checkbox/index.tsx | 49 ++++++++++++++++++++++++-------------------------
1 files changed, 24 insertions(+), 25 deletions(-)
diff --git a/app/components/base/checkbox/index.tsx b/app/components/base/checkbox/index.tsx
index 3e47967..df2c368 100644
--- a/app/components/base/checkbox/index.tsx
+++ b/app/components/base/checkbox/index.tsx
@@ -1,49 +1,48 @@
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
+ className={cn(
+ '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={() => {
+ if (disabled)
+ return
+ onCheck?.()
+ }}
+ ></div>
+ )
+ }
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 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?.()
}}
- data-testid={`checkbox-${id}`}
>
- {!checked && indeterminate && <IndeterminateIcon />}
- {checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
+ <RiCheckLine className={cn('w-3 h-3')} />
</div>
)
}
--
Gitblit v1.8.0