mirror of
https://github.com/langgenius/dify.git
synced 2025-11-20 23:13:19 +00:00
85cda47c70
Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: jyong <718720800@qq.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: quicksand <quicksandzn@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Hanqing Zhao <sherry9277@gmail.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Harry <xh001x@hotmail.com>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { RiCheckLine } from '@remixicon/react'
|
|
import cn from '@/utils/classnames'
|
|
import IndeterminateIcon from './assets/indeterminate-icon'
|
|
|
|
type CheckboxProps = {
|
|
id?: string
|
|
checked?: boolean
|
|
onCheck?: (event: React.MouseEvent<HTMLDivElement>) => void
|
|
className?: string
|
|
disabled?: boolean
|
|
indeterminate?: 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'
|
|
|
|
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,
|
|
className,
|
|
)}
|
|
onClick={(event) => {
|
|
if (disabled)
|
|
return
|
|
onCheck?.(event)
|
|
}}
|
|
data-testid={`checkbox-${id}`}
|
|
>
|
|
{!checked && indeterminate && <IndeterminateIcon />}
|
|
{checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Checkbox
|