feat: add option className/title type and feature (react-component#1020)

* ✨ feat(options): add className title type * ✨ feat(group options): add custom className
nova1751 · Jan 13, 2024 · b190480 · b190480
1 parent c93ff10
commit b190480
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,4 +40,5 @@ tsconfig.test.json
 .umi
 .dumi/tmp
 .dumi/tmp-test
-.dumi/tmp-production
+.dumi/tmp-production
+.history
diff --git a/README.md b/README.md
@@ -157,6 +157,8 @@ export default () => (
 | label | group label | String/React.Element | - |
 | key | - | String | - |
 | value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String | - |
+| className | same as `Option props` | String | '' |
+| title | same as `Option props`| String | - |
 
 ## Development
 

diff --git a/docs/examples/optgroup.tsx b/docs/examples/optgroup.tsx
@@ -18,8 +18,10 @@ const Test = () => (
         onChange={onChange}
         options={[{
           label: 'manager',
+          className: 'group-custom-className',
+          title:'group-custom-class',
           options: [
-            { label: 'jack', value: 'jack' },
+            { label: 'jack', value: 'jack', className:'jackClass1 jackClass2' , title:'jack-custom-Title' },
             { label: 'lucy', value: 'lucy' }
           ],
         }, {

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
@@ -319,7 +319,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
 
             return (
               <div
-                className={classNames(itemPrefixCls, `${itemPrefixCls}-group`)}
+                className={classNames(itemPrefixCls, `${itemPrefixCls}-group`, data.className)}
                 title={groupTitle}
               >
                 {label !== undefined ? label : key}

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -91,6 +91,8 @@ export interface FieldNames {
 
 export interface BaseOptionType {
   disabled?: boolean;
+  className?: string;
+  title?: string;
   [name: string]: any;
 }