- enable hidden, disabled props in OptionListItem for <Select/>

edwardfxiao · Oct 23, 2023 · 86d37cc · 86d37cc
1 parent 641099d
commit 86d37cc
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 4.9.10
+
+- enable `hidden`, `disabled` props in OptionListItem for `<Select/>`
+
 # 4.9.9
 
 - `customStyleOptionListWrapper` for `<Select/>`

diff --git a/docs/v4-doc.md b/docs/v4-doc.md
@@ -341,7 +341,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 |keyword                           |  Opt  |  Str   |Show a keyword for search box.               |  ''        |
 |**validate**                      |**Opt**|**Bool**|                                             |**false**   |
 |**validationCallback**           |**Opt**|**Func**|                                             |**none**    |
-|**optionList**                    |**Req**|**Array**|**[{id: '1', name: 'Twin Peaks', icon: 'optional']**              |**[]**          |
+|**optionList**                    |**Req**|**Array**|**[{id: '1', name: 'Twin Peaks', icon: 'optional', hidden: false, disabled: false}]**              |**[]**          |
 |classNameSelect                   |  Opt  |  Str   |                                             |  ""        |
 |classNameWrapper                  |  Opt  |  Str   |                                             |  ""        |
 |classNameContainer                |  Opt  |  Str   |                                             |  ""        |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-inputs-validation",
-  "version": "4.9.9",
+  "version": "4.9.10",
   "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
@@ -105,6 +105,8 @@ interface OptionListItem {
   id: string;
   name: string;
   icon?: string;
+  hidden?: boolean;
+  disabled?: boolean;
 }
 interface Props {
   attributesWrapper?: React.HTMLAttributes<HTMLButtonElement>;
@@ -213,7 +215,7 @@ const component: React.FC<Props> = ({
   const $elItemsWrapper: { [key: string]: any } | null = $itemsWrapper;
   const $itemsRef: { [key: string]: any } = [];
   const filteredOptionList = useMemo(() => {
-    let res = optionList;
+    let res = optionList.filter(i => !i.hidden);
     if (res.length) {
       if (stateKeyword[0]) {
         res = optionList.filter(i => i.name.toLowerCase().includes(stateKeyword[0].toLowerCase()));
@@ -389,7 +391,10 @@ const component: React.FC<Props> = ({
     }
   }, []);
   const handleOnItemClick = useCallback(
-    (item: object, e: React.MouseEvent<HTMLElement>) => {
+    (item: OptionListItem, e: React.MouseEvent<HTMLElement>) => {
+      if (item.disabled) {
+        return;
+      }
       handleOnChange(item, e);
       stateKeyword[1]('');
     },
@@ -603,20 +608,25 @@ const component: React.FC<Props> = ({
   let optionListHtml;
   const item = getItem(optionList, String(value));
   if (filteredOptionList.length) {
-    optionListHtml = filteredOptionList.map((i, k) => (
-      <Option
-        key={k}
-        index={k}
-        id={`react-inputs-validation__select_option-${i.id}`}
-        className={String(i.id) === String(value) ? `${selectOptionListItemClass} ${reactInputsValidationCss['active']}` : `${selectOptionListItemClass}`}
-        item={i}
-        customStyleOptionListItem={customStyleOptionListItem}
-        onClick={handleOnItemClick}
-        onMouseOver={handleOnItemMouseOver}
-        onMouseMove={handleOnItemMouseMove}
-        onMouseOut={handleOnItemMouseOut}
-      />
-    ));
+    optionListHtml = filteredOptionList.map((i, k) => {
+      const activeClassName = String(i.id) === String(value) ? reactInputsValidationCss['active'] : '';
+      const disabledClassName = i.disabled ? reactInputsValidationCss['disabled'] : '';
+      const itemclassName = `${selectOptionListItemClass} ${activeClassName} ${disabledClassName}`;
+      return (
+        <Option
+          key={k}
+          index={k}
+          id={`react-inputs-validation__select_option-${i.id}`}
+          className={itemclassName}
+          item={i}
+          customStyleOptionListItem={customStyleOptionListItem}
+          onClick={handleOnItemClick}
+          onMouseOver={handleOnItemMouseOver}
+          onMouseMove={handleOnItemMouseMove}
+          onMouseOut={handleOnItemMouseOut}
+        />
+      );
+    });
   } else {
     if (showSearch) {
       optionListHtml = (
@@ -724,7 +734,7 @@ interface OptionProps {
   className?: string;
   item?: OptionListItem;
   customStyleOptionListItem?: React.CSSProperties;
-  onClick?: (res: object, e: React.MouseEvent<HTMLElement>) => void;
+  onClick?: (res: OptionListItem, e: React.MouseEvent<HTMLElement>) => void;
   onMouseOver?: (res: number) => void;
   onMouseMove?: () => void;
   onMouseOut?: () => void;

diff --git a/src/js/Inputs/react-inputs-validation.css b/src/js/Inputs/react-inputs-validation.css
@@ -429,6 +429,12 @@ input[type='checkbox'] {
   display: block;
 }
 
+.select__options-item.disabled{
+  color: #ccc !important;
+  background: #f8f8f8 !important;
+  cursor: not-allowed;
+}
+
 .select__options-item span {
   padding: 0 10px;
 }