feat: handle value with undefined/null/``

Author: vagusX

docs/examples/basic.tsx

@@ -11,6 +11,12 @@ export default function App() {
  onChange={(e) => console.log(e.target.value, typeof e.target.value)}
  />
  </div>
+ <div className="wrapper">
+ <Segmented
+ options={['iOS', 'Android', null, undefined, '', 'Web']}
+ onChange={(e) => console.log(e.target.value, typeof e.target.value)}
+ />
+ </div>
  <div className="wrapper">
  <Segmented
  options={[13333333333, 157110000, 12110086]}

src/index.tsx

@@ -35,19 +35,13 @@ export interface SegmentedProps extends React.HTMLProps<HTMLDivElement> {
  motionName?: string;
 }
 
-function isLabledOption(
- option: RawOption | LabeledOption,
-): option is LabeledOption {
- return option === Object(option);
-}
-
 function normalizeOptions(options: Options): LabeledOption[] {
  return options.map((option) => {
- if (isLabledOption(option)) {
- return option;
+ if (typeof option === 'object') {
+ return option || {};
  }
  return {
- label: String(option),
+ label: option?.toString(),
  value: option,
  };
  });

tests/__snapshots__/index.spec.tsx.snap

@@ -100,6 +100,48 @@ exports[`rc-segmented render segmented with options 1`] = `
 </div>
 `;
 
+exports[`rc-segmented render segmented with options null/undefined 1`] = `
+<div
+ class="rc-segmented rc-segmented-disabled"
+>
+ <label
+ class="rc-segmented-item rc-segmented-item-selected"
+ >
+ <input
+ checked=""
+ class="rc-segmented-item-input"
+ type="radio"
+ />
+ <span
+ class="rc-segmented-item-label"
+ />
+ </label>
+ <label
+ class="rc-segmented-item rc-segmented-item-selected"
+ >
+ <input
+ checked=""
+ class="rc-segmented-item-input"
+ type="radio"
+ />
+ <span
+ class="rc-segmented-item-label"
+ />
+ </label>
+ <label
+ class="rc-segmented-item"
+ >
+ <input
+ class="rc-segmented-item-input"
+ type="radio"
+ />
+ <span
+ class="rc-segmented-item-label"
+ />
+ </label>
+</div>
+`;
+
 exports[`rc-segmented render segmented with options: 1 1`] = `
 <div
  class="rc-segmented"

tests/index.spec.tsx

@@ -199,6 +199,23 @@ describe('rc-segmented', () => {
  ).toEqual([true, false, false]);
  });
 
+ it('render segmented with options null/undefined', () => {
+ const handleValueChange = jest.fn();
+ const wrapper = mount(
+ <Segmented
+ options={[null, undefined, ''] as any}
+ disabled
+ onChange={(e) => handleValueChange(e.target.value)}
+ />,
+ );
+ expect(wrapper.render()).toMatchSnapshot();
+ expect(
+ wrapper
+ .find('.rc-segmented-item-label')
+ .map((n) => n.getDOMNode().textContent),
+ ).toEqual(['', '', '']);
+ });
+
  it('render segmented with className and other html attribues', () => {
  const wrapper = mount(
  <Segmented