feat(components): 添加 Radio 组件

- 实现了一个新的 Radio 组件,支持单选功能
- 组件属性包括 name、checked、disabled 和 onChange
- 使用了 SolidJS 的 createEffect、createMemo 和 createSignal 等功能
- 组件内部处理了初始选中状态和禁用状态
- 点击事件会触发选中状态的切换
This commit is contained in:
Vixalie
2025-08-12 13:42:24 +08:00
parent d64a8758b4
commit c6e4ead508

59
src/components/Radio.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { Icon } from '@iconify-icon/solid';
import { isNotNil } from 'es-toolkit';
import {
createEffect,
createMemo,
createSignal,
mergeProps,
ParentComponent,
ParentProps,
Show,
} from 'solid-js';
interface RadioProps {
name?: string;
checked?: boolean;
disabled?: boolean;
onChange?: (value: boolean) => void;
}
const Radio: ParentComponent<RadioProps> = (props) => {
const mProps = mergeProps<ParentProps<RadioProps>[]>(
{
disabled: false,
},
props,
);
const originalChecked = createMemo(() => mProps.checked);
const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined);
createEffect(() => {
if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) {
setInternalChecked(originalChecked());
}
});
const handleClick = () => {
if (mProps.disabled) {
return;
}
setInternalChecked((prev) => !prev);
};
return (
<div class="flex flex-row items-center gap-2 cursor-pointer" onClick={handleClick}>
<Icon
icon={internalChecked() ? 'hugeicons:checkmark-circle-03' : 'hugeicons:circle'}
class="text-[14px] stroke-1"
classList={{ 'text-primary': internalChecked() }}
/>
<div>{props.children}</div>
<Show when={isNotNil(mProps.name)}>
<input type="hidden" name={mProps.name} value={internalChecked()} />
</Show>
</div>
);
};
export default Radio;