added leading icon and trailing icons and bug fix for state select

Author: nitesh.singh

README.md

@@ -13,10 +13,12 @@
 A React component which provides multi select functionality for nested option list of continent -> country -> state with various features like selection limit, CSS customization, checkbox, search option, disable preselected values, control nested level keyboard navigation for accessibility and grouping features. Also it has feature to behave like normal dropdown(means single select dropdown).
 
 
- <img src="./images/ss_4.png" width="200"/>
-<div align="center">
+<div>
   <div style="display: flex;">
+   <img src="./images/ss_4.png" width="200"/>
     <img src="./images/ss_7.png" width="150" />
+  </div>
+  <div style="display: flex;">
     <img src="./images/ss8.png" width="150" /> 
     <img src="./images/ss_6.png" width="150" />
   </div>
@@ -86,7 +88,8 @@ onChange(e_selected) {
 | `width` | `number` | `360` | width of the component to display dropdown.
 | `enableButton` | `bool` | `true` | Make it `false` to hide the button.
 | `trailing` | `bool` | `true` | Make it `false` to hide the trailing message ex- 0 of 24 selected'.
-| `leading` | `bool` | `true` | Make it `false` to hide the leading search icon '.
+| `leading` | `bool` | `true` | Make it `false` to hide the leading icon in search box'.
+| `trailingIcon` | `bool` | `true` | Make it `false` to hide the trailing icon in search box'.
 | `state` | `bool` | `true` | Option to show or hide the state option list .make it `false` to hide state list.
 | `style` | `object` | `{}` | CSS Customization for multi-nested-select. Refer below object for **css customization.
 | `continent` | `bool` | `true` | Option to show or hide the continent option list .make it `false` to hide continent list.

example/src/App.css

@@ -44,5 +44,5 @@ td{
   /* justify-content: center; */
   font-size: calc(10px + 2vmin);
   color: white;
-  margin-bottom: 800px;
+  /* margin-bottom: 800px; */
 }

example/src/App.js

@@ -34,7 +34,7 @@ const App = () => {
     }
   }];
   const callbackFUnction = (value) => {
-    console.log(value);
+    console.log("value", value);
     setResponse(value);
   }
 
@@ -45,12 +45,14 @@ const App = () => {
       <div className='center-component'>
         <NestedSelect
           buttonContent="Save Selected"
-          enableButton={false}
+          enableButton={true}
           state={true}
-          // selectLimit={3}
-          leading={true}
-          continent={true}
-          selectedValue={data}
+          // leading={true}
+          // trailing={true}
+          // trailingIcon={true}
+          continent={false}
+          // selectedValue={data}
+          onChange={(v) => console.log("okay", v)}
           callback={(val) => callbackFUnction(val)}/>
       </div>
       <h1>Selected Country-state</h1>

images/ss_4.png

@@ -1,11 +1,11 @@
 {
   "name": "multi-nested-select",
-  "version": "1.1.5",
-  "description": "",
+  "version": "1.1.6",
+  "description": "multi-nested-select package",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
   "scripts": {
-    "build": "webpack --mode production",
+    "build": "webpack --mode production --watch",
     "clean": "rm -rf dist",
     "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" dist"
   },

package-lock.json

@@ -16,9 +16,9 @@
     color: white;
     font-size: 16px;
     cursor: pointer;
-    box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
+    /* box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
         rgb(0 0 0 / 14%) 0px 1px 1px 0px,
-        rgb(0 0 0 / 12%) 0px 1px 3px 0px;
+        rgb(0 0 0 / 12%) 0px 1px 3px 0px; */
 }
 
 .NSI-select-drop-down-menu-button:disabled {

package.json

@@ -5,35 +5,43 @@ import './ActionButton.css';
 function ActionButton({ 
   value,
   callback,
+  setIsLoading,
   buttonContent,
   buttonClass,
-  closeDropDown
+  closeDropDown,
+  setIsExpand,
+  isExpand
 }: ActionButtonProps) {
 
-  const [isLoading, setIsloading] = useState<boolean>(false);
+  const [isLoading, setIsloadingButton] = useState<boolean>(false);
 
   useEffect(() => {
-    if (value.length == 0 ||
+    if (value?.length == 0 ||
       value == null ||
-      value == undefined ||
-      value === []) {
-      setIsloading(true);
+      value == undefined
+      ) {
+        setIsloadingButton(true);
     } else {
-      setIsloading(false);
+      setIsloadingButton(false);
     }
   }, [value]);
 
   const onTrigerSave = () => {
-    if (value.length == 0 ||
+    if (value?.length == 0 ||
       value == null ||
-      value == undefined ||
-      value == []) {
-      setIsloading(true);
+      value == undefined) {
+      setIsloadingButton(true);
       console.log("Nested select :- Please select some value");
     } else {
-      setIsloading(true);
+      setIsloadingButton(true);
       if(callback){
         callback(value);
+        if(setIsLoading){
+          setIsLoading(true);
+        }
+        if(setIsExpand && isExpand){
+          setIsExpand(!isExpand);
+        }
       }
     }
      closeDropDown(false);

src/Elements/ActionButton.css

@@ -13,7 +13,7 @@
   height: 40px;
   border-radius: 5px;
   outline: none;
-  font-size: 18px;
+  font-size: 16px;
   text-transform: capitalize;
   padding-left: 5px;
   border: 1px solid #dcdcdc;
@@ -35,6 +35,25 @@
   width: 16px;
   height: 16px;
 }
+.NSI-select-input-trailing{
+  position: absolute;
+  right: -32px;
+  width: 16px;
+  height: 16px;
+  background-color: white;
+  padding: 12px;
+  top: 2px;
+}
+.NSI-select-input-trailing-180{
+  position: absolute;
+  transform: rotateZ(180deg);
+  top: 2px;
+  right: -32px;
+  width: 16px;
+  height: 16px;
+  background-color: white;
+  padding: 12px;
+}
 .NSI-continent-text{
   list-style: none;
 }
@@ -78,7 +97,7 @@
   justify-content: space-between;
   margin-left: 20px;
   align-items: center;
-  font-size: 18px;
+  font-size: 14px;
   text-align: left;
 }
 
@@ -155,7 +174,7 @@
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   border-radius: 5px;
   padding: 8px;
-  width: 98% ;
+  width: 104% ;
   box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
     rgb(0 0 0 / 14%) 0px 1px 1px 0px,
     rgb(0 0 0 / 12%) 0px 1px 3px 0px;