From 722c7b075dc9689bac75c223be2c34fd593bce5d Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 12 Aug 2025 14:50:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=20RadioG?=
 =?UTF-8?q?roup=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现了一个新的 RadioGroup 组件，用于管理一组单选按钮
- 组件支持 name、options、value、disabled 和 onChange 属性
- 使用 Solid.js 的信号和效果来处理选中值和禁用状态
- 添加了隐藏输入字段以支持表单提交
---
 src/components/RadioGroup.tsx | 74 +++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/RadioGroup.tsx

diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
new file mode 100644
index 0000000..519a4f5
--- /dev/null
+++ b/src/components/RadioGroup.tsx
@@ -0,0 +1,74 @@
+import { isNotNil } from 'es-toolkit';
+import {
+  Component,
+  createEffect,
+  createMemo,
+  createSignal,
+  Index,
+  JSX,
+  mergeProps,
+  Show,
+} from 'solid-js';
+import Radio from './Radio';
+
+type Option = {
+  label: string | JSX.Element;
+  value: string | number | symbol | boolean;
+};
+
+interface RadioGroupProps {
+  name?: string;
+  options?: Option[];
+  value?: Option['value'];
+  disabled?: boolean;
+  onChange?: (value?: Option['value']) => void;
+}
+
+const RadioGroup: Component<RadioGroupProps> = (props) => {
+  const mProps = mergeProps<RadioGroupProps[]>(
+    {
+      options: [],
+      disabled: false,
+    },
+    props,
+  );
+
+  const originalValue = createMemo(() => mProps.value);
+  const [selectedValue, setSelectedValue] = createSignal<Option['value'] | undefined>(undefined);
+
+  createEffect(() => {
+    if (isNotNil(originalValue()) && originalValue() !== selectedValue()) {
+      setSelectedValue(originalValue());
+    }
+  });
+
+  const handleSelect = (value: Option['value']) => {
+    if (mProps.disabled) {
+      return;
+    }
+    setSelectedValue(value);
+    mProps.onChange?.(selectedValue());
+  };
+
+  return (
+    <>
+      <Index each={mProps.options}>
+        {(option) => (
+          <Radio
+            checked={selectedValue() === option().value}
+            disabled={mProps.disabled}
+            onChange={() => {
+              handleSelect(option().value);
+            }}>
+            {option().label}
+          </Radio>
+        )}
+      </Index>
+      <Show when={isNotNil(mProps.name)}>
+        <input type="hidden" name={mProps.name} value={selectedValue()} />
+      </Show>
+    </>
+  );
+};
+
+export default RadioGroup;