adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): RadioGroupCard support block mode

Browse Source
This commit is contained in:
zhaoying
2026-02-02 10:39:04 +08:00
parent 4b8b6fe407
commit d62746fc8c
1 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/RadioGroupCard/index.tsx
View File

@@ -16,6 +16,7 @@ interface RadioCardProps extends Omit<RadioGroupProps, 'onChange'> {
onChange?: (value: string | null | undefined, option?: RadioCardOption) => void; onChange?: (value: string | null | undefined, option?: RadioCardOption) => void;
itemRender?: (option: RadioCardOption) => ReactNode; itemRender?: (option: RadioCardOption) => ReactNode;
allowClear?: boolean; allowClear?: boolean;
block?: boolean;
} }
const RadioGroupCard: FC<RadioCardProps> = ({ const RadioGroupCard: FC<RadioCardProps> = ({
@@ -24,7 +25,8 @@ const RadioGroupCard: FC<RadioCardProps> = ({
onValueChange, onValueChange,
onChange, onChange,
itemRender, itemRender,
allowClear = true allowClear = true,
block = false,
}) => { }) => {
// 监听value变化 // 监听value变化
useEffect(() => { useEffect(() => {
@@ -45,23 +47,30 @@ const RadioGroupCard: FC<RadioCardProps> = ({
} }
return ( return (
<div className={`rb:grid rb:grid-cols-${options.length} rb:gap-3`}> <div className={clsx(`rb:grid rb:grid-cols-${block ? 1 : options.length}`, {
'rb:gap-3': !block,
'rb:gap-4': block,
})}>
{options.map(option => ( {options.map(option => (
<div key={String(option.value)} className={clsx("rb:border rb:rounded-lg rb:w-full rb:p-[20px_12px] rb:text-center rb:cursor-pointer", { <div key={String(option.value)} className={clsx("rb:border rb:rounded-lg rb:w-full rb:p-[20px_12px] rb:text-center rb:cursor-pointer", {
'rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF]': option.value === value, 'rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF]': option.value === value,
'rb:border-[#EBEBEB] rb:bg-[#ffffff]': option.value !== value, 'rb:border-[#EBEBEB] rb:bg-[#ffffff]': option.value !== value,
'rb:opacity-[0.75]': option.disabled 'rb:opacity-[0.75]': option.disabled,
})} onClick={() => handleChange(option)}> 'rb:flex rb:items-center rb:text-left rb:gap-4': block,
{itemRender ? itemRender(option) : ( })} onClick={() => handleChange(option)}>
<> {itemRender ? itemRender(option) : (
{option.icon && <img src={option.icon} className="rb:w-10 rb:h-10 rb:mb-3 rb:m-[0_auto]" />} <>
{option.icon && <img src={option.icon} className={clsx("rb:w-10 rb:h-10", {
'rb:m-[0_auto] rb:mb-3': !block,
})} />}
<div>
<div className="rb:text-[14px] rb:font-medium">{option.label}</div> <div className="rb:text-[14px] rb:font-medium">{option.label}</div>
<div className="rb:mt-1.5 rb:text-[#5B6167] rb:text-[12px] rb:font-regular">{option.labelDesc}</div> <div className="rb:mt-1.5 rb:text-[#5B6167] rb:text-[12px] rb:font-regular">{option.labelDesc}</div>
</> </div>
)} </>
</div> )}
) </div>
)} ))}
</div> </div>
); );
}; };