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

* ✨ feat(options):  add className title type

* ✨ feat(group options): add custom className

.gitignore

@@ -40,4 +40,5 @@ tsconfig.test.json
 .umi
 .dumi/tmp
 .dumi/tmp-test
-.dumi/tmp-production
+.dumi/tmp-production
+.history

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
 

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' }
           ],
         }, {

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}

src/Select.tsx

@@ -91,6 +91,8 @@ export interface FieldNames {
 
 export interface BaseOptionType {
   disabled?: boolean;
+  className?: string;
+  title?: string;
   [name: string]: any;
 }