l-min-components 1.0.480 → 1.0.485

package/package.json

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

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

@@ -0,0 +1,201 @@
+import React, { useState, CSSProperties, useEffect, useRef } from "react";
+import LoaderCustom from "../loader";
+import {
+  ControlInput,
+  DropDownContainer,
+  DropDownContent,
+  DropDownControls,
+  DropDownHeader,
+  DropDownItem,
+} from "./styles";
+/**
+ * @param {{
+ * dropdownData: Array,
+ * header: string,
+ * searchable: boolean,
+ * className: string,
+ * onSelect: Function,
+ * inputPlaceHolder: string,
+ * default: {name:  string | number, [key: string]: string | number}
+ * toggleOnHover: boolean
+ * loadMoreData: Function
+ * isLoading: boolean,
+ * showLoader: boolean,
+ * }} props - properties of the dropdown component
+ */
+
+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 { 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)
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  // useEffect to return a function value onChange
+  useEffect(() => {
+    props?.onSelect && props?.onSelect(selected);
+  }, [selected]);
+
+  const handleDropdownToggle = () => {
+    setDropdown(prevDropdown => !prevDropdown);
+  };
+
+
+  const handleScroll = (e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.target;
+    const isBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjusted threshold to 10px
+    if (isBottom) {
+      console.log("Near bottom, loading more data.");
+      props.loadMoreData();
+    }
+  };
+  
+  useEffect(() => {
+    const listElement = dropdownListRef.current;
+    if (listElement) {
+      listElement.addEventListener('scroll', handleScroll);
+      return () => listElement.removeEventListener('scroll', handleScroll);
+    }
+  }, [props.dropdownData]);
+  
+
+  return (
+    <DropDownContainer 
+      className={props?.className} 
+      ref={dropdownRef}
+      onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
+      onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
+    >
+      <DropDownHeader>{props?.header}</DropDownHeader>
+      <DropDownControls>
+        {props?.searchable ? (
+          <ControlInput
+            placeholder={props?.inputPlaceHolder || "Select Dropdown"}
+            type="text"
+            value={selected?.name}
+            onChange={(e) => {
+              setSearchParam(e.target.value);
+            }}
+            // onClick={() => setDropdown(true)}
+            onClick={handleDropdownToggle}
+          />
+        ) : (
+          // <p onClick={() => setDropdown(!dropdown)}>
+            <p onClick={handleDropdownToggle}>
+            {selected?.name || props?.inputPlaceHolder}
+          </p>
+        )}
+        {/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
+        <DownIcon onClick={handleDropdownToggle} />
+        {searchParam && dropdown && (
+          <DropDownContent onScroll={handleScroll} ref={dropdownListRef}>
+            {props?.dropdownData?.map((dropdownItem, idx) => {
+              if (
+                props?.dropdownData[idx]?.name
+                  ?.toLowerCase()
+                  .includes(searchParam?.toLowerCase())
+              )
+                return (
+                  <DropDownItem
+                    key={idx}
+                    onClick={() => {
+                      setSelected(dropdownItem);
+                      setDropdown();
+                    }}
+                  >
+                    <span>{dropdownItem?.name}</span>
+                    {selected === dropdownItem && <Tick />}
+                  </DropDownItem>
+                );
+            })}
+          </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>
+                  {selected === dropdownItem && <Tick />}
+                </DropDownItem>
+              );
+            })}
+            <div className={showLoader ? "loader" : ""}>
+                {isLoading && showLoader && props?.dropdownData?.length > 0 && <LoaderCustom />}
+            </div>
+             
+          </DropDownContent>
+        )}
+      </DropDownControls>
+    </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>
+  );
+};

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

@@ -50,7 +50,8 @@ export const DropDownContent = styled.ul`
   top: 35px;
   left: 0;
   list-style-type: none;
-  padding-left: 20px;
+  padding-left: 25px;
+  padding-bottom: 0px;
   width: 100%;
   max-height: 200px;
   overflow-y: scroll;
@@ -71,6 +72,10 @@ export const DropDownContent = styled.ul`
     /* color value for thumb */
   }
   // padding: 4px 10px;
+  .loader{
+    /* padding: 5px 0px; */
+    margin-bottom: 20px;
+  }
 `;
 
 export const DropDownItem = styled.li`

package/src/components/messageAddon/messages/chatheader/index.jsx

@@ -19,7 +19,8 @@ const ChatHeader = ({
   deleteChatModal,
   userFullName,
   courseName,
-  userType
+  userType,
+  userAvatar
 }) => {
   // handle click outside dropdown container
   const dropdownContainer = useRef(null);
@@ -48,9 +49,9 @@ const ChatHeader = ({
           <div className="avatar-profile">
             <img
               src={
-                !chatRecipient?.profile_picture?.length
-                  ? Avatar
-                  : chatRecipient?.profile_picture
+                userAvatar
+                  ? userAvatar
+                  : Avatar
               }
               alt=""
             />

package/src/components/messageAddon/messages/index.jsx

@@ -13,6 +13,7 @@ const MessagesAddon = ({
   setRoomID,
   userID,
   setUserID,
+  userAvatar
 }) => {
   const messagesContextData = useMessagesContext();
 
@@ -28,6 +29,7 @@ const MessagesAddon = ({
         setRoomID={setRoomID}
         userID={userID}
         setUserID={setUserID}
+        userAvatar={userAvatar}
       />
     </MessagesContext.Provider>
   );

package/src/components/messageAddon/messages/messages.jsx

@@ -44,6 +44,7 @@ const Messages = ({
   setRoomID,
   userID,
   setUserID,
+  userAvatar
 }) => {
   const [showEmoji, setShowEmoji] = useState(false);
   const [chatOptions, setChatOptions] = useState(false);
@@ -230,7 +231,7 @@ const Messages = ({
     setUserChatList(sortedList);
 
     if (newMessage?.room?.id === roomID) {
-      setAllMessages((prev) => [...prev, newMessage]);
+      // setAllMessages((prev) => [...prev, newMessage]);
     } else {
       console.log(userChatList);
     }
@@ -291,6 +292,7 @@ const Messages = ({
                 userFullName={userFullName}
                 userType={userType}
                 courseName={courseName}
+                userAvatar={userAvatar}
               />
 
               <MessageBody ref={scrollRef}>

package/src/components/sideBar/userCard/index.jsx

@@ -34,7 +34,7 @@ const UserCard = ({ user, isOpen }) => {
       }
 
       generalData?.accounts?.results?.map((account, idx) => {
-        if (account?.id === activeDeveloperAccount) {
+        if (account?.id) {
           return setOrganizationName(account);
         }
       });

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

@@ -1,108 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import {
-  ControlInput,
-  DropDownContainer,
-  DropDownContent,
-  DropDownControls,
-  DropDownHeader,
-  DropDownItem,
-} from "./styles";
-
-const DropDownComponent = (props) => {
-  const [selected, setSelected] = useState(props.default);
-  const [dropdown, setDropdown] = useState(false);
-  const [searchParam, setSearchParam] = useState();
-
-  const dropdownRef = useRef(null);
-
-  const handleClickOutside = (event) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setDropdown(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, []);
-
-  useEffect(() => {
-    props?.onSelect && props?.onSelect(selected);
-  }, [selected]);
-
-  const handleDropdownToggle = () => {
-    setDropdown(prevDropdown => !prevDropdown);
-  };
-
-  return (
-    <DropDownContainer
-      className={props?.className}
-      ref={dropdownRef}
-      onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
-      onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
-    >
-      <DropDownHeader>{props?.header}</DropDownHeader>
-      <DropDownControls>
-        {props?.searchable ? (
-          <ControlInput
-            placeholder={props?.inputPlaceHolder || "Select Dropdown"}
-            type="text"
-            value={selected?.name}
-            onChange={(e) => setSearchParam(e.target.value)}
-            onClick={handleDropdownToggle}
-          />
-        ) : (
-          <p onClick={handleDropdownToggle}>
-            {selected?.name || props?.inputPlaceHolder}
-          </p>
-        )}
-        <DownIcon onClick={handleDropdownToggle} />
-        {searchParam && dropdown && (
-          <DropDownContent>
-            {props?.dropdownData?.map((dropdownItem, idx) => {
-              if (
-                props?.dropdownData[idx]?.name
-                  ?.toLowerCase()
-                  .includes(searchParam?.toLowerCase())
-              )
-                return (
-                  <DropDownItem
-                    key={idx}
-                    onClick={() => {
-                      setSelected(dropdownItem);
-                      setDropdown(false);
-                    }}
-                  >
-                    <span>{dropdownItem?.name}</span>
-                    {selected === dropdownItem && <Tick />}
-                  </DropDownItem>
-                );
-            })}
-          </DropDownContent>
-        )}
-        {!searchParam && dropdown && (
-          <DropDownContent>
-            {props?.dropdownData?.map((dropdownItem, idx) => {
-              return (
-                <DropDownItem
-                  key={idx}
-                  onClick={() => {
-                    setSelected(dropdownItem);
-                    setDropdown(false);
-                  }}
-                >
-                  <span>{dropdownItem?.name}</span>
-                  {selected === dropdownItem && <Tick />}
-                </DropDownItem>
-              );
-            })}
-          </DropDownContent>
-        )}
-      </DropDownControls>
-    </DropDownContainer>
-  );
-};
-
-export default DropDownComponent;