feat: support name prop to enable grouping (#284)

* feat: support  prop to enable grouping

* add test

Author: thinkasany

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>
+  );
+}

docs/example.md

@@ -32,3 +32,7 @@ nav:
 ## rtl
 
 <code src="./demo/rtl.tsx"></code>
+
+## name
+
+<code src="./demo/name.tsx"></code>

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(

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);
+      });
+  });
 });