From 9e6b3e8ff1e48a6e84d4b418d730cf3e5adb23c7 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Wed, 20 Nov 2024 16:35:30 +0800
Subject: [PATCH 1/2] feat: support  prop to enable grouping

---
 docs/demo/name.tsx | 17 +++++++++++++++++
 docs/example.md    |  4 ++++
 src/index.tsx      |  6 ++++++
 3 files changed, 27 insertions(+)
 create mode 100644 docs/demo/name.tsx

diff --git a/docs/demo/name.tsx b/docs/demo/name.tsx
new file mode 100644
index 0000000..d62fe30
--- /dev/null
+++ b/docs/demo/name.tsx
@@ -0,0 +1,17 @@
+import Segmented from 'rc-segmented';
+import React from 'react';
+import '../../assets/style.less';
+
+export default function App() {
+  return (
+    <div>
+      <div className="wrapper">
+        <Segmented
+          name="group"
+          options={['iOS', 'Android', 'Web']}
+          onChange={(value) => console.log(value, typeof value)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/example.md b/docs/example.md
index 222034d..7570c5e 100644
--- a/docs/example.md
+++ b/docs/example.md
@@ -32,3 +32,7 @@ nav:
 ## rtl
 
 <code src="./demo/rtl.tsx"></code>
+
+## name
+
+<code src="./demo/name.tsx"></code>
diff --git a/src/index.tsx b/src/index.tsx
index 9a9b568..b251c27 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -40,6 +40,7 @@ export interface SegmentedProps<ValueType = SegmentedValue>
   direction?: 'ltr' | 'rtl';
   motionName?: string;
   vertical?: boolean;
+  name?: string;
 }
 
 function getValidTitle(option: SegmentedLabeledOption) {
@@ -78,6 +79,7 @@ const InternalSegmentedOption: React.FC<{
   label: React.ReactNode;
   title?: string;
   value: SegmentedRawOption;
+  name?: string;
   onChange: (
     e: React.ChangeEvent<HTMLInputElement>,
     value: SegmentedRawOption,
@@ -90,6 +92,7 @@ const InternalSegmentedOption: React.FC<{
   label,
   title,
   value,
+  name,
   onChange,
 }) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -106,6 +109,7 @@ const InternalSegmentedOption: React.FC<{
       })}
     >
       <input
+        name={name}
         className={`${prefixCls}-item-input`}
         aria-hidden="true"
         type="radio"
@@ -135,6 +139,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       disabled,
       defaultValue,
       value,
+      name,
       onChange,
       className = '',
       motionName = 'thumb-motion',
@@ -208,6 +213,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           {segmentedOptions.map((segmentedOption) => (
             <InternalSegmentedOption
               {...segmentedOption}
+              name={name}
               key={segmentedOption.value}
               prefixCls={prefixCls}
               className={classNames(

From 3a5906decd0a5f76c64dc15fb789c54885e31069 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Wed, 20 Nov 2024 20:52:12 +0800
Subject: [PATCH 2/2] add test

---
 tests/index.test.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index d94e47d..8641abf 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -650,4 +650,17 @@ describe('rc-segmented', () => {
 
     offsetParentSpy.mockRestore();
   });
+
+  it('all children should have a name property', () => {
+    const GROUP_NAME = 'GROUP_NAME';
+    const { container } = render(
+      <Segmented options={['iOS', 'Android', 'Web']} name={GROUP_NAME} />,
+    );
+
+    container
+      .querySelectorAll<HTMLInputElement>('input[type="radio"]')
+      .forEach((el) => {
+        expect(el.name).toEqual(GROUP_NAME);
+      });
+  });
 });