feat: support htmlTitle for label (#19)

Author: vagusX

docs/demo/html-title.md

@@ -0,0 +1,3 @@
+## html-title
+
+<code src="../examples/html-title.tsx">

docs/examples/html-title.tsx

@@ -0,0 +1,41 @@
+import '../../assets/style.less';
+import React from 'react';
+import Segmented from 'rc-segmented';
+
+export default function App() {
+  return (
+    <div>
+      <div className="wrapper">
+        <Segmented options={['iOS', 'Android', 'Web']} />
+      </div>
+      <div className="wrapper">
+        <Segmented
+          options={[
+            {
+              label: 'iOS',
+              value: 'iOS',
+            },
+            {
+              label: 'Android',
+              value: 'Android',
+              title: 'Android12',
+            },
+            {
+              label: <h3>Web</h3>,
+              value: 'Web',
+            },
+          ]}
+        />
+      </div>
+      <div className="wrapper">
+        <Segmented
+          options={[
+            { label: 'iOS', value: 'iOS', title: 'IOS' },
+            { label: 'Android', value: 'Android', title: '' },
+            { label: <h1>Web</h1>, value: 'Web', title: 'WEB' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}

src/index.tsx

@@ -14,6 +14,10 @@ export interface SegmentedLabeledOption {
   disabled?: boolean;
   label: React.ReactNode;
   value: SegmentedRawOption;
+  /**
+   * html `title` property for label
+   */
+  title?: string;
 }
 
 type SegmentedOptions = (SegmentedRawOption | SegmentedLabeledOption)[];
@@ -33,13 +37,31 @@ export interface SegmentedProps extends React.HTMLProps<HTMLDivElement> {
   motionName?: string;
 }
 
+function getValidTitle(option: SegmentedLabeledOption) {
+  if (typeof option.title !== 'undefined') {
+    return option.title;
+  }
+
+  // read `label` when title is `undefined`
+  if (typeof option.label !== 'object') {
+    return option.label?.toString();
+  }
+}
+
 function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] {
   return options.map((option) => {
-    if (typeof option === 'object') {
-      return option || {};
+    if (typeof option === 'object' && option !== null) {
+      const validTitle = getValidTitle(option);
+
+      return {
+        ...option,
+        title: validTitle,
+      };
     }
+
     return {
       label: option?.toString(),
+      title: option?.toString(),
       value: option,
     };
   });
@@ -56,12 +78,22 @@ const InternalSegmentedOption: React.FC<{
   disabled?: boolean;
   checked: boolean;
   label: React.ReactNode;
+  title?: string;
   value: SegmentedRawOption;
   onChange: (
     e: React.ChangeEvent<HTMLInputElement>,
     value: SegmentedRawOption,
   ) => void;
-}> = ({ prefixCls, className, disabled, checked, label, value, onChange }) => {
+}> = ({
+  prefixCls,
+  className,
+  disabled,
+  checked,
+  label,
+  title,
+  value,
+  onChange,
+}) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled) {
       return;
@@ -83,7 +115,9 @@ const InternalSegmentedOption: React.FC<{
         checked={checked}
         onChange={handleChange}
       />
-      <div className={`${prefixCls}-item-label`}>{label}</div>
+      <div className={`${prefixCls}-item-label`} title={title}>
+        {label}
+      </div>
     </label>
   );
 };