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 ( +
+
+ console.log(value, typeof value)} + /> +
+
+ ); +} 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 + +## name + + 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 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, value: SegmentedRawOption, @@ -90,6 +92,7 @@ const InternalSegmentedOption: React.FC<{ label, title, value, + name, onChange, }) => { const handleChange = (event: React.ChangeEvent) => { @@ -106,6 +109,7 @@ const InternalSegmentedOption: React.FC<{ })} > ( disabled, defaultValue, value, + name, onChange, className = '', motionName = 'thumb-motion', @@ -208,6 +213,7 @@ const Segmented = React.forwardRef( {segmentedOptions.map((segmentedOption) => ( { offsetParentSpy.mockRestore(); }); + + it('all children should have a name property', () => { + const GROUP_NAME = 'GROUP_NAME'; + const { container } = render( + , + ); + + container + .querySelectorAll('input[type="radio"]') + .forEach((el) => { + expect(el.name).toEqual(GROUP_NAME); + }); + }); });