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