estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat/TanStack-Form (#18346)

Browse Source
This commit is contained in:
Wu Tianwei
2025-04-18 15:54:22 +08:00
committed by GitHub
parent efe5db38ee
commit 1e7418095f
38 changed files with 959 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/app/components/base/checkbox/index.tsx
View File

@@ -1,48 +1,49 @@
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
mixed?: boolean
indeterminate?: boolean
}
const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProps) => {
if (!checked) {
return (
<div
className={cn(
'h-4 w-4 cursor-pointer rounded-[4px] border border-components-checkbox-border bg-components-checkbox-bg-unchecked shadow-xs hover:border-components-checkbox-border-hover',
mixed ? s.mixed : 'hover:bg-components-checkbox-bg-unchecked-hover',
disabled && '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',
className,
)}
onClick={() => {
if (disabled)
return
onCheck?.()
}}
></div>
)
}
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'
return (
<div
id={id}
className={cn(
'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] bg-components-checkbox-bg text-components-checkbox-icon shadow-xs hover:bg-components-checkbox-bg-hover',
disabled && 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked',
'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] shadow-xs shadow-shadow-shadow-3',
checkClassName,
disabled && disabledClassName,
className,
)}
onClick={() => {
if (disabled)
return
onCheck?.()
}}
data-testid={`checkbox-${id}`}
>
<RiCheckLine className={cn('h-3 w-3')} />
{!checked && indeterminate && <IndeterminateIcon />}
{checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
</div>
)
}