next-helios-fe 1.8.65 → 1.8.67
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/dist/components/dropdown/item.d.ts +2 -0
- package/dist/components/form/other/select.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/content-container/modal/index.tsx +8 -2
- package/src/components/dropdown/index.tsx +4 -2
- package/src/components/dropdown/item.tsx +15 -2
- package/src/components/form/input/date.tsx +1 -0
- package/src/components/form/input/time.tsx +45 -21
- package/src/components/form/other/multipleSelect.tsx +24 -19
- package/src/components/form/other/phoneNumber.tsx +38 -35
- package/src/components/form/other/select.tsx +38 -54
- package/src/components/tooltip/index.tsx +6 -3
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
"use client";
|
2
|
-
import React, { useEffect } from "react";
|
2
|
+
import React, { useState, useEffect } from "react";
|
3
3
|
import ReactDom from "react-dom";
|
4
4
|
import { Icon } from "@iconify/react";
|
5
5
|
import { Button } from "../../../components";
|
@@ -28,6 +28,12 @@ export const Modal: React.FC<ModalProps> = ({
|
|
28
28
|
open,
|
29
29
|
onClose,
|
30
30
|
}) => {
|
31
|
+
const [isRendered, setIsRendered] = useState(false);
|
32
|
+
|
33
|
+
useEffect(() => {
|
34
|
+
setIsRendered(true);
|
35
|
+
}, []);
|
36
|
+
|
31
37
|
useEffect(() => {
|
32
38
|
if (!options?.disableClose) {
|
33
39
|
if (open) {
|
@@ -53,7 +59,7 @@ export const Modal: React.FC<ModalProps> = ({
|
|
53
59
|
: "w-11/12 sm:w-9/12 md:w-7/12 lg:w-5/12 h-5/6 sm:h-4/6 md:h-2/3 lg:h-2/4";
|
54
60
|
|
55
61
|
return (
|
56
|
-
|
62
|
+
isRendered &&
|
57
63
|
open &&
|
58
64
|
ReactDom.createPortal(
|
59
65
|
<div
|
@@ -49,7 +49,7 @@ export const Dropdown: DropdownComponent = ({
|
|
49
49
|
base: `min-w-40 w-full my-0.5 rounded-md text-sm text-left text-default ${
|
50
50
|
childrenList.length > 0 && !header && itemList.length === 0
|
51
51
|
? ""
|
52
|
-
: "px-4 py-2
|
52
|
+
: "px-4 py-2"
|
53
53
|
}`,
|
54
54
|
},
|
55
55
|
},
|
@@ -59,7 +59,9 @@ export const Dropdown: DropdownComponent = ({
|
|
59
59
|
{header}
|
60
60
|
{itemList}
|
61
61
|
{childrenList.length > 0 && !header && itemList.length === 0 && (
|
62
|
-
<Dd.Item className="
|
62
|
+
<Dd.Item className="flex flex-col cursor-default" as="div">
|
63
|
+
{children}
|
64
|
+
</Dd.Item>
|
63
65
|
)}
|
64
66
|
</Dd>
|
65
67
|
);
|
@@ -5,15 +5,28 @@ import { Dropdown as Dd } from "flowbite-react";
|
|
5
5
|
export interface ItemProps {
|
6
6
|
children: React.ReactNode;
|
7
7
|
active?: boolean;
|
8
|
+
as?: "button" | "title";
|
9
|
+
disabled?: boolean;
|
8
10
|
onClick?: () => void;
|
9
11
|
}
|
10
12
|
|
11
|
-
export const Item: React.FC<ItemProps> = ({
|
13
|
+
export const Item: React.FC<ItemProps> = ({
|
14
|
+
children,
|
15
|
+
active,
|
16
|
+
as,
|
17
|
+
disabled,
|
18
|
+
onClick,
|
19
|
+
}) => {
|
12
20
|
return (
|
13
21
|
<Dd.Item
|
14
22
|
className={`${
|
15
|
-
active
|
23
|
+
active
|
24
|
+
? "disabled:bg-primary-transparent disabled:text-primary"
|
25
|
+
: `disabled:text-disabled ${
|
26
|
+
as === "title" ? "" : "hover:bg-secondary-light"
|
27
|
+
}`
|
16
28
|
}`}
|
29
|
+
disabled={active ? true : (disabled || as === "title") ?? false}
|
17
30
|
onClick={onClick}
|
18
31
|
>
|
19
32
|
{children}
|
@@ -215,6 +215,7 @@ export const Time: React.FC<TimeProps> = ({
|
|
215
215
|
ref={dropdownRef}
|
216
216
|
className={`w-0 my-0.5 ${height}`}
|
217
217
|
tabIndex={-1}
|
218
|
+
disabled={rest.disabled ?? false}
|
218
219
|
>
|
219
220
|
1
|
220
221
|
</button>
|
@@ -242,17 +243,31 @@ export const Time: React.FC<TimeProps> = ({
|
|
242
243
|
: tempValue.split(":")[0]) === item
|
243
244
|
}
|
244
245
|
onMouseDown={() => {
|
246
|
+
if (item === "12") {
|
247
|
+
if (selectedAmPm === "am") {
|
248
|
+
setTempValue(`00:${tempValue.split(":")[1]}`);
|
249
|
+
} else if (selectedAmPm === "pm") {
|
250
|
+
setTempValue(`12:${tempValue.split(":")[1]}`);
|
251
|
+
}
|
252
|
+
} else {
|
253
|
+
if (selectedAmPm === "am") {
|
254
|
+
setTempValue(`${item}:${tempValue.split(":")[1]}`);
|
255
|
+
} else if (selectedAmPm === "pm") {
|
256
|
+
setTempValue(
|
257
|
+
`${parseInt(item) + 12}:${tempValue.split(":")[1]}`
|
258
|
+
);
|
259
|
+
}
|
260
|
+
}
|
261
|
+
|
245
262
|
if (rest.onChange) {
|
246
263
|
if (item === "12") {
|
247
264
|
if (selectedAmPm === "am") {
|
248
|
-
setTempValue(`00:${tempValue.split(":")[1]}`);
|
249
265
|
rest.onChange({
|
250
266
|
target: {
|
251
267
|
value: `00:${tempValue.split(":")[1]}`,
|
252
268
|
} as HTMLInputElement,
|
253
269
|
} as any);
|
254
270
|
} else if (selectedAmPm === "pm") {
|
255
|
-
setTempValue(`12:${tempValue.split(":")[1]}`);
|
256
271
|
rest.onChange({
|
257
272
|
target: {
|
258
273
|
value: `12:${tempValue.split(":")[1]}`,
|
@@ -261,16 +276,12 @@ export const Time: React.FC<TimeProps> = ({
|
|
261
276
|
}
|
262
277
|
} else {
|
263
278
|
if (selectedAmPm === "am") {
|
264
|
-
setTempValue(`${item}:${tempValue.split(":")[1]}`);
|
265
279
|
rest.onChange({
|
266
280
|
target: {
|
267
281
|
value: `${item}:${tempValue.split(":")[1]}`,
|
268
282
|
} as HTMLInputElement,
|
269
283
|
} as any);
|
270
284
|
} else if (selectedAmPm === "pm") {
|
271
|
-
setTempValue(
|
272
|
-
`${parseInt(item) + 12}:${tempValue.split(":")[1]}`
|
273
|
-
);
|
274
285
|
rest.onChange({
|
275
286
|
target: {
|
276
287
|
value: `${parseInt(item) + 12}:${
|
@@ -300,6 +311,7 @@ export const Time: React.FC<TimeProps> = ({
|
|
300
311
|
disabled={tempValue.split(":")[1] === item}
|
301
312
|
onMouseDown={() => {
|
302
313
|
setTempValue(`${tempValue.split(":")[0]}:${item}`);
|
314
|
+
|
303
315
|
if (rest.onChange) {
|
304
316
|
rest.onChange({
|
305
317
|
target: {
|
@@ -322,10 +334,36 @@ export const Time: React.FC<TimeProps> = ({
|
|
322
334
|
disabled={selectedAmPm === item}
|
323
335
|
onMouseDown={() => {
|
324
336
|
setSelectedAmPm(item);
|
337
|
+
|
338
|
+
if (parseInt(tempValue.split(":")[0]) === 12) {
|
339
|
+
if (item === "am") {
|
340
|
+
setTempValue(`00:${tempValue.split(":")[1]}`);
|
341
|
+
}
|
342
|
+
} else if (parseInt(tempValue.split(":")[0]) < 12) {
|
343
|
+
if (item === "pm") {
|
344
|
+
setTempValue(
|
345
|
+
`${parseInt(tempValue.split(":")[0]) + 12}:${
|
346
|
+
tempValue.split(":")[1]
|
347
|
+
}`
|
348
|
+
);
|
349
|
+
}
|
350
|
+
} else if (parseInt(tempValue.split(":")[0]) > 12) {
|
351
|
+
if (item === "am") {
|
352
|
+
setTempValue(
|
353
|
+
`${
|
354
|
+
parseInt(tempValue.split(":")[0]) - 12 < 10
|
355
|
+
? "0"
|
356
|
+
: ""
|
357
|
+
}${parseInt(tempValue.split(":")[0]) - 12}:${
|
358
|
+
tempValue.split(":")[1]
|
359
|
+
}`
|
360
|
+
);
|
361
|
+
}
|
362
|
+
}
|
363
|
+
|
325
364
|
if (rest.onChange) {
|
326
365
|
if (parseInt(tempValue.split(":")[0]) === 12) {
|
327
366
|
if (item === "am") {
|
328
|
-
setTempValue(`00:${tempValue.split(":")[1]}`);
|
329
367
|
rest.onChange({
|
330
368
|
target: {
|
331
369
|
value: `00:${tempValue.split(":")[1]}`,
|
@@ -334,11 +372,6 @@ export const Time: React.FC<TimeProps> = ({
|
|
334
372
|
}
|
335
373
|
} else if (parseInt(tempValue.split(":")[0]) < 12) {
|
336
374
|
if (item === "pm") {
|
337
|
-
setTempValue(
|
338
|
-
`${parseInt(tempValue.split(":")[0]) + 12}:${
|
339
|
-
tempValue.split(":")[1]
|
340
|
-
}`
|
341
|
-
);
|
342
375
|
rest.onChange({
|
343
376
|
target: {
|
344
377
|
value: `${
|
@@ -349,15 +382,6 @@ export const Time: React.FC<TimeProps> = ({
|
|
349
382
|
}
|
350
383
|
} else if (parseInt(tempValue.split(":")[0]) > 12) {
|
351
384
|
if (item === "am") {
|
352
|
-
setTempValue(
|
353
|
-
`${
|
354
|
-
parseInt(tempValue.split(":")[0]) - 12 < 10
|
355
|
-
? "0"
|
356
|
-
: ""
|
357
|
-
}${parseInt(tempValue.split(":")[0]) - 12}:${
|
358
|
-
tempValue.split(":")[1]
|
359
|
-
}`
|
360
|
-
);
|
361
385
|
rest.onChange({
|
362
386
|
target: {
|
363
387
|
value: `${
|
@@ -250,27 +250,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
250
250
|
height: dropdownHeight,
|
251
251
|
}}
|
252
252
|
tabIndex={-1}
|
253
|
+
disabled={disabled ?? false}
|
253
254
|
>
|
254
255
|
1
|
255
256
|
</button>
|
256
257
|
}
|
257
258
|
>
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
<span className="px-4 py-1">No data found</span>
|
259
|
+
{menus.length === 0 ? (
|
260
|
+
<Dropdown.Item>
|
261
|
+
<div
|
262
|
+
className="flex justify-center"
|
263
|
+
style={{ width: dropdownWidth - 43 }}
|
264
|
+
>
|
265
|
+
<span>No data found</span>
|
266
266
|
</div>
|
267
|
-
|
268
|
-
|
269
|
-
|
267
|
+
</Dropdown.Item>
|
268
|
+
) : (
|
269
|
+
menus.map((item, index) => {
|
270
|
+
return (
|
271
|
+
<Dropdown.Item
|
270
272
|
key={index}
|
271
|
-
|
272
|
-
className="min-w-40 w-full my-0.5 ps-4 pe-14 py-2 rounded-md text-sm text-left text-default hover:bg-secondary-light disabled:bg-primary-transparent"
|
273
|
-
disabled={
|
273
|
+
active={
|
274
274
|
tempValue?.find((i) => i === item.value) ? true : false
|
275
275
|
}
|
276
276
|
onClick={() => {
|
@@ -287,11 +287,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
287
287
|
}
|
288
288
|
}}
|
289
289
|
>
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
290
|
+
<span
|
291
|
+
className="flex justify-between items-center gap-4"
|
292
|
+
style={{ width: dropdownWidth - 43 }}
|
293
|
+
>
|
294
|
+
{item.label}
|
295
|
+
</span>
|
296
|
+
</Dropdown.Item>
|
297
|
+
);
|
298
|
+
})
|
299
|
+
)}
|
295
300
|
</Dropdown>
|
296
301
|
</div>
|
297
302
|
)}
|
@@ -1603,48 +1603,51 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1603
1603
|
ref={dropdownRef}
|
1604
1604
|
className={`w-0 my-0.5 ${height}`}
|
1605
1605
|
tabIndex={-1}
|
1606
|
+
disabled={rest.disabled ?? false}
|
1606
1607
|
>
|
1607
1608
|
1
|
1608
1609
|
</button>
|
1609
1610
|
}
|
1610
1611
|
>
|
1611
|
-
|
1612
|
-
|
1613
|
-
|
1614
|
-
|
1615
|
-
|
1616
|
-
|
1617
|
-
|
1618
|
-
<span className="px-4 py-1">No data found</span>
|
1612
|
+
{countryPhoneCode.length === 0 ? (
|
1613
|
+
<Dropdown.Item>
|
1614
|
+
<div
|
1615
|
+
className="flex justify-center"
|
1616
|
+
style={{ width: dropdownWidth - 51 }}
|
1617
|
+
>
|
1618
|
+
<span>No data found</span>
|
1619
1619
|
</div>
|
1620
|
-
|
1621
|
-
|
1622
|
-
|
1623
|
-
|
1624
|
-
|
1625
|
-
|
1626
|
-
|
1627
|
-
|
1628
|
-
|
1629
|
-
rest.onChange
|
1630
|
-
|
1631
|
-
|
1632
|
-
value
|
1633
|
-
|
1634
|
-
|
1635
|
-
|
1636
|
-
|
1637
|
-
|
1638
|
-
|
1639
|
-
|
1640
|
-
|
1620
|
+
</Dropdown.Item>
|
1621
|
+
) : (
|
1622
|
+
countryPhoneCode.map((item, index) => {
|
1623
|
+
return (
|
1624
|
+
<Dropdown.Item
|
1625
|
+
key={index}
|
1626
|
+
active={selectedCountry === item.dial_code ? true : false}
|
1627
|
+
onClick={() => {
|
1628
|
+
rest.onChange &&
|
1629
|
+
rest.onChange({
|
1630
|
+
target: {
|
1631
|
+
value: `${item.dial_code}${
|
1632
|
+
((rest.value || "") as string).split(
|
1633
|
+
selectedCountry
|
1634
|
+
)[1]
|
1635
|
+
}`,
|
1636
|
+
} as HTMLInputElement,
|
1637
|
+
} as any);
|
1638
|
+
setOpenDropdown(false);
|
1639
|
+
}}
|
1640
|
+
>
|
1641
|
+
<span
|
1642
|
+
className="flex justify-between items-center gap-4"
|
1643
|
+
style={{ width: dropdownWidth - 51 }}
|
1641
1644
|
>
|
1642
|
-
|
1643
|
-
</
|
1644
|
-
|
1645
|
-
|
1646
|
-
)
|
1647
|
-
|
1645
|
+
{`${item.emoji} ${item.name}`}
|
1646
|
+
</span>
|
1647
|
+
</Dropdown.Item>
|
1648
|
+
);
|
1649
|
+
})
|
1650
|
+
)}
|
1648
1651
|
</Dropdown>
|
1649
1652
|
</div>
|
1650
1653
|
<input type="text" className="hidden" {...rest} />
|
@@ -8,6 +8,7 @@ export interface SelectProps
|
|
8
8
|
menus: {
|
9
9
|
label: string;
|
10
10
|
value: string;
|
11
|
+
variant?: "button" | "title";
|
11
12
|
disabled?: boolean;
|
12
13
|
[key: string]: any;
|
13
14
|
}[];
|
@@ -146,66 +147,49 @@ export const Select: React.FC<SelectProps> = ({
|
|
146
147
|
ref={dropdownRef}
|
147
148
|
className={`w-0 my-0.5 ${height}`}
|
148
149
|
tabIndex={-1}
|
150
|
+
disabled={rest.disabled ?? false}
|
149
151
|
>
|
150
152
|
1
|
151
153
|
</button>
|
152
154
|
}
|
153
155
|
>
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
<span className="px-4 py-1">No data found</span>
|
156
|
+
{menus.length === 0 ? (
|
157
|
+
<Dropdown.Item>
|
158
|
+
<div
|
159
|
+
className="flex justify-center"
|
160
|
+
style={{ width: dropdownWidth - 43 }}
|
161
|
+
>
|
162
|
+
<span>No data found</span>
|
162
163
|
</div>
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
onClick={() => {
|
193
|
-
setTempValue(item.value);
|
194
|
-
if (rest.onChange) {
|
195
|
-
rest.onChange({
|
196
|
-
target: { value: item.value } as HTMLSelectElement,
|
197
|
-
} as any);
|
198
|
-
}
|
199
|
-
}}
|
200
|
-
>
|
201
|
-
<span>{item.label}</span>
|
202
|
-
{labelComponent ? labelComponent(item) : ""}
|
203
|
-
</button>
|
204
|
-
);
|
205
|
-
}
|
206
|
-
})
|
207
|
-
)}
|
208
|
-
</div>
|
164
|
+
</Dropdown.Item>
|
165
|
+
) : (
|
166
|
+
menus.map((item, index) => {
|
167
|
+
return (
|
168
|
+
<Dropdown.Item
|
169
|
+
key={index}
|
170
|
+
active={tempValue === item.value ? true : false}
|
171
|
+
as={item.variant || "button"}
|
172
|
+
disabled={item.disabled ?? false}
|
173
|
+
onClick={() => {
|
174
|
+
setTempValue(item.value);
|
175
|
+
if (rest.onChange) {
|
176
|
+
rest.onChange({
|
177
|
+
target: { value: item.value } as HTMLSelectElement,
|
178
|
+
} as any);
|
179
|
+
}
|
180
|
+
}}
|
181
|
+
>
|
182
|
+
<div
|
183
|
+
className="flex justify-between items-center gap-4"
|
184
|
+
style={{ width: dropdownWidth - 43 }}
|
185
|
+
>
|
186
|
+
<span>{item.label}</span>
|
187
|
+
{labelComponent ? labelComponent(item) : ""}
|
188
|
+
</div>
|
189
|
+
</Dropdown.Item>
|
190
|
+
);
|
191
|
+
})
|
192
|
+
)}
|
209
193
|
</Dropdown>
|
210
194
|
</div>
|
211
195
|
</div>
|
@@ -16,6 +16,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
|
16
16
|
content,
|
17
17
|
options,
|
18
18
|
}) => {
|
19
|
+
const [isRendered, setIsRendered] = useState(false);
|
19
20
|
const [visible, setVisible] = useState(false);
|
20
21
|
const [position, setPosition] = useState(options?.position ?? "right");
|
21
22
|
const tooltipRef = useRef<HTMLDivElement | null>(null);
|
@@ -27,6 +28,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
|
27
28
|
null
|
28
29
|
);
|
29
30
|
|
31
|
+
useEffect(() => {
|
32
|
+
setIsRendered(true);
|
33
|
+
}, []);
|
34
|
+
|
30
35
|
useEffect(() => {
|
31
36
|
setPosition(options?.position ?? "right");
|
32
37
|
}, [options?.position]);
|
@@ -184,7 +189,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
|
184
189
|
onMouseLeave={() => setVisible(false)}
|
185
190
|
>
|
186
191
|
{children}
|
187
|
-
{
|
192
|
+
{isRendered &&
|
188
193
|
createPortal(
|
189
194
|
<div
|
190
195
|
ref={tooltipRef}
|
@@ -205,8 +210,6 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
|
205
210
|
</div>
|
206
211
|
)}
|
207
212
|
<div
|
208
|
-
|
209
|
-
|
210
213
|
className="w-fit px-3 py-1.5 rounded-md bg-black/75 text-sm text-white"
|
211
214
|
style={{ maxWidth: "50dvw" }}
|
212
215
|
>
|