l-min-components 1.0.528 → 1.0.533

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/dropdown component/dropdown.jsx +25 -19
  3. package/src/components/dropdown component/index.jsx +19 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "l-min-components",
3
- "version": "1.0.528",
3
+ "version": "1.0.533",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src/assets",
package/src/components/dropdown component/dropdown.jsx CHANGED
@@ -17,6 +17,7 @@ import {
17
17
  * onSelect: Function,
18
18
  * inputPlaceHolder: string,
19
19
  * default: {name: string | number, [key: string]: string | number}
20
+ * valueSelect: {name: string | number, [key: string]: string | number}
20
21
  * toggleOnHover: boolean
21
22
  * loadMoreData: Function
22
23
  * isLoading: boolean,
@@ -42,14 +43,14 @@ const DropDownComponent = (props) => {
42
43
  // click outside closes the dropdown menu
43
44
  const handleClickOutside = (event) => {
44
45
  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
45
- setDropdown(false)
46
+ setDropdown(false);
46
47
  }
47
48
  };
48
49
 
49
50
  useEffect(() => {
50
- document.addEventListener('click', handleClickOutside);
51
+ document.addEventListener("click", handleClickOutside);
51
52
  return () => {
52
- document.removeEventListener('click', handleClickOutside);
53
+ document.removeEventListener("click", handleClickOutside);
53
54
  };
54
55
  }, []);
55
56
 
@@ -59,10 +60,9 @@ const DropDownComponent = (props) => {
59
60
  }, [selected]);
60
61
 
61
62
  const handleDropdownToggle = () => {
62
- setDropdown(prevDropdown => !prevDropdown);
63
+ setDropdown((prevDropdown) => !prevDropdown);
63
64
  };
64
65
 
65
-
66
66
  const handleScroll = (e) => {
67
67
  const { scrollTop, scrollHeight, clientHeight } = e.target;
68
68
  const isBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjusted threshold to 10px
@@ -71,19 +71,18 @@ const DropDownComponent = (props) => {
71
71
  props.loadMoreData();
72
72
  }
73
73
  };
74
-
74
+
75
75
  useEffect(() => {
76
76
  const listElement = dropdownListRef.current;
77
77
  if (listElement) {
78
- listElement.addEventListener('scroll', handleScroll);
79
- return () => listElement.removeEventListener('scroll', handleScroll);
78
+ listElement.addEventListener("scroll", handleScroll);
79
+ return () => listElement.removeEventListener("scroll", handleScroll);
80
80
  }
81
81
  }, [props.dropdownData]);
82
-
83
82
 
84
83
  return (
85
- <DropDownContainer
86
- className={props?.className}
84
+ <DropDownContainer
85
+ className={props?.className}
87
86
  ref={dropdownRef}
88
87
  onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
89
88
  onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
@@ -94,7 +93,7 @@ const DropDownComponent = (props) => {
94
93
  <ControlInput
95
94
  placeholder={props?.inputPlaceHolder || "Select Dropdown"}
96
95
  type="text"
97
- value={selected?.name}
96
+ value={props?.valueSelect?.name || selected?.name}
98
97
  onChange={(e) => {
99
98
  setSearchParam(e.target.value);
100
99
  }}
@@ -103,8 +102,10 @@ const DropDownComponent = (props) => {
103
102
  />
104
103
  ) : (
105
104
  // <p onClick={() => setDropdown(!dropdown)}>
106
- <p onClick={handleDropdownToggle}>
107
- {selected?.name || props?.inputPlaceHolder}
105
+ <p onClick={handleDropdownToggle}>
106
+ {props?.valueSelect?.name ||
107
+ selected?.name ||
108
+ props?.inputPlaceHolder}
108
109
  </p>
109
110
  )}
110
111
  {/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
@@ -126,7 +127,9 @@ const DropDownComponent = (props) => {
126
127
  }}
127
128
  >
128
129
  <span>{dropdownItem?.name}</span>
129
- {selected === dropdownItem && <Tick />}
130
+ {(props?.valueSelect || selected) === dropdownItem && (
131
+ <Tick />
132
+ )}
130
133
  </DropDownItem>
131
134
  );
132
135
  })}
@@ -144,14 +147,17 @@ const DropDownComponent = (props) => {
144
147
  }}
145
148
  >
146
149
  <span>{dropdownItem?.name}</span>
147
- {selected === dropdownItem && <Tick />}
150
+ {(props?.valueSelect || selected) === dropdownItem && (
151
+ <Tick />
152
+ )}
148
153
  </DropDownItem>
149
154
  );
150
155
  })}
151
156
  <div className={showLoader ? "loader" : ""}>
152
- {isLoading && showLoader && props?.dropdownData?.length > 0 && <LoaderCustom />}
157
+ {isLoading && showLoader && props?.dropdownData?.length > 0 && (
158
+ <LoaderCustom />
159
+ )}
153
160
  </div>
154
-
155
161
  </DropDownContent>
156
162
  )}
157
163
  </DropDownControls>
@@ -175,7 +181,7 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
175
181
  stroke={fill || "#7C8080"}
176
182
  strokeWidth="2"
177
183
  strokeLinecap="round"
178
- strokeLinejoin="round"
184
+ strokeLinejoin="round"
179
185
  />
180
186
  </svg>
181
187
  );
package/src/components/dropdown component/index.jsx CHANGED
@@ -17,6 +17,7 @@ import {
17
17
  * inputPlaceHolder: string,
18
18
  * default: {name: string | number, [key: string]: string | number}
19
19
  * toggleOnHover: boolean
20
+ * valueSelect: {name: string | number, [key: string]: string | number}
20
21
  * }} props - properties of the dropdown component
21
22
  */
22
23
  // dropdownData - Array of objects with property values of name and value
@@ -42,14 +43,14 @@ const DropDownComponent = (props) => {
42
43
  // click outside closes the dropdown menu
43
44
  const handleClickOutside = (event) => {
44
45
  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
45
- setDropdown(false)
46
+ setDropdown(false);
46
47
  }
47
48
  };
48
49
 
49
50
  useEffect(() => {
50
- document.addEventListener('click', handleClickOutside);
51
+ document.addEventListener("click", handleClickOutside);
51
52
  return () => {
52
- document.removeEventListener('click', handleClickOutside);
53
+ document.removeEventListener("click", handleClickOutside);
53
54
  };
54
55
  }, []);
55
56
 
@@ -59,12 +60,12 @@ const DropDownComponent = (props) => {
59
60
  }, [selected]);
60
61
 
61
62
  const handleDropdownToggle = () => {
62
- setDropdown(prevDropdown => !prevDropdown);
63
+ setDropdown((prevDropdown) => !prevDropdown);
63
64
  };
64
65
 
65
66
  return (
66
- <DropDownContainer
67
- className={props?.className}
67
+ <DropDownContainer
68
+ className={props?.className}
68
69
  ref={dropdownRef}
69
70
  onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
70
71
  onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
@@ -75,7 +76,7 @@ const DropDownComponent = (props) => {
75
76
  <ControlInput
76
77
  placeholder={props?.inputPlaceHolder || "Select Dropdown"}
77
78
  type="text"
78
- value={selected?.name}
79
+ value={props?.valueSelect?.name || selected?.name}
79
80
  onChange={(e) => {
80
81
  setSearchParam(e.target.value);
81
82
  }}
@@ -84,8 +85,10 @@ const DropDownComponent = (props) => {
84
85
  />
85
86
  ) : (
86
87
  // <p onClick={() => setDropdown(!dropdown)}>
87
- <p onClick={handleDropdownToggle}>
88
- {selected?.name || props?.inputPlaceHolder}
88
+ <p onClick={handleDropdownToggle}>
89
+ {props?.valueSelect?.name ||
90
+ selected?.name ||
91
+ props?.inputPlaceHolder}
89
92
  </p>
90
93
  )}
91
94
  {/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
@@ -107,7 +110,9 @@ const DropDownComponent = (props) => {
107
110
  }}
108
111
  >
109
112
  <span>{dropdownItem?.name}</span>
110
- {selected === dropdownItem && <Tick />}
113
+ {(props?.valueSelect || selected) === dropdownItem && (
114
+ <Tick />
115
+ )}
111
116
  </DropDownItem>
112
117
  );
113
118
  })}
@@ -125,7 +130,9 @@ const DropDownComponent = (props) => {
125
130
  }}
126
131
  >
127
132
  <span>{dropdownItem?.name}</span>
128
- {selected === dropdownItem && <Tick />}
133
+ {(props?.valueSelect || selected) === dropdownItem && (
134
+ <Tick />
135
+ )}
129
136
  </DropDownItem>
130
137
  );
131
138
  })}
@@ -152,7 +159,7 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
152
159
  stroke={fill || "#7C8080"}
153
160
  strokeWidth="2"
154
161
  strokeLinecap="round"
155
- strokeLinejoin="round"
162
+ strokeLinejoin="round"
156
163
  />
157
164
  </svg>
158
165
  );