@starasia/dropdown 1.0.4 → 1.0.5
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/dropdown.es.js +49 -67
- package/dist/dropdown.umd.js +14 -32
- package/package.json +6 -6
package/dist/dropdown.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import F, { useState as
|
|
1
|
+
import { jsx as r, jsxs as l, Fragment as q } from "react/jsx-runtime";
|
|
2
|
+
import F, { useState as y, useRef as k, useEffect as b, forwardRef as M } from "react";
|
|
3
3
|
const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
|
|
4
4
|
* {
|
|
5
5
|
margin: 0;
|
|
@@ -9,27 +9,12 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
9
9
|
}
|
|
10
10
|
:root {
|
|
11
11
|
/* color */
|
|
12
|
-
/*
|
|
13
|
-
--starasia-ui-dropdown-color-primary-blue: var(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
);
|
|
17
|
-
--starasia-ui-dropdown-color-
|
|
18
|
-
--starasia-ui-color-blue-500,
|
|
19
|
-
#3b82f6
|
|
20
|
-
);
|
|
21
|
-
--starasia-ui-dropdown-color-tertiary-blue: var(
|
|
22
|
-
--starasia-ui-color-blue-300,
|
|
23
|
-
#93c5fd
|
|
24
|
-
);
|
|
25
|
-
--starasia-ui-dropdown-color-quaternary-blue: var(
|
|
26
|
-
--starasia-ui-color-blue-100,
|
|
27
|
-
#dbeafe
|
|
28
|
-
);
|
|
29
|
-
--starasia-ui-dropdown-color-quinary-blue: var(
|
|
30
|
-
--starasia-ui-color-blue-50,
|
|
31
|
-
#eff6ff
|
|
32
|
-
);
|
|
12
|
+
/* brand */
|
|
13
|
+
--starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
14
|
+
--starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
15
|
+
--starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
16
|
+
--starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
17
|
+
--starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
33
18
|
/* gray */
|
|
34
19
|
--starasia-ui-dropdown-color-primary-gray: var(
|
|
35
20
|
--starasia-ui-color-gray-700,
|
|
@@ -68,10 +53,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
68
53
|
);
|
|
69
54
|
|
|
70
55
|
/* border color */
|
|
71
|
-
--starasia-ui-dropdown-border-color-primary: var(
|
|
72
|
-
--starasia-ui-color-blue-500,
|
|
73
|
-
#3b82f6
|
|
74
|
-
);
|
|
56
|
+
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default);
|
|
75
57
|
--starasia-ui-dropdown-border-color-secondary: var(
|
|
76
58
|
--starasia-ui-color-gray-300,
|
|
77
59
|
#d1d5db
|
|
@@ -97,7 +79,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
97
79
|
--starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
98
80
|
|
|
99
81
|
/* shadow */
|
|
100
|
-
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(
|
|
82
|
+
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.2);
|
|
101
83
|
|
|
102
84
|
/* below is for size,above is */
|
|
103
85
|
--starasia-ui-dropdown-fontWeight-normal: var(
|
|
@@ -265,12 +247,12 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
265
247
|
}
|
|
266
248
|
|
|
267
249
|
.starasia-input-dropdwon-item:hover {
|
|
268
|
-
background-color: rgba(
|
|
250
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
269
251
|
}
|
|
270
252
|
.starasia-input-dropdwon-item.active {
|
|
271
253
|
/* color: var(--starasia-ui-dropdown-background-color-primary); */
|
|
272
254
|
/* border-radius: var(--borderRadius); */
|
|
273
|
-
background-color: rgba(
|
|
255
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
274
256
|
/* background: var(--starasia-ui-dropdown-background-color-secondary); */
|
|
275
257
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
276
258
|
}
|
|
@@ -315,7 +297,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
315
297
|
font-weight: 500;
|
|
316
298
|
}
|
|
317
299
|
.starasia-input-dropdwon-item-text.active {
|
|
318
|
-
color:
|
|
300
|
+
color: var(--starasia-ui-brand-primary-default);
|
|
319
301
|
}
|
|
320
302
|
|
|
321
303
|
.starasia-input-dropdwon-item-text-description {
|
|
@@ -325,14 +307,14 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
325
307
|
font-weight: 400;
|
|
326
308
|
}
|
|
327
309
|
.starasia-input-dropdwon-item-text-description.active {
|
|
328
|
-
color:
|
|
310
|
+
color: var(--starasia-ui-brand-primary-default);
|
|
329
311
|
}
|
|
330
312
|
|
|
331
313
|
/* for checkbox */
|
|
332
314
|
.checkbox-wrapper-30 .checkbox {
|
|
333
315
|
--bg: #fff;
|
|
334
316
|
--brdr: #d1d6ee;
|
|
335
|
-
--brdr-actv:
|
|
317
|
+
--brdr-actv: var(--starasia-ui-brand-primary-default);
|
|
336
318
|
--brdr-hovr: #bbc1e1;
|
|
337
319
|
--dur: calc((var(--size, 2) / 2) * 0.6s);
|
|
338
320
|
display: inline-block;
|
|
@@ -406,7 +388,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
406
388
|
}
|
|
407
389
|
`;
|
|
408
390
|
function V(a) {
|
|
409
|
-
const [i, t] =
|
|
391
|
+
const [i, t] = y(a), c = k(null), o = (e) => {
|
|
410
392
|
c.current && !c.current.contains(e.target) && t(!1);
|
|
411
393
|
};
|
|
412
394
|
return b(() => (document.addEventListener("click", o, !0), () => {
|
|
@@ -432,7 +414,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
432
414
|
}
|
|
433
415
|
)
|
|
434
416
|
}
|
|
435
|
-
), G = ({ ...a }) => /* @__PURE__ */
|
|
417
|
+
), G = ({ ...a }) => /* @__PURE__ */ l(
|
|
436
418
|
"svg",
|
|
437
419
|
{
|
|
438
420
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -464,8 +446,8 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
464
446
|
)
|
|
465
447
|
]
|
|
466
448
|
}
|
|
467
|
-
), K = ({ isChecked: a }) => /* @__PURE__ */
|
|
468
|
-
/* @__PURE__ */
|
|
449
|
+
), K = ({ isChecked: a }) => /* @__PURE__ */ l("div", { className: "checkbox-wrapper-30", children: [
|
|
450
|
+
/* @__PURE__ */ l("span", { className: "checkbox", children: [
|
|
469
451
|
/* @__PURE__ */ r(
|
|
470
452
|
"input",
|
|
471
453
|
{
|
|
@@ -493,10 +475,10 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
493
475
|
onSearch: o,
|
|
494
476
|
value: e,
|
|
495
477
|
handleChangeValue: h,
|
|
496
|
-
multiSelect:
|
|
478
|
+
multiSelect: p,
|
|
497
479
|
searchValue: v
|
|
498
480
|
}, I) => {
|
|
499
|
-
const [C, R] =
|
|
481
|
+
const [C, R] = y(0), [$, z] = y(), w = k(null);
|
|
500
482
|
return b(() => {
|
|
501
483
|
if (w.current) {
|
|
502
484
|
const n = w.current.getBoundingClientRect();
|
|
@@ -509,14 +491,14 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
509
491
|
return;
|
|
510
492
|
}
|
|
511
493
|
}) : z(void 0);
|
|
512
|
-
}, [v, i]), /* @__PURE__ */ r(q, { children: t ? /* @__PURE__ */
|
|
494
|
+
}, [v, i]), /* @__PURE__ */ r(q, { children: t ? /* @__PURE__ */ l(
|
|
513
495
|
"div",
|
|
514
496
|
{
|
|
515
497
|
className: "starasia-input-dropdown-lists-container",
|
|
516
498
|
onClick: (n) => n.stopPropagation(),
|
|
517
499
|
ref: I,
|
|
518
500
|
children: [
|
|
519
|
-
c ? /* @__PURE__ */
|
|
501
|
+
c ? /* @__PURE__ */ l(
|
|
520
502
|
"div",
|
|
521
503
|
{
|
|
522
504
|
className: "starasia-input-dropdown-container-dropdown-search",
|
|
@@ -546,25 +528,25 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
546
528
|
/* @__PURE__ */ r(
|
|
547
529
|
"div",
|
|
548
530
|
{
|
|
549
|
-
className: `starasia-input-dropdwon-item-container ${
|
|
531
|
+
className: `starasia-input-dropdwon-item-container ${p ? "multi" : ""}`,
|
|
550
532
|
ref: w,
|
|
551
|
-
children: i.map((n,
|
|
552
|
-
const
|
|
553
|
-
return /* @__PURE__ */
|
|
533
|
+
children: i.map((n, x) => {
|
|
534
|
+
const f = !!(e != null && e.find((E) => E.value === n.value));
|
|
535
|
+
return /* @__PURE__ */ l(
|
|
554
536
|
"div",
|
|
555
537
|
{
|
|
556
|
-
className: `starasia-input-dropdwon-item ${
|
|
538
|
+
className: `starasia-input-dropdwon-item ${f ? "active" : " "} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
|
|
557
539
|
onClick: () => h(n.label, n.value),
|
|
558
540
|
children: [
|
|
559
|
-
|
|
541
|
+
p ? /* @__PURE__ */ r("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ r(K, { isChecked: f }) }) : null,
|
|
560
542
|
n.icon ? /* @__PURE__ */ r("div", { children: F.cloneElement(n.icon, {
|
|
561
543
|
width: 16
|
|
562
544
|
}) }) : null,
|
|
563
|
-
/* @__PURE__ */
|
|
545
|
+
/* @__PURE__ */ l("div", { children: [
|
|
564
546
|
/* @__PURE__ */ r(
|
|
565
547
|
"p",
|
|
566
548
|
{
|
|
567
|
-
className: `starasia-input-dropdwon-item-text ${
|
|
549
|
+
className: `starasia-input-dropdwon-item-text ${f ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
|
|
568
550
|
style: {
|
|
569
551
|
textWrap: "nowrap",
|
|
570
552
|
width: `${C - 12}px`,
|
|
@@ -577,7 +559,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
577
559
|
n.description ? /* @__PURE__ */ r(
|
|
578
560
|
"p",
|
|
579
561
|
{
|
|
580
|
-
className: `starasia-input-dropdwon-item-text-description ${
|
|
562
|
+
className: `starasia-input-dropdwon-item-text-description ${f ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
|
|
581
563
|
style: {
|
|
582
564
|
textWrap: "nowrap",
|
|
583
565
|
width: `${C - 12}px`,
|
|
@@ -590,7 +572,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
590
572
|
] })
|
|
591
573
|
]
|
|
592
574
|
},
|
|
593
|
-
|
|
575
|
+
x
|
|
594
576
|
);
|
|
595
577
|
})
|
|
596
578
|
}
|
|
@@ -603,15 +585,15 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
603
585
|
children: a,
|
|
604
586
|
handleChangePosition: i
|
|
605
587
|
}) => {
|
|
606
|
-
const t =
|
|
588
|
+
const t = k(null);
|
|
607
589
|
b(() => {
|
|
608
590
|
var h;
|
|
609
591
|
const o = () => {
|
|
610
592
|
if (t.current) {
|
|
611
|
-
let
|
|
612
|
-
for (;
|
|
613
|
-
|
|
614
|
-
|
|
593
|
+
let p = t.current.parentElement;
|
|
594
|
+
for (; p && !c(p); )
|
|
595
|
+
p = p.parentElement;
|
|
596
|
+
p && i();
|
|
615
597
|
}
|
|
616
598
|
};
|
|
617
599
|
let e = (h = t.current) == null ? void 0 : h.parentElement;
|
|
@@ -638,7 +620,7 @@ const _ = ({
|
|
|
638
620
|
multiSelect: o,
|
|
639
621
|
searchAble: e,
|
|
640
622
|
iconLeft: h,
|
|
641
|
-
placeholder:
|
|
623
|
+
placeholder: p,
|
|
642
624
|
onSearch: v,
|
|
643
625
|
error: I,
|
|
644
626
|
onBlur: C,
|
|
@@ -646,25 +628,25 @@ const _ = ({
|
|
|
646
628
|
disable: $,
|
|
647
629
|
searchValue: z
|
|
648
630
|
}) => {
|
|
649
|
-
const w =
|
|
631
|
+
const w = k(), [n, x] = y([]), [f, E] = y(""), g = k(null), { isComponentVisible: B, ref: L, setIsComponentVisible: N } = V(!1), H = () => {
|
|
650
632
|
N((s) => !s);
|
|
651
633
|
}, j = (s, d) => {
|
|
652
634
|
if (!o)
|
|
653
|
-
|
|
635
|
+
x([{ label: s, value: d }]), i([{ label: s, value: d }]), N(!1);
|
|
654
636
|
else if (n == null ? void 0 : n.find((u) => u.value === d)) {
|
|
655
637
|
const u = [
|
|
656
638
|
...n ? n.filter((D) => D.value !== d) : []
|
|
657
639
|
];
|
|
658
|
-
|
|
640
|
+
x(u), i(u);
|
|
659
641
|
} else {
|
|
660
642
|
const u = [...n || [], { label: s, value: d }];
|
|
661
|
-
|
|
643
|
+
x(u), i(u);
|
|
662
644
|
}
|
|
663
645
|
};
|
|
664
646
|
b(() => {
|
|
665
|
-
JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t,
|
|
647
|
+
JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t, x(w.current || []));
|
|
666
648
|
}, [t]);
|
|
667
|
-
const O = () => n.length ? o ? n == null ? void 0 : n.map((s, d) => /* @__PURE__ */
|
|
649
|
+
const O = () => n.length ? o ? n == null ? void 0 : n.map((s, d) => /* @__PURE__ */ l("div", { className: "starasia-input-dropdown-preview-item", children: [
|
|
668
650
|
/* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s.label }, d),
|
|
669
651
|
/* @__PURE__ */ r(
|
|
670
652
|
X,
|
|
@@ -672,7 +654,7 @@ const _ = ({
|
|
|
672
654
|
onClick: () => j(s.label, s.value)
|
|
673
655
|
}
|
|
674
656
|
)
|
|
675
|
-
] })) : /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ r("p", { className: "starasia-input-dropdown-placeholder", children:
|
|
657
|
+
] })) : /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ r("p", { className: "starasia-input-dropdown-placeholder", children: p }), m = () => {
|
|
676
658
|
if (L.current && g.current) {
|
|
677
659
|
const s = window.innerHeight, d = L.current.getBoundingClientRect(), W = g.current.getBoundingClientRect(), u = d.bottom + W.height;
|
|
678
660
|
g.current.style.left = `${d.left}px`, g.current.style.width = `${d.width}px`, u >= s - 10 ? (g.current.style.top = `${d.top - W.height - 5}px`, E("top")) : (g.current.style.top = `${d.top + d.height}px`, E("bottom"));
|
|
@@ -682,14 +664,14 @@ const _ = ({
|
|
|
682
664
|
window.removeEventListener("scroll", m), window.removeEventListener("resize", m);
|
|
683
665
|
}), []), b(() => {
|
|
684
666
|
m();
|
|
685
|
-
}, [B]), /* @__PURE__ */ r(T, { handleChangePosition: m, children: /* @__PURE__ */
|
|
667
|
+
}, [B]), /* @__PURE__ */ r(T, { handleChangePosition: m, children: /* @__PURE__ */ l(
|
|
686
668
|
"div",
|
|
687
669
|
{
|
|
688
670
|
className: `starasia-input-dropdown-container ${$ ? "disable" : ""} starasia-input-dropdown-size-${c} ${B ? "active" : ""} ${I ? "error" : ""}`,
|
|
689
671
|
ref: L,
|
|
690
672
|
onClick: H,
|
|
691
673
|
children: [
|
|
692
|
-
/* @__PURE__ */
|
|
674
|
+
/* @__PURE__ */ l("div", { className: "starasia-input-dropdown-preview-container", children: [
|
|
693
675
|
h ? /* @__PURE__ */ r(q, { children: F.cloneElement(h, {
|
|
694
676
|
width: S(c),
|
|
695
677
|
color: "#939E99",
|
|
@@ -722,7 +704,7 @@ const _ = ({
|
|
|
722
704
|
dropdownLists: a,
|
|
723
705
|
handleChangeValue: j,
|
|
724
706
|
isComponentVisible: B,
|
|
725
|
-
positionDropdown:
|
|
707
|
+
positionDropdown: f,
|
|
726
708
|
searchAble: !!e,
|
|
727
709
|
value: n,
|
|
728
710
|
onSearch: v,
|
package/dist/dropdown.umd.js
CHANGED
|
@@ -7,27 +7,12 @@
|
|
|
7
7
|
}
|
|
8
8
|
:root {
|
|
9
9
|
/* color */
|
|
10
|
-
/*
|
|
11
|
-
--starasia-ui-dropdown-color-primary-blue: var(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
);
|
|
15
|
-
--starasia-ui-dropdown-color-
|
|
16
|
-
--starasia-ui-color-blue-500,
|
|
17
|
-
#3b82f6
|
|
18
|
-
);
|
|
19
|
-
--starasia-ui-dropdown-color-tertiary-blue: var(
|
|
20
|
-
--starasia-ui-color-blue-300,
|
|
21
|
-
#93c5fd
|
|
22
|
-
);
|
|
23
|
-
--starasia-ui-dropdown-color-quaternary-blue: var(
|
|
24
|
-
--starasia-ui-color-blue-100,
|
|
25
|
-
#dbeafe
|
|
26
|
-
);
|
|
27
|
-
--starasia-ui-dropdown-color-quinary-blue: var(
|
|
28
|
-
--starasia-ui-color-blue-50,
|
|
29
|
-
#eff6ff
|
|
30
|
-
);
|
|
10
|
+
/* brand */
|
|
11
|
+
--starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
12
|
+
--starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
13
|
+
--starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
14
|
+
--starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
15
|
+
--starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
31
16
|
/* gray */
|
|
32
17
|
--starasia-ui-dropdown-color-primary-gray: var(
|
|
33
18
|
--starasia-ui-color-gray-700,
|
|
@@ -66,10 +51,7 @@
|
|
|
66
51
|
);
|
|
67
52
|
|
|
68
53
|
/* border color */
|
|
69
|
-
--starasia-ui-dropdown-border-color-primary: var(
|
|
70
|
-
--starasia-ui-color-blue-500,
|
|
71
|
-
#3b82f6
|
|
72
|
-
);
|
|
54
|
+
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default);
|
|
73
55
|
--starasia-ui-dropdown-border-color-secondary: var(
|
|
74
56
|
--starasia-ui-color-gray-300,
|
|
75
57
|
#d1d5db
|
|
@@ -95,7 +77,7 @@
|
|
|
95
77
|
--starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
96
78
|
|
|
97
79
|
/* shadow */
|
|
98
|
-
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(
|
|
80
|
+
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.2);
|
|
99
81
|
|
|
100
82
|
/* below is for size,above is */
|
|
101
83
|
--starasia-ui-dropdown-fontWeight-normal: var(
|
|
@@ -263,12 +245,12 @@
|
|
|
263
245
|
}
|
|
264
246
|
|
|
265
247
|
.starasia-input-dropdwon-item:hover {
|
|
266
|
-
background-color: rgba(
|
|
248
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
267
249
|
}
|
|
268
250
|
.starasia-input-dropdwon-item.active {
|
|
269
251
|
/* color: var(--starasia-ui-dropdown-background-color-primary); */
|
|
270
252
|
/* border-radius: var(--borderRadius); */
|
|
271
|
-
background-color: rgba(
|
|
253
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
272
254
|
/* background: var(--starasia-ui-dropdown-background-color-secondary); */
|
|
273
255
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
274
256
|
}
|
|
@@ -313,7 +295,7 @@
|
|
|
313
295
|
font-weight: 500;
|
|
314
296
|
}
|
|
315
297
|
.starasia-input-dropdwon-item-text.active {
|
|
316
|
-
color:
|
|
298
|
+
color: var(--starasia-ui-brand-primary-default);
|
|
317
299
|
}
|
|
318
300
|
|
|
319
301
|
.starasia-input-dropdwon-item-text-description {
|
|
@@ -323,14 +305,14 @@
|
|
|
323
305
|
font-weight: 400;
|
|
324
306
|
}
|
|
325
307
|
.starasia-input-dropdwon-item-text-description.active {
|
|
326
|
-
color:
|
|
308
|
+
color: var(--starasia-ui-brand-primary-default);
|
|
327
309
|
}
|
|
328
310
|
|
|
329
311
|
/* for checkbox */
|
|
330
312
|
.checkbox-wrapper-30 .checkbox {
|
|
331
313
|
--bg: #fff;
|
|
332
314
|
--brdr: #d1d6ee;
|
|
333
|
-
--brdr-actv:
|
|
315
|
+
--brdr-actv: var(--starasia-ui-brand-primary-default);
|
|
334
316
|
--brdr-hovr: #bbc1e1;
|
|
335
317
|
--dur: calc((var(--size, 2) / 2) * 0.6s);
|
|
336
318
|
display: inline-block;
|
|
@@ -402,4 +384,4 @@
|
|
|
402
384
|
height: 100%;
|
|
403
385
|
width: 100%;
|
|
404
386
|
}
|
|
405
|
-
`;function A(a){const[e,t]=o.useState(a),
|
|
387
|
+
`;function A(a){const[e,t]=o.useState(a),p=o.useRef(null),i=s=>{p.current&&!p.current.contains(s.target)&&t(!1)};return o.useEffect(()=>(document.addEventListener("click",i,!0),()=>{document.removeEventListener("click",i,!0)}),[]),{ref:p,isComponentVisible:e,setIsComponentVisible:t}}const D=({...a})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 24 24",fill:"none",color:"#939E99",children:n.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),F=({...a})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),O=({isChecked:a})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:a}),n.jsx("svg",{children:n.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:n.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:n.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),H=o.forwardRef(({positionDropdown:a,dropdownLists:e,isComponentVisible:t,searchAble:p,onSearch:i,value:s,handleChangeValue:g,multiSelect:l,searchValue:v},E)=>{const[m,z]=o.useState(0),[N,k]=o.useState(),h=o.useRef(null);return o.useEffect(()=>{if(h.current){const r=h.current.getBoundingClientRect();z(r.width)}},[h,t]),o.useEffect(()=>{e&&v?e.forEach(r=>{if(r.label.startsWith(v||"")){k(r.value);return}}):k(void 0)},[v,e]),n.jsx(n.Fragment,{children:t?n.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:r=>r.stopPropagation(),ref:E,children:[p?n.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:a=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[n.jsx("div",{style:{display:"flex"},children:n.jsx(F,{strokeWidth:2,width:20})}),n.jsx("input",{onChange:r=>{i&&i(r.target.value)},value:v,autoFocus:!0,style:{width:"100%"}})]}):null,n.jsx("div",{className:`starasia-input-dropdwon-item-container ${l?"multi":""}`,ref:h,children:e.map((r,f)=>{const x=!!(s!=null&&s.find(C=>C.value===r.value));return n.jsxs("div",{className:`starasia-input-dropdwon-item ${x?"active":" "} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,onClick:()=>g(r.label,r.value),children:[l?n.jsx("div",{style:{marginRight:"8px"},children:n.jsx(O,{isChecked:x})}):null,r.icon?n.jsx("div",{children:o.cloneElement(r.icon,{width:16})}):null,n.jsxs("div",{children:[n.jsx("p",{className:`starasia-input-dropdwon-item-text ${x?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.label}),r.description?n.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${x?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.description}):null]})]},f)})})]}):null})}),M=({children:a,handleChangePosition:e})=>{const t=o.useRef(null);o.useEffect(()=>{var g;const i=()=>{if(t.current){let l=t.current.parentElement;for(;l&&!p(l);)l=l.parentElement;l&&e()}};let s=(g=t.current)==null?void 0:g.parentElement;for(;s&&!p(s);)s=s.parentElement;return s&&s.addEventListener("scroll",i),i(),()=>{s&&s.removeEventListener("scroll",i)}},[]);const p=i=>i&&(i.scrollHeight>i.clientHeight||i.scrollWidth>i.clientWidth);return n.jsx("div",{ref:t,children:a})},W="starasia-input-dropdown-styles";(a=>{if(!document.getElementById(W)){const e=document.createElement("style");e.id=W,e.textContent=a,document.head.appendChild(e)}})(q);const P=({dropdownLists:a,onChange:e,defaultValue:t,size:p="md",multiSelect:i,searchAble:s,iconLeft:g,placeholder:l,onSearch:v,error:E,onBlur:m,onFocus:z,disable:N,searchValue:k})=>{const h=o.useRef(),[r,f]=o.useState([]),[x,C]=o.useState(""),b=o.useRef(null),{isComponentVisible:I,ref:B,setIsComponentVisible:S}=A(!1),V=()=>{S(d=>!d)},j=(d,c)=>{if(!i)f([{label:d,value:c}]),e([{label:d,value:c}]),S(!1);else if(r==null?void 0:r.find(u=>u.value===c)){const u=[...r?r.filter(G=>G.value!==c):[]];f(u),e(u)}else{const u=[...r||[],{label:d,value:c}];f(u),e(u)}};o.useEffect(()=>{JSON.stringify(h.current)===JSON.stringify(t)||(h.current=t,f(h.current||[]))},[t]);const J=()=>r.length?i?r==null?void 0:r.map((d,c)=>n.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label},c),n.jsx(T,{onClick:()=>j(d.label,d.value)})]})):n.jsx("p",{style:{minWidth:"max-content"},children:r==null?void 0:r[0].label}):n.jsx("p",{className:"starasia-input-dropdown-placeholder",children:l}),y=()=>{if(B.current&&b.current){const d=window.innerHeight,c=B.current.getBoundingClientRect(),L=b.current.getBoundingClientRect(),u=c.bottom+L.height;b.current.style.left=`${c.left}px`,b.current.style.width=`${c.width}px`,u>=d-10?(b.current.style.top=`${c.top-L.height-5}px`,C("top")):(b.current.style.top=`${c.top+c.height}px`,C("bottom"))}};return o.useEffect(()=>(window.addEventListener("scroll",y),window.addEventListener("resize",y),()=>{window.removeEventListener("scroll",y),window.removeEventListener("resize",y)}),[]),o.useEffect(()=>{y()},[I]),n.jsx(M,{handleChangePosition:y,children:n.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${p} ${I?"active":""} ${E?"error":""}`,ref:B,onClick:V,children:[n.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[g?n.jsx(n.Fragment,{children:o.cloneElement(g,{width:$(p),color:"#939E99",style:{color:"#939E99"}})}):null,n.jsx("div",{className:"starasia-input-dropdown-container-preview-item",tabIndex:100,onBlur:m,onFocus:z,children:J()}),n.jsx(D,{strokeWidth:2,width:$(p),style:{color:"#939E99"}})]}),n.jsx(H,{dropdownLists:a,handleChangeValue:j,isComponentVisible:I,positionDropdown:x,searchAble:!!s,value:r,onSearch:v,ref:b,multiSelect:i,searchValue:k})]})})},$=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},T=a=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...a,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});w.Dropdown=P,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starasia/dropdown",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "dropdown component for starasia UI",
|
|
5
5
|
"author": "Prawito Hudoro",
|
|
6
6
|
"main": "dist/dropdown.umd.js",
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
"dist/*.map",
|
|
13
13
|
"dist/*.css"
|
|
14
14
|
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"dev": "vite --config vite.config.ts --port 3000",
|
|
17
|
+
"build": "vite build --config vite.config.ts"
|
|
18
|
+
},
|
|
15
19
|
"keywords": [],
|
|
16
20
|
"license": "ISC",
|
|
17
21
|
"type": "module",
|
|
@@ -33,9 +37,5 @@
|
|
|
33
37
|
"react-dom": "^18.2.0",
|
|
34
38
|
"@types/react": "^18.2.55",
|
|
35
39
|
"@types/react-dom": "^18.2.19"
|
|
36
|
-
},
|
|
37
|
-
"scripts": {
|
|
38
|
-
"dev": "vite --config vite.config.ts --port 3000",
|
|
39
|
-
"build": "vite build --config vite.config.ts"
|
|
40
40
|
}
|
|
41
|
-
}
|
|
41
|
+
}
|