l-min-components 1.0.694 → 1.0.697

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.694",
+  "version": "1.0.697",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/dropdown component/dropdown.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, CSSProperties, useEffect, useRef } from "react";
 import LoaderCustom from "../customLoader";
 import {
   ControlInput,
@@ -7,10 +7,7 @@ import {
   DropDownControls,
   DropDownHeader,
   DropDownItem,
-  DownIcon,
-  Tick,
-} from "./DropDownComponentStyles";
-
+} from "./styles";
 /**
  * @param {{
  * dropdownData: Array,
@@ -29,14 +26,21 @@ import {
  */
 
 const DropDownComponent = (props) => {
+  // select state that dictates the current value.
   const [selected, setSelected] = useState(props.default);
-  const [dropdown, setDropdown] = useState(false);
-  const [searchParam, setSearchParam] = useState("");
+
+  // dropdown state that dictates if dropdown is dropped or not.
+  const [dropdown, setDropdown] = useState();
+
+  //search params
+  const [searchParam, setSearchParam] = useState();
   const { isLoading, showLoader = false } = props;
 
+  // dropdown menu ref
   const dropdownRef = useRef(null);
   const dropdownListRef = useRef(null);
 
+  // click outside closes the dropdown menu
   const handleClickOutside = (event) => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setDropdown(false);
@@ -50,10 +54,9 @@ const DropDownComponent = (props) => {
     };
   }, []);
 
+  // useEffect to return a function value onChange
   useEffect(() => {
-    if (props.onSelect) {
-      props.onSelect(selected);
-    }
+    props?.onSelect && props?.onSelect(selected);
   }, [selected]);
 
   const handleDropdownToggle = () => {
@@ -62,8 +65,9 @@ const DropDownComponent = (props) => {
 
   const handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
-    const isBottom = scrollTop + clientHeight >= scrollHeight - 10;
+    const isBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjusted threshold to 10px
     if (isBottom) {
+      console.log("Near bottom, loading more data.");
       props.loadMoreData();
     }
   };
@@ -78,74 +82,79 @@ const DropDownComponent = (props) => {
 
   return (
     <DropDownContainer
-      className={props.className}
+      className={props?.className}
       ref={dropdownRef}
       onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
       onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
     >
-      <DropDownHeader>{props.header}</DropDownHeader>
+      <DropDownHeader>{props?.header}</DropDownHeader>
       <DropDownControls>
-        {props.searchable ? (
+        {props?.searchable ? (
           <ControlInput
-            placeholder={props.inputPlaceHolder || "Select Dropdown"}
+            placeholder={props?.inputPlaceHolder || "Select Dropdown"}
             type="text"
-            value={props.valueSelect?.name || selected?.name}
-            onChange={(e) => setSearchParam(e.target.value)}
+            value={props?.valueSelect?.name || selected?.name}
+            onChange={(e) => {
+              setSearchParam(e.target.value);
+            }}
+            // onClick={() => setDropdown(true)}
             onClick={handleDropdownToggle}
           />
         ) : (
+          // <p onClick={() => setDropdown(!dropdown)}>
           <p onClick={handleDropdownToggle}>
-            {props.valueSelect?.name ||
+            {props?.valueSelect?.name ||
               selected?.name ||
-              props.inputPlaceHolder}
+              props?.inputPlaceHolder}
           </p>
         )}
-        <DownIcon onClick={handleDropdownToggle}>
-          <path d="M1 1L7 7L13 1" />
-        </DownIcon>
+        {/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
+        <DownIcon onClick={handleDropdownToggle} />
         {searchParam && dropdown && (
           <DropDownContent onScroll={handleScroll} ref={dropdownListRef}>
-            {props.dropdownData.map((dropdownItem, idx) => {
+            {props?.dropdownData?.map((dropdownItem, idx) => {
               if (
-                dropdownItem.name
-                  .toLowerCase()
-                  .includes(searchParam.toLowerCase())
-              ) {
+                props?.dropdownData[idx]?.name
+                  ?.toLowerCase()
+                  .includes(searchParam?.toLowerCase())
+              )
                 return (
                   <DropDownItem
                     key={idx}
                     onClick={() => {
                       setSelected(dropdownItem);
-                      setDropdown(false);
+                      setDropdown();
                     }}
                   >
-                    <span>{dropdownItem.name}</span>
-                    {(props.valueSelect || selected) === dropdownItem && (
+                    <span>{dropdownItem?.name}</span>
+                    {(props?.valueSelect || selected) === dropdownItem && (
                       <Tick />
                     )}
                   </DropDownItem>
                 );
-              }
-              return null;
             })}
           </DropDownContent>
         )}
         {!searchParam && dropdown && (
           <DropDownContent onScroll={handleScroll} ref={dropdownListRef}>
-            {props.dropdownData.map((dropdownItem, idx) => (
-              <DropDownItem
-                key={idx}
-                onClick={() => {
-                  setSelected(dropdownItem);
-                  setDropdown(false);
-                }}
-              >
-                <span>{dropdownItem.name}</span>
-                {(props.valueSelect || selected) === dropdownItem && <Tick />}
-              </DropDownItem>
-            ))}
+            {props?.dropdownData?.map((dropdownItem, idx) => {
+              return (
+                <DropDownItem
+                  key={idx}
+                  onClick={() => {
+                    setSelected(dropdownItem);
+                    setDropdown();
+                  }}
+                >
+                  <span>{dropdownItem?.name}</span>
+                  {(props?.valueSelect || selected) === dropdownItem && (
+                    <Tick />
+                  )}
+                </DropDownItem>
+              );
+            })}
             <div className={showLoader ? "loader" : ""}>
-              {isLoading && showLoader && props.dropdownData.length > 0 && (
+              {isLoading && showLoader && props?.dropdownData?.length > 0 && (
                 <LoaderCustom />
               )}
             </div>
@@ -155,5 +164,44 @@ const DropDownComponent = (props) => {
     </DropDownContainer>
   );
 };
-
 export default DropDownComponent;
+
+export const DownIcon = ({ width, height, fill, onClick }) => {
+  return (
+    <svg
+      width={width || "18"}
+      height={height || "9"}
+      viewBox="0 0 14 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+    >
+      <path
+        d="M1 1L7 7L13 1"
+        stroke={fill || "#7C8080"}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+export const Tick = ({ size, stroke }) => {
+  return (
+    <svg
+      width={size || "16"}
+      height={size || "16"}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.3828 4.23828L5.82031 11.7383L3.00781 8.92578"
+        stroke={stroke || "white"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};