feat(components): 添加 Radio 组件
- 实现了一个新的 Radio 组件,支持单选功能 - 组件属性包括 name、checked、disabled 和 onChange - 使用了 SolidJS 的 createEffect、createMemo 和 createSignal 等功能 - 组件内部处理了初始选中状态和禁用状态 - 点击事件会触发选中状态的切换
This commit is contained in:
59
src/components/Radio.tsx
Normal file
59
src/components/Radio.tsx
Normal 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;
|
Reference in New Issue
Block a user