se-design 0.0.112 → 0.0.113
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/assets/style.css +1 -1
- package/dist/components/Banner/index.d.ts +4 -0
- package/dist/components/LabelChip/index.d.ts +1 -0
- package/dist/components/SearchBox/index.d.ts +13 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.js +26 -24
- package/dist/index.js.map +1 -1
- package/dist/index100.js +1 -1
- package/dist/index100.js.map +1 -1
- package/dist/index101.js +2 -2
- package/dist/index101.js.map +1 -1
- package/dist/index102.js +2 -2
- package/dist/index102.js.map +1 -1
- package/dist/index103.js +2 -2
- package/dist/index103.js.map +1 -1
- package/dist/index104.js +2 -2
- package/dist/index104.js.map +1 -1
- package/dist/index105.js +1 -1
- package/dist/index105.js.map +1 -1
- package/dist/index106.js +1 -1
- package/dist/index106.js.map +1 -1
- package/dist/index107.js +1 -1
- package/dist/index107.js.map +1 -1
- package/dist/index108.js +1 -1
- package/dist/index108.js.map +1 -1
- package/dist/index109.js +2 -2
- package/dist/index109.js.map +1 -1
- package/dist/index110.js +2 -2
- package/dist/index110.js.map +1 -1
- package/dist/index111.js +2 -2
- package/dist/index111.js.map +1 -1
- package/dist/index112.js +2 -149
- package/dist/index112.js.map +1 -1
- package/dist/index113.js +152 -0
- package/dist/index113.js.map +1 -0
- package/dist/index124.js +15 -0
- package/dist/index124.js.map +1 -0
- package/dist/index132.js +1233 -5
- package/dist/index132.js.map +1 -1
- package/dist/index133.js +9 -169
- package/dist/index133.js.map +1 -1
- package/dist/index134.js +10 -11
- package/dist/index134.js.map +1 -1
- package/dist/index135.js +4 -5
- package/dist/index135.js.map +1 -1
- package/dist/index136.js +170 -6
- package/dist/index136.js.map +1 -1
- package/dist/index137.js +11 -38
- package/dist/index137.js.map +1 -1
- package/dist/index138.js +6 -2
- package/dist/index138.js.map +1 -1
- package/dist/index139.js +5 -7
- package/dist/index139.js.map +1 -1
- package/dist/index140.js +36 -325
- package/dist/index140.js.map +1 -1
- package/dist/index141.js +2 -50
- package/dist/index141.js.map +1 -1
- package/dist/index142.js +8 -2
- package/dist/index142.js.map +1 -1
- package/dist/index143.js +323 -72
- package/dist/index143.js.map +1 -1
- package/dist/index144.js +47 -90
- package/dist/index144.js.map +1 -1
- package/dist/index145.js +2 -52
- package/dist/index145.js.map +1 -1
- package/dist/index146.js +75 -7
- package/dist/index146.js.map +1 -1
- package/dist/index147.js +92 -4
- package/dist/index147.js.map +1 -1
- package/dist/index148.js +48 -48
- package/dist/index148.js.map +1 -1
- package/dist/index149.js +8 -2
- package/dist/index149.js.map +1 -1
- package/dist/index150.js +5 -2
- package/dist/index150.js.map +1 -1
- package/dist/index151.js +55 -0
- package/dist/index151.js.map +1 -0
- package/dist/index152.js +5 -0
- package/dist/index152.js.map +1 -0
- package/dist/index153.js +5 -0
- package/dist/index153.js.map +1 -0
- package/dist/index27.js +34 -22
- package/dist/index27.js.map +1 -1
- package/dist/index36.js +75 -31
- package/dist/index36.js.map +1 -1
- package/dist/index37.js +26 -44
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +45 -64
- package/dist/index38.js.map +1 -1
- package/dist/index39.js +65 -60
- package/dist/index39.js.map +1 -1
- package/dist/index4.js +68 -68
- package/dist/index40.js +61 -69
- package/dist/index40.js.map +1 -1
- package/dist/index41.js +68 -81
- package/dist/index41.js.map +1 -1
- package/dist/index42.js +84 -35
- package/dist/index42.js.map +1 -1
- package/dist/index43.js +34 -26
- package/dist/index43.js.map +1 -1
- package/dist/index44.js +28 -28
- package/dist/index44.js.map +1 -1
- package/dist/index45.js +30 -2
- package/dist/index45.js.map +1 -1
- package/dist/index46.js +1 -1
- package/dist/index46.js.map +1 -1
- package/dist/index47.js +1 -1
- package/dist/index47.js.map +1 -1
- package/dist/index48.js +1 -1
- package/dist/index48.js.map +1 -1
- package/dist/index49.js +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index50.js +1 -1
- package/dist/index50.js.map +1 -1
- package/dist/index51.js +1 -1
- package/dist/index51.js.map +1 -1
- package/dist/index52.js +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js +1 -1
- package/dist/index53.js.map +1 -1
- package/dist/index54.js +1 -1
- package/dist/index54.js.map +1 -1
- package/dist/index55.js +1 -1
- package/dist/index55.js.map +1 -1
- package/dist/index56.js +1 -1
- package/dist/index56.js.map +1 -1
- package/dist/index57.js +1 -1
- package/dist/index57.js.map +1 -1
- package/dist/index58.js +1 -1
- package/dist/index58.js.map +1 -1
- package/dist/index59.js +1 -1
- package/dist/index59.js.map +1 -1
- package/dist/index60.js +2 -2
- package/dist/index60.js.map +1 -1
- package/dist/index61.js +2 -2
- package/dist/index61.js.map +1 -1
- package/dist/index62.js +1 -1
- package/dist/index62.js.map +1 -1
- package/dist/index63.js +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js +1 -1
- package/dist/index64.js.map +1 -1
- package/dist/index65.js +1 -1
- package/dist/index65.js.map +1 -1
- package/dist/index66.js +1 -1
- package/dist/index66.js.map +1 -1
- package/dist/index67.js +2 -2
- package/dist/index67.js.map +1 -1
- package/dist/index68.js +2 -2
- package/dist/index68.js.map +1 -1
- package/dist/index69.js +1 -1
- package/dist/index69.js.map +1 -1
- package/dist/index70.js +1 -1
- package/dist/index70.js.map +1 -1
- package/dist/index71.js +1 -1
- package/dist/index71.js.map +1 -1
- package/dist/index72.js +2 -2
- package/dist/index72.js.map +1 -1
- package/dist/index73.js +1 -1
- package/dist/index73.js.map +1 -1
- package/dist/index74.js +2 -2
- package/dist/index74.js.map +1 -1
- package/dist/index75.js +1 -1
- package/dist/index75.js.map +1 -1
- package/dist/index76.js +1 -1
- package/dist/index76.js.map +1 -1
- package/dist/index77.js +1 -1
- package/dist/index77.js.map +1 -1
- package/dist/index78.js +1 -1
- package/dist/index78.js.map +1 -1
- package/dist/index79.js +1 -1
- package/dist/index79.js.map +1 -1
- package/dist/index8.js +21 -18
- package/dist/index8.js.map +1 -1
- package/dist/index80.js +1 -1
- package/dist/index80.js.map +1 -1
- package/dist/index81.js +1 -1
- package/dist/index81.js.map +1 -1
- package/dist/index82.js +1 -1
- package/dist/index82.js.map +1 -1
- package/dist/index83.js +1 -1
- package/dist/index83.js.map +1 -1
- package/dist/index84.js +1 -1
- package/dist/index84.js.map +1 -1
- package/dist/index85.js +1 -1
- package/dist/index85.js.map +1 -1
- package/dist/index86.js +1 -1
- package/dist/index86.js.map +1 -1
- package/dist/index87.js +1 -1
- package/dist/index87.js.map +1 -1
- package/dist/index88.js +2 -2
- package/dist/index88.js.map +1 -1
- package/dist/index89.js +2 -2
- package/dist/index89.js.map +1 -1
- package/dist/index90.js +2 -2
- package/dist/index90.js.map +1 -1
- package/dist/index91.js +1 -1
- package/dist/index91.js.map +1 -1
- package/dist/index92.js +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index93.js +1 -1
- package/dist/index93.js.map +1 -1
- package/dist/index94.js +1 -1
- package/dist/index94.js.map +1 -1
- package/dist/index95.js +1 -1
- package/dist/index95.js.map +1 -1
- package/dist/index96.js +1 -1
- package/dist/index96.js.map +1 -1
- package/dist/index97.js +1 -1
- package/dist/index97.js.map +1 -1
- package/dist/index98.js +2 -2
- package/dist/index98.js.map +1 -1
- package/dist/index99.js +2 -2
- package/dist/index99.js.map +1 -1
- package/dist/typographyMixin.scss +60 -21
- package/package.json +1 -1
- package/dist/index129.js +0 -1236
- package/dist/index129.js.map +0 -1
- package/dist/index130.js +0 -13
- package/dist/index130.js.map +0 -1
- package/dist/index131.js +0 -13
- package/dist/index131.js.map +0 -1
package/dist/index40.js
CHANGED
@@ -1,77 +1,69 @@
|
|
1
|
-
|
1
|
+
var v = Object.defineProperty;
|
2
|
+
var n = Object.getOwnPropertySymbols;
|
3
|
+
var x = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
|
4
|
+
var i = (r, e, t) => e in r ? v(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, l = (r, e) => {
|
5
|
+
for (var t in e || (e = {}))
|
6
|
+
x.call(e, t) && i(r, t, e[t]);
|
7
|
+
if (n)
|
8
|
+
for (var t of n(e))
|
9
|
+
w.call(e, t) && i(r, t, e[t]);
|
10
|
+
return r;
|
11
|
+
};
|
12
|
+
import a, { useState as b, useEffect as E } from "react";
|
13
|
+
import { Icon as m } from "./index4.js";
|
2
14
|
/* empty css */
|
3
|
-
const
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
15
|
+
const s = {
|
16
|
+
toastBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]",
|
17
|
+
success: "linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)",
|
18
|
+
error: "linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)",
|
19
|
+
info: "var(--color-gray-700)",
|
20
|
+
toastMessageCtn: "flex items-center gap-2",
|
21
|
+
toastMessage: "text-[var(--color-white)] text-center word-break",
|
22
|
+
closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1"
|
23
|
+
}, M = ({
|
24
|
+
toastBarCtnClassName: r = "",
|
25
|
+
type: e,
|
26
|
+
message: t = "",
|
27
|
+
shouldAutoClose: u = !1,
|
28
|
+
delay: d = 5e3,
|
29
|
+
onClose: o = () => {
|
30
|
+
},
|
31
|
+
containerStyle: f = {}
|
16
32
|
}) => {
|
17
|
-
const [
|
18
|
-
|
19
|
-
if (
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
const y = l == null ? void 0 : l.filter((N) => {
|
25
|
-
var w;
|
26
|
-
return typeof N == "string" && N.toLowerCase().includes((w = t == null ? void 0 : t.toLowerCase()) != null ? w : "");
|
27
|
-
});
|
28
|
-
m(y);
|
33
|
+
const [g, p] = b(!0);
|
34
|
+
E(() => {
|
35
|
+
if (u) {
|
36
|
+
const h = setTimeout(() => {
|
37
|
+
c();
|
38
|
+
}, d);
|
39
|
+
return () => clearTimeout(h);
|
29
40
|
}
|
30
|
-
}, [n, l, r]);
|
31
|
-
C(() => {
|
32
|
-
r && m([...l]);
|
33
|
-
}, [l]), C(() => {
|
34
|
-
const a = (t) => {
|
35
|
-
d.current && !d.current.contains(t.target) && s(!1);
|
36
|
-
};
|
37
|
-
return document.addEventListener("mousedown", a), () => {
|
38
|
-
document.removeEventListener("mousedown", a);
|
39
|
-
};
|
40
41
|
}, []);
|
41
|
-
const
|
42
|
-
|
43
|
-
|
44
|
-
|
42
|
+
const c = () => {
|
43
|
+
setTimeout(() => {
|
44
|
+
p(!1), setTimeout(() => {
|
45
|
+
o == null || o();
|
46
|
+
}, 300);
|
47
|
+
}, 300);
|
45
48
|
};
|
46
|
-
return /* @__PURE__ */
|
47
|
-
className:
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
},
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
className:
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
}
|
62
|
-
|
63
|
-
className: "error-message"
|
64
|
-
}, b), c && /* @__PURE__ */ e.createElement("div", {
|
65
|
-
className: "max-word"
|
66
|
-
}, f.length, "/", c)), h && o.length > 0 && /* @__PURE__ */ e.createElement("div", {
|
67
|
-
className: "suggestions-list"
|
68
|
-
}, r ? r(o, v) : o.map((a, t) => /* @__PURE__ */ e.createElement("div", {
|
69
|
-
key: t,
|
70
|
-
className: "suggestion-item",
|
71
|
-
onClick: () => v(a)
|
72
|
-
}, a))));
|
73
|
-
});
|
49
|
+
return /* @__PURE__ */ a.createElement("div", {
|
50
|
+
className: `se-design-toast-bar ${r} ${s.toastBarCtn} ${g ? "show" : "hide"}`,
|
51
|
+
style: l({
|
52
|
+
background: s[e]
|
53
|
+
}, f)
|
54
|
+
}, /* @__PURE__ */ a.createElement("div", {
|
55
|
+
className: s.toastMessageCtn
|
56
|
+
}, /* @__PURE__ */ a.createElement(m, {
|
57
|
+
name: e === "info" ? "info-white" : "checked-circle-white"
|
58
|
+
}), /* @__PURE__ */ a.createElement("span", {
|
59
|
+
className: s.toastMessage
|
60
|
+
}, t)), /* @__PURE__ */ a.createElement(m, {
|
61
|
+
name: "white-close",
|
62
|
+
className: s.closeIconCtn,
|
63
|
+
onClick: c
|
64
|
+
}));
|
65
|
+
};
|
74
66
|
export {
|
75
|
-
|
67
|
+
M as ToastBar
|
76
68
|
};
|
77
69
|
//# sourceMappingURL=index40.js.map
|
package/dist/index40.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index40.js","sources":["../src/components/
|
1
|
+
{"version":3,"file":"index40.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n toastBarCtnClassName?: string;\n type: \"success\" | \"error\" | \"info\";\n message: string;\n shouldAutoClose?: boolean;\n delay?: number;\n onClose?: () => void;\n containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n toastBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]\",\n success: \"linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)\",\n error: \"linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)\",\n info: \"var(--color-gray-700)\", \n toastMessageCtn: \"flex items-center gap-2\",\n toastMessage: \"text-[var(--color-white)] text-center word-break\",\n closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n toastBarCtnClassName = \"\",\n type,\n message = \"\",\n shouldAutoClose = false,\n delay = 5000,\n onClose = () => {},\n containerStyle = {}\n}) => {\n const [visible, setVisible] = useState(true);\n\n useEffect(() => {\n if (shouldAutoClose) {\n const timer = setTimeout(() => {\n handleClose();\n }, delay);\n return () => clearTimeout(timer);\n }\n }, []);\n\n const handleClose = () => {\n setTimeout(() => {\n setVisible(false);\n setTimeout(() => {\n onClose?.();\n }, 300);\n }, 300);\n };\n\n return (\n <div\n className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n style={{ background: classNames[type], ...containerStyle }}\n >\n <div className={classNames.toastMessageCtn} >\n <Icon name={type === \"info\" ? \"info-white\" : \"checked-circle-white\"} />\n <span className={classNames.toastMessage}>{message}</span>\n </div>\n <Icon name=\"white-close\" className={classNames.closeIconCtn} onClick={handleClose} />\n </div>\n );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","__spreadValues","background","name","onClick"],"mappings":";;;;;;;;;;;AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC,EAAA;AAAA,SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IAAA;AAAA,EAEnC,GAAG,EAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL,KAAA,QAAAA;AAAA,SACT,GAAG;AAAA,OACL,GAAG;AAAA,EACR;AAGEQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAOC,EAAA;AAAA,MAAEC,YAAY3B,EAAWU,CAAI;AAAA,OAAMK;AAAAA,EAAe,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC6B,MAAMlB,MAAS,SAAS,eAAe;AAAA,EAAA,CAAyB,GACtEa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC6B,MAAK;AAAA,IAAcJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACjF;AAET;"}
|
package/dist/index41.js
CHANGED
@@ -1,90 +1,77 @@
|
|
1
|
-
import
|
1
|
+
import e, { useRef as B, useEffect as C } from "react";
|
2
2
|
/* empty css */
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
3
|
+
const _ = /* @__PURE__ */ e.memo(({
|
4
|
+
value: f,
|
5
|
+
onChange: n,
|
6
|
+
disabled: p = !1,
|
7
|
+
maxLength: c,
|
8
|
+
tag: k = "input",
|
9
|
+
error: i = !1,
|
10
|
+
errorMessage: b,
|
11
|
+
label: u,
|
12
|
+
placeholder: x,
|
13
|
+
suggestions: l = [],
|
14
|
+
customRenderSuggestions: r,
|
15
|
+
onSuggestionClick: E
|
11
16
|
}) => {
|
12
|
-
const [
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
17
|
+
const [o, m] = e.useState([...l]), [h, s] = e.useState(!1), d = B(null), I = e.useCallback((a) => {
|
18
|
+
const t = a.target.value;
|
19
|
+
if (r)
|
20
|
+
n(t, !1);
|
21
|
+
else if (n(t), t === "")
|
22
|
+
m([...l]);
|
23
|
+
else if (t) {
|
24
|
+
const y = l == null ? void 0 : l.filter((N) => {
|
25
|
+
var w;
|
26
|
+
return typeof N == "string" && N.toLowerCase().includes((w = t == null ? void 0 : t.toLowerCase()) != null ? w : "");
|
27
|
+
});
|
28
|
+
m(y);
|
29
|
+
}
|
30
|
+
}, [n, l, r]);
|
20
31
|
C(() => {
|
21
|
-
|
22
|
-
|
32
|
+
r && m([...l]);
|
33
|
+
}, [l]), C(() => {
|
34
|
+
const a = (t) => {
|
35
|
+
d.current && !d.current.contains(t.target) && s(!1);
|
36
|
+
};
|
37
|
+
return document.addEventListener("mousedown", a), () => {
|
38
|
+
document.removeEventListener("mousedown", a);
|
23
39
|
};
|
24
|
-
|
25
|
-
|
26
|
-
s
|
27
|
-
},
|
28
|
-
|
29
|
-
const n = e.replace(/\D/g, "");
|
30
|
-
console.log("numericValue", n), h(n), f(n);
|
40
|
+
}, []);
|
41
|
+
const $ = () => {
|
42
|
+
s(!0);
|
43
|
+
}, v = (a) => {
|
44
|
+
n(a, !0), s(!1), E && E(a);
|
31
45
|
};
|
32
|
-
return /* @__PURE__ */
|
33
|
-
className: "
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
}, /* @__PURE__ */
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
name: "chevron-down",
|
50
|
-
className: r ? "rotate-180" : ""
|
51
|
-
})), /* @__PURE__ */ t.createElement("span", {
|
52
|
-
className: "divider"
|
53
|
-
}), /* @__PURE__ */ t.createElement("input", {
|
54
|
-
type: "tel",
|
55
|
-
placeholder: "Enter phone number",
|
56
|
-
className: "phone-input-container-se-design-phone-number-input",
|
57
|
-
onChange: (e) => k(e.target.value),
|
58
|
-
value: S,
|
59
|
-
pattern: "[0-9]*"
|
60
|
-
})), r && /* @__PURE__ */ t.createElement("div", {
|
61
|
-
className: "phone-input-container-se-design-country-code-list"
|
62
|
-
}, /* @__PURE__ */ t.createElement("div", {
|
63
|
-
className: "search-input-wrapper"
|
64
|
-
}, /* @__PURE__ */ t.createElement(g, {
|
65
|
-
name: "search",
|
66
|
-
className: "search-icon"
|
67
|
-
}), /* @__PURE__ */ t.createElement("input", {
|
68
|
-
type: "text",
|
69
|
-
placeholder: "Search",
|
70
|
-
className: "phone-input-container-se-design-country-code-list-item-input",
|
71
|
-
onChange: V,
|
72
|
-
value: L
|
73
|
-
})), p.length > 0 ? p.map((e) => /* @__PURE__ */ t.createElement("div", {
|
74
|
-
key: e.code,
|
75
|
-
className: "phone-input-container-se-design-country-code-list-item",
|
76
|
-
onClick: () => b(e.dial_code)
|
77
|
-
}, /* @__PURE__ */ t.createElement("img", {
|
78
|
-
src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
|
79
|
-
alt: e.name,
|
80
|
-
width: "16"
|
81
|
-
}), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"))) : /* @__PURE__ */ t.createElement("div", {
|
82
|
-
className: "phone-input-container-se-design-country-code-list-item-no-resuts"
|
83
|
-
}, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
|
46
|
+
return /* @__PURE__ */ e.createElement("div", {
|
47
|
+
className: "main-container-autocomplete-se-design",
|
48
|
+
ref: d
|
49
|
+
}, u && /* @__PURE__ */ e.createElement("label", {
|
50
|
+
className: "label-container"
|
51
|
+
}, u), /* @__PURE__ */ e.createElement(k, {
|
52
|
+
value: f,
|
53
|
+
onChange: I,
|
54
|
+
onClick: $,
|
55
|
+
disabled: p,
|
56
|
+
className: `${i ? "input-container-error" : "input-container-default"} ${p ? "input-container-disabled" : ""}`,
|
57
|
+
maxLength: c,
|
58
|
+
placeholder: x
|
59
|
+
}), /* @__PURE__ */ e.createElement("div", {
|
60
|
+
className: `${i ? "error-and-max-word" : "max-word-container"}`
|
61
|
+
}, i && /* @__PURE__ */ e.createElement("div", {
|
62
|
+
id: "error-message",
|
84
63
|
className: "error-message"
|
85
|
-
},
|
86
|
-
|
64
|
+
}, b), c && /* @__PURE__ */ e.createElement("div", {
|
65
|
+
className: "max-word"
|
66
|
+
}, f.length, "/", c)), h && o.length > 0 && /* @__PURE__ */ e.createElement("div", {
|
67
|
+
className: "suggestions-list"
|
68
|
+
}, r ? r(o, v) : o.map((a, t) => /* @__PURE__ */ e.createElement("div", {
|
69
|
+
key: t,
|
70
|
+
className: "suggestion-item",
|
71
|
+
onClick: () => v(a)
|
72
|
+
}, a))));
|
73
|
+
});
|
87
74
|
export {
|
88
|
-
|
75
|
+
_ as AutoCompleteInput
|
89
76
|
};
|
90
77
|
//# sourceMappingURL=index41.js.map
|
package/dist/index41.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index41.js","sources":["../src/components/
|
1
|
+
{"version":3,"file":"index41.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string, fromSuggestion?: boolean) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n suggestions?: string[];\n customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n ({\n value,\n onChange,\n disabled = false,\n maxLength,\n tag = 'input',\n error = false,\n errorMessage,\n label,\n placeholder,\n suggestions = [],\n customRenderSuggestions,\n onSuggestionClick\n }) => {\n const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const handleInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n\n if (customRenderSuggestions) {\n onChange(inputValue, false);\n } else {\n onChange(inputValue);\n if (inputValue === '') {\n setFilteredSuggestions([...suggestions]);\n } else if (inputValue) {\n const filtered = suggestions?.filter((suggestion) =>\n typeof suggestion === 'string' &&\n suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n );\n setFilteredSuggestions(filtered);\n }\n }\n },\n [onChange, suggestions, customRenderSuggestions]\n );\n\n useEffect(() => {\n if (customRenderSuggestions) {\n setFilteredSuggestions([...suggestions]);\n }\n }, [suggestions]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setSuggestionBoxVisible(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const handleInputClick = () => {\n setSuggestionBoxVisible(true);\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n onChange(suggestion, true);\n setSuggestionBoxVisible(false);\n onSuggestionClick && onSuggestionClick(suggestion);\n };\n\n return (\n <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n {label && <label className=\"label-container\">{label}</label>}\n {React.createElement(tag, {\n value: value,\n onChange: handleInputChange,\n onClick: handleInputClick,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n maxLength,\n placeholder\n })}\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && (\n <div id=\"error-message\" className=\"error-message\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div className=\"max-word\">\n {value.length}/{maxLength}\n </div>\n )}\n </div>\n {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n <div className=\"suggestions-list\">\n {customRenderSuggestions\n ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n : filteredSuggestions.map((suggestion, index) => (\n <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n {suggestion}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n }\n);\n"],"names":["AutoCompleteInput","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","onClick","id","length","map","index","key"],"mappings":"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"}
|
package/dist/index42.js
CHANGED
@@ -1,41 +1,90 @@
|
|
1
|
-
import o from "react";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
import t, { useState as o, useRef as R, useEffect as C } from "react";
|
2
|
+
/* empty css */
|
3
|
+
import c from "./index132.js";
|
4
|
+
import { Icon as g } from "./index4.js";
|
5
|
+
const O = ({
|
6
|
+
onCountrycodeChange: E,
|
7
|
+
onNumberChange: f,
|
8
|
+
error: m,
|
9
|
+
errorMessage: N,
|
10
|
+
value: s
|
8
11
|
}) => {
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
12
|
+
const [w, u] = o((s == null ? void 0 : s.countryCode) || c[0].dial_code), [r, i] = o(!1), [p, v] = o(c), [L, _] = o(""), [S, h] = o(""), l = R(null), a = c.find((e) => e.dial_code === w), b = (e) => {
|
13
|
+
e && (u(e), E(e)), i(!1);
|
14
|
+
}, V = (e) => {
|
15
|
+
const n = e.target.value;
|
16
|
+
_(n);
|
17
|
+
const y = c.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
|
18
|
+
v(y);
|
19
|
+
};
|
20
|
+
C(() => {
|
21
|
+
const e = (n) => {
|
22
|
+
l.current && !l.current.contains(n.target) && i(!1);
|
23
|
+
};
|
24
|
+
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
25
|
+
}, []), C(() => {
|
26
|
+
s && (u(s.countryCode), h(s.number));
|
27
|
+
}, [s]);
|
28
|
+
const k = (e) => {
|
29
|
+
const n = e.replace(/\D/g, "");
|
30
|
+
console.log("numericValue", n), h(n), f(n);
|
31
|
+
};
|
32
|
+
return /* @__PURE__ */ t.createElement("div", {
|
33
|
+
className: "phone-input-container-se-design-main-container"
|
34
|
+
}, /* @__PURE__ */ t.createElement("div", {
|
35
|
+
className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
|
36
|
+
ref: l
|
37
|
+
}, /* @__PURE__ */ t.createElement("div", {
|
38
|
+
className: "phone-input-container-se-design"
|
39
|
+
}, /* @__PURE__ */ t.createElement("div", {
|
40
|
+
className: "phone-input-container-se-design-country-code",
|
41
|
+
onClick: () => {
|
42
|
+
i(!r);
|
15
43
|
}
|
16
|
-
}, /* @__PURE__ */
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
}), /* @__PURE__ */
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
}
|
44
|
+
}, /* @__PURE__ */ t.createElement("img", {
|
45
|
+
src: `https://flagcdn.com/${a == null ? void 0 : a.code.toLowerCase()}.svg`,
|
46
|
+
alt: a == null ? void 0 : a.name,
|
47
|
+
width: "16"
|
48
|
+
}), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(g, {
|
49
|
+
name: "chevron-down",
|
50
|
+
className: r ? "rotate-180" : ""
|
51
|
+
})), /* @__PURE__ */ t.createElement("span", {
|
52
|
+
className: "divider"
|
53
|
+
}), /* @__PURE__ */ t.createElement("input", {
|
54
|
+
type: "tel",
|
55
|
+
placeholder: "Enter phone number",
|
56
|
+
className: "phone-input-container-se-design-phone-number-input",
|
57
|
+
onChange: (e) => k(e.target.value),
|
58
|
+
value: S,
|
59
|
+
pattern: "[0-9]*"
|
60
|
+
})), r && /* @__PURE__ */ t.createElement("div", {
|
61
|
+
className: "phone-input-container-se-design-country-code-list"
|
62
|
+
}, /* @__PURE__ */ t.createElement("div", {
|
63
|
+
className: "search-input-wrapper"
|
64
|
+
}, /* @__PURE__ */ t.createElement(g, {
|
65
|
+
name: "search",
|
66
|
+
className: "search-icon"
|
67
|
+
}), /* @__PURE__ */ t.createElement("input", {
|
68
|
+
type: "text",
|
69
|
+
placeholder: "Search",
|
70
|
+
className: "phone-input-container-se-design-country-code-list-item-input",
|
71
|
+
onChange: V,
|
72
|
+
value: L
|
73
|
+
})), p.length > 0 ? p.map((e) => /* @__PURE__ */ t.createElement("div", {
|
74
|
+
key: e.code,
|
75
|
+
className: "phone-input-container-se-design-country-code-list-item",
|
76
|
+
onClick: () => b(e.dial_code)
|
77
|
+
}, /* @__PURE__ */ t.createElement("img", {
|
78
|
+
src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
|
79
|
+
alt: e.name,
|
80
|
+
width: "16"
|
81
|
+
}), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"))) : /* @__PURE__ */ t.createElement("div", {
|
82
|
+
className: "phone-input-container-se-design-country-code-list-item-no-resuts"
|
83
|
+
}, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
|
84
|
+
className: "error-message"
|
85
|
+
}, N));
|
37
86
|
};
|
38
87
|
export {
|
39
|
-
|
88
|
+
O as PhoneInput
|
40
89
|
};
|
41
90
|
//# sourceMappingURL=index42.js.map
|
package/dist/index42.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index42.js","sources":["../src/components/
|
1
|
+
{"version":3,"file":"index42.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n onCountrycodeChange: (countryCode: string) => void;\n onNumberChange: (number: string) => void;\n error?: boolean;\n errorMessage?: string;\n value?: {\n countryCode: string;\n number: string;\n };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n onCountrycodeChange,\n onNumberChange,\n error,\n errorMessage,\n value\n}) => {\n const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n const [searchValue, setSearchValue] = useState('');\n const [enteredNumber, setEnteredNumber] = useState('');\n const containerRef = useRef<HTMLDivElement>(null);\n\n const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n const handleCountryCodeSelect = (country: string) => {\n if (country) {\n setCountryCode(country);\n onCountrycodeChange(country);\n }\n setDisplaySelectCountryCode(false);\n };\n\n const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n const searchValue = event.target.value;\n setSearchValue(searchValue);\n const filteredCountries = countriesInfoJson.filter(\n (country) =>\n country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n country.code.toLowerCase().includes(searchValue.toLowerCase())\n );\n setCountriesInfo(filteredCountries);\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setDisplaySelectCountryCode(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n useEffect(() => {\n if (value) {\n setCountryCode(value.countryCode);\n setEnteredNumber(value.number);\n }\n }, [value]);\n\n const handleEnteredNumberChange = (value: string) => {\n const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n console.log('numericValue', numericValue);\n setEnteredNumber(numericValue);\n onNumberChange(numericValue);\n };\n\n return (\n <div className=\"phone-input-container-se-design-main-container\">\n <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n <div className=\"phone-input-container-se-design\">\n <div\n className=\"phone-input-container-se-design-country-code\"\n onClick={() => {\n setDisplaySelectCountryCode(!displaySelectCountryCode);\n }}\n >\n <img\n src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n alt={countryInfo?.name}\n width=\"16\"\n />\n {countryInfo?.dial_code}\n <Icon name=\"chevron-down\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n </div>\n <span className=\"divider\" />\n <input\n type=\"tel\"\n placeholder=\"Enter phone number\"\n className=\"phone-input-container-se-design-phone-number-input\"\n onChange={(event) => handleEnteredNumberChange(event.target.value)}\n value={enteredNumber}\n pattern=\"[0-9]*\"\n />\n </div>\n\n {displaySelectCountryCode && (\n <div className=\"phone-input-container-se-design-country-code-list\">\n <div className=\"search-input-wrapper\">\n <Icon name=\"search\" className=\"search-icon\" />\n <input\n type=\"text\"\n placeholder=\"Search\"\n className=\"phone-input-container-se-design-country-code-list-item-input\"\n onChange={handleCountryCodeSearch}\n value={searchValue}\n />\n </div>\n {countriesInfo.length > 0 ? (\n countriesInfo.map((country) => (\n <div\n key={country.code}\n className=\"phone-input-container-se-design-country-code-list-item\"\n onClick={() => handleCountryCodeSelect(country.dial_code)}\n >\n <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n <span>{country.name}</span>\n <span>({country.dial_code})</span>\n </div>\n ))\n ) : (\n <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n )}\n </div>\n )}\n </div>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n </div>\n );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}
|