- customStyleOptionListWrapper for <Select/>

edwardfxiao · Aug 11, 2023 · 641099d · 641099d
1 parent e54edfc
commit 641099d
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 4.9.9
+
+- `customStyleOptionListWrapper` for `<Select/>`
+
 # 4.9.8
 
 - `classNameInputBoxItem` for `<Checkbox/>`

diff --git a/docs/v4-doc.md b/docs/v4-doc.md
@@ -351,6 +351,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 |customStyleSelect                 |  Opt  |  Obj   |                                             |  {}        |
 |customStyleWrapper                |  Opt  |  Obj   |                                             |  {}        |
 |customStyleContainer              |  Opt  |  Obj   |                                             |  {}        |
+|customStyleOptionListWrapper      |  Opt  |  Obj   |                                             |  {}        |
 |customStyleOptionListContainer    |  Opt  |  Obj   |                                             |  {}        |
 |customStyleOptionListItem         |  Opt  |  Obj   |                                             |  {}        |
 |**onBlur**                       |**Opt**|**Func**                  |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.**                                                                                                            |**none**     |
@@ -396,6 +397,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
   customStyleSelect={{}} //Optional.[Object].Default: {}.
   customStyleWrapper={{}} //Optional.[Object].Default: {}.
   customStyleContainer={{}} //Optional.[Object].Default: {}.
+  customStyleOptionListWrapper={{}} //Optional.[Object].Default: {}.
   customStyleOptionListContainer={{}} //Optional.[Object].Default: {}.
   customStyleOptionListItem={{}} //Optional.[Object].Default: {}.
   onChange={(res, e) => {

diff --git a/example/index.tsx b/example/index.tsx
@@ -1111,6 +1111,7 @@ const Index: React.FC<Props> = memo(({}) => {
                     customStyleSelect={{}} // Optional.[Object].Default: {}.
                     customStyleWrapper={{}} // Optional.[Object].Default: {}.
                     customStyleContainer={{}} // Optional.[Object].Default: {}.
+                    customStyleOptionListWrapper={{}} // Optional.[Object].Default: {}.
                     customStyleOptionListContainer={{ maxHeight: '200px', overflow: 'auto', fontSize: '14px' }} // Optional.[Object].Default: {}.
                     customStyleOptionListItem={{}} // Optional.[Object].Default: {}.
                     onChange={(res, e) => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-inputs-validation",
-  "version": "4.9.8",
+  "version": "4.9.9",
   "description": "A react component for form inputs validation.",
   "main": "index.js",
   "types": "./lib/index.d.ts",

diff --git a/src/js/Inputs/Select.tsx b/src/js/Inputs/Select.tsx
@@ -143,6 +143,7 @@ interface Props {
   customStyleWrapper?: React.CSSProperties;
   customStyleContainer?: React.CSSProperties;
   customStyleSelect?: React.CSSProperties;
+  customStyleOptionListWrapper?: React.CSSProperties;
   customStyleOptionListContainer?: React.CSSProperties;
   customStyleDropdownIcon?: React.CSSProperties;
   customStyleOptionListItem?: React.CSSProperties;
@@ -176,6 +177,7 @@ const component: React.FC<Props> = ({
   customStyleContainer = {},
   customStyleSelect = {},
   customStyleOptionListItem = {},
+  customStyleOptionListWrapper = {},
   customStyleOptionListContainer = {},
   customStyleDropdownIcon = {},
   validationOption = {},
@@ -264,12 +266,15 @@ const component: React.FC<Props> = ({
       onClick(e);
     }
   }, []);
-  const handleOnChange = useCallback((item: object, e: React.MouseEvent<HTMLElement>) => {
-    if (disabled) {
-      return;
-    }
-    onChange && onChange(item, e);
-  }, [disabled]);
+  const handleOnChange = useCallback(
+    (item: object, e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) {
+        return;
+      }
+      onChange && onChange(item, e);
+    },
+    [disabled],
+  );
   const check = useCallback(() => {
     const { name, check, locale, required, msgOnSuccess } = option;
     if (!check) {
@@ -383,10 +388,13 @@ const component: React.FC<Props> = ({
       }
     }
   }, []);
-  const handleOnItemClick = useCallback((item: object, e: React.MouseEvent<HTMLElement>) => {
-    handleOnChange(item, e);
-    stateKeyword[1]('');
-  }, [disabled]);
+  const handleOnItemClick = useCallback(
+    (item: object, e: React.MouseEvent<HTMLElement>) => {
+      handleOnChange(item, e);
+      stateKeyword[1]('');
+    },
+    [disabled],
+  );
   const handleOnItemMouseOver = useCallback((index: number) => {
     globalVariableCurrentFocus = index;
     addActive();
@@ -666,7 +674,7 @@ const component: React.FC<Props> = ({
           <div className={selectClass} style={customStyleSelect}>
             {selectorHtml}
           </div>
-          <div className={selectOptionListWrapperClass}>
+          <div className={selectOptionListWrapperClass} style={customStyleOptionListWrapper}>
             {showSearch && (
               <div ref={$searchInputWrapper}>
                 <div className={reactInputsValidationCss[`${TYPE}__searchInputWrapper`]}>
@@ -749,7 +757,16 @@ export const Option: React.FC<OptionProps> = memo(
       onMouseOut();
     }, []);
     return (
-      <a id={id} title={item.name} onMouseOver={handleOnMouseOver} onMouseMove={handleOnMouseMove} onMouseOut={handleOnMouseOut} className={className} style={customStyleOptionListItem} onClick={handleOnClick}>
+      <a
+        id={id}
+        title={item.name}
+        onMouseOver={handleOnMouseOver}
+        onMouseMove={handleOnMouseMove}
+        onMouseOut={handleOnMouseOut}
+        className={className}
+        style={customStyleOptionListItem}
+        onClick={handleOnClick}
+      >
         {item.icon && <img src={item.icon} className={reactInputsValidationCss[`${TYPE}__optionItem_icon`]} />}
         {<span className={reactInputsValidationCss[`${TYPE}__optionItem_name`]}>{item.name}</span>}
       </a>