l-min-components 1.0.482 → 1.0.488
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.
package/package.json
CHANGED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import React, { useState, CSSProperties, useEffect, useRef } from "react";
|
|
2
|
+
import LoaderCustom from "../loader";
|
|
3
|
+
import {
|
|
4
|
+
ControlInput,
|
|
5
|
+
DropDownContainer,
|
|
6
|
+
DropDownContent,
|
|
7
|
+
DropDownControls,
|
|
8
|
+
DropDownHeader,
|
|
9
|
+
DropDownItem,
|
|
10
|
+
} from "./styles";
|
|
11
|
+
/**
|
|
12
|
+
* @param {{
|
|
13
|
+
* dropdownData: Array,
|
|
14
|
+
* header: string,
|
|
15
|
+
* searchable: boolean,
|
|
16
|
+
* className: string,
|
|
17
|
+
* onSelect: Function,
|
|
18
|
+
* inputPlaceHolder: string,
|
|
19
|
+
* default: {name: string | number, [key: string]: string | number}
|
|
20
|
+
* toggleOnHover: boolean
|
|
21
|
+
* loadMoreData: Function
|
|
22
|
+
* isLoading: boolean,
|
|
23
|
+
* showLoader: boolean,
|
|
24
|
+
* }} props - properties of the dropdown component
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
const DropDownComponent = (props) => {
|
|
28
|
+
// select state that dictates the current value.
|
|
29
|
+
const [selected, setSelected] = useState(props.default);
|
|
30
|
+
|
|
31
|
+
// dropdown state that dictates if dropdown is dropped or not.
|
|
32
|
+
const [dropdown, setDropdown] = useState();
|
|
33
|
+
|
|
34
|
+
//search params
|
|
35
|
+
const [searchParam, setSearchParam] = useState();
|
|
36
|
+
const { isLoading, showLoader = false } = props;
|
|
37
|
+
|
|
38
|
+
// dropdown menu ref
|
|
39
|
+
const dropdownRef = useRef(null);
|
|
40
|
+
const dropdownListRef = useRef(null);
|
|
41
|
+
|
|
42
|
+
// click outside closes the dropdown menu
|
|
43
|
+
const handleClickOutside = (event) => {
|
|
44
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
45
|
+
setDropdown(false)
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
document.addEventListener('click', handleClickOutside);
|
|
51
|
+
return () => {
|
|
52
|
+
document.removeEventListener('click', handleClickOutside);
|
|
53
|
+
};
|
|
54
|
+
}, []);
|
|
55
|
+
|
|
56
|
+
// useEffect to return a function value onChange
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
props?.onSelect && props?.onSelect(selected);
|
|
59
|
+
}, [selected]);
|
|
60
|
+
|
|
61
|
+
const handleDropdownToggle = () => {
|
|
62
|
+
setDropdown(prevDropdown => !prevDropdown);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
const handleScroll = (e) => {
|
|
67
|
+
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
|
68
|
+
const isBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjusted threshold to 10px
|
|
69
|
+
if (isBottom) {
|
|
70
|
+
console.log("Near bottom, loading more data.");
|
|
71
|
+
props.loadMoreData();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
const listElement = dropdownListRef.current;
|
|
77
|
+
if (listElement) {
|
|
78
|
+
listElement.addEventListener('scroll', handleScroll);
|
|
79
|
+
return () => listElement.removeEventListener('scroll', handleScroll);
|
|
80
|
+
}
|
|
81
|
+
}, [props.dropdownData]);
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<DropDownContainer
|
|
86
|
+
className={props?.className}
|
|
87
|
+
ref={dropdownRef}
|
|
88
|
+
onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
|
|
89
|
+
onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
|
|
90
|
+
>
|
|
91
|
+
<DropDownHeader>{props?.header}</DropDownHeader>
|
|
92
|
+
<DropDownControls>
|
|
93
|
+
{props?.searchable ? (
|
|
94
|
+
<ControlInput
|
|
95
|
+
placeholder={props?.inputPlaceHolder || "Select Dropdown"}
|
|
96
|
+
type="text"
|
|
97
|
+
value={selected?.name}
|
|
98
|
+
onChange={(e) => {
|
|
99
|
+
setSearchParam(e.target.value);
|
|
100
|
+
}}
|
|
101
|
+
// onClick={() => setDropdown(true)}
|
|
102
|
+
onClick={handleDropdownToggle}
|
|
103
|
+
/>
|
|
104
|
+
) : (
|
|
105
|
+
// <p onClick={() => setDropdown(!dropdown)}>
|
|
106
|
+
<p onClick={handleDropdownToggle}>
|
|
107
|
+
{selected?.name || props?.inputPlaceHolder}
|
|
108
|
+
</p>
|
|
109
|
+
)}
|
|
110
|
+
{/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
|
|
111
|
+
<DownIcon onClick={handleDropdownToggle} />
|
|
112
|
+
{searchParam && dropdown && (
|
|
113
|
+
<DropDownContent onScroll={handleScroll} ref={dropdownListRef}>
|
|
114
|
+
{props?.dropdownData?.map((dropdownItem, idx) => {
|
|
115
|
+
if (
|
|
116
|
+
props?.dropdownData[idx]?.name
|
|
117
|
+
?.toLowerCase()
|
|
118
|
+
.includes(searchParam?.toLowerCase())
|
|
119
|
+
)
|
|
120
|
+
return (
|
|
121
|
+
<DropDownItem
|
|
122
|
+
key={idx}
|
|
123
|
+
onClick={() => {
|
|
124
|
+
setSelected(dropdownItem);
|
|
125
|
+
setDropdown();
|
|
126
|
+
}}
|
|
127
|
+
>
|
|
128
|
+
<span>{dropdownItem?.name}</span>
|
|
129
|
+
{selected === dropdownItem && <Tick />}
|
|
130
|
+
</DropDownItem>
|
|
131
|
+
);
|
|
132
|
+
})}
|
|
133
|
+
</DropDownContent>
|
|
134
|
+
)}
|
|
135
|
+
{!searchParam && dropdown && (
|
|
136
|
+
<DropDownContent onScroll={handleScroll} ref={dropdownListRef}>
|
|
137
|
+
{props?.dropdownData?.map((dropdownItem, idx) => {
|
|
138
|
+
return (
|
|
139
|
+
<DropDownItem
|
|
140
|
+
key={idx}
|
|
141
|
+
onClick={() => {
|
|
142
|
+
setSelected(dropdownItem);
|
|
143
|
+
setDropdown();
|
|
144
|
+
}}
|
|
145
|
+
>
|
|
146
|
+
<span>{dropdownItem?.name}</span>
|
|
147
|
+
{selected === dropdownItem && <Tick />}
|
|
148
|
+
</DropDownItem>
|
|
149
|
+
);
|
|
150
|
+
})}
|
|
151
|
+
<div className={showLoader ? "loader" : ""}>
|
|
152
|
+
{isLoading && showLoader && props?.dropdownData?.length > 0 && <LoaderCustom />}
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
</DropDownContent>
|
|
156
|
+
)}
|
|
157
|
+
</DropDownControls>
|
|
158
|
+
</DropDownContainer>
|
|
159
|
+
);
|
|
160
|
+
};
|
|
161
|
+
export default DropDownComponent;
|
|
162
|
+
|
|
163
|
+
export const DownIcon = ({ width, height, fill, onClick }) => {
|
|
164
|
+
return (
|
|
165
|
+
<svg
|
|
166
|
+
width={width || "18"}
|
|
167
|
+
height={height || "9"}
|
|
168
|
+
viewBox="0 0 14 8"
|
|
169
|
+
fill="none"
|
|
170
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
171
|
+
onClick={onClick}
|
|
172
|
+
>
|
|
173
|
+
<path
|
|
174
|
+
d="M1 1L7 7L13 1"
|
|
175
|
+
stroke={fill || "#7C8080"}
|
|
176
|
+
strokeWidth="2"
|
|
177
|
+
strokeLinecap="round"
|
|
178
|
+
strokeLinejoin="round"
|
|
179
|
+
/>
|
|
180
|
+
</svg>
|
|
181
|
+
);
|
|
182
|
+
};
|
|
183
|
+
export const Tick = ({ size, stroke }) => {
|
|
184
|
+
return (
|
|
185
|
+
<svg
|
|
186
|
+
width={size || "16"}
|
|
187
|
+
height={size || "16"}
|
|
188
|
+
viewBox="0 0 16 16"
|
|
189
|
+
fill="none"
|
|
190
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
191
|
+
>
|
|
192
|
+
<path
|
|
193
|
+
d="M12.3828 4.23828L5.82031 11.7383L3.00781 8.92578"
|
|
194
|
+
stroke={stroke || "white"}
|
|
195
|
+
strokeWidth="1.5"
|
|
196
|
+
strokeLinecap="round"
|
|
197
|
+
strokeLinejoin="round"
|
|
198
|
+
/>
|
|
199
|
+
</svg>
|
|
200
|
+
);
|
|
201
|
+
};
|
|
@@ -50,7 +50,8 @@ export const DropDownContent = styled.ul`
|
|
|
50
50
|
top: 35px;
|
|
51
51
|
left: 0;
|
|
52
52
|
list-style-type: none;
|
|
53
|
-
padding-left:
|
|
53
|
+
padding-left: 25px;
|
|
54
|
+
padding-bottom: 0px;
|
|
54
55
|
width: 100%;
|
|
55
56
|
max-height: 200px;
|
|
56
57
|
overflow-y: scroll;
|
|
@@ -71,6 +72,10 @@ export const DropDownContent = styled.ul`
|
|
|
71
72
|
/* color value for thumb */
|
|
72
73
|
}
|
|
73
74
|
// padding: 4px 10px;
|
|
75
|
+
.loader{
|
|
76
|
+
/* padding: 5px 0px; */
|
|
77
|
+
margin-bottom: 20px;
|
|
78
|
+
}
|
|
74
79
|
`;
|
|
75
80
|
|
|
76
81
|
export const DropDownItem = styled.li`
|
package/src/components/index.js
CHANGED
|
@@ -19,7 +19,7 @@ export { default as InputComponent } from "./input";
|
|
|
19
19
|
export { default as MainLayout } from "./authentication/mainLayout";
|
|
20
20
|
export { default as SocialBtn } from "./button/socialBtn";
|
|
21
21
|
export { default as SuccessCard } from "./successCard/index";
|
|
22
|
-
export { default as DropDownComponent } from "./dropdown component";
|
|
22
|
+
export { default as DropDownComponent } from "./dropdown component/dropdown";
|
|
23
23
|
export { default as SelectDropdown } from "./select";
|
|
24
24
|
export { default as SelectDropdownGraph } from "./graph";
|
|
25
25
|
export { default as NotificationThresholdComponent } from "./notificationThreshold";
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect } from "react";
|
|
2
|
-
import {
|
|
3
|
-
ControlInput,
|
|
4
|
-
DropDownContainer,
|
|
5
|
-
DropDownContent,
|
|
6
|
-
DropDownControls,
|
|
7
|
-
DropDownHeader,
|
|
8
|
-
DropDownItem,
|
|
9
|
-
} from "./styles";
|
|
10
|
-
|
|
11
|
-
const DropDownComponent = (props) => {
|
|
12
|
-
const [selected, setSelected] = useState(props.default);
|
|
13
|
-
const [dropdown, setDropdown] = useState(false);
|
|
14
|
-
const [searchParam, setSearchParam] = useState();
|
|
15
|
-
|
|
16
|
-
const dropdownRef = useRef(null);
|
|
17
|
-
|
|
18
|
-
const handleClickOutside = (event) => {
|
|
19
|
-
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
20
|
-
setDropdown(false);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
document.addEventListener('click', handleClickOutside);
|
|
26
|
-
return () => {
|
|
27
|
-
document.removeEventListener('click', handleClickOutside);
|
|
28
|
-
};
|
|
29
|
-
}, []);
|
|
30
|
-
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
props?.onSelect && props?.onSelect(selected);
|
|
33
|
-
}, [selected]);
|
|
34
|
-
|
|
35
|
-
const handleDropdownToggle = () => {
|
|
36
|
-
setDropdown(prevDropdown => !prevDropdown);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<DropDownContainer
|
|
41
|
-
className={props?.className}
|
|
42
|
-
ref={dropdownRef}
|
|
43
|
-
onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
|
|
44
|
-
onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
|
|
45
|
-
>
|
|
46
|
-
<DropDownHeader>{props?.header}</DropDownHeader>
|
|
47
|
-
<DropDownControls>
|
|
48
|
-
{props?.searchable ? (
|
|
49
|
-
<ControlInput
|
|
50
|
-
placeholder={props?.inputPlaceHolder || "Select Dropdown"}
|
|
51
|
-
type="text"
|
|
52
|
-
value={selected?.name}
|
|
53
|
-
onChange={(e) => setSearchParam(e.target.value)}
|
|
54
|
-
onClick={handleDropdownToggle}
|
|
55
|
-
/>
|
|
56
|
-
) : (
|
|
57
|
-
<p onClick={handleDropdownToggle}>
|
|
58
|
-
{selected?.name || props?.inputPlaceHolder}
|
|
59
|
-
</p>
|
|
60
|
-
)}
|
|
61
|
-
<DownIcon onClick={handleDropdownToggle} />
|
|
62
|
-
{searchParam && dropdown && (
|
|
63
|
-
<DropDownContent>
|
|
64
|
-
{props?.dropdownData?.map((dropdownItem, idx) => {
|
|
65
|
-
if (
|
|
66
|
-
props?.dropdownData[idx]?.name
|
|
67
|
-
?.toLowerCase()
|
|
68
|
-
.includes(searchParam?.toLowerCase())
|
|
69
|
-
)
|
|
70
|
-
return (
|
|
71
|
-
<DropDownItem
|
|
72
|
-
key={idx}
|
|
73
|
-
onClick={() => {
|
|
74
|
-
setSelected(dropdownItem);
|
|
75
|
-
setDropdown(false);
|
|
76
|
-
}}
|
|
77
|
-
>
|
|
78
|
-
<span>{dropdownItem?.name}</span>
|
|
79
|
-
{selected === dropdownItem && <Tick />}
|
|
80
|
-
</DropDownItem>
|
|
81
|
-
);
|
|
82
|
-
})}
|
|
83
|
-
</DropDownContent>
|
|
84
|
-
)}
|
|
85
|
-
{!searchParam && dropdown && (
|
|
86
|
-
<DropDownContent>
|
|
87
|
-
{props?.dropdownData?.map((dropdownItem, idx) => {
|
|
88
|
-
return (
|
|
89
|
-
<DropDownItem
|
|
90
|
-
key={idx}
|
|
91
|
-
onClick={() => {
|
|
92
|
-
setSelected(dropdownItem);
|
|
93
|
-
setDropdown(false);
|
|
94
|
-
}}
|
|
95
|
-
>
|
|
96
|
-
<span>{dropdownItem?.name}</span>
|
|
97
|
-
{selected === dropdownItem && <Tick />}
|
|
98
|
-
</DropDownItem>
|
|
99
|
-
);
|
|
100
|
-
})}
|
|
101
|
-
</DropDownContent>
|
|
102
|
-
)}
|
|
103
|
-
</DropDownControls>
|
|
104
|
-
</DropDownContainer>
|
|
105
|
-
);
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
export default DropDownComponent;
|