l-min-components 1.0.690 → 1.0.694

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -185,7 +185,7 @@ const AppMainLayout = () => {
                         : window.location.pathname.includes("developer") ||
                           window.location.hostname.includes("developer")
                         ? "developer"
-                        : defaultAcct?.toLowerCase()
+                        : "developer"
                     }
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}

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

@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import LoaderCustom from "../customLoader";
 import {
   ControlInput,
@@ -7,7 +7,10 @@ import {
   DropDownControls,
   DropDownHeader,
   DropDownItem,
-} from "./styles";
+  DownIcon,
+  Tick,
+} from "./DropDownComponentStyles";
+
 /**
  * @param {{
  * dropdownData: Array,
@@ -26,21 +29,14 @@ import {
  */
 
 const DropDownComponent = (props) => {
-  // select state that dictates the current value.
   const [selected, setSelected] = useState(props.default);
-
-  // dropdown state that dictates if dropdown is dropped or not.
-  const [dropdown, setDropdown] = useState();
-
-  //search params
-  const [searchParam, setSearchParam] = useState();
+  const [dropdown, setDropdown] = useState(false);
+  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);
@@ -54,9 +50,10 @@ const DropDownComponent = (props) => {
     };
   }, []);
 
-  // useEffect to return a function value onChange
   useEffect(() => {
-    props?.onSelect && props?.onSelect(selected);
+    if (props.onSelect) {
+      props.onSelect(selected);
+    }
   }, [selected]);
 
   const handleDropdownToggle = () => {
@@ -65,9 +62,8 @@ const DropDownComponent = (props) => {
 
   const handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
-    const isBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjusted threshold to 10px
+    const isBottom = scrollTop + clientHeight >= scrollHeight - 10;
     if (isBottom) {
-      console.log("Near bottom, loading more data.");
       props.loadMoreData();
     }
   };
@@ -82,79 +78,74 @@ 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);
-            }}
-            // onClick={() => setDropdown(true)}
+            value={props.valueSelect?.name || selected?.name}
+            onChange={(e) => setSearchParam(e.target.value)}
             onClick={handleDropdownToggle}
           />
         ) : (
-          // <p onClick={() => setDropdown(!dropdown)}>
           <p onClick={handleDropdownToggle}>
-            {props?.valueSelect?.name ||
+            {props.valueSelect?.name ||
               selected?.name ||
-              props?.inputPlaceHolder}
+              props.inputPlaceHolder}
           </p>
         )}
-        {/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
-        <DownIcon onClick={handleDropdownToggle} />
+        <DownIcon onClick={handleDropdownToggle}>
+          <path d="M1 1L7 7L13 1" />
+        </DownIcon>
         {searchParam && dropdown && (
           <DropDownContent onScroll={handleScroll} ref={dropdownListRef}>
-            {props?.dropdownData?.map((dropdownItem, idx) => {
+            {props.dropdownData.map((dropdownItem, idx) => {
               if (
-                props?.dropdownData[idx]?.name
-                  ?.toLowerCase()
-                  .includes(searchParam?.toLowerCase())
-              )
+                dropdownItem.name
+                  .toLowerCase()
+                  .includes(searchParam.toLowerCase())
+              ) {
                 return (
                   <DropDownItem
                     key={idx}
                     onClick={() => {
                       setSelected(dropdownItem);
-                      setDropdown();
+                      setDropdown(false);
                     }}
                   >
-                    <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) => {
-              return (
-                <DropDownItem
-                  key={idx}
-                  onClick={() => {
-                    setSelected(dropdownItem);
-                    setDropdown();
-                  }}
-                >
-                  <span>{dropdownItem?.name}</span>
-                  {(props?.valueSelect || selected) === dropdownItem && (
-                    <Tick />
-                  )}
-                </DropDownItem>
-              );
-            })}
+            {props.dropdownData.map((dropdownItem, idx) => (
+              <DropDownItem
+                key={idx}
+                onClick={() => {
+                  setSelected(dropdownItem);
+                  setDropdown(false);
+                }}
+              >
+                <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>
@@ -164,44 +155,5 @@ 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>
-  );
-};
+export default DropDownComponent;

package/src/components/dropdown component/styles.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import(
-  "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap"
+  "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000&display=swap"
 );
 
 export const DropDownContainer = styled.div`
@@ -43,6 +43,10 @@ export const ControlInput = styled.input`
   border: none;
   cursor: caret;
   background: none;
+
+  &::placeholder {
+    color: #adb2b2; // Placeholder text color
+  }
 `;
 
 export const DropDownContent = styled.ul`
@@ -56,24 +60,18 @@ export const DropDownContent = styled.ul`
   max-height: 200px;
   overflow-y: scroll;
   scrollbar-width: thin;
-  /* "auto" or "thin" depending on browser support */
   scrollbar-color: transparent transparent;
-  /* color values for thumb and track */
 
   &::-webkit-scrollbar {
     width: 6px;
-    /* adjust as needed */
     background-color: transparent;
-    /* color value for track */
   }
 
   &::-webkit-scrollbar-thumb {
     background-color: transparent;
-    /* color value for thumb */
   }
-  // padding: 4px 10px;
-  .loader{
-    /* padding: 5px 0px; */
+
+  .loader {
     margin-bottom: 20px;
   }
 `;
@@ -104,3 +102,28 @@ export const DropDownItem = styled.li`
     }
   }
 `;
+
+export const DownIcon = styled.svg`
+  width: ${({ width }) => width || "18px"};
+  height: ${({ height }) => height || "9px"};
+  fill: none;
+  cursor: pointer;
+  path {
+    stroke: ${({ fill }) => fill || "#7C8080"};
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+`;
+
+export const Tick = styled.svg`
+  width: ${({ size }) => size || "16px"};
+  height: ${({ size }) => size || "16px"};
+  fill: none;
+  path {
+    stroke: ${({ stroke }) => stroke || "white"};
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+`;