refactor(Radio): 重构 Radio 组件中的图标渲染逻辑
- 使用 Dynamic 组件动态渲染 RadioIcon 数组中的图标组件 - 通过数组索引选择适当的图标,简化了图标切换逻辑 - 移除了原有的条件渲染代码,提高了组件的可读性和性能
This commit is contained in:
@@ -9,6 +9,7 @@ import {
|
|||||||
ParentProps,
|
ParentProps,
|
||||||
Show,
|
Show,
|
||||||
} from 'solid-js';
|
} from 'solid-js';
|
||||||
|
import { Dynamic } from 'solid-js/web';
|
||||||
|
|
||||||
interface RadioProps {
|
interface RadioProps {
|
||||||
name?: string;
|
name?: string;
|
||||||
@@ -17,6 +18,11 @@ interface RadioProps {
|
|||||||
onChange?: (value?: boolean) => void;
|
onChange?: (value?: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const RadioIcon = [
|
||||||
|
() => <Icon icon="hugeicons:circle" class="text-[14px] stroke-1" />,
|
||||||
|
() => <Icon icon="hugeicons:checkmark-circle-03" class="text-[14px] stroke-1 text-primary" />,
|
||||||
|
];
|
||||||
|
|
||||||
const Radio: ParentComponent<RadioProps> = (props) => {
|
const Radio: ParentComponent<RadioProps> = (props) => {
|
||||||
const mProps = mergeProps<ParentProps<RadioProps>[]>(
|
const mProps = mergeProps<ParentProps<RadioProps>[]>(
|
||||||
{
|
{
|
||||||
@@ -44,11 +50,7 @@ const Radio: ParentComponent<RadioProps> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-row items-center gap-2 cursor-pointer" onClick={handleClick}>
|
<div class="flex flex-row items-center gap-2 cursor-pointer" onClick={handleClick}>
|
||||||
<Icon
|
<Dynamic component={RadioIcon[internalChecked() ? 1 : 0]} />
|
||||||
icon={internalChecked() ? 'hugeicons:checkmark-circle-03' : 'hugeicons:circle'}
|
|
||||||
class="text-[14px] stroke-1"
|
|
||||||
classList={{ 'text-primary': internalChecked() }}
|
|
||||||
/>
|
|
||||||
<div>{mProps.children}</div>
|
<div>{mProps.children}</div>
|
||||||
<Show when={isNotNil(mProps.name)}>
|
<Show when={isNotNil(mProps.name)}>
|
||||||
<input type="hidden" name={mProps.name} value={internalChecked()} />
|
<input type="hidden" name={mProps.name} value={internalChecked()} />
|
||||||
|
Reference in New Issue
Block a user