master-components-react-ts 2.1.6 → 2.1.8
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/index.js +2894 -32
- package/dist/style.css +2249 -0
- package/package.json +2 -2
- package/dist/_virtual/_commonjsHelpers.js +0 -8
- package/dist/_virtual/customParseFormat.js +0 -4
- package/dist/assets/Icons/IconArrowUp.js +0 -13
- package/dist/assets/Icons/IconCalendar.js +0 -32
- package/dist/assets/Icons/IconCheck.js +0 -15
- package/dist/assets/Icons/IconCheckCircle.js +0 -16
- package/dist/assets/Icons/IconCheckmark.js +0 -15
- package/dist/assets/Icons/IconCircularLoading.js +0 -36
- package/dist/assets/Icons/IconClose.js +0 -31
- package/dist/assets/Icons/IconCloseBackground.js +0 -15
- package/dist/assets/Icons/IconCloseCircle.js +0 -15
- package/dist/assets/Icons/IconErrorDash.js +0 -15
- package/dist/assets/Icons/IconExclamation.js +0 -15
- package/dist/assets/Icons/IconLeft.js +0 -13
- package/dist/assets/Icons/IconLoading.js +0 -22
- package/dist/assets/Icons/IconMinus.js +0 -7
- package/dist/assets/Icons/IconRadioChecked.js +0 -19
- package/dist/assets/Icons/IconRadioCheckedDisabled.js +0 -19
- package/dist/assets/Icons/IconRadioUnchecked.js +0 -16
- package/dist/assets/Icons/IconRadioUncheckedDisabled.js +0 -16
- package/dist/assets/Icons/IconRight.js +0 -13
- package/dist/assets/Icons/IconSave.js +0 -16
- package/dist/assets/Icons/IconSearch.js +0 -26
- package/dist/assets/Icons/IconSuccess.js +0 -15
- package/dist/assets/Icons/IconTrash.js +0 -16
- package/dist/assets/Inter_24pt-Medium-C1cYvkz2.woff2 +0 -0
- package/dist/assets/Inter_24pt-Regular-C7SEt4-L.woff2 +0 -0
- package/dist/assets/Inter_24pt-SemiBold-DIQUEucn.woff2 +0 -0
- package/dist/assets/style-CXs6Ghy1.css +0 -2249
- package/dist/components/ActionDropdown/ActionDropdown.js +0 -74
- package/dist/components/ActionDropdown/ActionDropdown.module.scss.js +0 -29
- package/dist/components/Checkbox/Checkbox.js +0 -54
- package/dist/components/Checkbox/Checkbox.module.scss.js +0 -26
- package/dist/components/DatePicker/Calendar.js +0 -437
- package/dist/components/DatePicker/Calendar.module.scss.js +0 -83
- package/dist/components/DatePicker/DatePicker.js +0 -211
- package/dist/components/DatePicker/Datepicker.module.scss.js +0 -17
- package/dist/components/Dropdown/Dropdown.js +0 -337
- package/dist/components/Dropdown/Dropdown.module.scss.js +0 -74
- package/dist/components/FormInput/FormInput.js +0 -151
- package/dist/components/FormInput/FormInput.module.scss.js +0 -62
- package/dist/components/InlineLoading/InlineLoading.js +0 -24
- package/dist/components/InlineLoading/InlineLoading.module.scss.js +0 -11
- package/dist/components/MainButton/MainButton.js +0 -72
- package/dist/components/MainButton/MainButton.module.scss.js +0 -56
- package/dist/components/NotificationToast/NotificationContext.js +0 -57
- package/dist/components/NotificationToast/NotificationToast.js +0 -66
- package/dist/components/NotificationToast/NotificationToast.module.scss.js +0 -59
- package/dist/components/NotificationToast/createNotificationToast.js +0 -10
- package/dist/components/Popup/Popup.js +0 -116
- package/dist/components/Popup/Popup.module.scss.js +0 -41
- package/dist/components/Radio/Radio.js +0 -46
- package/dist/components/Radio/Radio.module.scss.js +0 -8
- package/dist/components/Skeleton/Skeleton.js +0 -8
- package/dist/components/Skeleton/Skeleton.module.scss.js +0 -20
- package/dist/components/Textarea/Textarea.js +0 -149
- package/dist/components/Textarea/Textarea.module.scss.js +0 -41
- package/dist/components/TimePicker/TimePicker.js +0 -172
- package/dist/components/TimePicker/TimePicker.module.scss.js +0 -50
- package/dist/components/Toggle/Toggle.js +0 -20
- package/dist/components/Toggle/Toggle.module.scss.js +0 -29
- package/dist/components/Tooltip/Tooltip.js +0 -153
- package/dist/components/Tooltip/Tooltip.module.scss.js +0 -35
- package/dist/context/NamespaceContext.js +0 -7
- package/dist/node_modules/dayjs/plugin/customParseFormat.js +0 -129
- package/dist/utils/Helpers.js +0 -15
package/dist/index.js
CHANGED
|
@@ -1,34 +1,2896 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useEffect, useContext, createContext, useCallback } from "react";
|
|
3
|
+
import dayjs from "dayjs";
|
|
4
|
+
const CIRCLE_RADIUS = 50 / 2;
|
|
5
|
+
const IconCircularLoading = ({ size = 24, strokeWidth = 5, linecap = "round", duration = 1, stroke = "#2753dd", ...rest }) => {
|
|
6
|
+
const center = CIRCLE_RADIUS;
|
|
7
|
+
return /* @__PURE__ */ jsx("svg", { ...rest, viewBox: `0 0 ${CIRCLE_RADIUS * 2} ${CIRCLE_RADIUS * 2}`, width: size, height: size, children: /* @__PURE__ */ jsxs(
|
|
8
|
+
"circle",
|
|
9
|
+
{
|
|
10
|
+
fill: "none",
|
|
11
|
+
stroke,
|
|
12
|
+
strokeWidth,
|
|
13
|
+
strokeLinecap: linecap,
|
|
14
|
+
cx: CIRCLE_RADIUS,
|
|
15
|
+
cy: CIRCLE_RADIUS,
|
|
16
|
+
r: CIRCLE_RADIUS - strokeWidth,
|
|
17
|
+
children: [
|
|
18
|
+
/* @__PURE__ */ jsx(
|
|
19
|
+
"animateTransform",
|
|
20
|
+
{
|
|
21
|
+
attributeName: "transform",
|
|
22
|
+
attributeType: "XML",
|
|
23
|
+
type: "rotate",
|
|
24
|
+
from: `0 ${center} ${center}`,
|
|
25
|
+
to: `360 ${center} ${center}`,
|
|
26
|
+
dur: `${duration * 4 / 3}s`,
|
|
27
|
+
repeatCount: "indefinite"
|
|
28
|
+
}
|
|
29
|
+
),
|
|
30
|
+
/* @__PURE__ */ jsx("animate", { attributeName: "stroke-dasharray", values: "1,200; 89,200; 89 200;", dur: `${duration}s`, repeatCount: "indefinite" }),
|
|
31
|
+
/* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", values: "0;-35;-124;", dur: `${duration}s`, repeatCount: "indefinite" })
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
) });
|
|
35
|
+
};
|
|
36
|
+
const IconSearch = ({ size = "15", color = "#717680" }) => {
|
|
37
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [
|
|
38
|
+
/* @__PURE__ */ jsx(
|
|
39
|
+
"path",
|
|
40
|
+
{
|
|
41
|
+
fillRule: "evenodd",
|
|
42
|
+
clipRule: "evenodd",
|
|
43
|
+
d: "M2.16602 7.16797C2.16602 4.41047 4.40852 2.16797 7.16602 2.16797C9.92352 2.16797 12.166 4.41047 12.166 7.16797C12.166 9.92547 9.92352 12.168 7.16602 12.168C4.40852 12.168 2.16602 9.92547 2.16602 7.16797ZM15.2558 14.0775L12.4267 11.2475C13.3042 10.1192 13.8333 8.705 13.8333 7.16667C13.8333 3.49083 10.8425 0.5 7.16667 0.5C3.49083 0.5 0.5 3.49083 0.5 7.16667C0.5 10.8425 3.49083 13.8333 7.16667 13.8333C8.705 13.8333 10.1192 13.3042 11.2475 12.4267L14.0775 15.2558C14.24 15.4183 14.4533 15.5 14.6667 15.5C14.88 15.5 15.0933 15.4183 15.2558 15.2558C15.5817 14.93 15.5817 14.4033 15.2558 14.0775Z",
|
|
44
|
+
fill: color
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ jsx(
|
|
48
|
+
"path",
|
|
49
|
+
{
|
|
50
|
+
fillRule: "evenodd",
|
|
51
|
+
clipRule: "evenodd",
|
|
52
|
+
d: "M2.16602 7.16797C2.16602 4.41047 4.40852 2.16797 7.16602 2.16797C9.92352 2.16797 12.166 4.41047 12.166 7.16797C12.166 9.92547 9.92352 12.168 7.16602 12.168C4.40852 12.168 2.16602 9.92547 2.16602 7.16797ZM15.2558 14.0775L12.4267 11.2475C13.3042 10.1192 13.8333 8.705 13.8333 7.16667C13.8333 3.49083 10.8425 0.5 7.16667 0.5C3.49083 0.5 0.5 3.49083 0.5 7.16667C0.5 10.8425 3.49083 13.8333 7.16667 13.8333C8.705 13.8333 10.1192 13.3042 11.2475 12.4267L14.0775 15.2558C14.24 15.4183 14.4533 15.5 14.6667 15.5C14.88 15.5 15.0933 15.4183 15.2558 15.2558C15.5817 14.93 15.5817 14.4033 15.2558 14.0775Z",
|
|
53
|
+
fill: color
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
] });
|
|
57
|
+
};
|
|
58
|
+
const IconClose = ({
|
|
59
|
+
width = "14",
|
|
60
|
+
height = "14",
|
|
61
|
+
color = "#A4A7AE",
|
|
62
|
+
xmlns = "http://www.w3.org/2000/svg",
|
|
63
|
+
viewBox = "0 0 14 14",
|
|
64
|
+
fill = "none",
|
|
65
|
+
d = "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5",
|
|
66
|
+
stroke = "#A4A7AE",
|
|
67
|
+
strokeWidth = "1.66667",
|
|
68
|
+
strokeLinecap = "round",
|
|
69
|
+
strokeLinejoin = "round"
|
|
70
|
+
}) => {
|
|
71
|
+
return /* @__PURE__ */ jsx("svg", { xmlns, width, height, viewBox, fill, children: /* @__PURE__ */ jsx("path", { d, stroke, strokeWidth, strokeLinecap, strokeLinejoin }) });
|
|
72
|
+
};
|
|
73
|
+
const IconCloseBlack = ({ color = "#131314" }) => {
|
|
74
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", color, children: /* @__PURE__ */ jsx(
|
|
75
|
+
"path",
|
|
76
|
+
{
|
|
77
|
+
fillRule: "evenodd",
|
|
78
|
+
clipRule: "evenodd",
|
|
79
|
+
d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L7.41421 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3166 12.0976 10.6834 12.0976 10.2929 11.7071L6 7.41421L1.70711 11.7071C1.31658 12.0976 0.683417 12.0976 0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929L4.58579 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z",
|
|
80
|
+
fill: color
|
|
81
|
+
}
|
|
82
|
+
) });
|
|
83
|
+
};
|
|
84
|
+
const IconCloseCircle = ({ width = "20", height = "20", color = "#C1C2C7" }) => {
|
|
85
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
86
|
+
"path",
|
|
87
|
+
{
|
|
88
|
+
fillRule: "evenodd",
|
|
89
|
+
clipRule: "evenodd",
|
|
90
|
+
d: "M9.99996 18.3334C14.6023 18.3334 18.3333 14.6024 18.3333 10C18.3333 5.39765 14.6023 1.66669 9.99996 1.66669C5.39759 1.66669 1.66663 5.39765 1.66663 10C1.66663 14.6024 5.39759 18.3334 9.99996 18.3334ZM8.08922 6.91077C7.76378 6.58533 7.23614 6.58533 6.9107 6.91077C6.58527 7.2362 6.58527 7.76384 6.9107 8.08928L8.82145 10L6.9107 11.9108C6.58527 12.2362 6.58527 12.7638 6.9107 13.0893C7.23614 13.4147 7.76378 13.4147 8.08922 13.0893L9.99996 11.1785L11.9107 13.0893C12.2361 13.4147 12.7638 13.4147 13.0892 13.0893C13.4147 12.7638 13.4147 12.2362 13.0892 11.9108L11.1785 10L13.0892 8.08928C13.4147 7.76384 13.4147 7.2362 13.0892 6.91077C12.7638 6.58533 12.2361 6.58533 11.9107 6.91077L9.99996 8.82151L8.08922 6.91077Z",
|
|
91
|
+
fill: color
|
|
92
|
+
}
|
|
93
|
+
) });
|
|
94
|
+
};
|
|
95
|
+
const IconCheckmark = ({ width = "8", height = "6", color = "#ffffff" }) => {
|
|
96
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 8 6", fill: "none", children: /* @__PURE__ */ jsx(
|
|
97
|
+
"path",
|
|
98
|
+
{
|
|
99
|
+
fillRule: "evenodd",
|
|
100
|
+
clipRule: "evenodd",
|
|
101
|
+
d: "M7.7 0.3C7.3 -0.1 6.7 -0.1 6.3 0.3L3 3.6L1.7 2.3C1.3 1.9 0.7 1.9 0.3 2.3C-0.1 2.7 -0.1 3.3 0.3 3.7L2.3 5.7C2.5 5.9 2.7 6 3 6C3.3 6 3.5 5.9 3.7 5.7L7.7 1.7C8.1 1.3 8.1 0.7 7.7 0.3Z",
|
|
102
|
+
fill: color
|
|
103
|
+
}
|
|
104
|
+
) });
|
|
105
|
+
};
|
|
106
|
+
const IconMinus = ({ width = "8", height = "2", color = "#ffffff" }) => {
|
|
107
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 8 2", fill: "none", children: /* @__PURE__ */ jsx("rect", { width, height, rx: "1", fill: color }) });
|
|
108
|
+
};
|
|
109
|
+
const IconRadioChecked = ({ size = "24", color = "#0058FF" }) => {
|
|
110
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
|
|
111
|
+
/* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_118_485)", children: [
|
|
112
|
+
/* @__PURE__ */ jsx(
|
|
113
|
+
"path",
|
|
114
|
+
{
|
|
115
|
+
d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
|
|
116
|
+
fill: color
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
/* @__PURE__ */ jsx("path", { d: "M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z", fill: color })
|
|
120
|
+
] }),
|
|
121
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_485", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
|
|
122
|
+
] });
|
|
123
|
+
};
|
|
124
|
+
const IconRadioUnchecked = ({ size = "24", color = "#C1C2C7" }) => {
|
|
125
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
|
|
126
|
+
/* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_118_495)", children: /* @__PURE__ */ jsx(
|
|
127
|
+
"path",
|
|
128
|
+
{
|
|
129
|
+
d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
|
|
130
|
+
fill: color
|
|
131
|
+
}
|
|
132
|
+
) }),
|
|
133
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_495", children: /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: "white" }) }) })
|
|
134
|
+
] });
|
|
135
|
+
};
|
|
136
|
+
const IconRadioCheckedDisabled = ({ size = "24", color = "#95969C" }) => {
|
|
137
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
|
|
138
|
+
/* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_118_531)", children: [
|
|
139
|
+
/* @__PURE__ */ jsx(
|
|
140
|
+
"path",
|
|
141
|
+
{
|
|
142
|
+
d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
|
|
143
|
+
fill: color
|
|
144
|
+
}
|
|
145
|
+
),
|
|
146
|
+
/* @__PURE__ */ jsx("path", { d: "M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z", fill: color })
|
|
147
|
+
] }),
|
|
148
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_531", children: /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: "white" }) }) })
|
|
149
|
+
] });
|
|
150
|
+
};
|
|
151
|
+
const IconRadioUncheckedDisabled = ({ size = "24", color = "#C1C2C7" }) => {
|
|
152
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: [
|
|
153
|
+
/* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_118_495)", children: /* @__PURE__ */ jsx(
|
|
154
|
+
"path",
|
|
155
|
+
{
|
|
156
|
+
d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
|
|
157
|
+
fill: color
|
|
158
|
+
}
|
|
159
|
+
) }),
|
|
160
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_118_495", children: /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: "white" }) }) })
|
|
161
|
+
] });
|
|
162
|
+
};
|
|
163
|
+
const IconArrowUp = ({ width = "10", height = "6", color = "#131314" }) => {
|
|
164
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: `0 0 ${width} ${height}`, fill: "none", children: /* @__PURE__ */ jsx(
|
|
165
|
+
"path",
|
|
166
|
+
{
|
|
167
|
+
d: "M4.75065 3.75401L8.00065 0.504008C8.15343 0.35123 8.34787 0.274841 8.58398 0.274841C8.8201 0.274841 9.01454 0.35123 9.16732 0.504008C9.3201 0.656786 9.39648 0.85123 9.39648 1.08734C9.39648 1.32345 9.3201 1.5179 9.16732 1.67067L5.33398 5.50401C5.25065 5.58734 5.16037 5.64637 5.06315 5.68109C4.96593 5.71581 4.86176 5.73317 4.75065 5.73317C4.63954 5.73317 4.53537 5.71581 4.43815 5.68109C4.34093 5.64637 4.25065 5.58734 4.16732 5.50401L0.333984 1.67067C0.181207 1.5179 0.104817 1.32345 0.104817 1.08734C0.104817 0.85123 0.181207 0.656785 0.333984 0.504008C0.486762 0.35123 0.681207 0.274841 0.917317 0.274841C1.15343 0.274841 1.34787 0.35123 1.50065 0.504008L4.75065 3.75401Z",
|
|
168
|
+
fill: color
|
|
169
|
+
}
|
|
170
|
+
) });
|
|
171
|
+
};
|
|
172
|
+
const IconCheckCircle = ({ width = "24", height = "24", color = "#079455" }) => {
|
|
173
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
174
|
+
"path",
|
|
175
|
+
{
|
|
176
|
+
d: "M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
|
|
177
|
+
stroke: color,
|
|
178
|
+
strokeWidth: "2",
|
|
179
|
+
strokeLinecap: "round",
|
|
180
|
+
strokeLinejoin: "round"
|
|
181
|
+
}
|
|
182
|
+
) });
|
|
183
|
+
};
|
|
184
|
+
const IconSave = ({ size = "24", color = "#DC6803" }) => {
|
|
185
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
186
|
+
"path",
|
|
187
|
+
{
|
|
188
|
+
d: "M7 3V6.4C7 6.96005 7 7.24008 7.10899 7.45399C7.20487 7.64215 7.35785 7.79513 7.54601 7.89101C7.75992 8 8.03995 8 8.6 8H15.4C15.9601 8 16.2401 8 16.454 7.89101C16.6422 7.79513 16.7951 7.64215 16.891 7.45399C17 7.24008 17 6.96005 17 6.4V4M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z",
|
|
189
|
+
stroke: color,
|
|
190
|
+
strokeWidth: "2",
|
|
191
|
+
strokeLinecap: "round",
|
|
192
|
+
strokeLinejoin: "round"
|
|
193
|
+
}
|
|
194
|
+
) });
|
|
195
|
+
};
|
|
196
|
+
const IconTrash = ({ width = "24", color = "#D92D20" }) => {
|
|
197
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width, height: width, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
198
|
+
"path",
|
|
199
|
+
{
|
|
200
|
+
d: "M16 6V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6",
|
|
201
|
+
stroke: color,
|
|
202
|
+
strokeWidth: "2",
|
|
203
|
+
strokeLinecap: "round",
|
|
204
|
+
strokeLinejoin: "round"
|
|
205
|
+
}
|
|
206
|
+
) });
|
|
207
|
+
};
|
|
208
|
+
const IconExclamation = ({ color = "#ffffff" }) => {
|
|
209
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
210
|
+
"path",
|
|
211
|
+
{
|
|
212
|
+
fillRule: "evenodd",
|
|
213
|
+
clipRule: "evenodd",
|
|
214
|
+
d: "M1.66699 9.99999C1.66699 5.39762 5.39795 1.66666 10.0003 1.66666C14.6027 1.66666 18.3337 5.39762 18.3337 9.99999C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 9.99999ZM10.0003 5.83332C10.4606 5.83332 10.8337 6.20642 10.8337 6.66666V9.99999C10.8337 10.4602 10.4606 10.8333 10.0003 10.8333C9.54009 10.8333 9.16699 10.4602 9.16699 9.99999V6.66666C9.16699 6.20642 9.54009 5.83332 10.0003 5.83332ZM9.16699 13.3333C9.16699 12.8731 9.54009 12.5 10.0003 12.5C10.4606 12.5 10.8337 12.8731 10.8337 13.3333C10.8337 13.7936 10.4606 14.1667 10.0003 14.1667C9.54009 14.1667 9.16699 13.7936 9.16699 13.3333Z",
|
|
215
|
+
fill: color
|
|
216
|
+
}
|
|
217
|
+
) });
|
|
218
|
+
};
|
|
219
|
+
const IconCheck = ({ color = "#ffffff" }) => {
|
|
220
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
221
|
+
"path",
|
|
222
|
+
{
|
|
223
|
+
fillRule: "evenodd",
|
|
224
|
+
clipRule: "evenodd",
|
|
225
|
+
d: "M1.66699 10C1.66699 5.39763 5.39795 1.66667 10.0003 1.66667C14.6027 1.66667 18.3337 5.39763 18.3337 10C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 10ZM13.0896 8.92259C13.415 8.59716 13.415 8.06952 13.0896 7.74408C12.7641 7.41865 12.2365 7.41865 11.9111 7.74408L9.16699 10.4882L8.08958 9.41075C7.76414 9.08531 7.23651 9.08531 6.91107 9.41075C6.58563 9.73619 6.58563 10.2638 6.91107 10.5893L8.57774 12.2559C8.90317 12.5814 9.43081 12.5814 9.75625 12.2559L13.0896 8.92259Z",
|
|
226
|
+
fill: color
|
|
227
|
+
}
|
|
228
|
+
) });
|
|
229
|
+
};
|
|
230
|
+
const IconCalendar = ({ width = "16", height = "16", color = "#C1C2C7" }) => {
|
|
231
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 16 16", fill: "none", children: [
|
|
232
|
+
/* @__PURE__ */ jsx("path", { d: "M1.33333 5.5H14.6667V7.16667H1.33333V5.5Z", fill: color }),
|
|
233
|
+
/* @__PURE__ */ jsx(
|
|
234
|
+
"path",
|
|
235
|
+
{
|
|
236
|
+
fillRule: "evenodd",
|
|
237
|
+
clipRule: "evenodd",
|
|
238
|
+
d: "M5.29892 2.16667H10.7011C11.3719 2.16666 11.9255 2.16665 12.3765 2.20349C12.8449 2.24177 13.2755 2.3239 13.68 2.52998C14.3072 2.84956 14.8171 3.35949 15.1367 3.9867C15.3428 4.39114 15.4249 4.82173 15.4632 5.29014C15.5 5.74114 15.5 6.29476 15.5 6.96556V10.7011C15.5 11.3719 15.5 11.9255 15.4632 12.3765C15.4249 12.8449 15.3428 13.2755 15.1367 13.68C14.8171 14.3072 14.3072 14.8171 13.68 15.1367C13.2755 15.3428 12.8449 15.4249 12.3765 15.4632C11.9255 15.5 11.3719 15.5 10.7011 15.5H5.29894C4.62812 15.5 4.07448 15.5 3.62348 15.4632C3.15506 15.4249 2.72448 15.3428 2.32003 15.1367C1.69283 14.8171 1.18289 14.3072 0.863312 13.68C0.657237 13.2755 0.5751 12.8449 0.536829 12.3765C0.499981 11.9255 0.49999 11.3719 0.5 10.7011V6.96558C0.49999 6.29478 0.499981 5.74114 0.536829 5.29014C0.5751 4.82173 0.657237 4.39114 0.863312 3.9867C1.18289 3.35949 1.69283 2.84956 2.32003 2.52998C2.72448 2.3239 3.15506 2.24177 3.62348 2.20349C4.07448 2.16665 4.62811 2.16666 5.29892 2.16667ZM3.7592 3.86463C3.39385 3.89448 3.20702 3.94858 3.07668 4.01499C2.76308 4.17478 2.50811 4.42975 2.34832 4.74335C2.28192 4.87368 2.22781 5.06052 2.19796 5.42586C2.16732 5.80094 2.16667 6.28618 2.16667 7V10.6667C2.16667 11.3805 2.16732 11.8657 2.19796 12.2408C2.22781 12.6061 2.28192 12.793 2.34832 12.9233C2.50811 13.2369 2.76308 13.4919 3.07668 13.6517C3.20702 13.7181 3.39385 13.7722 3.7592 13.802C4.13427 13.8327 4.61952 13.8333 5.33333 13.8333H10.6667C11.3805 13.8333 11.8657 13.8327 12.2408 13.802C12.6061 13.7722 12.793 13.7181 12.9233 13.6517C13.2369 13.4919 13.4919 13.2369 13.6517 12.9233C13.7181 12.793 13.7722 12.6061 13.802 12.2408C13.8327 11.8657 13.8333 11.3805 13.8333 10.6667V7C13.8333 6.28618 13.8327 5.80094 13.802 5.42586C13.7722 5.06052 13.7181 4.87368 13.6517 4.74335C13.4919 4.42975 13.2369 4.17478 12.9233 4.01499C12.793 3.94858 12.6061 3.89448 12.2408 3.86463C11.8657 3.83398 11.3805 3.83333 10.6667 3.83333H5.33333C4.61952 3.83333 4.13427 3.83398 3.7592 3.86463Z",
|
|
239
|
+
fill: color
|
|
240
|
+
}
|
|
241
|
+
),
|
|
242
|
+
/* @__PURE__ */ jsx(
|
|
243
|
+
"path",
|
|
244
|
+
{
|
|
245
|
+
d: "M5.5 1.33333C5.5 0.873096 5.1269 0.5 4.66667 0.5C4.20643 0.5 3.83333 0.873096 3.83333 1.33333V3C3.83333 3.46024 4.20643 3.83333 4.66667 3.83333C5.1269 3.83333 5.5 3.46024 5.5 3V1.33333Z",
|
|
246
|
+
fill: color
|
|
247
|
+
}
|
|
248
|
+
),
|
|
249
|
+
/* @__PURE__ */ jsx(
|
|
250
|
+
"path",
|
|
251
|
+
{
|
|
252
|
+
d: "M12.1667 1.33333C12.1667 0.873096 11.7936 0.5 11.3333 0.5C10.8731 0.5 10.5 0.873096 10.5 1.33333V3C10.5 3.46024 10.8731 3.83333 11.3333 3.83333C11.7936 3.83333 12.1667 3.46024 12.1667 3V1.33333Z",
|
|
253
|
+
fill: color
|
|
254
|
+
}
|
|
255
|
+
)
|
|
256
|
+
] });
|
|
257
|
+
};
|
|
258
|
+
const IconLeft = ({ size = "20", color = "#131314" }) => {
|
|
259
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
260
|
+
"path",
|
|
261
|
+
{
|
|
262
|
+
d: "M9.00081 10.0039L12.2508 13.2539C12.4036 13.4067 12.48 13.6012 12.48 13.8373C12.48 14.0734 12.4036 14.2678 12.2508 14.4206C12.098 14.5734 11.9036 14.6498 11.6675 14.6498C11.4314 14.6498 11.2369 14.5734 11.0841 14.4206L7.25081 10.5873C7.16748 10.5039 7.10845 10.4137 7.07373 10.3164C7.03901 10.2192 7.02165 10.1151 7.02165 10.0039C7.02165 9.89284 7.03901 9.78867 7.07373 9.69145C7.10845 9.59422 7.16748 9.50395 7.25081 9.42061L11.0841 5.58728C11.2369 5.4345 11.4314 5.35811 11.6675 5.35811C11.9036 5.35811 12.098 5.4345 12.2508 5.58728C12.4036 5.74006 12.48 5.9345 12.48 6.17061C12.48 6.40672 12.4036 6.60117 12.2508 6.75395L9.00081 10.0039Z",
|
|
263
|
+
fill: color
|
|
264
|
+
}
|
|
265
|
+
) });
|
|
266
|
+
};
|
|
267
|
+
const IconRight = ({ size = "20", color = "#131314", style: style2 }) => {
|
|
268
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
269
|
+
"path",
|
|
270
|
+
{
|
|
271
|
+
d: "M10.5007 10.004L7.25065 6.75399C7.09787 6.60121 7.02148 6.40677 7.02148 6.17065C7.02148 5.93454 7.09787 5.7401 7.25065 5.58732C7.40343 5.43454 7.59787 5.35815 7.83398 5.35815C8.0701 5.35815 8.26454 5.43454 8.41732 5.58732L12.2507 9.42065C12.334 9.50399 12.393 9.59427 12.4277 9.69149C12.4625 9.78871 12.4798 9.89288 12.4798 10.004C12.4798 10.1151 12.4625 10.2193 12.4277 10.3165C12.393 10.4137 12.334 10.504 12.2507 10.5873L8.41732 14.4207C8.26454 14.5734 8.0701 14.6498 7.83398 14.6498C7.59787 14.6498 7.40343 14.5734 7.25065 14.4207C7.09787 14.2679 7.02148 14.0734 7.02148 13.8373C7.02148 13.6012 7.09787 13.4068 7.25065 13.254L10.5007 10.004Z",
|
|
272
|
+
fill: color
|
|
273
|
+
}
|
|
274
|
+
) });
|
|
275
|
+
};
|
|
276
|
+
const IconCloseBackground = ({ size = 20, color = "#C1C2C7" }) => {
|
|
277
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
278
|
+
"path",
|
|
279
|
+
{
|
|
280
|
+
fillRule: "evenodd",
|
|
281
|
+
clipRule: "evenodd",
|
|
282
|
+
d: "M10.0001 18.3332C14.6025 18.3332 18.3334 14.6022 18.3334 9.99984C18.3334 5.39746 14.6025 1.6665 10.0001 1.6665C5.39771 1.6665 1.66675 5.39746 1.66675 9.99984C1.66675 14.6022 5.39771 18.3332 10.0001 18.3332ZM8.08934 6.91058C7.7639 6.58514 7.23626 6.58514 6.91083 6.91058C6.58539 7.23602 6.58539 7.76366 6.91083 8.08909L8.82157 9.99984L6.91083 11.9106C6.58539 12.236 6.58539 12.7637 6.91083 13.0891C7.23626 13.4145 7.7639 13.4145 8.08934 13.0891L10.0001 11.1783L11.9108 13.0891C12.2363 13.4145 12.7639 13.4145 13.0893 13.0891C13.4148 12.7637 13.4148 12.236 13.0893 11.9106L11.1786 9.99984L13.0893 8.08909C13.4148 7.76366 13.4148 7.23602 13.0893 6.91058C12.7639 6.58514 12.2363 6.58514 11.9108 6.91058L10.0001 8.82133L8.08934 6.91058Z",
|
|
283
|
+
fill: color
|
|
284
|
+
}
|
|
285
|
+
) });
|
|
286
|
+
};
|
|
287
|
+
const mainButton = "MainButton-module__mainButton";
|
|
288
|
+
const sm$2 = "MainButton-module__sm";
|
|
289
|
+
const md$2 = "MainButton-module__md";
|
|
290
|
+
const lg$1 = "MainButton-module__lg";
|
|
291
|
+
const mainButtonContent = "MainButton-module__mainButtonContent";
|
|
292
|
+
const mainButtonLabel = "MainButton-module__mainButtonLabel";
|
|
293
|
+
const primary = "MainButton-module__primary";
|
|
294
|
+
const neutral$1 = "MainButton-module__neutral";
|
|
295
|
+
const loading$1 = "MainButton-module__loading";
|
|
296
|
+
const disabled$5 = "MainButton-module__disabled";
|
|
297
|
+
const focused$4 = "MainButton-module__focused";
|
|
298
|
+
const positive = "MainButton-module__positive";
|
|
299
|
+
const negative = "MainButton-module__negative";
|
|
300
|
+
const secondary = "MainButton-module__secondary";
|
|
301
|
+
const tertiary = "MainButton-module__tertiary";
|
|
302
|
+
const tertiaryV2 = "MainButton-module__tertiaryV2";
|
|
303
|
+
const tertiaryV3 = "MainButton-module__tertiaryV3";
|
|
304
|
+
const style$f = {
|
|
305
|
+
mainButton,
|
|
306
|
+
sm: sm$2,
|
|
307
|
+
md: md$2,
|
|
308
|
+
lg: lg$1,
|
|
309
|
+
mainButtonContent,
|
|
310
|
+
mainButtonLabel,
|
|
311
|
+
primary,
|
|
312
|
+
neutral: neutral$1,
|
|
313
|
+
loading: loading$1,
|
|
314
|
+
disabled: disabled$5,
|
|
315
|
+
focused: focused$4,
|
|
316
|
+
positive,
|
|
317
|
+
negative,
|
|
318
|
+
secondary,
|
|
319
|
+
tertiary,
|
|
320
|
+
tertiaryV2,
|
|
321
|
+
tertiaryV3
|
|
322
|
+
};
|
|
323
|
+
const MainButton = ({
|
|
324
|
+
label,
|
|
325
|
+
size = "md",
|
|
326
|
+
leftSlot,
|
|
327
|
+
rightSlot,
|
|
328
|
+
buttonSlot,
|
|
329
|
+
type = "button",
|
|
330
|
+
colorType = "neutral",
|
|
331
|
+
buttonType = "primary",
|
|
332
|
+
withFocus = false,
|
|
333
|
+
customFocus,
|
|
334
|
+
disabled: disabled2,
|
|
335
|
+
loading: loading2 = false,
|
|
336
|
+
spaceBetween = false,
|
|
337
|
+
buttonStyle,
|
|
338
|
+
mainButtonContentStyle,
|
|
339
|
+
mainButtonLabelStyle,
|
|
340
|
+
leftSlotStyle,
|
|
341
|
+
rightSlotStyle,
|
|
342
|
+
onClick
|
|
343
|
+
}) => {
|
|
344
|
+
const [Focused, setFocused] = useState(customFocus || false);
|
|
345
|
+
const ButtonRef = useRef(null);
|
|
346
|
+
const Click = (e) => {
|
|
347
|
+
if (disabled2 || loading2) return;
|
|
348
|
+
if (withFocus) {
|
|
349
|
+
setFocused((state) => !state);
|
|
350
|
+
}
|
|
351
|
+
onClick?.(e);
|
|
352
|
+
};
|
|
353
|
+
const getLoadingColor = () => {
|
|
354
|
+
let color = "#ffffff";
|
|
355
|
+
if (colorType === "neutral" && buttonType !== "primary") color = "#0058FF";
|
|
356
|
+
if (colorType === "positive" && buttonType !== "primary") color = "#328707";
|
|
357
|
+
if (colorType === "negative" && buttonType !== "primary") color = "#E3292F";
|
|
358
|
+
return color;
|
|
359
|
+
};
|
|
360
|
+
useEffect(() => {
|
|
361
|
+
const ClickHandler = (event) => {
|
|
362
|
+
if (!ButtonRef.current || disabled2) return;
|
|
363
|
+
if (event.composedPath().includes(ButtonRef.current)) return;
|
|
364
|
+
setFocused(false);
|
|
365
|
+
};
|
|
366
|
+
document.addEventListener("click", ClickHandler);
|
|
367
|
+
return () => {
|
|
368
|
+
document.removeEventListener("click", ClickHandler);
|
|
369
|
+
};
|
|
370
|
+
}, []);
|
|
371
|
+
return /* @__PURE__ */ jsx(
|
|
372
|
+
"button",
|
|
373
|
+
{
|
|
374
|
+
ref: ButtonRef,
|
|
375
|
+
style: buttonStyle,
|
|
376
|
+
type,
|
|
377
|
+
disabled: disabled2,
|
|
378
|
+
className: `${style$f.mainButton} ${style$f[size]} ${loading2 ? style$f.loading : ""} ${Focused ? style$f.focused : ""} ${style$f[buttonType]} ${style$f[colorType]} ${disabled2 ? style$f.disabled : ""}`,
|
|
379
|
+
onClick: Click,
|
|
380
|
+
children: loading2 ? /* @__PURE__ */ jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxs("div", { className: style$f.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
|
|
381
|
+
leftSlot && /* @__PURE__ */ jsx("div", { className: style$f.leftSlot, style: leftSlotStyle, children: leftSlot }),
|
|
382
|
+
/* @__PURE__ */ jsx("p", { className: style$f.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
|
|
383
|
+
rightSlot && /* @__PURE__ */ jsx("div", { className: style$f.rightSlot, style: rightSlotStyle, children: rightSlot })
|
|
384
|
+
] })
|
|
385
|
+
}
|
|
386
|
+
);
|
|
387
|
+
};
|
|
388
|
+
const inputWrapper = "FormInput-module__inputWrapper";
|
|
389
|
+
const sm$1 = "FormInput-module__sm";
|
|
390
|
+
const formInputWrapper = "FormInput-module__formInputWrapper";
|
|
391
|
+
const md$1 = "FormInput-module__md";
|
|
392
|
+
const disabled$4 = "FormInput-module__disabled";
|
|
393
|
+
const formInputLabel = "FormInput-module__formInputLabel";
|
|
394
|
+
const formInput = "FormInput-module__formInput";
|
|
395
|
+
const formInputHelperText = "FormInput-module__formInputHelperText";
|
|
396
|
+
const formInputLabelWrapper = "FormInput-module__formInputLabelWrapper";
|
|
397
|
+
const formInputRequired = "FormInput-module__formInputRequired";
|
|
398
|
+
const formInputHelperSlot = "FormInput-module__formInputHelperSlot";
|
|
399
|
+
const errorState = "FormInput-module__errorState";
|
|
400
|
+
const focused$3 = "FormInput-module__focused";
|
|
401
|
+
const active$2 = "FormInput-module__active";
|
|
402
|
+
const errorFocused$1 = "FormInput-module__errorFocused";
|
|
403
|
+
const errorActive$1 = "FormInput-module__errorActive";
|
|
404
|
+
const formInputSlot = "FormInput-module__formInputSlot";
|
|
405
|
+
const errorHelperText = "FormInput-module__errorHelperText";
|
|
406
|
+
const successHelperText = "FormInput-module__successHelperText";
|
|
407
|
+
const style$e = {
|
|
408
|
+
inputWrapper,
|
|
409
|
+
sm: sm$1,
|
|
410
|
+
formInputWrapper,
|
|
411
|
+
md: md$1,
|
|
412
|
+
disabled: disabled$4,
|
|
413
|
+
formInputLabel,
|
|
414
|
+
formInput,
|
|
415
|
+
formInputHelperText,
|
|
416
|
+
formInputLabelWrapper,
|
|
417
|
+
formInputRequired,
|
|
418
|
+
formInputHelperSlot,
|
|
419
|
+
errorState,
|
|
420
|
+
focused: focused$3,
|
|
421
|
+
active: active$2,
|
|
422
|
+
errorFocused: errorFocused$1,
|
|
423
|
+
errorActive: errorActive$1,
|
|
424
|
+
formInputSlot,
|
|
425
|
+
errorHelperText,
|
|
426
|
+
successHelperText
|
|
427
|
+
};
|
|
428
|
+
const FormInput = ({
|
|
429
|
+
label,
|
|
430
|
+
placeholder,
|
|
431
|
+
helperText,
|
|
432
|
+
required: required2 = false,
|
|
433
|
+
disabled: disabled2 = false,
|
|
434
|
+
readOnly = false,
|
|
435
|
+
withFocus = true,
|
|
436
|
+
withActive = true,
|
|
437
|
+
searchComponent = false,
|
|
438
|
+
size = "md",
|
|
439
|
+
toggleFocus = false,
|
|
440
|
+
rightSlot,
|
|
441
|
+
leftSlot,
|
|
442
|
+
helperSlot,
|
|
443
|
+
type = "text",
|
|
444
|
+
value,
|
|
445
|
+
maxLength,
|
|
446
|
+
forDropdown = false,
|
|
447
|
+
customFocus = null,
|
|
448
|
+
focus = false,
|
|
449
|
+
inputState = { error: false, success: false, loading: false },
|
|
450
|
+
inputSlot,
|
|
451
|
+
onChange,
|
|
452
|
+
onFocus,
|
|
453
|
+
onBlur,
|
|
454
|
+
onEnter,
|
|
455
|
+
onFocusChange,
|
|
456
|
+
formInputWrapperStyle,
|
|
457
|
+
inputWrapperStyle,
|
|
458
|
+
formInputStyle,
|
|
459
|
+
helperTextStyle,
|
|
460
|
+
labelStyle,
|
|
461
|
+
inputSlotStyle
|
|
462
|
+
}) => {
|
|
463
|
+
const InputRef = useRef(null);
|
|
464
|
+
const [SearchValue, setSearchValue] = useState(value ?? "");
|
|
465
|
+
const [Focused, setFocused] = useState(false);
|
|
466
|
+
const [Active, setActive] = useState(false);
|
|
467
|
+
const Change = (event) => {
|
|
468
|
+
if (searchComponent) {
|
|
469
|
+
setSearchValue(event.target.value);
|
|
470
|
+
}
|
|
471
|
+
onChange?.(event.target.value);
|
|
472
|
+
};
|
|
473
|
+
const Focus = () => {
|
|
474
|
+
onFocus?.();
|
|
475
|
+
if (forDropdown) return;
|
|
476
|
+
setFocused(true);
|
|
477
|
+
};
|
|
478
|
+
const Blur = () => {
|
|
479
|
+
if (!toggleFocus) {
|
|
480
|
+
setFocused(false);
|
|
481
|
+
} else {
|
|
482
|
+
setFocused(customFocus ?? false);
|
|
483
|
+
}
|
|
484
|
+
onBlur?.();
|
|
485
|
+
};
|
|
486
|
+
const handleKeyDown = (event) => {
|
|
487
|
+
const input = event.currentTarget.value;
|
|
488
|
+
const isFirstCharacter = input.length === 0;
|
|
489
|
+
if (type === "number") {
|
|
490
|
+
if (event.keyCode === 69 || !isFirstCharacter && (event.keyCode === 187 || event.keyCode === 107 || event.keyCode === 189 || event.keyCode === 109)) {
|
|
491
|
+
event.preventDefault();
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
if (event.key === "Enter" && input && input.length > 0) {
|
|
495
|
+
onEnter?.();
|
|
496
|
+
}
|
|
497
|
+
};
|
|
498
|
+
const getSlot = (slot) => {
|
|
499
|
+
return slot;
|
|
500
|
+
};
|
|
501
|
+
const HandleSearch = () => {
|
|
502
|
+
if (!searchComponent) return;
|
|
503
|
+
setSearchValue("");
|
|
504
|
+
onChange?.("");
|
|
505
|
+
};
|
|
506
|
+
useEffect(() => {
|
|
507
|
+
onFocusChange?.(Focused);
|
|
508
|
+
}, [Focused]);
|
|
509
|
+
useEffect(() => {
|
|
510
|
+
if (customFocus !== void 0 && customFocus !== null) {
|
|
511
|
+
setFocused(customFocus);
|
|
512
|
+
}
|
|
513
|
+
}, [customFocus]);
|
|
514
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style$e.inputWrapper} ${disabled2 ? style$e.disabled : ""} ${style$e[size]}`, style: inputWrapperStyle ?? {}, children: [
|
|
515
|
+
label && /* @__PURE__ */ jsxs("div", { className: style$e.formInputLabelWrapper, children: [
|
|
516
|
+
/* @__PURE__ */ jsxs("label", { style: labelStyle ?? {}, className: style$e.formInputLabel, children: [
|
|
517
|
+
label,
|
|
518
|
+
" ",
|
|
519
|
+
typeof label === "string" && required2 && /* @__PURE__ */ jsx("span", { className: style$e.formInputRequired, children: "*" })
|
|
520
|
+
] }),
|
|
521
|
+
helperSlot && /* @__PURE__ */ jsx("div", { className: style$e.formInputHelperSlot, children: getSlot(helperSlot) })
|
|
522
|
+
] }),
|
|
523
|
+
/* @__PURE__ */ jsxs(
|
|
524
|
+
"div",
|
|
525
|
+
{
|
|
526
|
+
className: `${style$e.formInputWrapper} ${inputState.error ? style$e.errorState : ""} ${withFocus && Focused ? !inputState.error ? style$e.focused : style$e.errorFocused : ""} ${withActive && Active ? !inputState.error ? style$e.active : style$e.errorActive : ""} ${inputState.error ? style$e.error : ""} ${inputState.success ? style$e.success : ""}`,
|
|
527
|
+
style: formInputWrapperStyle ?? {},
|
|
528
|
+
onClick: () => toggleFocus && setFocused((state) => !state),
|
|
529
|
+
children: [
|
|
530
|
+
leftSlot && /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, children: getSlot(leftSlot) }),
|
|
531
|
+
searchComponent && /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, children: getSlot(/* @__PURE__ */ jsx(IconSearch, {})) }),
|
|
532
|
+
inputSlot ? /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ jsx(
|
|
533
|
+
"input",
|
|
534
|
+
{
|
|
535
|
+
className: style$e.formInput,
|
|
536
|
+
ref: InputRef,
|
|
537
|
+
style: formInputStyle ?? {},
|
|
538
|
+
type: type ?? "text",
|
|
539
|
+
value: searchComponent ? SearchValue : value,
|
|
540
|
+
onChange: (event) => Change(event),
|
|
541
|
+
onMouseDown: () => !forDropdown && setActive(true),
|
|
542
|
+
onMouseUp: () => !forDropdown && setActive(false),
|
|
543
|
+
onMouseLeave: () => !forDropdown && setActive(false),
|
|
544
|
+
onFocus: Focus,
|
|
545
|
+
onBlur: Blur,
|
|
546
|
+
disabled: disabled2,
|
|
547
|
+
required: required2,
|
|
548
|
+
onKeyDown: handleKeyDown,
|
|
549
|
+
readOnly,
|
|
550
|
+
spellCheck: false,
|
|
551
|
+
placeholder: placeholder ?? "",
|
|
552
|
+
autoComplete: "off",
|
|
553
|
+
maxLength
|
|
554
|
+
}
|
|
555
|
+
),
|
|
556
|
+
rightSlot && /* @__PURE__ */ jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style$e.formInputSlot, children: getSlot(rightSlot) }),
|
|
557
|
+
searchComponent && /* @__PURE__ */ jsx("div", { className: style$e.formInputSlot, children: /* @__PURE__ */ jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style$e.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsx(IconCloseCircle, {})) : null }) })
|
|
558
|
+
]
|
|
559
|
+
}
|
|
560
|
+
),
|
|
561
|
+
helperText && /* @__PURE__ */ jsx(
|
|
562
|
+
"p",
|
|
563
|
+
{
|
|
564
|
+
style: helperTextStyle ?? {},
|
|
565
|
+
className: `${style$e.formInputHelperText} ${inputState.error ? style$e.errorHelperText : inputState.success ? style$e.successHelperText : ""}`,
|
|
566
|
+
children: helperText
|
|
567
|
+
}
|
|
568
|
+
)
|
|
569
|
+
] });
|
|
570
|
+
};
|
|
571
|
+
const textareaContainer = "Textarea-module__textareaContainer";
|
|
572
|
+
const textAreaLabel = "Textarea-module__textAreaLabel";
|
|
573
|
+
const required = "Textarea-module__required";
|
|
574
|
+
const wrap = "Textarea-module__wrap";
|
|
575
|
+
const resize = "Textarea-module__resize";
|
|
576
|
+
const textareaIconClose = "Textarea-module__textareaIconClose";
|
|
577
|
+
const textarea = "Textarea-module__textarea";
|
|
578
|
+
const focused$2 = "Textarea-module__focused";
|
|
579
|
+
const active$1 = "Textarea-module__active";
|
|
580
|
+
const errorFocused = "Textarea-module__errorFocused";
|
|
581
|
+
const errorActive = "Textarea-module__errorActive";
|
|
582
|
+
const textareaFooter = "Textarea-module__textareaFooter";
|
|
583
|
+
const style$d = {
|
|
584
|
+
textareaContainer,
|
|
585
|
+
textAreaLabel,
|
|
586
|
+
required,
|
|
587
|
+
wrap,
|
|
588
|
+
resize,
|
|
589
|
+
textareaIconClose,
|
|
590
|
+
textarea,
|
|
591
|
+
focused: focused$2,
|
|
592
|
+
active: active$1,
|
|
593
|
+
errorFocused,
|
|
594
|
+
errorActive,
|
|
595
|
+
textareaFooter
|
|
596
|
+
};
|
|
597
|
+
const Textarea = ({
|
|
598
|
+
placeholder,
|
|
599
|
+
label,
|
|
600
|
+
cols = 30,
|
|
601
|
+
rows = 5,
|
|
602
|
+
value,
|
|
603
|
+
inputState = { error: false, success: true },
|
|
604
|
+
maxLength = 20,
|
|
605
|
+
withFocus = true,
|
|
606
|
+
withActive = true,
|
|
607
|
+
withResize = true,
|
|
608
|
+
withClose = true,
|
|
609
|
+
onChange,
|
|
610
|
+
onFocus,
|
|
611
|
+
onBlur,
|
|
612
|
+
disabled: disabled2,
|
|
613
|
+
required: required2,
|
|
614
|
+
textareaContainerStyle,
|
|
615
|
+
textareaLabelStyle,
|
|
616
|
+
requiredStyle,
|
|
617
|
+
labelSlot,
|
|
618
|
+
textareaFooterStyle
|
|
619
|
+
}) => {
|
|
620
|
+
const TextareaRef = useRef(null);
|
|
621
|
+
const [Focused, setFocused] = useState(false);
|
|
622
|
+
const [Active, setActive] = useState(false);
|
|
623
|
+
const Change = (e) => {
|
|
624
|
+
let value2 = e.target.value;
|
|
625
|
+
if (onChange && typeof onChange === "function") {
|
|
626
|
+
onChange(value2);
|
|
627
|
+
}
|
|
628
|
+
};
|
|
629
|
+
const iconSlot = (icon2) => {
|
|
630
|
+
return icon2;
|
|
631
|
+
};
|
|
632
|
+
const Focus = (e) => {
|
|
633
|
+
setFocused(true);
|
|
634
|
+
if (onFocus && typeof onFocus === "function") {
|
|
635
|
+
onFocus(e);
|
|
636
|
+
}
|
|
637
|
+
};
|
|
638
|
+
const Blur = (e) => {
|
|
639
|
+
setFocused(false);
|
|
640
|
+
if (onBlur && typeof onBlur === "function") {
|
|
641
|
+
onBlur(e);
|
|
642
|
+
}
|
|
643
|
+
};
|
|
644
|
+
let isManuallyResized = false;
|
|
645
|
+
useEffect(() => {
|
|
646
|
+
if (!TextareaRef.current) return;
|
|
647
|
+
const textarea2 = TextareaRef.current.querySelector("textarea");
|
|
648
|
+
if (!textarea2) return;
|
|
649
|
+
let isUserResizing = false;
|
|
650
|
+
const onMouseDown = (e) => {
|
|
651
|
+
const bounds = textarea2.getBoundingClientRect();
|
|
652
|
+
const isNearBottomRight = e.clientX > bounds.right - 20 && e.clientY > bounds.bottom - 20;
|
|
653
|
+
if (isNearBottomRight) {
|
|
654
|
+
isUserResizing = true;
|
|
655
|
+
}
|
|
656
|
+
};
|
|
657
|
+
const observer = new ResizeObserver(() => {
|
|
658
|
+
if (isUserResizing) {
|
|
659
|
+
isManuallyResized = true;
|
|
660
|
+
isUserResizing = false;
|
|
661
|
+
}
|
|
662
|
+
});
|
|
663
|
+
textarea2.addEventListener("mousedown", onMouseDown);
|
|
664
|
+
observer.observe(textarea2);
|
|
665
|
+
return () => {
|
|
666
|
+
textarea2.removeEventListener("mousedown", onMouseDown);
|
|
667
|
+
observer.disconnect();
|
|
668
|
+
};
|
|
669
|
+
}, []);
|
|
670
|
+
const adjustHeight = () => {
|
|
671
|
+
if (!TextareaRef.current) return;
|
|
672
|
+
const el = TextareaRef.current.querySelector("textarea");
|
|
673
|
+
if (!el || isManuallyResized) return;
|
|
674
|
+
el.style.height = "auto";
|
|
675
|
+
el.style.height = `${el.scrollHeight}px`;
|
|
676
|
+
};
|
|
677
|
+
useEffect(() => {
|
|
678
|
+
if (!TextareaRef.current) return;
|
|
679
|
+
const textarea2 = TextareaRef.current.querySelector("textarea");
|
|
680
|
+
const observer = new ResizeObserver(() => {
|
|
681
|
+
const isShrunk = textarea2.offsetHeight < textarea2.scrollHeight;
|
|
682
|
+
isManuallyResized = isShrunk;
|
|
683
|
+
});
|
|
684
|
+
observer.observe(textarea2);
|
|
685
|
+
return () => observer.disconnect();
|
|
686
|
+
}, []);
|
|
687
|
+
const handleInput = (e) => {
|
|
688
|
+
isManuallyResized = false;
|
|
689
|
+
onChange?.(e.target.value);
|
|
690
|
+
adjustHeight();
|
|
691
|
+
};
|
|
692
|
+
const HandleClose = () => {
|
|
693
|
+
if (onChange && typeof onChange === "function") {
|
|
694
|
+
onChange("");
|
|
695
|
+
}
|
|
696
|
+
};
|
|
697
|
+
return /* @__PURE__ */ jsxs(
|
|
698
|
+
"div",
|
|
699
|
+
{
|
|
700
|
+
style: textareaContainerStyle ?? {},
|
|
701
|
+
className: `${style$d.textareaContainer} ${inputState.error ? style$d.error : ""} ${disabled2 ? style$d.disabled : null}`,
|
|
702
|
+
children: [
|
|
703
|
+
label && /* @__PURE__ */ jsxs("div", { style: textareaLabelStyle, className: style$d.textAreaLabel, children: [
|
|
704
|
+
/* @__PURE__ */ jsx("p", { children: label }),
|
|
705
|
+
/* @__PURE__ */ jsx("span", { style: requiredStyle ?? {}, className: style$d.required, children: required2 && "*" }),
|
|
706
|
+
labelSlot && iconSlot(labelSlot)
|
|
707
|
+
] }),
|
|
708
|
+
/* @__PURE__ */ jsxs("div", { className: `${style$d.wrap} ${withResize ? style$d.resize : ""}`, ref: TextareaRef, children: [
|
|
709
|
+
/* @__PURE__ */ jsx(
|
|
710
|
+
"textarea",
|
|
711
|
+
{
|
|
712
|
+
className: `${style$d.textarea} ${Focused ? style$d.focused : ""} ${disabled2 ? style$d.disabled : ""} ${withFocus && Focused ? !inputState.error ? style$d.focused : style$d.errorFocused : ""} ${withActive && Active ? !inputState.error ? style$d.active : style$d.errorActive : ""} ${inputState.error ? style$d.error : ""} ${inputState.success ? style$d.success : ""}`,
|
|
713
|
+
value,
|
|
714
|
+
placeholder: placeholder ?? "",
|
|
715
|
+
cols,
|
|
716
|
+
rows,
|
|
717
|
+
maxLength: maxLength ?? void 0,
|
|
718
|
+
onInput: handleInput,
|
|
719
|
+
onFocus: Focus,
|
|
720
|
+
disabled: disabled2,
|
|
721
|
+
onBlur: Blur,
|
|
722
|
+
onChange: Change,
|
|
723
|
+
onMouseDown: () => setActive(true),
|
|
724
|
+
onMouseUp: () => setActive(false),
|
|
725
|
+
onMouseLeave: () => setActive(false)
|
|
726
|
+
}
|
|
727
|
+
),
|
|
728
|
+
withClose && value && /* @__PURE__ */ jsx("div", { className: style$d.textareaIconClose, onClick: HandleClose, children: /* @__PURE__ */ jsx(IconCloseBackground, {}) })
|
|
729
|
+
] }),
|
|
730
|
+
/* @__PURE__ */ jsx("div", { style: textareaFooterStyle ?? {}, className: style$d.textareaFooter, children: /* @__PURE__ */ jsxs("p", { children: [
|
|
731
|
+
value?.length,
|
|
732
|
+
"/",
|
|
733
|
+
maxLength
|
|
734
|
+
] }) })
|
|
735
|
+
]
|
|
736
|
+
}
|
|
737
|
+
);
|
|
738
|
+
};
|
|
739
|
+
const toggleWrapper = "Toggle-module__toggleWrapper";
|
|
740
|
+
const checked$1 = "Toggle-module__checked";
|
|
741
|
+
const error$2 = "Toggle-module__error";
|
|
742
|
+
const disabled$3 = "Toggle-module__disabled";
|
|
743
|
+
const sm = "Toggle-module__sm";
|
|
744
|
+
const toggleState = "Toggle-module__toggleState";
|
|
745
|
+
const md = "Toggle-module__md";
|
|
746
|
+
const lg = "Toggle-module__lg";
|
|
747
|
+
const style$c = {
|
|
748
|
+
toggleWrapper,
|
|
749
|
+
checked: checked$1,
|
|
750
|
+
error: error$2,
|
|
751
|
+
disabled: disabled$3,
|
|
752
|
+
sm,
|
|
753
|
+
toggleState,
|
|
754
|
+
md,
|
|
755
|
+
lg
|
|
756
|
+
};
|
|
757
|
+
const Toggle = ({ checked: checked2, change, disabled: disabled2 = false, size = "md", toggleType = "default", required: required2 = false }) => {
|
|
758
|
+
const onChange = () => {
|
|
759
|
+
if (!disabled2) {
|
|
760
|
+
change?.(!checked2);
|
|
761
|
+
}
|
|
762
|
+
};
|
|
763
|
+
return /* @__PURE__ */ jsx(
|
|
764
|
+
"div",
|
|
765
|
+
{
|
|
766
|
+
onClick: onChange,
|
|
767
|
+
className: `${style$c.toggleWrapper} ${toggleType === "error" ? style$c.error : ""} ${style$c[size]} ${checked2 ? style$c.checked : ""} ${disabled2 ? style$c.disabled : ""}`,
|
|
768
|
+
children: /* @__PURE__ */ jsx("div", { className: style$c.toggleState, children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: checked2, readOnly: true, disabled: disabled2 ?? false, hidden: true, required: required2 }) })
|
|
769
|
+
}
|
|
770
|
+
);
|
|
771
|
+
};
|
|
772
|
+
const checkboxWrapper = "Checkbox-module__checkboxWrapper";
|
|
773
|
+
const checkMark = "Checkbox-module__checkMark";
|
|
774
|
+
const error$1 = "Checkbox-module__error";
|
|
775
|
+
const checked = "Checkbox-module__checked";
|
|
776
|
+
const disabled$2 = "Checkbox-module__disabled";
|
|
777
|
+
const namespaceHr = "Checkbox-module__Namespace_Hr";
|
|
778
|
+
const dark$2 = "Checkbox-module__dark";
|
|
779
|
+
const style$b = {
|
|
780
|
+
checkboxWrapper,
|
|
781
|
+
checkMark,
|
|
782
|
+
error: error$1,
|
|
783
|
+
checked,
|
|
784
|
+
disabled: disabled$2,
|
|
785
|
+
namespaceHr,
|
|
786
|
+
dark: dark$2
|
|
787
|
+
};
|
|
788
|
+
const NamespaceContext = createContext("namespaceNebi");
|
|
789
|
+
const useNamespace = () => useContext(NamespaceContext);
|
|
790
|
+
const Checkbox = ({
|
|
791
|
+
checked: checked2,
|
|
792
|
+
change,
|
|
793
|
+
type = "default",
|
|
794
|
+
disabled: disabled2 = false,
|
|
795
|
+
required: required2 = false,
|
|
796
|
+
multipleChecked = false,
|
|
797
|
+
activeStyle,
|
|
798
|
+
checkBoxStyle,
|
|
799
|
+
theme = "light"
|
|
800
|
+
}) => {
|
|
801
|
+
const namespace = useNamespace();
|
|
802
|
+
const CheckboxRef = useRef(null);
|
|
803
|
+
const [isActive, setIsActive] = useState(false);
|
|
804
|
+
const onChange = () => {
|
|
805
|
+
if (disabled2) return;
|
|
806
|
+
if (change && typeof change === "function") {
|
|
807
|
+
change(!checked2);
|
|
808
|
+
}
|
|
809
|
+
};
|
|
810
|
+
const getStyle = () => {
|
|
811
|
+
if (isActive) {
|
|
812
|
+
if (disabled2) {
|
|
813
|
+
return { boxShadow: "none" };
|
|
814
|
+
}
|
|
815
|
+
return activeStyle ?? {};
|
|
816
|
+
}
|
|
817
|
+
return checkBoxStyle ?? {};
|
|
818
|
+
};
|
|
819
|
+
return /* @__PURE__ */ jsxs(
|
|
820
|
+
"div",
|
|
821
|
+
{
|
|
822
|
+
style: getStyle(),
|
|
823
|
+
className: `${theme === "dark" ? style$b.dark : ""} ${style$b[namespace]} ${style$b.checkboxWrapper} ${type === "error" ? style$b.error : ""} ${checked2 ? style$b.checked : style$b.unChecked} ${disabled2 ? style$b.disabled : ""}`,
|
|
824
|
+
onMouseDown: () => setIsActive(true),
|
|
825
|
+
onMouseUp: () => setIsActive(false),
|
|
826
|
+
onMouseLeave: () => setIsActive(false),
|
|
827
|
+
onClick: onChange,
|
|
828
|
+
children: [
|
|
829
|
+
/* @__PURE__ */ jsx("input", { ref: CheckboxRef, type: "checkbox", disabled: disabled2, checked: checked2 ?? false, hidden: true, readOnly: true, required: required2 ?? false }),
|
|
830
|
+
checked2 ? multipleChecked ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(IconCheckmark, {}) : ""
|
|
831
|
+
]
|
|
832
|
+
}
|
|
833
|
+
);
|
|
834
|
+
};
|
|
835
|
+
const dropdownWrapper = "Dropdown-module__dropdownWrapper";
|
|
836
|
+
const dropdownInputWrapper = "Dropdown-module__dropdownInputWrapper";
|
|
837
|
+
const dropdownInputSlot = "Dropdown-module__dropdownInputSlot";
|
|
838
|
+
const dropdownRightIconArrow$1 = "Dropdown-module__dropdownRightIconArrow";
|
|
839
|
+
const focused$1 = "Dropdown-module__focused";
|
|
840
|
+
const dropdownInputSlotItem = "Dropdown-module__dropdownInputSlotItem";
|
|
841
|
+
const dropdownInputSlotItemLabel = "Dropdown-module__dropdownInputSlotItemLabel";
|
|
842
|
+
const dropdownInputSlotItemClose = "Dropdown-module__dropdownInputSlotItemClose";
|
|
843
|
+
const dropdownInputSlotItemMore = "Dropdown-module__dropdownInputSlotItemMore";
|
|
844
|
+
const dropdownRightIcon$1 = "Dropdown-module__dropdownRightIcon";
|
|
845
|
+
const dropdownRightIconClose$1 = "Dropdown-module__dropdownRightIconClose";
|
|
846
|
+
const dropdownListContainer = "Dropdown-module__dropdownListContainer";
|
|
847
|
+
const dropdownList = "Dropdown-module__dropdownList";
|
|
848
|
+
const dropdownItem = "Dropdown-module__dropdownItem";
|
|
849
|
+
const selected$2 = "Dropdown-module__selected";
|
|
850
|
+
const dropdownItemLabel = "Dropdown-module__dropdownItemLabel";
|
|
851
|
+
const hovered = "Dropdown-module__hovered";
|
|
852
|
+
const disabled$1 = "Dropdown-module__disabled";
|
|
853
|
+
const itemCheckbox = "Dropdown-module__itemCheckbox";
|
|
854
|
+
const dropdownItemLabelInput = "Dropdown-module__dropdownItemLabelInput";
|
|
855
|
+
const countryName = "Dropdown-module__countryName";
|
|
856
|
+
const countryDialCode = "Dropdown-module__countryDialCode";
|
|
857
|
+
const selectAll = "Dropdown-module__selectAll";
|
|
858
|
+
const style$a = {
|
|
859
|
+
dropdownWrapper,
|
|
860
|
+
dropdownInputWrapper,
|
|
861
|
+
dropdownInputSlot,
|
|
862
|
+
dropdownRightIconArrow: dropdownRightIconArrow$1,
|
|
863
|
+
focused: focused$1,
|
|
864
|
+
dropdownInputSlotItem,
|
|
865
|
+
dropdownInputSlotItemLabel,
|
|
866
|
+
dropdownInputSlotItemClose,
|
|
867
|
+
dropdownInputSlotItemMore,
|
|
868
|
+
dropdownRightIcon: dropdownRightIcon$1,
|
|
869
|
+
dropdownRightIconClose: dropdownRightIconClose$1,
|
|
870
|
+
dropdownListContainer,
|
|
871
|
+
dropdownList,
|
|
872
|
+
dropdownItem,
|
|
873
|
+
selected: selected$2,
|
|
874
|
+
dropdownItemLabel,
|
|
875
|
+
hovered,
|
|
876
|
+
disabled: disabled$1,
|
|
877
|
+
itemCheckbox,
|
|
878
|
+
dropdownItemLabelInput,
|
|
879
|
+
countryName,
|
|
880
|
+
countryDialCode,
|
|
881
|
+
selectAll
|
|
882
|
+
};
|
|
883
|
+
location.href.indexOf(".upgaming.dev") > 0 || location.href.indexOf(".upgaming.com") > 0;
|
|
884
|
+
const _filterUnique = (arr, key) => {
|
|
885
|
+
const uniqueKeys = /* @__PURE__ */ new Set();
|
|
886
|
+
return arr.filter((item) => {
|
|
887
|
+
if (uniqueKeys.has(item[key])) {
|
|
888
|
+
return false;
|
|
889
|
+
} else {
|
|
890
|
+
uniqueKeys.add(item[key]);
|
|
891
|
+
return true;
|
|
892
|
+
}
|
|
893
|
+
});
|
|
894
|
+
};
|
|
895
|
+
const Dropdown = ({
|
|
896
|
+
data,
|
|
897
|
+
withFilter = true,
|
|
898
|
+
withClose = true,
|
|
899
|
+
disableAll = false,
|
|
900
|
+
withMultiselect = false,
|
|
901
|
+
selectedOptionID,
|
|
902
|
+
withInput = false,
|
|
903
|
+
dropdownType = "country",
|
|
904
|
+
onSelect,
|
|
905
|
+
onFocus,
|
|
906
|
+
onBlur,
|
|
907
|
+
onValueChange,
|
|
908
|
+
customInputSlot,
|
|
909
|
+
dropdownWrapperStyle,
|
|
910
|
+
dropdownInputWrapperStyle,
|
|
911
|
+
dropdownInputSlotStyle,
|
|
912
|
+
dropdownInputSlotItemStyle,
|
|
913
|
+
dropdownInputSlotItemLabelStyle,
|
|
914
|
+
dropdownInputSlotItemCloseStyle,
|
|
915
|
+
dropdownInputSlotItemMoreStyle,
|
|
916
|
+
dropdownItemStyle,
|
|
917
|
+
dropdownItemLabelStyle,
|
|
918
|
+
itemCheckboxStyle,
|
|
919
|
+
dropdownItemLabelTextStyle,
|
|
920
|
+
dropdownListStyle,
|
|
921
|
+
...rest
|
|
922
|
+
}) => {
|
|
923
|
+
const [Flag, setFlag] = useState(false);
|
|
924
|
+
const [InputValue, setInputValue] = useState("");
|
|
925
|
+
const [SelectAllKey, setSelectAllKey] = useState(false);
|
|
926
|
+
const [ClickedSelectAll, setClickedSelectAll] = useState(false);
|
|
927
|
+
const [IsFocused, setIsFocused] = useState(false);
|
|
928
|
+
const DropdownRef = useRef(null);
|
|
929
|
+
const ComponentRef = useRef(null);
|
|
930
|
+
const ListRef = useRef(null);
|
|
931
|
+
const ListItemRef = useRef(null);
|
|
932
|
+
const [Data, setData] = useState([]);
|
|
933
|
+
const SelectedData = useRef([]);
|
|
934
|
+
const SelectedDataLength = useRef(0);
|
|
935
|
+
const [SearchValue, setSearchValue] = useState("");
|
|
936
|
+
const [SingleSelectValue, setSingleSelectValue] = useState(null);
|
|
937
|
+
const getFlagIconUrl = (code) => {
|
|
938
|
+
return `https://flagsapi.com/${code}/flat/64.png`;
|
|
939
|
+
};
|
|
940
|
+
const SelectItem = (object) => {
|
|
941
|
+
object.selected = !object.selected;
|
|
942
|
+
if (!withMultiselect) {
|
|
943
|
+
onSelect?.(object);
|
|
944
|
+
return;
|
|
945
|
+
}
|
|
946
|
+
SelectedData.current = [...SelectedData.current, ...Data.filter((el) => el.selected == true), ...Data.filter((el) => el.id === object.id)];
|
|
947
|
+
SelectedData.current = _filterUnique(SelectedData.current, "id").filter((el) => el.selected).filter((el) => el.id !== "SELECT_ALL");
|
|
948
|
+
if (object.id === "SELECT_ALL") {
|
|
949
|
+
setSelectAllKey(object.selected);
|
|
950
|
+
setClickedSelectAll(true);
|
|
951
|
+
} else {
|
|
952
|
+
setSelectAllKey(false);
|
|
953
|
+
onSelect?.(SelectedData.current);
|
|
954
|
+
setClickedSelectAll(false);
|
|
955
|
+
}
|
|
956
|
+
setFlag((state) => !state);
|
|
957
|
+
};
|
|
958
|
+
const SingleSelect = (object) => {
|
|
959
|
+
setSingleSelectValue(object);
|
|
960
|
+
onSelect?.(object);
|
|
961
|
+
setIsFocused(false);
|
|
962
|
+
};
|
|
963
|
+
const Focus = () => {
|
|
964
|
+
onFocus?.();
|
|
965
|
+
};
|
|
966
|
+
const CalculatePos = () => {
|
|
967
|
+
const componentEl = ComponentRef.current;
|
|
968
|
+
const dropdownEl = DropdownRef.current;
|
|
969
|
+
if (!dropdownEl || !componentEl) return;
|
|
970
|
+
const componentRect = componentEl.getBoundingClientRect();
|
|
971
|
+
const windowHeight = window.innerHeight;
|
|
972
|
+
dropdownEl.style.zIndex = "100";
|
|
973
|
+
dropdownEl.style.position = "fixed";
|
|
974
|
+
dropdownEl.style.width = componentRect.width + "px";
|
|
975
|
+
dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
|
|
976
|
+
if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
|
|
977
|
+
dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight + 18}px`;
|
|
978
|
+
dropdownEl.style.bottom = "unset";
|
|
979
|
+
} else {
|
|
980
|
+
dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
|
|
981
|
+
dropdownEl.style.bottom = "unset";
|
|
982
|
+
}
|
|
983
|
+
};
|
|
984
|
+
useEffect(() => {
|
|
985
|
+
CalculatePos();
|
|
986
|
+
}, [DropdownRef, IsFocused]);
|
|
987
|
+
useEffect(() => {
|
|
988
|
+
SelectedData.current = data.filter((el) => el.selected);
|
|
989
|
+
if (!withMultiselect) {
|
|
990
|
+
setData(data);
|
|
991
|
+
return;
|
|
992
|
+
}
|
|
993
|
+
const hasSelected = data.some((el) => "selected" in el);
|
|
994
|
+
const firstItem = { id: "SELECT_ALL", label: "Select All", selected: SelectAllKey };
|
|
995
|
+
if (hasSelected) {
|
|
996
|
+
setData([firstItem, ...data]);
|
|
997
|
+
} else {
|
|
998
|
+
data.forEach((el) => {
|
|
999
|
+
el.selected = false;
|
|
1000
|
+
});
|
|
1001
|
+
setData([firstItem, ...data]);
|
|
1002
|
+
}
|
|
1003
|
+
}, [JSON.stringify(data)]);
|
|
1004
|
+
useEffect(() => {
|
|
1005
|
+
if (!withMultiselect) return;
|
|
1006
|
+
if (!data.every((el) => el.selected)) {
|
|
1007
|
+
setSelectAllKey(false);
|
|
1008
|
+
}
|
|
1009
|
+
}, [SelectedData.current.length]);
|
|
1010
|
+
useEffect(() => {
|
|
1011
|
+
if (!withMultiselect && selectedOptionID) {
|
|
1012
|
+
setSingleSelectValue(data.find((el) => el.id === selectedOptionID));
|
|
1013
|
+
}
|
|
1014
|
+
}, [selectedOptionID]);
|
|
1015
|
+
useEffect(() => {
|
|
1016
|
+
if (!withMultiselect) return;
|
|
1017
|
+
if (Data.length > 0 && ClickedSelectAll) {
|
|
1018
|
+
const updated = Data.map((el) => {
|
|
1019
|
+
if (el.id === "SELECT_ALL") return { ...el, selected: SelectAllKey };
|
|
1020
|
+
if (el.disabled) return el;
|
|
1021
|
+
return { ...el, selected: SelectAllKey };
|
|
1022
|
+
});
|
|
1023
|
+
setData(updated);
|
|
1024
|
+
data.forEach((el) => {
|
|
1025
|
+
if (el.id === "SELECT_ALL") {
|
|
1026
|
+
el.selected = SelectAllKey;
|
|
1027
|
+
} else if (!el.disabled) {
|
|
1028
|
+
el.selected = SelectAllKey;
|
|
1029
|
+
}
|
|
1030
|
+
});
|
|
1031
|
+
SelectedData.current = updated.filter((el) => el.selected && el.id !== "SELECT_ALL");
|
|
1032
|
+
onSelect?.(SelectedData.current);
|
|
1033
|
+
}
|
|
1034
|
+
}, [Flag]);
|
|
1035
|
+
useEffect(() => {
|
|
1036
|
+
const ClickHandler = (event) => {
|
|
1037
|
+
if (!ComponentRef.current) return;
|
|
1038
|
+
if (event.composedPath().includes(ComponentRef.current)) return;
|
|
1039
|
+
setIsFocused(false);
|
|
1040
|
+
};
|
|
1041
|
+
const ScrollHandler = (event) => {
|
|
1042
|
+
if (!ComponentRef.current || !ListRef.current) return;
|
|
1043
|
+
if (ListRef.current.contains(event.target)) return;
|
|
1044
|
+
setIsFocused(false);
|
|
1045
|
+
};
|
|
1046
|
+
document.addEventListener("click", ClickHandler);
|
|
1047
|
+
document.addEventListener("wheel", ScrollHandler);
|
|
1048
|
+
return () => {
|
|
1049
|
+
document.removeEventListener("click", ClickHandler);
|
|
1050
|
+
document.removeEventListener("wheel", ScrollHandler);
|
|
1051
|
+
};
|
|
1052
|
+
}, []);
|
|
1053
|
+
useEffect(() => {
|
|
1054
|
+
if (!withMultiselect) return;
|
|
1055
|
+
const calculateSelectedLength = () => {
|
|
1056
|
+
const rect = ComponentRef.current?.getBoundingClientRect();
|
|
1057
|
+
if (!rect) return;
|
|
1058
|
+
const width = rect.width;
|
|
1059
|
+
if (width <= 150) SelectedDataLength.current = 0;
|
|
1060
|
+
else if (width <= 250) SelectedDataLength.current = 1;
|
|
1061
|
+
else if (width <= 350) SelectedDataLength.current = 2;
|
|
1062
|
+
else if (width <= 450) SelectedDataLength.current = 3;
|
|
1063
|
+
else SelectedDataLength.current = 4;
|
|
1064
|
+
};
|
|
1065
|
+
calculateSelectedLength();
|
|
1066
|
+
window.addEventListener("resize", calculateSelectedLength);
|
|
1067
|
+
return () => window.removeEventListener("resize", calculateSelectedLength);
|
|
1068
|
+
}, []);
|
|
1069
|
+
const isInitialRender = useRef(true);
|
|
1070
|
+
useEffect(() => {
|
|
1071
|
+
if (isInitialRender.current) {
|
|
1072
|
+
isInitialRender.current = false;
|
|
1073
|
+
return;
|
|
1074
|
+
}
|
|
1075
|
+
if (!IsFocused) {
|
|
1076
|
+
onBlur?.();
|
|
1077
|
+
}
|
|
1078
|
+
}, [IsFocused]);
|
|
1079
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style$a.dropdownWrapper}`, style: dropdownWrapperStyle ?? {}, children: [
|
|
1080
|
+
/* @__PURE__ */ jsx(
|
|
1081
|
+
"div",
|
|
1082
|
+
{
|
|
1083
|
+
ref: ComponentRef,
|
|
1084
|
+
className: style$a.dropdownInputWrapper,
|
|
1085
|
+
style: dropdownInputWrapperStyle ?? {},
|
|
1086
|
+
onClick: () => (setIsFocused((state) => !state), CalculatePos()),
|
|
1087
|
+
onFocus: Focus,
|
|
1088
|
+
children: /* @__PURE__ */ jsx(
|
|
1089
|
+
FormInput,
|
|
1090
|
+
{
|
|
1091
|
+
...rest,
|
|
1092
|
+
onFocusChange: (value) => setIsFocused(value),
|
|
1093
|
+
customFocus: IsFocused,
|
|
1094
|
+
withActive: false,
|
|
1095
|
+
value: withInput ? InputValue : SingleSelectValue?.label ?? "",
|
|
1096
|
+
onChange: (value) => {
|
|
1097
|
+
setInputValue(value);
|
|
1098
|
+
onValueChange?.(value);
|
|
1099
|
+
},
|
|
1100
|
+
toggleFocus: true,
|
|
1101
|
+
formInputStyle: { cursor: withInput ? "text" : "pointer" },
|
|
1102
|
+
leftSlot: withInput && /* @__PURE__ */ jsxs("div", { className: style$a.dropdownInputSlot, children: [
|
|
1103
|
+
dropdownType === "currency" ? /* @__PURE__ */ jsx("p", { children: SingleSelectValue?.label }) : /* @__PURE__ */ jsx("img", { src: getFlagIconUrl(SingleSelectValue?.code), alt: "flag" }),
|
|
1104
|
+
/* @__PURE__ */ jsx("div", { className: `${style$a.dropdownRightIconArrow} ${IsFocused ? style$a.focused : ""}`, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
|
|
1105
|
+
] }),
|
|
1106
|
+
rightSlot: /* @__PURE__ */ jsxs("div", { className: `${style$a.dropdownRightIcon} ${IsFocused ? style$a.focused : ""}`, children: [
|
|
1107
|
+
(withInput ? InputValue : !withMultiselect && SingleSelectValue) && /* @__PURE__ */ jsx(
|
|
1108
|
+
"div",
|
|
1109
|
+
{
|
|
1110
|
+
onClick: (e) => {
|
|
1111
|
+
e.stopPropagation();
|
|
1112
|
+
if (withInput) {
|
|
1113
|
+
setInputValue("");
|
|
1114
|
+
setIsFocused(false);
|
|
1115
|
+
} else {
|
|
1116
|
+
setSingleSelectValue(null);
|
|
1117
|
+
}
|
|
1118
|
+
},
|
|
1119
|
+
className: style$a.dropdownRightIconClose,
|
|
1120
|
+
children: /* @__PURE__ */ jsx(IconCloseCircle, {})
|
|
1121
|
+
}
|
|
1122
|
+
),
|
|
1123
|
+
!withInput && /* @__PURE__ */ jsx("div", { className: style$a.dropdownRightIconArrow, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
|
|
1124
|
+
] }),
|
|
1125
|
+
readOnly: !withInput,
|
|
1126
|
+
forDropdown: true,
|
|
1127
|
+
inputSlotStyle: { width: "100%" },
|
|
1128
|
+
inputSlot: withMultiselect && SelectedData.current.length > 0 ? customInputSlot || /* @__PURE__ */ jsxs("ul", { className: style$a.dropdownInputSlot, style: dropdownInputSlotStyle ?? {}, children: [
|
|
1129
|
+
SelectedData.current.slice(0, SelectedDataLength.current).map((el, index) => {
|
|
1130
|
+
return /* @__PURE__ */ jsxs(
|
|
1131
|
+
"li",
|
|
1132
|
+
{
|
|
1133
|
+
ref: ListItemRef,
|
|
1134
|
+
className: style$a.dropdownInputSlotItem,
|
|
1135
|
+
style: dropdownInputSlotItemStyle ?? {},
|
|
1136
|
+
onClick: (e) => e.stopPropagation(),
|
|
1137
|
+
children: [
|
|
1138
|
+
/* @__PURE__ */ jsx("p", { title: el.label, className: style$a.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: typeof el.customLabel === "function" ? el.customLabel(el) : el.label }),
|
|
1139
|
+
/* @__PURE__ */ jsx(
|
|
1140
|
+
"div",
|
|
1141
|
+
{
|
|
1142
|
+
style: dropdownInputSlotItemCloseStyle ?? {},
|
|
1143
|
+
className: style$a.dropdownInputSlotItemClose,
|
|
1144
|
+
onClick: (e) => {
|
|
1145
|
+
e.stopPropagation();
|
|
1146
|
+
SelectItem(el);
|
|
1147
|
+
},
|
|
1148
|
+
children: /* @__PURE__ */ jsx(IconClose, { width: "16", height: "16", viewBox: "0 0 16 16", stroke: "#95969C" })
|
|
1149
|
+
}
|
|
1150
|
+
)
|
|
1151
|
+
]
|
|
1152
|
+
},
|
|
1153
|
+
index
|
|
1154
|
+
);
|
|
1155
|
+
}),
|
|
1156
|
+
SelectedData.current.length > SelectedDataLength.current && /* @__PURE__ */ jsx("li", { className: `${style$a.dropdownInputSlotItem} ${style$a.dropdownInputSlotItemMore}`, style: dropdownInputSlotItemMoreStyle ?? {}, children: /* @__PURE__ */ jsx("p", { className: style$a.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: `+${SelectedData.current.length - SelectedDataLength.current}` }) })
|
|
1157
|
+
] }) : null
|
|
1158
|
+
}
|
|
1159
|
+
)
|
|
1160
|
+
}
|
|
1161
|
+
),
|
|
1162
|
+
data && data.length > 0 && IsFocused && /* @__PURE__ */ jsxs("div", { ref: DropdownRef, onClick: (e) => e.stopPropagation(), className: style$a.dropdownListContainer, children: [
|
|
1163
|
+
withFilter && /* @__PURE__ */ jsx(
|
|
1164
|
+
FormInput,
|
|
1165
|
+
{
|
|
1166
|
+
placeholder: "Search",
|
|
1167
|
+
searchComponent: true,
|
|
1168
|
+
withFocus: false,
|
|
1169
|
+
withActive: false,
|
|
1170
|
+
value: SearchValue,
|
|
1171
|
+
onChange: (value) => setSearchValue(value)
|
|
1172
|
+
}
|
|
1173
|
+
),
|
|
1174
|
+
/* @__PURE__ */ jsx("ul", { onClick: (e) => e.stopPropagation(), className: style$a.dropdownList, ref: ListRef, style: dropdownListStyle ?? {}, children: Data.filter((item) => item?.label?.toLowerCase().includes(SearchValue.toLowerCase())).map((item, index) => {
|
|
1175
|
+
return /* @__PURE__ */ jsxs(
|
|
1176
|
+
"li",
|
|
1177
|
+
{
|
|
1178
|
+
style: { ...dropdownItemStyle, cursor: !withMultiselect && item?.disabled ? "not-allowed" : "pointer" },
|
|
1179
|
+
className: `${style$a.dropdownItem} ${!withMultiselect && SingleSelectValue?.id === item.id ? style$a.selected : ""} ${!item?.label || item.label === void 0 || disableAll || item?.disabled ? style$a.disabled : ""} ${!withMultiselect && !item?.disabled ? style$a.hovered : ""}`,
|
|
1180
|
+
onClick: (e) => {
|
|
1181
|
+
e.stopPropagation();
|
|
1182
|
+
if (!withMultiselect && !item?.disabled) {
|
|
1183
|
+
SingleSelect(item);
|
|
1184
|
+
}
|
|
1185
|
+
},
|
|
1186
|
+
children: [
|
|
1187
|
+
withMultiselect && /* @__PURE__ */ jsx("div", { className: style$a.itemCheckbox, style: itemCheckboxStyle ?? {}, children: /* @__PURE__ */ jsx(
|
|
1188
|
+
Checkbox,
|
|
1189
|
+
{
|
|
1190
|
+
multipleChecked: item.id === "SELECT_ALL",
|
|
1191
|
+
disabled: disableAll || item?.disabled,
|
|
1192
|
+
checked: item?.selected,
|
|
1193
|
+
change: () => SelectItem(item)
|
|
1194
|
+
}
|
|
1195
|
+
) }),
|
|
1196
|
+
/* @__PURE__ */ jsxs("div", { className: style$a.dropdownItemLabel, style: dropdownItemLabelStyle ?? {}, children: [
|
|
1197
|
+
withInput ? /* @__PURE__ */ jsxs("div", { className: style$a.dropdownItemLabelInput, children: [
|
|
1198
|
+
/* @__PURE__ */ jsx("img", { src: getFlagIconUrl(item.code), style: { width: "1.375rem", height: "1.375rem", objectFit: "contain" }, alt: item.name }),
|
|
1199
|
+
/* @__PURE__ */ jsx("span", { title: item.name, className: style$a.countryName, children: item.name || item.label }),
|
|
1200
|
+
/* @__PURE__ */ jsx("span", { className: style$a.countryDialCode, children: dropdownType === "country" ? item.dialCode : item?.label })
|
|
1201
|
+
] }) : /* @__PURE__ */ jsx(
|
|
1202
|
+
"p",
|
|
1203
|
+
{
|
|
1204
|
+
title: typeof item.label === "string" ? item.label : "",
|
|
1205
|
+
className: `${item.id === "SELECT_ALL" ? style$a.selectAll : ""}`,
|
|
1206
|
+
style: dropdownItemLabelTextStyle ?? {},
|
|
1207
|
+
children: typeof item.customLabel === "function" ? item.customLabel(item) : item.label
|
|
1208
|
+
}
|
|
1209
|
+
),
|
|
1210
|
+
withMultiselect && /* @__PURE__ */ jsx("p", { children: item.id === "SELECT_ALL" ? `${Data.filter((el) => el.id !== "SELECT_ALL" && el.selected).length}/${data.length}` : "" })
|
|
1211
|
+
] })
|
|
1212
|
+
]
|
|
1213
|
+
},
|
|
1214
|
+
index
|
|
1215
|
+
);
|
|
1216
|
+
}) }, Data.length)
|
|
1217
|
+
] })
|
|
1218
|
+
] });
|
|
1219
|
+
};
|
|
1220
|
+
const radioWrapper = "Radio-module__radioWrapper";
|
|
1221
|
+
const style$9 = {
|
|
1222
|
+
radioWrapper
|
|
1223
|
+
};
|
|
1224
|
+
const Radio = ({ checked: checked2, change, disabled: disabled2, required: required2, withUncheckState = false, radioType = "default" }) => {
|
|
1225
|
+
useNamespace();
|
|
1226
|
+
useState(false);
|
|
1227
|
+
const onChange = () => {
|
|
1228
|
+
if (!disabled2) {
|
|
1229
|
+
if (withUncheckState) {
|
|
1230
|
+
change?.(!checked2);
|
|
1231
|
+
} else {
|
|
1232
|
+
change?.(true);
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
};
|
|
1236
|
+
const RadioIcon = () => {
|
|
1237
|
+
let icon2 = null;
|
|
1238
|
+
let color = disabled2 ? "#95969C" : radioType === "error" ? "#E3292F" : "#0058FF";
|
|
1239
|
+
if (checked2) {
|
|
1240
|
+
if (disabled2) {
|
|
1241
|
+
icon2 = /* @__PURE__ */ jsx(IconRadioCheckedDisabled, { color });
|
|
1242
|
+
} else {
|
|
1243
|
+
icon2 = /* @__PURE__ */ jsx(IconRadioChecked, { color });
|
|
1244
|
+
}
|
|
1245
|
+
} else {
|
|
1246
|
+
if (disabled2) {
|
|
1247
|
+
icon2 = /* @__PURE__ */ jsx(IconRadioUncheckedDisabled, { color });
|
|
1248
|
+
} else {
|
|
1249
|
+
icon2 = /* @__PURE__ */ jsx(IconRadioUnchecked, { color });
|
|
1250
|
+
}
|
|
1251
|
+
}
|
|
1252
|
+
return icon2;
|
|
1253
|
+
};
|
|
1254
|
+
return /* @__PURE__ */ jsxs("div", { className: style$9.radioWrapper, style: { cursor: disabled2 ? "not-allowed" : "pointer" }, onClick: onChange, children: [
|
|
1255
|
+
/* @__PURE__ */ jsx("input", { type: "radio", checked: true, readOnly: true, hidden: true, disabled: disabled2 ?? false, required: required2 }),
|
|
1256
|
+
RadioIcon()
|
|
1257
|
+
] });
|
|
1258
|
+
};
|
|
1259
|
+
const tooltipContainer = "Tooltip-module__tooltipContainer";
|
|
1260
|
+
const tooltipContent = "Tooltip-module__tooltipContent";
|
|
1261
|
+
const withoutPointer = "Tooltip-module__withoutPointer";
|
|
1262
|
+
const top = "Tooltip-module__top";
|
|
1263
|
+
const right$1 = "Tooltip-module__right";
|
|
1264
|
+
const bottom = "Tooltip-module__bottom";
|
|
1265
|
+
const left$1 = "Tooltip-module__left";
|
|
1266
|
+
const tooltipTitle = "Tooltip-module__tooltipTitle";
|
|
1267
|
+
const tooltipText = "Tooltip-module__tooltipText";
|
|
1268
|
+
const dark$1 = "Tooltip-module__dark";
|
|
1269
|
+
const style$8 = {
|
|
1270
|
+
tooltipContainer,
|
|
1271
|
+
tooltipContent,
|
|
1272
|
+
withoutPointer,
|
|
1273
|
+
top,
|
|
1274
|
+
right: right$1,
|
|
1275
|
+
bottom,
|
|
1276
|
+
left: left$1,
|
|
1277
|
+
tooltipTitle,
|
|
1278
|
+
tooltipText,
|
|
1279
|
+
dark: dark$1
|
|
1280
|
+
};
|
|
1281
|
+
const Tooltip = ({
|
|
1282
|
+
children,
|
|
1283
|
+
tooltipSlot,
|
|
1284
|
+
delay = 400,
|
|
1285
|
+
placement = "top",
|
|
1286
|
+
trigger = "hover",
|
|
1287
|
+
title,
|
|
1288
|
+
text: text2,
|
|
1289
|
+
customText,
|
|
1290
|
+
tooltipContentStyle,
|
|
1291
|
+
tooltipTitlestyle,
|
|
1292
|
+
tooltipTextStyle,
|
|
1293
|
+
tooltipContainerStyle,
|
|
1294
|
+
pointerPosition = "10%",
|
|
1295
|
+
withPointer = false,
|
|
1296
|
+
theme,
|
|
1297
|
+
topCustomOffset = 0,
|
|
1298
|
+
bottomCustomOffset = 0,
|
|
1299
|
+
leftCustomOffset = 0,
|
|
1300
|
+
rightCustomOffset = 0,
|
|
1301
|
+
forceClose = false,
|
|
1302
|
+
onClick
|
|
1303
|
+
}) => {
|
|
1304
|
+
const ComponentRef = useRef(null);
|
|
1305
|
+
const TooltipRef = useRef(null);
|
|
1306
|
+
let timeout;
|
|
1307
|
+
const [Active, setActive] = useState(false);
|
|
1308
|
+
const hasContent = tooltipSlot || title || text2 || customText;
|
|
1309
|
+
const ShowTip = () => {
|
|
1310
|
+
if (trigger === "hover" && hasContent) {
|
|
1311
|
+
timeout = setTimeout(() => {
|
|
1312
|
+
setActive(true);
|
|
1313
|
+
}, delay);
|
|
1314
|
+
}
|
|
1315
|
+
};
|
|
1316
|
+
const HideTip = () => {
|
|
1317
|
+
if (trigger === "hover") {
|
|
1318
|
+
clearTimeout(timeout);
|
|
1319
|
+
setTimeout(() => {
|
|
1320
|
+
setActive(false);
|
|
1321
|
+
}, delay);
|
|
1322
|
+
}
|
|
1323
|
+
};
|
|
1324
|
+
const HandleActive = () => {
|
|
1325
|
+
if (trigger === "click") {
|
|
1326
|
+
onClick?.();
|
|
1327
|
+
setActive((state) => !state);
|
|
1328
|
+
}
|
|
1329
|
+
};
|
|
1330
|
+
const CalculatePos = () => {
|
|
1331
|
+
const componentEl = ComponentRef.current;
|
|
1332
|
+
const tooltipEl = TooltipRef.current;
|
|
1333
|
+
if (!tooltipEl || !componentEl) return;
|
|
1334
|
+
const componentRect = componentEl.getBoundingClientRect();
|
|
1335
|
+
tooltipEl.style.position = "fixed";
|
|
1336
|
+
switch (placement) {
|
|
1337
|
+
case "top":
|
|
1338
|
+
tooltipEl.style.top = `${componentRect.top - tooltipEl.offsetHeight - 8}px`;
|
|
1339
|
+
tooltipEl.style.left = `${componentRect.left + topCustomOffset}px`;
|
|
1340
|
+
break;
|
|
1341
|
+
case "bottom":
|
|
1342
|
+
tooltipEl.style.top = `${componentRect.bottom + 8}px`;
|
|
1343
|
+
tooltipEl.style.left = `${componentRect.left + bottomCustomOffset}px`;
|
|
1344
|
+
break;
|
|
1345
|
+
case "left":
|
|
1346
|
+
tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
|
|
1347
|
+
tooltipEl.style.left = `${componentRect.left - tooltipEl.offsetWidth - 8 + leftCustomOffset}px`;
|
|
1348
|
+
break;
|
|
1349
|
+
case "right":
|
|
1350
|
+
tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
|
|
1351
|
+
tooltipEl.style.left = `${componentRect.right + 8 + rightCustomOffset}px`;
|
|
1352
|
+
break;
|
|
1353
|
+
}
|
|
1354
|
+
};
|
|
1355
|
+
useEffect(() => {
|
|
1356
|
+
CalculatePos();
|
|
1357
|
+
}, [ComponentRef, Active, children, placement, tooltipSlot, customText, title, text2]);
|
|
1358
|
+
useEffect(() => {
|
|
1359
|
+
const handleScroll = (e) => {
|
|
1360
|
+
const isInsideTooltip = ComponentRef.current?.contains(e.target);
|
|
1361
|
+
if (!isInsideTooltip) {
|
|
1362
|
+
setActive(false);
|
|
1363
|
+
}
|
|
1364
|
+
};
|
|
1365
|
+
const ClickHandler = (event) => {
|
|
1366
|
+
if (event.composedPath().includes(ComponentRef.current)) return;
|
|
1367
|
+
setActive(false);
|
|
1368
|
+
};
|
|
1369
|
+
document.addEventListener("click", ClickHandler);
|
|
1370
|
+
document.addEventListener("scroll", handleScroll, true);
|
|
1371
|
+
return () => {
|
|
1372
|
+
document.removeEventListener("scroll", handleScroll, true);
|
|
1373
|
+
document.removeEventListener("click", ClickHandler);
|
|
1374
|
+
};
|
|
1375
|
+
}, []);
|
|
1376
|
+
useEffect(() => {
|
|
1377
|
+
if (forceClose) {
|
|
1378
|
+
setActive(false);
|
|
1379
|
+
}
|
|
1380
|
+
}, [forceClose]);
|
|
1381
|
+
useEffect(() => {
|
|
1382
|
+
const element = TooltipRef.current;
|
|
1383
|
+
if (element) {
|
|
1384
|
+
element.style.setProperty("--pointer-position", `${pointerPosition}`);
|
|
1385
|
+
if (!withPointer) {
|
|
1386
|
+
element.classList.add(style$8.withoutPointer);
|
|
1387
|
+
}
|
|
1388
|
+
}
|
|
1389
|
+
}, [Active]);
|
|
1390
|
+
return /* @__PURE__ */ jsxs(
|
|
1391
|
+
"div",
|
|
1392
|
+
{
|
|
1393
|
+
ref: ComponentRef,
|
|
1394
|
+
className: `${theme === "dark" ? style$8.dark : ""} ${style$8.tooltipContainer}`,
|
|
1395
|
+
onClick: HandleActive,
|
|
1396
|
+
onMouseEnter: ShowTip,
|
|
1397
|
+
onMouseLeave: HideTip,
|
|
1398
|
+
style: tooltipContainerStyle ?? {},
|
|
1399
|
+
children: [
|
|
1400
|
+
children,
|
|
1401
|
+
Active && tooltipSlot ? /* @__PURE__ */ jsx(
|
|
1402
|
+
"div",
|
|
1403
|
+
{
|
|
1404
|
+
style: tooltipContentStyle ?? {},
|
|
1405
|
+
onClick: (e) => e.stopPropagation(),
|
|
1406
|
+
ref: TooltipRef,
|
|
1407
|
+
className: `${style$8.tooltipContent} ${placement ? style$8[placement] : style$8.bottom}`,
|
|
1408
|
+
children: tooltipSlot
|
|
1409
|
+
}
|
|
1410
|
+
) : Active && /* @__PURE__ */ jsxs(
|
|
1411
|
+
"div",
|
|
1412
|
+
{
|
|
1413
|
+
style: tooltipContentStyle ?? {},
|
|
1414
|
+
onClick: (e) => e.stopPropagation(),
|
|
1415
|
+
ref: TooltipRef,
|
|
1416
|
+
className: `${style$8.tooltipContent} ${placement ? style$8[placement] : style$8.bottom}`,
|
|
1417
|
+
children: [
|
|
1418
|
+
customText && typeof customText === "string" && customText,
|
|
1419
|
+
title && title.length > 0 && typeof title === "string" && /* @__PURE__ */ jsx("h2", { className: style$8.tooltipTitle, style: tooltipTitlestyle ?? {}, children: title }),
|
|
1420
|
+
text2 && text2.length > 0 && typeof text2 === "string" && /* @__PURE__ */ jsx("p", { className: style$8.tooltipText, style: tooltipTextStyle ?? {}, children: text2 })
|
|
1421
|
+
]
|
|
1422
|
+
}
|
|
1423
|
+
)
|
|
1424
|
+
]
|
|
1425
|
+
}
|
|
1426
|
+
);
|
|
1427
|
+
};
|
|
1428
|
+
const modalOverlay = "Popup-module__modalOverlay";
|
|
1429
|
+
const popupDrawerMode = "Popup-module__popupDrawerMode";
|
|
1430
|
+
const popupContainer = "Popup-module__popupContainer";
|
|
1431
|
+
const closeButton = "Popup-module__closeButton";
|
|
1432
|
+
const withOptions = "Popup-module__withOptions";
|
|
1433
|
+
const horizontal = "Popup-module__horizontal";
|
|
1434
|
+
const popupHeader = "Popup-module__popupHeader";
|
|
1435
|
+
const popupTitle = "Popup-module__popupTitle";
|
|
1436
|
+
const popupDescription = "Popup-module__popupDescription";
|
|
1437
|
+
const typeIcon = "Popup-module__typeIcon";
|
|
1438
|
+
const icon = "Popup-module__icon";
|
|
1439
|
+
const templateWrapper = "Popup-module__templateWrapper";
|
|
1440
|
+
const style$7 = {
|
|
1441
|
+
modalOverlay,
|
|
1442
|
+
popupDrawerMode,
|
|
1443
|
+
popupContainer,
|
|
1444
|
+
closeButton,
|
|
1445
|
+
withOptions,
|
|
1446
|
+
horizontal,
|
|
1447
|
+
popupHeader,
|
|
1448
|
+
popupTitle,
|
|
1449
|
+
popupDescription,
|
|
1450
|
+
typeIcon,
|
|
1451
|
+
icon,
|
|
1452
|
+
templateWrapper
|
|
1453
|
+
};
|
|
1454
|
+
const Popup = ({
|
|
1455
|
+
visible,
|
|
1456
|
+
template,
|
|
1457
|
+
options,
|
|
1458
|
+
children,
|
|
1459
|
+
onClickOutside,
|
|
1460
|
+
onClose,
|
|
1461
|
+
widthType,
|
|
1462
|
+
// "horizontal"
|
|
1463
|
+
modalOverlayStyle,
|
|
1464
|
+
popupContainerStyle,
|
|
1465
|
+
templateWrapperStyle,
|
|
1466
|
+
popupHeaderStyle,
|
|
1467
|
+
popupTitleStyle,
|
|
1468
|
+
closeButtonStyle
|
|
1469
|
+
}) => {
|
|
1470
|
+
const _getType = () => {
|
|
1471
|
+
if (!options || !options?.type) return;
|
|
1472
|
+
switch (String(options?.type)) {
|
|
1473
|
+
case "delete": {
|
|
1474
|
+
return /* @__PURE__ */ jsx(IconTrash, {});
|
|
1475
|
+
}
|
|
1476
|
+
case "unsaved": {
|
|
1477
|
+
return /* @__PURE__ */ jsx(IconSave, {});
|
|
1478
|
+
}
|
|
1479
|
+
case "success": {
|
|
1480
|
+
return /* @__PURE__ */ jsx(IconCheckCircle, {});
|
|
1481
|
+
}
|
|
1482
|
+
}
|
|
1483
|
+
};
|
|
1484
|
+
const ClickClose = () => {
|
|
1485
|
+
if (onClose && typeof onClose === "function") {
|
|
1486
|
+
onClose();
|
|
1487
|
+
}
|
|
1488
|
+
};
|
|
1489
|
+
const componentRef = useRef(null);
|
|
1490
|
+
const handleClick = (event) => {
|
|
1491
|
+
const clickedElement = event.target;
|
|
1492
|
+
if (clickedElement === componentRef.current) {
|
|
1493
|
+
if (onClickOutside && typeof onClickOutside === "function") {
|
|
1494
|
+
onClickOutside();
|
|
1495
|
+
}
|
|
1496
|
+
}
|
|
1497
|
+
};
|
|
1498
|
+
useEffect(() => {
|
|
1499
|
+
document.addEventListener("click", handleClick);
|
|
1500
|
+
return () => {
|
|
1501
|
+
document.removeEventListener("click", handleClick);
|
|
1502
|
+
};
|
|
1503
|
+
}, []);
|
|
1504
|
+
return visible && /* @__PURE__ */ jsx(
|
|
1505
|
+
"div",
|
|
1506
|
+
{
|
|
1507
|
+
ref: componentRef,
|
|
1508
|
+
style: modalOverlayStyle ?? {},
|
|
1509
|
+
className: `
|
|
1510
|
+
${style$7.modalOverlay}
|
|
1511
|
+
${options && options?.mode === "drawer" ? style$7.popupDrawerMode : ""}
|
|
1512
|
+
`,
|
|
1513
|
+
children: /* @__PURE__ */ jsxs(
|
|
1514
|
+
"div",
|
|
1515
|
+
{
|
|
1516
|
+
style: popupContainerStyle ?? {},
|
|
1517
|
+
className: `
|
|
1518
|
+
mcPopup_global
|
|
1519
|
+
${style$7.popupContainer}
|
|
1520
|
+
${options?.type ? style$7.withOptions : ""}
|
|
1521
|
+
${widthType === "horizontal" ? style$7.horizontal : ""}
|
|
1522
|
+
`,
|
|
1523
|
+
children: [
|
|
1524
|
+
/* @__PURE__ */ jsx("div", { className: style$7.closeButton, style: closeButtonStyle ?? {}, onClick: ClickClose, children: /* @__PURE__ */ jsx(
|
|
1525
|
+
IconCloseBlack,
|
|
1526
|
+
{
|
|
1527
|
+
color: "#131314"
|
|
1528
|
+
}
|
|
1529
|
+
) }),
|
|
1530
|
+
(options?.title || options?.description || options?.type) && /* @__PURE__ */ jsxs("div", { className: `${style$7.popupHeader}`, style: popupHeaderStyle ?? {}, children: [
|
|
1531
|
+
_getType() && /* @__PURE__ */ jsx("div", { className: style$7.typeIcon, children: /* @__PURE__ */ jsx(
|
|
1532
|
+
"div",
|
|
1533
|
+
{
|
|
1534
|
+
style: { backgroundColor: options?.type === "success" ? "#DCFAE6" : options?.type === "unsaved" ? "#FEF0C7" : "#FEE4E2" },
|
|
1535
|
+
className: style$7.icon,
|
|
1536
|
+
children: _getType()
|
|
1537
|
+
}
|
|
1538
|
+
) }),
|
|
1539
|
+
options && options?.title && /* @__PURE__ */ jsx("div", { className: style$7.popupTitle, children: /* @__PURE__ */ jsxs("h2", { style: popupTitleStyle ?? {}, children: [
|
|
1540
|
+
" ",
|
|
1541
|
+
options?.title ?? "",
|
|
1542
|
+
" "
|
|
1543
|
+
] }) }),
|
|
1544
|
+
options && options?.description && /* @__PURE__ */ jsx("div", { className: style$7.popupDescription, children: /* @__PURE__ */ jsxs("p", { children: [
|
|
1545
|
+
" ",
|
|
1546
|
+
options?.description ?? "",
|
|
1547
|
+
" "
|
|
1548
|
+
] }) })
|
|
1549
|
+
] }),
|
|
1550
|
+
/* @__PURE__ */ jsxs("div", { className: style$7.templateWrapper, style: templateWrapperStyle ?? {}, children: [
|
|
1551
|
+
template && template,
|
|
1552
|
+
children && children
|
|
1553
|
+
] })
|
|
1554
|
+
]
|
|
1555
|
+
}
|
|
1556
|
+
)
|
|
1557
|
+
}
|
|
1558
|
+
);
|
|
1559
|
+
};
|
|
1560
|
+
const toastContainer = "NotificationToast-module__toastContainer";
|
|
1561
|
+
const notificationToast = "NotificationToast-module__notificationToast";
|
|
1562
|
+
const fadeIn = "NotificationToast-module__fadeIn";
|
|
1563
|
+
const fadeOut = "NotificationToast-module__fadeOut";
|
|
1564
|
+
const neutral = "NotificationToast-module__neutral";
|
|
1565
|
+
const filled = "NotificationToast-module__filled";
|
|
1566
|
+
const notificationToastContentLeftTextTitle = "NotificationToast-module__notificationToastContentLeftTextTitle";
|
|
1567
|
+
const notificationToastContentRightUndoText = "NotificationToast-module__notificationToastContentRightUndoText";
|
|
1568
|
+
const notificationToastContentLeftTextDescription = "NotificationToast-module__notificationToastContentLeftTextDescription";
|
|
1569
|
+
const info = "NotificationToast-module__info";
|
|
1570
|
+
const error = "NotificationToast-module__error";
|
|
1571
|
+
const success = "NotificationToast-module__success";
|
|
1572
|
+
const notificationToastContent = "NotificationToast-module__notificationToastContent";
|
|
1573
|
+
const notificationToastContentLeft = "NotificationToast-module__notificationToastContentLeft";
|
|
1574
|
+
const notificationToastContentInfoIcon = "NotificationToast-module__notificationToastContentInfoIcon";
|
|
1575
|
+
const notificationToastContentLeftText = "NotificationToast-module__notificationToastContentLeftText";
|
|
1576
|
+
const notificationToastContentRight = "NotificationToast-module__notificationToastContentRight";
|
|
1577
|
+
const notificationToastContentRightClose = "NotificationToast-module__notificationToastContentRightClose";
|
|
1578
|
+
const style$6 = {
|
|
1579
|
+
toastContainer,
|
|
1580
|
+
notificationToast,
|
|
1581
|
+
fadeIn,
|
|
1582
|
+
fadeOut,
|
|
1583
|
+
neutral,
|
|
1584
|
+
filled,
|
|
1585
|
+
notificationToastContentLeftTextTitle,
|
|
1586
|
+
notificationToastContentRightUndoText,
|
|
1587
|
+
notificationToastContentLeftTextDescription,
|
|
1588
|
+
info,
|
|
1589
|
+
error,
|
|
1590
|
+
success,
|
|
1591
|
+
notificationToastContent,
|
|
1592
|
+
notificationToastContentLeft,
|
|
1593
|
+
notificationToastContentInfoIcon,
|
|
1594
|
+
notificationToastContentLeftText,
|
|
1595
|
+
notificationToastContentRight,
|
|
1596
|
+
notificationToastContentRightClose
|
|
1597
|
+
};
|
|
1598
|
+
const NotificationToast = ({
|
|
1599
|
+
title,
|
|
1600
|
+
colorType = "neutral",
|
|
1601
|
+
filled: filled2 = false,
|
|
1602
|
+
withClose = false,
|
|
1603
|
+
withUndo = false,
|
|
1604
|
+
withInfoIcon = true,
|
|
1605
|
+
description,
|
|
1606
|
+
customAction,
|
|
1607
|
+
timeout = 4e3,
|
|
1608
|
+
children,
|
|
1609
|
+
onUndo,
|
|
1610
|
+
onClose
|
|
1611
|
+
}) => {
|
|
1612
|
+
const [animationClass, setAnimationClass] = useState("fadeIn");
|
|
1613
|
+
useEffect(() => {
|
|
1614
|
+
const duration = timeout;
|
|
1615
|
+
const fadeDuration = 300;
|
|
1616
|
+
const hideTimeout = setTimeout(() => {
|
|
1617
|
+
setAnimationClass("fadeOut");
|
|
1618
|
+
setTimeout(() => {
|
|
1619
|
+
onClose?.();
|
|
1620
|
+
}, fadeDuration);
|
|
1621
|
+
}, duration);
|
|
1622
|
+
return () => {
|
|
1623
|
+
clearTimeout(hideTimeout);
|
|
1624
|
+
};
|
|
1625
|
+
}, [onClose]);
|
|
1626
|
+
return /* @__PURE__ */ jsx(
|
|
1627
|
+
"div",
|
|
1628
|
+
{
|
|
1629
|
+
className: `${style$6.notificationToast} ${style$6[colorType]} ${filled2 ? style$6.filled : ""} ${style$6[animationClass]}`,
|
|
1630
|
+
style: description ? { padding: "12px" } : {},
|
|
1631
|
+
children: /* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
|
|
1632
|
+
/* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
|
|
1633
|
+
withInfoIcon && /* @__PURE__ */ jsx("div", { className: style$6.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsx(IconCheck, { color: filled2 ? "#328707" : "#fff" }) : /* @__PURE__ */ jsx(IconExclamation, { color: filled2 ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
|
|
1634
|
+
/* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContentLeftText, children: [
|
|
1635
|
+
title && /* @__PURE__ */ jsx("p", { className: style$6.notificationToastContentLeftTextTitle, children: title }),
|
|
1636
|
+
description && /* @__PURE__ */ jsx("p", { className: style$6.notificationToastContentLeftTextDescription, children: description }),
|
|
1637
|
+
children && children
|
|
1638
|
+
] })
|
|
1639
|
+
] }),
|
|
1640
|
+
/* @__PURE__ */ jsx("div", { className: style$6.notificationToastContentDescription }),
|
|
1641
|
+
/* @__PURE__ */ jsxs("div", { className: style$6.notificationToastContentRight, children: [
|
|
1642
|
+
customAction && customAction,
|
|
1643
|
+
!description && withUndo && /* @__PURE__ */ jsx("p", { className: style$6.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
|
|
1644
|
+
withClose && /* @__PURE__ */ jsx("div", { className: style$6.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ jsx(
|
|
1645
|
+
IconCloseBlack,
|
|
1646
|
+
{
|
|
1647
|
+
color: filled2 ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : colorType === "info" ? "#0058FF" : "#328707" : "#fff"
|
|
1648
|
+
}
|
|
1649
|
+
) })
|
|
1650
|
+
] })
|
|
1651
|
+
] })
|
|
1652
|
+
}
|
|
1653
|
+
);
|
|
1654
|
+
};
|
|
1655
|
+
const ToastContext = createContext(null);
|
|
1656
|
+
let idCounter = 0;
|
|
1657
|
+
const ToastProvider = ({ children }) => {
|
|
1658
|
+
const [toasts, setToasts] = useState([]);
|
|
1659
|
+
const showToast = (props) => {
|
|
1660
|
+
setToasts((prev) => {
|
|
1661
|
+
const max = props.max ?? Infinity;
|
|
1662
|
+
if (prev.length >= max) return prev;
|
|
1663
|
+
const id = idCounter++;
|
|
1664
|
+
setTimeout(() => {
|
|
1665
|
+
setToasts((prev2) => prev2.filter((t) => t.id !== id));
|
|
1666
|
+
}, props.timeout || 4e3);
|
|
1667
|
+
return [...prev, { id, props }];
|
|
1668
|
+
});
|
|
1669
|
+
};
|
|
1670
|
+
const getPosition = useCallback(() => {
|
|
1671
|
+
if (toasts.length > 0) {
|
|
1672
|
+
switch (toasts[0]?.props?.position) {
|
|
1673
|
+
case "top-left":
|
|
1674
|
+
return { top: "20px", left: "20px" };
|
|
1675
|
+
case "top-right":
|
|
1676
|
+
return { top: "20px", right: "20px" };
|
|
1677
|
+
case "bottom-left":
|
|
1678
|
+
return { bottom: "20px", left: "20px" };
|
|
1679
|
+
case "bottom-right":
|
|
1680
|
+
return { bottom: "20px", right: "20px" };
|
|
1681
|
+
case "top-center":
|
|
1682
|
+
return { top: "20px", left: "50%", transform: "translateX(-50%)" };
|
|
1683
|
+
case "bottom-center":
|
|
1684
|
+
return { bottom: "20px", left: "50%", transform: "translateX(-50%)" };
|
|
1685
|
+
default:
|
|
1686
|
+
return {};
|
|
1687
|
+
}
|
|
1688
|
+
}
|
|
1689
|
+
}, [toasts.length]);
|
|
1690
|
+
return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { showToast }, children: [
|
|
1691
|
+
children,
|
|
1692
|
+
/* @__PURE__ */ jsx("div", { className: style$6.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsx(
|
|
1693
|
+
NotificationToast,
|
|
1694
|
+
{
|
|
1695
|
+
...props,
|
|
1696
|
+
onClose: () => {
|
|
1697
|
+
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
1698
|
+
}
|
|
1699
|
+
},
|
|
1700
|
+
id
|
|
1701
|
+
)) })
|
|
1702
|
+
] });
|
|
1703
|
+
};
|
|
1704
|
+
const createNotificationToast = () => {
|
|
1705
|
+
const context = useContext(ToastContext);
|
|
1706
|
+
if (!context) throw new Error("createNotificationToast must be used within ToastProvider");
|
|
1707
|
+
return context.showToast;
|
|
1708
|
+
};
|
|
1709
|
+
const timepickerWrapper = "TimePicker-module__timepickerWrapper";
|
|
1710
|
+
const timepickerInputWrapper = "TimePicker-module__timepickerInputWrapper";
|
|
1711
|
+
const dropdownRightIcon = "TimePicker-module__dropdownRightIcon";
|
|
1712
|
+
const dropdownRightIconClose = "TimePicker-module__dropdownRightIconClose";
|
|
1713
|
+
const dropdownRightIconArrow = "TimePicker-module__dropdownRightIconArrow";
|
|
1714
|
+
const focused = "TimePicker-module__focused";
|
|
1715
|
+
const timepickerDropdownWrapper = "TimePicker-module__timepickerDropdownWrapper";
|
|
1716
|
+
const timepickerDropdownHeader = "TimePicker-module__timepickerDropdownHeader";
|
|
1717
|
+
const timepickerDropdownHeaderButtons = "TimePicker-module__timepickerDropdownHeaderButtons";
|
|
1718
|
+
const active = "TimePicker-module__active";
|
|
1719
|
+
const timepickerDropdownBody = "TimePicker-module__timepickerDropdownBody";
|
|
1720
|
+
const timepickerDropdownBodyHours = "TimePicker-module__timepickerDropdownBodyHours";
|
|
1721
|
+
const timepickerDropdownBodyMinutes = "TimePicker-module__timepickerDropdownBodyMinutes";
|
|
1722
|
+
const timepickerDropdownBodyAmPm = "TimePicker-module__timepickerDropdownBodyAmPm";
|
|
1723
|
+
const timepickerDropdownFooter = "TimePicker-module__timepickerDropdownFooter";
|
|
1724
|
+
const style$5 = {
|
|
1725
|
+
timepickerWrapper,
|
|
1726
|
+
timepickerInputWrapper,
|
|
1727
|
+
dropdownRightIcon,
|
|
1728
|
+
dropdownRightIconClose,
|
|
1729
|
+
dropdownRightIconArrow,
|
|
1730
|
+
focused,
|
|
1731
|
+
timepickerDropdownWrapper,
|
|
1732
|
+
timepickerDropdownHeader,
|
|
1733
|
+
timepickerDropdownHeaderButtons,
|
|
1734
|
+
active,
|
|
1735
|
+
timepickerDropdownBody,
|
|
1736
|
+
timepickerDropdownBodyHours,
|
|
1737
|
+
timepickerDropdownBodyMinutes,
|
|
1738
|
+
timepickerDropdownBodyAmPm,
|
|
1739
|
+
timepickerDropdownFooter
|
|
1740
|
+
};
|
|
1741
|
+
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
1742
|
+
function getDefaultExportFromCjs(x) {
|
|
1743
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
|
|
1744
|
+
}
|
|
1745
|
+
var customParseFormat$1 = { exports: {} };
|
|
1746
|
+
(function(module, exports) {
|
|
1747
|
+
!function(e, t) {
|
|
1748
|
+
module.exports = t();
|
|
1749
|
+
}(commonjsGlobal, function() {
|
|
1750
|
+
var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d/, r = /\d\d/, i = /\d\d?/, o = /\d*[^-_:/,()\s\d]+/, s = {}, a = function(e2) {
|
|
1751
|
+
return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3);
|
|
1752
|
+
};
|
|
1753
|
+
var f = function(e2) {
|
|
1754
|
+
return function(t2) {
|
|
1755
|
+
this[e2] = +t2;
|
|
1756
|
+
};
|
|
1757
|
+
}, h = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) {
|
|
1758
|
+
(this.zone || (this.zone = {})).offset = function(e3) {
|
|
1759
|
+
if (!e3) return 0;
|
|
1760
|
+
if ("Z" === e3) return 0;
|
|
1761
|
+
var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0);
|
|
1762
|
+
return 0 === n2 ? 0 : "+" === t2[0] ? -n2 : n2;
|
|
1763
|
+
}(e2);
|
|
1764
|
+
}], u = function(e2) {
|
|
1765
|
+
var t2 = s[e2];
|
|
1766
|
+
return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f));
|
|
1767
|
+
}, d = function(e2, t2) {
|
|
1768
|
+
var n2, r2 = s.meridiem;
|
|
1769
|
+
if (r2) {
|
|
1770
|
+
for (var i2 = 1; i2 <= 24; i2 += 1) if (e2.indexOf(r2(i2, 0, t2)) > -1) {
|
|
1771
|
+
n2 = i2 > 12;
|
|
1772
|
+
break;
|
|
1773
|
+
}
|
|
1774
|
+
} else n2 = e2 === (t2 ? "pm" : "PM");
|
|
1775
|
+
return n2;
|
|
1776
|
+
}, c = { A: [o, function(e2) {
|
|
1777
|
+
this.afternoon = d(e2, false);
|
|
1778
|
+
}], a: [o, function(e2) {
|
|
1779
|
+
this.afternoon = d(e2, true);
|
|
1780
|
+
}], Q: [n, function(e2) {
|
|
1781
|
+
this.month = 3 * (e2 - 1) + 1;
|
|
1782
|
+
}], S: [n, function(e2) {
|
|
1783
|
+
this.milliseconds = 100 * +e2;
|
|
1784
|
+
}], SS: [r, function(e2) {
|
|
1785
|
+
this.milliseconds = 10 * +e2;
|
|
1786
|
+
}], SSS: [/\d{3}/, function(e2) {
|
|
1787
|
+
this.milliseconds = +e2;
|
|
1788
|
+
}], s: [i, f("seconds")], ss: [i, f("seconds")], m: [i, f("minutes")], mm: [i, f("minutes")], H: [i, f("hours")], h: [i, f("hours")], HH: [i, f("hours")], hh: [i, f("hours")], D: [i, f("day")], DD: [r, f("day")], Do: [o, function(e2) {
|
|
1789
|
+
var t2 = s.ordinal, n2 = e2.match(/\d+/);
|
|
1790
|
+
if (this.day = n2[0], t2) for (var r2 = 1; r2 <= 31; r2 += 1) t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2);
|
|
1791
|
+
}], w: [i, f("week")], ww: [r, f("week")], M: [i, f("month")], MM: [r, f("month")], MMM: [o, function(e2) {
|
|
1792
|
+
var t2 = u("months"), n2 = (u("monthsShort") || t2.map(function(e3) {
|
|
1793
|
+
return e3.slice(0, 3);
|
|
1794
|
+
})).indexOf(e2) + 1;
|
|
1795
|
+
if (n2 < 1) throw new Error();
|
|
1796
|
+
this.month = n2 % 12 || n2;
|
|
1797
|
+
}], MMMM: [o, function(e2) {
|
|
1798
|
+
var t2 = u("months").indexOf(e2) + 1;
|
|
1799
|
+
if (t2 < 1) throw new Error();
|
|
1800
|
+
this.month = t2 % 12 || t2;
|
|
1801
|
+
}], Y: [/[+-]?\d+/, f("year")], YY: [r, function(e2) {
|
|
1802
|
+
this.year = a(e2);
|
|
1803
|
+
}], YYYY: [/\d{4}/, f("year")], Z: h, ZZ: h };
|
|
1804
|
+
function l(n2) {
|
|
1805
|
+
var r2, i2;
|
|
1806
|
+
r2 = n2, i2 = s && s.formats;
|
|
1807
|
+
for (var o2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(t2, n3, r3) {
|
|
1808
|
+
var o3 = r3 && r3.toUpperCase();
|
|
1809
|
+
return n3 || i2[r3] || e[r3] || i2[o3].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(e2, t3, n4) {
|
|
1810
|
+
return t3 || n4.slice(1);
|
|
1811
|
+
});
|
|
1812
|
+
})).match(t), a2 = o2.length, f2 = 0; f2 < a2; f2 += 1) {
|
|
1813
|
+
var h2 = o2[f2], u2 = c[h2], d2 = u2 && u2[0], l2 = u2 && u2[1];
|
|
1814
|
+
o2[f2] = l2 ? { regex: d2, parser: l2 } : h2.replace(/^\[|\]$/g, "");
|
|
1815
|
+
}
|
|
1816
|
+
return function(e2) {
|
|
1817
|
+
for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) {
|
|
1818
|
+
var i3 = o2[n3];
|
|
1819
|
+
if ("string" == typeof i3) r3 += i3.length;
|
|
1820
|
+
else {
|
|
1821
|
+
var s2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = s2.exec(h3)[0];
|
|
1822
|
+
f3.call(t2, u3), e2 = e2.replace(u3, "");
|
|
1823
|
+
}
|
|
1824
|
+
}
|
|
1825
|
+
return function(e3) {
|
|
1826
|
+
var t3 = e3.afternoon;
|
|
1827
|
+
if (void 0 !== t3) {
|
|
1828
|
+
var n4 = e3.hours;
|
|
1829
|
+
t3 ? n4 < 12 && (e3.hours += 12) : 12 === n4 && (e3.hours = 0), delete e3.afternoon;
|
|
1830
|
+
}
|
|
1831
|
+
}(t2), t2;
|
|
1832
|
+
};
|
|
1833
|
+
}
|
|
1834
|
+
return function(e2, t2, n2) {
|
|
1835
|
+
n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (a = e2.parseTwoDigitYear);
|
|
1836
|
+
var r2 = t2.prototype, i2 = r2.parse;
|
|
1837
|
+
r2.parse = function(e3) {
|
|
1838
|
+
var t3 = e3.date, r3 = e3.utc, o2 = e3.args;
|
|
1839
|
+
this.$u = r3;
|
|
1840
|
+
var a2 = o2[1];
|
|
1841
|
+
if ("string" == typeof a2) {
|
|
1842
|
+
var f2 = true === o2[2], h2 = true === o2[3], u2 = f2 || h2, d2 = o2[2];
|
|
1843
|
+
h2 && (d2 = o2[2]), s = this.$locale(), !f2 && d2 && (s = n2.Ls[d2]), this.$d = function(e4, t4, n3, r4) {
|
|
1844
|
+
try {
|
|
1845
|
+
if (["x", "X"].indexOf(t4) > -1) return new Date(("X" === t4 ? 1e3 : 1) * e4);
|
|
1846
|
+
var i3 = l(t4)(e4), o3 = i3.year, s2 = i3.month, a3 = i3.day, f3 = i3.hours, h3 = i3.minutes, u3 = i3.seconds, d3 = i3.milliseconds, c3 = i3.zone, m2 = i3.week, M2 = /* @__PURE__ */ new Date(), Y = a3 || (o3 || s2 ? 1 : M2.getDate()), p = o3 || M2.getFullYear(), v = 0;
|
|
1847
|
+
o3 && !s2 || (v = s2 > 0 ? s2 - 1 : M2.getMonth());
|
|
1848
|
+
var D, w = f3 || 0, g = h3 || 0, y = u3 || 0, L = d3 || 0;
|
|
1849
|
+
return c3 ? new Date(Date.UTC(p, v, Y, w, g, y, L + 60 * c3.offset * 1e3)) : n3 ? new Date(Date.UTC(p, v, Y, w, g, y, L)) : (D = new Date(p, v, Y, w, g, y, L), m2 && (D = r4(D).week(m2).toDate()), D);
|
|
1850
|
+
} catch (e5) {
|
|
1851
|
+
return /* @__PURE__ */ new Date("");
|
|
1852
|
+
}
|
|
1853
|
+
}(t3, a2, r3, n2), this.init(), d2 && true !== d2 && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = /* @__PURE__ */ new Date("")), s = {};
|
|
1854
|
+
} else if (a2 instanceof Array) for (var c2 = a2.length, m = 1; m <= c2; m += 1) {
|
|
1855
|
+
o2[1] = a2[m - 1];
|
|
1856
|
+
var M = n2.apply(this, o2);
|
|
1857
|
+
if (M.isValid()) {
|
|
1858
|
+
this.$d = M.$d, this.$L = M.$L, this.init();
|
|
1859
|
+
break;
|
|
1860
|
+
}
|
|
1861
|
+
m === c2 && (this.$d = /* @__PURE__ */ new Date(""));
|
|
1862
|
+
}
|
|
1863
|
+
else i2.call(this, e3);
|
|
1864
|
+
};
|
|
1865
|
+
};
|
|
1866
|
+
});
|
|
1867
|
+
})(customParseFormat$1);
|
|
1868
|
+
var customParseFormatExports = customParseFormat$1.exports;
|
|
1869
|
+
const customParseFormat = /* @__PURE__ */ getDefaultExportFromCjs(customParseFormatExports);
|
|
1870
|
+
dayjs.extend(customParseFormat);
|
|
1871
|
+
const TimePicker = ({
|
|
1872
|
+
value,
|
|
1873
|
+
defaultTimeType = "24",
|
|
1874
|
+
defaultAmPm = "AM",
|
|
1875
|
+
withConfirm = true,
|
|
1876
|
+
mode = "single",
|
|
1877
|
+
onChange,
|
|
1878
|
+
onFocus,
|
|
1879
|
+
onBlur,
|
|
1880
|
+
...rest
|
|
1881
|
+
}) => {
|
|
1882
|
+
const ComponentRef = useRef(null);
|
|
1883
|
+
const DropdownRef = useRef(null);
|
|
1884
|
+
const [IsFocused, setIsFocused] = useState(false);
|
|
1885
|
+
const [TimeType, setTimeType] = useState(defaultTimeType);
|
|
1886
|
+
const hours12 = Array.from({ length: 12 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
|
|
1887
|
+
const hours24 = Array.from({ length: 24 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
|
|
1888
|
+
const minutes = Array.from({ length: 60 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
|
|
1889
|
+
const [Value, setValue] = useState("");
|
|
1890
|
+
const [Minutes, setMinutes] = useState(null);
|
|
1891
|
+
const [Hours, setHours] = useState(null);
|
|
1892
|
+
const [AmPm, setAmPm] = useState(defaultAmPm);
|
|
1893
|
+
const CalculatePos = () => {
|
|
1894
|
+
const componentEl = ComponentRef.current;
|
|
1895
|
+
const dropdownEl = DropdownRef.current;
|
|
1896
|
+
if (!dropdownEl || !componentEl) return;
|
|
1897
|
+
const componentRect = componentEl.getBoundingClientRect();
|
|
1898
|
+
const windowHeight = window.innerHeight;
|
|
1899
|
+
dropdownEl.style.position = "fixed";
|
|
1900
|
+
dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
|
|
1901
|
+
if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
|
|
1902
|
+
dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight + 18}px`;
|
|
1903
|
+
dropdownEl.style.bottom = "unset";
|
|
1904
|
+
} else {
|
|
1905
|
+
dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
|
|
1906
|
+
dropdownEl.style.bottom = "unset";
|
|
1907
|
+
}
|
|
1908
|
+
};
|
|
1909
|
+
const Focus = () => {
|
|
1910
|
+
onFocus?.();
|
|
1911
|
+
};
|
|
1912
|
+
const Clear = () => {
|
|
1913
|
+
setValue("");
|
|
1914
|
+
setHours(null);
|
|
1915
|
+
setMinutes(null);
|
|
1916
|
+
setAmPm("AM");
|
|
1917
|
+
};
|
|
1918
|
+
useEffect(() => {
|
|
1919
|
+
if (value && value.length > 0) {
|
|
1920
|
+
setValue(value);
|
|
1921
|
+
}
|
|
1922
|
+
}, [value]);
|
|
1923
|
+
useEffect(() => {
|
|
1924
|
+
if (!Hours && !Minutes) return;
|
|
1925
|
+
const hour = parseInt(Hours ?? "0", 10);
|
|
1926
|
+
const minute = parseInt(Minutes ?? "0", 10);
|
|
1927
|
+
const adjustedHour = TimeType === "12" ? AmPm === "PM" && hour < 12 ? hour + 12 : AmPm === "AM" && hour === 12 ? 0 : hour : hour;
|
|
1928
|
+
const formattedTime = dayjs().hour(adjustedHour).minute(minute).format(TimeType === "12" ? "hh:mm A" : "HH:mm");
|
|
1929
|
+
setValue(formattedTime);
|
|
1930
|
+
if (!withConfirm) {
|
|
1931
|
+
onChange?.(formattedTime);
|
|
1932
|
+
}
|
|
1933
|
+
}, [Hours, Minutes, AmPm, TimeType]);
|
|
1934
|
+
const isInitialRender = useRef(true);
|
|
1935
|
+
useEffect(() => {
|
|
1936
|
+
if (isInitialRender.current) {
|
|
1937
|
+
isInitialRender.current = false;
|
|
1938
|
+
return;
|
|
1939
|
+
}
|
|
1940
|
+
if (!IsFocused) {
|
|
1941
|
+
onBlur?.();
|
|
1942
|
+
}
|
|
1943
|
+
}, [IsFocused]);
|
|
1944
|
+
useEffect(() => {
|
|
1945
|
+
CalculatePos();
|
|
1946
|
+
}, [ComponentRef, IsFocused]);
|
|
1947
|
+
useEffect(() => {
|
|
1948
|
+
const ClickHandler = (event) => {
|
|
1949
|
+
if (!ComponentRef.current || !DropdownRef.current) return;
|
|
1950
|
+
if (event.composedPath().includes(ComponentRef.current) || event.composedPath().includes(DropdownRef.current)) return;
|
|
1951
|
+
setIsFocused(false);
|
|
1952
|
+
};
|
|
1953
|
+
const ScrollHandler = (event) => {
|
|
1954
|
+
if (!ComponentRef.current || DropdownRef.current) return;
|
|
1955
|
+
setIsFocused(false);
|
|
1956
|
+
};
|
|
1957
|
+
document.addEventListener("click", ClickHandler);
|
|
1958
|
+
document.addEventListener("wheel", ScrollHandler);
|
|
1959
|
+
return () => {
|
|
1960
|
+
document.removeEventListener("click", ClickHandler);
|
|
1961
|
+
document.removeEventListener("wheel", ScrollHandler);
|
|
1962
|
+
};
|
|
1963
|
+
}, []);
|
|
1964
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style$5.timepickerWrapper} ${IsFocused ? style$5.focused : ""}`, children: [
|
|
1965
|
+
/* @__PURE__ */ jsx("div", { ref: ComponentRef, className: style$5.timepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), onFocus: Focus, children: /* @__PURE__ */ jsx(
|
|
1966
|
+
FormInput,
|
|
1967
|
+
{
|
|
1968
|
+
...rest,
|
|
1969
|
+
onFocusChange: (value2) => setIsFocused(value2),
|
|
1970
|
+
customFocus: IsFocused,
|
|
1971
|
+
withActive: false,
|
|
1972
|
+
value: Value,
|
|
1973
|
+
toggleFocus: true,
|
|
1974
|
+
formInputStyle: { cursor: "pointer" },
|
|
1975
|
+
rightSlot: /* @__PURE__ */ jsxs("div", { className: `${style$5.dropdownRightIcon} ${IsFocused ? style$5.focused : ""}`, children: [
|
|
1976
|
+
Value && /* @__PURE__ */ jsx(
|
|
1977
|
+
"div",
|
|
1978
|
+
{
|
|
1979
|
+
onClick: (e) => {
|
|
1980
|
+
e.stopPropagation();
|
|
1981
|
+
Clear();
|
|
1982
|
+
},
|
|
1983
|
+
className: style$5.dropdownRightIconClose,
|
|
1984
|
+
children: /* @__PURE__ */ jsx(IconCloseCircle, {})
|
|
1985
|
+
}
|
|
1986
|
+
),
|
|
1987
|
+
/* @__PURE__ */ jsx("div", { className: style$5.dropdownRightIconArrow, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
|
|
1988
|
+
] }),
|
|
1989
|
+
readOnly: true,
|
|
1990
|
+
forDropdown: true
|
|
1991
|
+
}
|
|
1992
|
+
) }),
|
|
1993
|
+
IsFocused && /* @__PURE__ */ jsxs("div", { ref: DropdownRef, className: style$5.timepickerDropdownWrapper, children: [
|
|
1994
|
+
/* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownHeader, children: /* @__PURE__ */ jsxs("div", { className: style$5.timepickerDropdownHeaderButtons, children: [
|
|
1995
|
+
/* @__PURE__ */ jsx(
|
|
1996
|
+
"p",
|
|
1997
|
+
{
|
|
1998
|
+
className: TimeType === "12" ? style$5.active : "",
|
|
1999
|
+
onClick: () => {
|
|
2000
|
+
Clear();
|
|
2001
|
+
setTimeType("12");
|
|
2002
|
+
},
|
|
2003
|
+
children: "AM -PM"
|
|
2004
|
+
}
|
|
2005
|
+
),
|
|
2006
|
+
/* @__PURE__ */ jsx(
|
|
2007
|
+
"p",
|
|
2008
|
+
{
|
|
2009
|
+
className: TimeType === "24" ? style$5.active : "",
|
|
2010
|
+
onClick: () => {
|
|
2011
|
+
Clear();
|
|
2012
|
+
setTimeType("24");
|
|
2013
|
+
},
|
|
2014
|
+
children: "24 Hours"
|
|
2015
|
+
}
|
|
2016
|
+
)
|
|
2017
|
+
] }) }),
|
|
2018
|
+
/* @__PURE__ */ jsxs("div", { className: style$5.timepickerDropdownBody, children: [
|
|
2019
|
+
/* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownBodyHours, children: (TimeType === "12" ? hours12 : hours24).map((hour) => /* @__PURE__ */ jsx("p", { className: Hours === hour || Value?.split(":")[0] === hour ? style$5.active : "", onClick: () => setHours(hour), children: hour }, hour)) }),
|
|
2020
|
+
/* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownBodyMinutes, children: minutes.map((minute) => /* @__PURE__ */ jsx("p", { className: Minutes === minute || Value?.split(":")[1] === minute ? style$5.active : "", onClick: () => setMinutes(minute), children: minute }, minute)) }),
|
|
2021
|
+
TimeType === "12" && /* @__PURE__ */ jsxs("div", { className: style$5.timepickerDropdownBodyAmPm, children: [
|
|
2022
|
+
/* @__PURE__ */ jsx("p", { className: AmPm === "AM" ? style$5.active : "", onClick: () => setAmPm("AM"), children: "AM" }, "AM"),
|
|
2023
|
+
/* @__PURE__ */ jsx("p", { className: AmPm === "PM" ? style$5.active : "", onClick: () => setAmPm("PM"), children: "PM" }, "PM")
|
|
2024
|
+
] })
|
|
2025
|
+
] }),
|
|
2026
|
+
withConfirm && /* @__PURE__ */ jsx("div", { className: style$5.timepickerDropdownFooter, children: /* @__PURE__ */ jsx(MainButton, { label: "Confirm time", onClick: () => onChange?.(Value) }) })
|
|
2027
|
+
] })
|
|
2028
|
+
] });
|
|
2029
|
+
};
|
|
2030
|
+
const datepickerContainer = "Datepicker-module__datepickerContainer";
|
|
2031
|
+
const datepickerInputWrapper = "Datepicker-module__datepickerInputWrapper";
|
|
2032
|
+
const datepickerLeftIcon = "Datepicker-module__datepickerLeftIcon";
|
|
2033
|
+
const datepickerRightIcon = "Datepicker-module__datepickerRightIcon";
|
|
2034
|
+
const style$4 = {
|
|
2035
|
+
datepickerContainer,
|
|
2036
|
+
datepickerInputWrapper,
|
|
2037
|
+
datepickerLeftIcon,
|
|
2038
|
+
datepickerRightIcon
|
|
2039
|
+
};
|
|
2040
|
+
const datePicker = "Calendar-module__datePicker";
|
|
2041
|
+
const dualCalendar = "Calendar-module__dualCalendar";
|
|
2042
|
+
const dualCalendarWithQuick = "Calendar-module__dualCalendarWithQuick";
|
|
2043
|
+
const border = "Calendar-module__border";
|
|
2044
|
+
const calendarWrapper = "Calendar-module__calendarWrapper";
|
|
2045
|
+
const quickPick = "Calendar-module__quickPick";
|
|
2046
|
+
const datePickerHeader = "Calendar-module__datePickerHeader";
|
|
2047
|
+
const div = "Calendar-module__div";
|
|
2048
|
+
const currentDateHeader = "Calendar-module__currentDateHeader";
|
|
2049
|
+
const left = "Calendar-module__left";
|
|
2050
|
+
const right = "Calendar-module__right";
|
|
2051
|
+
const singleIcon = "Calendar-module__singleIcon";
|
|
2052
|
+
const doubleIcon = "Calendar-module__doubleIcon";
|
|
2053
|
+
const spacerRow = "Calendar-module__spacerRow";
|
|
2054
|
+
const day = "Calendar-module__day";
|
|
2055
|
+
const today = "Calendar-module__today";
|
|
2056
|
+
const inRange = "Calendar-module__inRange";
|
|
2057
|
+
const selected$1 = "Calendar-module__selected";
|
|
2058
|
+
const startDate = "Calendar-module__startDate";
|
|
2059
|
+
const endDate = "Calendar-module__endDate";
|
|
2060
|
+
const disabled = "Calendar-module__disabled";
|
|
2061
|
+
const otherMonth = "Calendar-module__otherMonth";
|
|
2062
|
+
const monthsWrapper = "Calendar-module__monthsWrapper";
|
|
2063
|
+
const month = "Calendar-module__month";
|
|
2064
|
+
const pickedMonth = "Calendar-module__pickedMonth";
|
|
2065
|
+
const buttonWrapper = "Calendar-module__buttonWrapper";
|
|
2066
|
+
const style$3 = {
|
|
2067
|
+
datePicker,
|
|
2068
|
+
dualCalendar,
|
|
2069
|
+
dualCalendarWithQuick,
|
|
2070
|
+
border,
|
|
2071
|
+
calendarWrapper,
|
|
2072
|
+
quickPick,
|
|
2073
|
+
datePickerHeader,
|
|
2074
|
+
div,
|
|
2075
|
+
currentDateHeader,
|
|
2076
|
+
left,
|
|
2077
|
+
right,
|
|
2078
|
+
singleIcon,
|
|
2079
|
+
doubleIcon,
|
|
2080
|
+
spacerRow,
|
|
2081
|
+
day,
|
|
2082
|
+
today,
|
|
2083
|
+
inRange,
|
|
2084
|
+
selected: selected$1,
|
|
2085
|
+
startDate,
|
|
2086
|
+
endDate,
|
|
2087
|
+
disabled,
|
|
2088
|
+
otherMonth,
|
|
2089
|
+
monthsWrapper,
|
|
2090
|
+
month,
|
|
2091
|
+
pickedMonth,
|
|
2092
|
+
buttonWrapper
|
|
2093
|
+
};
|
|
2094
|
+
dayjs.extend(customParseFormat);
|
|
2095
|
+
const Calendar = ({
|
|
2096
|
+
valueFormat,
|
|
2097
|
+
quickPick: quickPick2,
|
|
2098
|
+
onChange,
|
|
2099
|
+
CurrentMonth,
|
|
2100
|
+
setCurrentMonth,
|
|
2101
|
+
SelectedDate,
|
|
2102
|
+
namespace,
|
|
2103
|
+
customYears,
|
|
2104
|
+
setSelectedDate,
|
|
2105
|
+
IsFocused,
|
|
2106
|
+
setIsFocused,
|
|
2107
|
+
mode,
|
|
2108
|
+
RangeSelection,
|
|
2109
|
+
setRangeSelection,
|
|
2110
|
+
pickerType,
|
|
2111
|
+
disabledDatesRange,
|
|
2112
|
+
disabledDatesTill,
|
|
2113
|
+
disabledDatesFrom,
|
|
2114
|
+
CalendarRef,
|
|
2115
|
+
defaultValue,
|
|
2116
|
+
selectedStyle,
|
|
2117
|
+
endDateStyle,
|
|
2118
|
+
startDateStyle,
|
|
2119
|
+
inRangeStyle,
|
|
2120
|
+
otherMonthStyle,
|
|
2121
|
+
todayStyle,
|
|
2122
|
+
weekDayStyle,
|
|
2123
|
+
quickPickStyle,
|
|
2124
|
+
monthStyle
|
|
2125
|
+
}) => {
|
|
2126
|
+
const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
|
|
2127
|
+
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
2128
|
+
dayjs().year();
|
|
2129
|
+
const [PickedMonth, setPickedMonth] = useState("");
|
|
2130
|
+
const QuickPicker = useRef([]);
|
|
2131
|
+
const [ShowMonths, setShowMonths] = useState(false);
|
|
2132
|
+
const getMonthMatrix = (month2) => {
|
|
2133
|
+
if (customYears?.length && !customYears.includes(month2.year().toString())) {
|
|
2134
|
+
return [];
|
|
2135
|
+
}
|
|
2136
|
+
const startDay = (month2.startOf("month").day() + 6) % 7;
|
|
2137
|
+
const endDay = month2.endOf("month").date();
|
|
2138
|
+
const prevMonthEnd = month2.subtract(1, "month").endOf("month").date();
|
|
2139
|
+
const matrix = [];
|
|
2140
|
+
let week = [];
|
|
2141
|
+
let day2 = 1;
|
|
2142
|
+
for (let i = 0; i < startDay; i++) {
|
|
2143
|
+
week.push({
|
|
2144
|
+
date: month2.subtract(1, "month").date(prevMonthEnd - startDay + i + 1),
|
|
2145
|
+
currentMonth: false
|
|
2146
|
+
});
|
|
2147
|
+
}
|
|
2148
|
+
while (day2 <= endDay) {
|
|
2149
|
+
week.push({ date: month2.date(day2++), currentMonth: true });
|
|
2150
|
+
if (week.length === 7) {
|
|
2151
|
+
matrix.push(week);
|
|
2152
|
+
week = [];
|
|
2153
|
+
}
|
|
2154
|
+
}
|
|
2155
|
+
let nextMonthDay = 1;
|
|
2156
|
+
while (matrix.length < 5) {
|
|
2157
|
+
if (week.length === 7) {
|
|
2158
|
+
matrix.push(week);
|
|
2159
|
+
week = [];
|
|
2160
|
+
}
|
|
2161
|
+
week.push({
|
|
2162
|
+
date: month2.add(1, "month").date(nextMonthDay++),
|
|
2163
|
+
currentMonth: false
|
|
2164
|
+
});
|
|
2165
|
+
}
|
|
2166
|
+
if (week.length) {
|
|
2167
|
+
while (week.length < 7) {
|
|
2168
|
+
week.push({
|
|
2169
|
+
date: month2.add(1, "month").date(nextMonthDay++),
|
|
2170
|
+
currentMonth: false
|
|
2171
|
+
});
|
|
2172
|
+
}
|
|
2173
|
+
matrix.push(week);
|
|
2174
|
+
}
|
|
2175
|
+
return matrix;
|
|
2176
|
+
};
|
|
2177
|
+
const currentMonthMatrix = getMonthMatrix(CurrentMonth);
|
|
2178
|
+
const nextMonthMatrix = pickerType === "dual" ? getMonthMatrix(CurrentMonth.add(1, "month")) : null;
|
|
2179
|
+
const getQuickPickers = () => {
|
|
2180
|
+
let array = [];
|
|
2181
|
+
if (quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0) {
|
|
2182
|
+
quickPick2.forEach((item) => {
|
|
2183
|
+
switch (item) {
|
|
2184
|
+
case "today":
|
|
2185
|
+
QuickPicker.current.push({ name: "Today", key: "Today" });
|
|
2186
|
+
break;
|
|
2187
|
+
case "yesterday":
|
|
2188
|
+
QuickPicker.current.push({ name: "Yesterday", key: "Yesterday" });
|
|
2189
|
+
break;
|
|
2190
|
+
case "thisweek":
|
|
2191
|
+
QuickPicker.current.push({ name: "This week", key: "Thisweek" });
|
|
2192
|
+
break;
|
|
2193
|
+
case "lastweek":
|
|
2194
|
+
QuickPicker.current.push({ name: "Last week", key: "Lastweek" });
|
|
2195
|
+
break;
|
|
2196
|
+
case "thismonth":
|
|
2197
|
+
QuickPicker.current.push({ name: "This month", key: "Thismonth" });
|
|
2198
|
+
break;
|
|
2199
|
+
case "lastmonth":
|
|
2200
|
+
QuickPicker.current.push({ name: "Last month", key: "Lastmonth" });
|
|
2201
|
+
break;
|
|
2202
|
+
case "thisyear":
|
|
2203
|
+
QuickPicker.current.push({ name: "This year", key: "Thisyear" });
|
|
2204
|
+
break;
|
|
2205
|
+
case "lastyear":
|
|
2206
|
+
QuickPicker.current.push({ name: "Last year", key: "Lastyear" });
|
|
2207
|
+
break;
|
|
2208
|
+
case "alltime":
|
|
2209
|
+
QuickPicker.current.push({ name: "All time", key: "Alltime" });
|
|
2210
|
+
break;
|
|
2211
|
+
}
|
|
2212
|
+
});
|
|
2213
|
+
}
|
|
2214
|
+
QuickPicker.current = _filterUnique(QuickPicker.current, "key");
|
|
2215
|
+
array = QuickPicker.current;
|
|
2216
|
+
return array;
|
|
2217
|
+
};
|
|
2218
|
+
const handleQuickPick = (item) => {
|
|
2219
|
+
let obj = { start: "", end: "" };
|
|
2220
|
+
setSelectedDate(null);
|
|
2221
|
+
switch (item.key?.toLowerCase()) {
|
|
2222
|
+
case "today":
|
|
2223
|
+
setRangeSelection({
|
|
2224
|
+
start: dayjs(),
|
|
2225
|
+
end: dayjs()
|
|
2226
|
+
});
|
|
2227
|
+
obj.start = dayjs();
|
|
2228
|
+
break;
|
|
2229
|
+
case "yesterday":
|
|
2230
|
+
setSelectedDate(dayjs().subtract(1, "day"));
|
|
2231
|
+
setRangeSelection({
|
|
2232
|
+
start: dayjs().subtract(1, "day"),
|
|
2233
|
+
end: dayjs().subtract(1, "day")
|
|
2234
|
+
});
|
|
2235
|
+
obj.start = dayjs().subtract(1, "day");
|
|
2236
|
+
break;
|
|
2237
|
+
case "thisweek":
|
|
2238
|
+
setRangeSelection({
|
|
2239
|
+
start: dayjs().startOf("week"),
|
|
2240
|
+
end: dayjs().endOf("week")
|
|
2241
|
+
});
|
|
2242
|
+
obj.start = dayjs().startOf("week");
|
|
2243
|
+
obj.end = dayjs().endOf("week");
|
|
2244
|
+
break;
|
|
2245
|
+
case "lastweek":
|
|
2246
|
+
setRangeSelection({
|
|
2247
|
+
start: dayjs().subtract(1, "week").startOf("week"),
|
|
2248
|
+
end: dayjs().subtract(1, "week").endOf("week")
|
|
2249
|
+
});
|
|
2250
|
+
obj.start = dayjs().subtract(1, "week").startOf("week");
|
|
2251
|
+
obj.end = dayjs().subtract(1, "week").endOf("week");
|
|
2252
|
+
break;
|
|
2253
|
+
case "thismonth":
|
|
2254
|
+
setRangeSelection({
|
|
2255
|
+
start: dayjs().startOf("month"),
|
|
2256
|
+
end: dayjs().endOf("month")
|
|
2257
|
+
});
|
|
2258
|
+
obj.start = dayjs().startOf("month");
|
|
2259
|
+
obj.end = dayjs().endOf("month");
|
|
2260
|
+
break;
|
|
2261
|
+
case "lastmonth":
|
|
2262
|
+
setRangeSelection({
|
|
2263
|
+
start: dayjs().subtract(1, "month").startOf("month"),
|
|
2264
|
+
end: dayjs().subtract(1, "month").endOf("month")
|
|
2265
|
+
});
|
|
2266
|
+
obj.start = dayjs().subtract(1, "month").startOf("month");
|
|
2267
|
+
obj.end = dayjs().subtract(1, "month").endOf("month");
|
|
2268
|
+
break;
|
|
2269
|
+
case "thisyear":
|
|
2270
|
+
setRangeSelection({
|
|
2271
|
+
start: dayjs().startOf("year"),
|
|
2272
|
+
end: dayjs().endOf("year")
|
|
2273
|
+
});
|
|
2274
|
+
obj.start = dayjs().startOf("year");
|
|
2275
|
+
obj.end = dayjs().endOf("year");
|
|
2276
|
+
break;
|
|
2277
|
+
case "lastyear":
|
|
2278
|
+
setRangeSelection({
|
|
2279
|
+
start: dayjs().subtract(1, "year").startOf("year"),
|
|
2280
|
+
end: dayjs().subtract(1, "year").endOf("year")
|
|
2281
|
+
});
|
|
2282
|
+
obj.start = dayjs().subtract(1, "year").startOf("year");
|
|
2283
|
+
obj.end = dayjs().subtract(1, "year").endOf("year");
|
|
2284
|
+
break;
|
|
2285
|
+
case "alltime":
|
|
2286
|
+
setRangeSelection({
|
|
2287
|
+
start: "",
|
|
2288
|
+
end: ""
|
|
2289
|
+
});
|
|
2290
|
+
obj.start = "";
|
|
2291
|
+
obj.end = "";
|
|
2292
|
+
break;
|
|
2293
|
+
default:
|
|
2294
|
+
console.warn("Unsupported quick pick option:", item);
|
|
2295
|
+
break;
|
|
2296
|
+
}
|
|
2297
|
+
if (onChange && typeof onChange === "function") {
|
|
2298
|
+
const range = {
|
|
2299
|
+
start: obj.start ? obj.start : "",
|
|
2300
|
+
end: obj.end ? obj.end : ""
|
|
2301
|
+
};
|
|
2302
|
+
setIsFocused(false);
|
|
2303
|
+
onChange(range.end === "" ? range.start : range);
|
|
2304
|
+
}
|
|
2305
|
+
};
|
|
2306
|
+
const HandleChooseMonth = () => {
|
|
2307
|
+
return;
|
|
2308
|
+
};
|
|
2309
|
+
const handleDayClick = (day2, isCurrentMonth, withDefault = false) => {
|
|
2310
|
+
if (!isCurrentMonth) {
|
|
2311
|
+
setCurrentMonth(day2.startOf("month"));
|
|
2312
|
+
}
|
|
2313
|
+
if (mode === "range") {
|
|
2314
|
+
setRangeSelection((prev) => {
|
|
2315
|
+
if (!prev.start || prev.start && prev.end) {
|
|
2316
|
+
if (onChange && typeof onChange === "function") {
|
|
2317
|
+
onChange({
|
|
2318
|
+
start: day2 ?? "",
|
|
2319
|
+
end: ""
|
|
2320
|
+
});
|
|
2321
|
+
}
|
|
2322
|
+
return { start: day2 ?? "", end: "" };
|
|
2323
|
+
} else if (prev.start && !prev.end) {
|
|
2324
|
+
if (day2.isBefore(prev.start, "day")) {
|
|
2325
|
+
if (onChange && typeof onChange === "function") {
|
|
2326
|
+
onChange({
|
|
2327
|
+
start: day2 ?? "",
|
|
2328
|
+
end: prev?.start ?? ""
|
|
2329
|
+
});
|
|
2330
|
+
}
|
|
2331
|
+
return { start: day2 ?? "", end: prev?.start ?? "" };
|
|
2332
|
+
} else {
|
|
2333
|
+
onChange({
|
|
2334
|
+
...prev,
|
|
2335
|
+
end: day2 ?? ""
|
|
2336
|
+
});
|
|
2337
|
+
return { ...prev, end: day2 ?? "" };
|
|
2338
|
+
}
|
|
2339
|
+
}
|
|
2340
|
+
return prev;
|
|
2341
|
+
});
|
|
2342
|
+
} else {
|
|
2343
|
+
setRangeSelection({ start: null, end: null });
|
|
2344
|
+
setSelectedDate(day2);
|
|
2345
|
+
if (!withDefault) {
|
|
2346
|
+
setIsFocused(false);
|
|
2347
|
+
if (onChange && typeof onChange === "function") {
|
|
2348
|
+
onChange(day2.format(valueFormat));
|
|
2349
|
+
}
|
|
2350
|
+
}
|
|
2351
|
+
}
|
|
2352
|
+
};
|
|
2353
|
+
const goToNextMonth = () => {
|
|
2354
|
+
setCurrentMonth(CurrentMonth.add(1, "month"));
|
|
2355
|
+
};
|
|
2356
|
+
const goToPreviousMonth = () => {
|
|
2357
|
+
setCurrentMonth(CurrentMonth.subtract(1, "month"));
|
|
2358
|
+
};
|
|
2359
|
+
const goToNextYear = () => {
|
|
2360
|
+
setCurrentMonth(CurrentMonth.add(1, "year"));
|
|
2361
|
+
};
|
|
2362
|
+
const goToPreviousYear = () => {
|
|
2363
|
+
setCurrentMonth(CurrentMonth.subtract(1, "year"));
|
|
2364
|
+
};
|
|
2365
|
+
useEffect(() => {
|
|
2366
|
+
if (defaultValue?.state) {
|
|
2367
|
+
if (Array.isArray(defaultValue?.value)) {
|
|
2368
|
+
setRangeSelection({ start: dayjs(defaultValue?.value[0], valueFormat), end: dayjs(defaultValue?.value[1], valueFormat) });
|
|
2369
|
+
} else {
|
|
2370
|
+
handleDayClick(dayjs(defaultValue.value), false, true);
|
|
2371
|
+
}
|
|
2372
|
+
defaultValue.state = false;
|
|
2373
|
+
}
|
|
2374
|
+
}, []);
|
|
2375
|
+
return /* @__PURE__ */ jsx(
|
|
2376
|
+
"div",
|
|
2377
|
+
{
|
|
2378
|
+
ref: CalendarRef,
|
|
2379
|
+
className: `${namespace === "namespaceHr" ? style$3.namespaceHr : ""} ${style$3.datePicker} ${IsFocused ? style$3.focused : ""} ${pickerType === "dual" ? quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0 ? style$3.dualCalendarWithQuick : style$3.dualCalendar : ""} `,
|
|
2380
|
+
onClick: (e) => e.stopPropagation(),
|
|
2381
|
+
style: pickerType === "dual" && quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0 ? { width: "848px" } : {},
|
|
2382
|
+
children: /* @__PURE__ */ jsxs("div", { className: style$3.div, children: [
|
|
2383
|
+
pickerType === "dual" ? /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", justifyContent: "space-between" }, children: [
|
|
2384
|
+
/* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "80px" }, children: [
|
|
2385
|
+
/* @__PURE__ */ jsxs("div", { className: style$3.left, children: [
|
|
2386
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToPreviousYear, children: [
|
|
2387
|
+
/* @__PURE__ */ jsx(IconLeft, {}),
|
|
2388
|
+
/* @__PURE__ */ jsx(IconLeft, {})
|
|
2389
|
+
] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
2390
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
|
|
2391
|
+
] }),
|
|
2392
|
+
/* @__PURE__ */ jsx("div", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") })
|
|
2393
|
+
] }),
|
|
2394
|
+
/* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "80px" }, children: [
|
|
2395
|
+
/* @__PURE__ */ jsx("span", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.add(1, "month").format("MMMM") : CurrentMonth.add(1, "month").format("MMMM YYYY") }),
|
|
2396
|
+
/* @__PURE__ */ jsxs("div", { className: style$3.right, children: [
|
|
2397
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
2398
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToNextYear, children: [
|
|
2399
|
+
/* @__PURE__ */ jsx(IconRight, {}),
|
|
2400
|
+
/* @__PURE__ */ jsx(IconRight, {})
|
|
2401
|
+
] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
|
|
2402
|
+
] })
|
|
2403
|
+
] })
|
|
2404
|
+
] }) : /* @__PURE__ */ jsxs("div", { className: style$3.datePickerHeader, children: [
|
|
2405
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
2406
|
+
/* @__PURE__ */ jsxs("div", { className: style$3.left, children: [
|
|
2407
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToPreviousYear, children: [
|
|
2408
|
+
/* @__PURE__ */ jsx(IconLeft, {}),
|
|
2409
|
+
/* @__PURE__ */ jsx(IconLeft, {})
|
|
2410
|
+
] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
2411
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
|
|
2412
|
+
] }),
|
|
2413
|
+
/* @__PURE__ */ jsx("div", { className: style$3.currentDateHeader, style: monthStyle ?? {}, onClick: HandleChooseMonth, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") }),
|
|
2414
|
+
/* @__PURE__ */ jsxs("div", { className: style$3.right, children: [
|
|
2415
|
+
!customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style$3.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
|
|
2416
|
+
(!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style$3.doubleIcon, onClick: goToNextYear, children: [
|
|
2417
|
+
/* @__PURE__ */ jsx(IconRight, {}),
|
|
2418
|
+
/* @__PURE__ */ jsx(IconRight, {})
|
|
2419
|
+
] }) : /* @__PURE__ */ jsx("div", { className: style$3.doubleIcon })
|
|
2420
|
+
] })
|
|
2421
|
+
] }),
|
|
2422
|
+
pickerType === "single" && quickPick2 && Array.isArray(quickPick2) && quickPick2.length > 0 && /* @__PURE__ */ jsx("ul", { className: style$3.quickPick, children: getQuickPickers().slice(0, 3).map((item) => {
|
|
2423
|
+
return /* @__PURE__ */ jsx("li", { style: quickPickStyle ?? {}, onClick: () => handleQuickPick(item), children: item.name }, item.key);
|
|
2424
|
+
}) })
|
|
2425
|
+
] }),
|
|
2426
|
+
/* @__PURE__ */ jsxs("div", { className: style$3.calendarWrapper, children: [
|
|
2427
|
+
ShowMonths ? /* @__PURE__ */ jsx("ul", { className: style$3.monthsWrapper, children: months.map((month2) => /* @__PURE__ */ jsx("li", { className: `${style$3.month} ${PickedMonth === month2 ? style$3.pickedMonth : ""}`, onClick: () => setPickedMonth(month2), children: /* @__PURE__ */ jsx("div", { className: style$3.monthName, children: month2 }) })) }) : /* @__PURE__ */ jsxs("table", { children: [
|
|
2428
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day2) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day2 }, day2)) }) }),
|
|
2429
|
+
/* @__PURE__ */ jsxs("tbody", { children: [
|
|
2430
|
+
/* @__PURE__ */ jsx("tr", { className: style$3.spacerRow, children: /* @__PURE__ */ jsx("td", {}) }),
|
|
2431
|
+
currentMonthMatrix.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
|
|
2432
|
+
const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
|
|
2433
|
+
const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
|
|
2434
|
+
const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
|
|
2435
|
+
const selected2 = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
|
|
2436
|
+
const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
|
|
2437
|
+
const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
|
|
2438
|
+
let isInDisabledRange = false;
|
|
2439
|
+
if (disabledDatesRange?.length === 2) {
|
|
2440
|
+
const [start, end] = disabledDatesRange.map((d) => dayjs(d));
|
|
2441
|
+
isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
|
|
2442
|
+
}
|
|
2443
|
+
const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
|
|
2444
|
+
return /* @__PURE__ */ jsx(
|
|
2445
|
+
"td",
|
|
2446
|
+
{
|
|
2447
|
+
style: {
|
|
2448
|
+
...currentMonth ? {} : otherMonthStyle,
|
|
2449
|
+
...date.isSame(dayjs(), "day") ? todayStyle : {},
|
|
2450
|
+
...isInRange ? inRangeStyle : {},
|
|
2451
|
+
...isStartDate ? startDateStyle : {},
|
|
2452
|
+
...isEndDate ? endDateStyle : {},
|
|
2453
|
+
...selected2 ? selectedStyle : {}
|
|
2454
|
+
},
|
|
2455
|
+
className: `${style$3.day}
|
|
2456
|
+
${currentMonth ? "" : style$3.otherMonth}
|
|
2457
|
+
${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style$3.today : ""}
|
|
2458
|
+
${!currentMonth ? "" : isInRange ? style$3.inRange : ""}
|
|
2459
|
+
${!currentMonth ? "" : isStartDate ? style$3.startDate : ""}
|
|
2460
|
+
${!currentMonth ? "" : isEndDate ? style$3.endDate : ""}
|
|
2461
|
+
${!currentMonth && !isInRange && !isEndDate ? "" : selected2 ? style$3.selected : ""}
|
|
2462
|
+
${isDisabled ? style$3.disabled : ""}`,
|
|
2463
|
+
onClick: () => handleDayClick(date, currentMonth),
|
|
2464
|
+
children: date.date()
|
|
2465
|
+
},
|
|
2466
|
+
idx
|
|
2467
|
+
);
|
|
2468
|
+
}) }, index))
|
|
2469
|
+
] })
|
|
2470
|
+
] }),
|
|
2471
|
+
/* @__PURE__ */ jsx("div", { className: style$3.buttonWrapper, children: /* @__PURE__ */ jsx(MainButton, { label: "Current date", onClick: () => handleDayClick(dayjs(), true) }) }),
|
|
2472
|
+
pickerType === "dual" && /* @__PURE__ */ jsx("div", { className: style$3.border }),
|
|
2473
|
+
pickerType === "dual" && /* @__PURE__ */ jsxs("table", { children: [
|
|
2474
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day2) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day2 }, day2)) }) }),
|
|
2475
|
+
/* @__PURE__ */ jsx("tbody", { children: nextMonthMatrix?.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
|
|
2476
|
+
const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
|
|
2477
|
+
const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
|
|
2478
|
+
const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
|
|
2479
|
+
const selected2 = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
|
|
2480
|
+
const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
|
|
2481
|
+
const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
|
|
2482
|
+
let isInDisabledRange = false;
|
|
2483
|
+
if (disabledDatesRange?.length === 2) {
|
|
2484
|
+
const [start, end] = disabledDatesRange.map((d) => dayjs(d));
|
|
2485
|
+
isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
|
|
2486
|
+
}
|
|
2487
|
+
const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
|
|
2488
|
+
return /* @__PURE__ */ jsx(
|
|
2489
|
+
"td",
|
|
2490
|
+
{
|
|
2491
|
+
style: {
|
|
2492
|
+
...currentMonth ? {} : otherMonthStyle,
|
|
2493
|
+
...date.isSame(dayjs(), "day") ? todayStyle : {},
|
|
2494
|
+
...isInRange ? inRangeStyle : {},
|
|
2495
|
+
...isStartDate ? startDateStyle : {},
|
|
2496
|
+
...isEndDate ? endDateStyle : {},
|
|
2497
|
+
...selected2 ? selectedStyle : {}
|
|
2498
|
+
},
|
|
2499
|
+
className: `${style$3.day}
|
|
2500
|
+
${currentMonth ? "" : style$3.otherMonth}
|
|
2501
|
+
${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style$3.today : ""}
|
|
2502
|
+
${!currentMonth ? "" : isInRange ? style$3.inRange : ""}
|
|
2503
|
+
${!currentMonth ? "" : isStartDate ? style$3.startDate : ""}
|
|
2504
|
+
${!currentMonth ? "" : isEndDate ? style$3.endDate : ""}
|
|
2505
|
+
${!currentMonth && !isInRange && !isEndDate ? "" : selected2 ? style$3.selected : ""}
|
|
2506
|
+
${isDisabled ? style$3.disabled : ""}`,
|
|
2507
|
+
onClick: () => handleDayClick(date, currentMonth),
|
|
2508
|
+
children: date.date()
|
|
2509
|
+
},
|
|
2510
|
+
idx
|
|
2511
|
+
);
|
|
2512
|
+
}) }, index)) })
|
|
2513
|
+
] })
|
|
2514
|
+
] })
|
|
2515
|
+
] })
|
|
2516
|
+
}
|
|
2517
|
+
);
|
|
2518
|
+
};
|
|
2519
|
+
dayjs.extend(customParseFormat);
|
|
2520
|
+
const DatePicker = ({
|
|
2521
|
+
defaultValue,
|
|
2522
|
+
valueFormat = "DD-MM-YYYY",
|
|
2523
|
+
onChange,
|
|
2524
|
+
onBlur,
|
|
2525
|
+
onFocus,
|
|
2526
|
+
customYears,
|
|
2527
|
+
fixedDropdown = true,
|
|
2528
|
+
disabledDatesFrom,
|
|
2529
|
+
disabledDatesTill,
|
|
2530
|
+
disabledDatesRange,
|
|
2531
|
+
datepickerStyle,
|
|
2532
|
+
datepickerLabelStyle,
|
|
2533
|
+
requiredStyle,
|
|
2534
|
+
datepickerHelperTextStyle,
|
|
2535
|
+
selectedStyle,
|
|
2536
|
+
endDateStyle,
|
|
2537
|
+
startDateStyle,
|
|
2538
|
+
inRangeStyle,
|
|
2539
|
+
otherMonthStyle,
|
|
2540
|
+
todayStyle,
|
|
2541
|
+
weekDayStyle,
|
|
2542
|
+
quickPickStyle,
|
|
2543
|
+
monthStyle,
|
|
2544
|
+
quickPick: quickPick2,
|
|
2545
|
+
mode = "single",
|
|
2546
|
+
pickerType = "single",
|
|
2547
|
+
disabled: disabled2 = false,
|
|
2548
|
+
...rest
|
|
2549
|
+
}) => {
|
|
2550
|
+
const namespace = useNamespace();
|
|
2551
|
+
const [IsFocused, setIsFocused] = useState(false);
|
|
2552
|
+
const [Value, setValue] = useState("");
|
|
2553
|
+
const DefaultValue = useRef({ state: false, value: "" });
|
|
2554
|
+
const CalendarRef = useRef(null);
|
|
2555
|
+
const [CurrentMonth, setCurrentMonth] = useState(() => {
|
|
2556
|
+
const thisYear = dayjs().year().toString();
|
|
2557
|
+
if (customYears?.length) {
|
|
2558
|
+
return customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`);
|
|
2559
|
+
}
|
|
2560
|
+
return dayjs();
|
|
2561
|
+
});
|
|
2562
|
+
useEffect(() => {
|
|
2563
|
+
const thisYear = dayjs().year().toString();
|
|
2564
|
+
if (customYears?.length) {
|
|
2565
|
+
setCurrentMonth(customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`));
|
|
2566
|
+
}
|
|
2567
|
+
}, [customYears]);
|
|
2568
|
+
const [SelectedDate, setSelectedDate] = useState("");
|
|
2569
|
+
const [RangeSelection, setRangeSelection] = useState({
|
|
2570
|
+
start: null,
|
|
2571
|
+
end: null
|
|
2572
|
+
});
|
|
2573
|
+
const ComponentRef = useRef(null);
|
|
2574
|
+
const Change = (value, singleQuickPick, withDefault) => {
|
|
2575
|
+
let dateValue = "";
|
|
2576
|
+
let objValue = { start: "", end: "" };
|
|
2577
|
+
if (mode === "single" || typeof value === "string") {
|
|
2578
|
+
dateValue = value;
|
|
2579
|
+
setValue(dateValue);
|
|
2580
|
+
}
|
|
2581
|
+
if (mode !== "single" || typeof value !== "string") {
|
|
2582
|
+
dateValue = `${dayjs(value?.start ?? "").format(valueFormat)} / ${value?.end ? dayjs(value?.end).format(valueFormat) : ""}`;
|
|
2583
|
+
objValue.start = dayjs(value?.start ?? "").format(valueFormat);
|
|
2584
|
+
objValue.end = value?.end ? dayjs(value?.end).format(valueFormat) : "";
|
|
2585
|
+
setValue(dateValue);
|
|
2586
|
+
}
|
|
2587
|
+
if (value?.end) {
|
|
2588
|
+
setIsFocused(false);
|
|
2589
|
+
}
|
|
2590
|
+
if (onChange && typeof onChange === "function" && !withDefault) {
|
|
2591
|
+
onChange(objValue.start !== "" ? objValue : dateValue);
|
|
2592
|
+
DefaultValue.current.value = objValue.start !== "" ? objValue : dateValue;
|
|
2593
|
+
}
|
|
2594
|
+
};
|
|
2595
|
+
const Clear = (e) => {
|
|
2596
|
+
e.stopPropagation();
|
|
2597
|
+
setSelectedDate("");
|
|
2598
|
+
DefaultValue.current.value = "";
|
|
2599
|
+
setValue("");
|
|
2600
|
+
setRangeSelection({
|
|
2601
|
+
start: null,
|
|
2602
|
+
end: null
|
|
2603
|
+
});
|
|
2604
|
+
if (onChange && typeof onChange === "function") {
|
|
2605
|
+
onChange("");
|
|
2606
|
+
}
|
|
2607
|
+
};
|
|
2608
|
+
const ClickHandler = (event) => {
|
|
2609
|
+
if (!ComponentRef.current) return;
|
|
2610
|
+
if (event.composedPath().includes(ComponentRef.current)) return;
|
|
2611
|
+
setIsFocused(false);
|
|
2612
|
+
};
|
|
2613
|
+
const ScrollHandler = (event) => {
|
|
2614
|
+
if (!ComponentRef.current || !CalendarRef.current) return;
|
|
2615
|
+
if (event.composedPath().includes(ComponentRef.current) || event.composedPath().includes(CalendarRef.current)) return;
|
|
2616
|
+
setIsFocused(false);
|
|
2617
|
+
};
|
|
2618
|
+
const CalculatePos = () => {
|
|
2619
|
+
if (!ComponentRef.current || !CalendarRef.current) return;
|
|
2620
|
+
const componentEl = ComponentRef.current;
|
|
2621
|
+
const calendarEl = CalendarRef.current;
|
|
2622
|
+
if (!calendarEl || !componentEl) return;
|
|
2623
|
+
const componentRect = componentEl.getBoundingClientRect();
|
|
2624
|
+
const windowHeight = window.innerHeight;
|
|
2625
|
+
const windowWidth = window.innerWidth;
|
|
2626
|
+
calendarEl.style.position = "fixed";
|
|
2627
|
+
if (componentRect.bottom + calendarEl.offsetHeight > windowHeight) {
|
|
2628
|
+
calendarEl.style.top = `${window.scrollY + componentRect.top - calendarEl.offsetHeight - 8}px`;
|
|
2629
|
+
calendarEl.style.bottom = "unset";
|
|
2630
|
+
} else {
|
|
2631
|
+
calendarEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
|
|
2632
|
+
calendarEl.style.bottom = "unset";
|
|
2633
|
+
}
|
|
2634
|
+
if (componentRect.right + componentRect.width > windowWidth - 120) {
|
|
2635
|
+
calendarEl.style.left = `${window.scrollX + componentRect.left + componentRect.width - calendarEl.offsetWidth}px`;
|
|
2636
|
+
} else {
|
|
2637
|
+
calendarEl.style.left = `${window.scrollX + componentRect.left}px`;
|
|
2638
|
+
}
|
|
2639
|
+
};
|
|
2640
|
+
useEffect(() => {
|
|
2641
|
+
if (defaultValue && DefaultValue.current.value === "") {
|
|
2642
|
+
let value = Array.isArray(defaultValue) ? {
|
|
2643
|
+
start: dayjs(defaultValue[0], valueFormat),
|
|
2644
|
+
end: defaultValue.length > 1 ? dayjs(defaultValue[1], valueFormat) : ""
|
|
2645
|
+
} : dayjs(defaultValue, valueFormat).format(valueFormat);
|
|
2646
|
+
DefaultValue.current.value = defaultValue;
|
|
2647
|
+
DefaultValue.current.state = true;
|
|
2648
|
+
if (value) {
|
|
2649
|
+
Change(value, false, true);
|
|
2650
|
+
}
|
|
2651
|
+
}
|
|
2652
|
+
}, []);
|
|
2653
|
+
useEffect(() => {
|
|
2654
|
+
if (IsFocused) {
|
|
2655
|
+
CalculatePos();
|
|
2656
|
+
}
|
|
2657
|
+
}, [CalendarRef, IsFocused]);
|
|
2658
|
+
useEffect(() => {
|
|
2659
|
+
document.addEventListener("click", ClickHandler);
|
|
2660
|
+
document.addEventListener("wheel", ScrollHandler);
|
|
2661
|
+
return () => {
|
|
2662
|
+
document.removeEventListener("click", ClickHandler);
|
|
2663
|
+
document.removeEventListener("wheel", ScrollHandler);
|
|
2664
|
+
};
|
|
2665
|
+
}, []);
|
|
2666
|
+
return /* @__PURE__ */ jsxs("div", { className: `${namespace === "namespaceHr" ? style$4.namespaceHr : ""} ${style$4.datepickerContainer}`, children: [
|
|
2667
|
+
/* @__PURE__ */ jsx("div", { ref: ComponentRef, className: style$4.datepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), children: /* @__PURE__ */ jsx(
|
|
2668
|
+
FormInput,
|
|
2669
|
+
{
|
|
2670
|
+
...rest,
|
|
2671
|
+
customFocus: IsFocused,
|
|
2672
|
+
withActive: false,
|
|
2673
|
+
value: Value,
|
|
2674
|
+
toggleFocus: true,
|
|
2675
|
+
formInputStyle: { cursor: "pointer" },
|
|
2676
|
+
leftSlot: /* @__PURE__ */ jsx("div", { className: style$4.datepickerLeftIcon, children: /* @__PURE__ */ jsx(IconCalendar, {}) }),
|
|
2677
|
+
rightSlot: /* @__PURE__ */ jsx("div", { className: `${style$4.datepickerRightIcon}`, onClick: Clear, children: Value && /* @__PURE__ */ jsx(IconCloseCircle, {}) }),
|
|
2678
|
+
readOnly: true
|
|
2679
|
+
}
|
|
2680
|
+
) }),
|
|
2681
|
+
IsFocused && /* @__PURE__ */ jsx(
|
|
2682
|
+
Calendar,
|
|
2683
|
+
{
|
|
2684
|
+
namespace,
|
|
2685
|
+
defaultValue: DefaultValue.current,
|
|
2686
|
+
CalendarRef,
|
|
2687
|
+
disabledDatesFrom,
|
|
2688
|
+
disabledDatesTill,
|
|
2689
|
+
disabledDatesRange,
|
|
2690
|
+
valueFormat,
|
|
2691
|
+
onChange: (value) => Change(value, false, false),
|
|
2692
|
+
customYears,
|
|
2693
|
+
CurrentMonth,
|
|
2694
|
+
setCurrentMonth,
|
|
2695
|
+
SelectedDate,
|
|
2696
|
+
setSelectedDate,
|
|
2697
|
+
IsFocused,
|
|
2698
|
+
setIsFocused,
|
|
2699
|
+
quickPick: quickPick2,
|
|
2700
|
+
mode,
|
|
2701
|
+
RangeSelection,
|
|
2702
|
+
setRangeSelection,
|
|
2703
|
+
pickerType,
|
|
2704
|
+
selectedStyle,
|
|
2705
|
+
endDateStyle,
|
|
2706
|
+
startDateStyle,
|
|
2707
|
+
inRangeStyle,
|
|
2708
|
+
otherMonthStyle,
|
|
2709
|
+
todayStyle,
|
|
2710
|
+
weekDayStyle,
|
|
2711
|
+
quickPickStyle,
|
|
2712
|
+
monthStyle
|
|
2713
|
+
}
|
|
2714
|
+
)
|
|
2715
|
+
] });
|
|
2716
|
+
};
|
|
2717
|
+
const skeleton = "Skeleton-module__skeleton";
|
|
2718
|
+
const shimmer = "Skeleton-module__shimmer";
|
|
2719
|
+
const text = "Skeleton-module__text";
|
|
2720
|
+
const avatar = "Skeleton-module__avatar";
|
|
2721
|
+
const dark = "Skeleton-module__dark";
|
|
2722
|
+
const style$2 = {
|
|
2723
|
+
skeleton,
|
|
2724
|
+
shimmer,
|
|
2725
|
+
text,
|
|
2726
|
+
avatar,
|
|
2727
|
+
dark
|
|
2728
|
+
};
|
|
2729
|
+
const Skeleton = ({ type = "text", customStyle, children }) => {
|
|
2730
|
+
return /* @__PURE__ */ jsx("div", { style: customStyle ?? {}, className: ` ${style$2.skeleton} ${style$2[type] || ""}`, children });
|
|
2731
|
+
};
|
|
2732
|
+
const actionDropdownContainer = "ActionDropdown-module__actionDropdownContainer";
|
|
2733
|
+
const collapsed = "ActionDropdown-module__collapsed";
|
|
2734
|
+
const actionDropdownIcon = "ActionDropdown-module__actionDropdownIcon";
|
|
2735
|
+
const actionDropdownContent = "ActionDropdown-module__actionDropdownContent";
|
|
2736
|
+
const actionDropdownTitle = "ActionDropdown-module__actionDropdownTitle";
|
|
2737
|
+
const actionDropdownList = "ActionDropdown-module__actionDropdownList";
|
|
2738
|
+
const actionDropdownItem = "ActionDropdown-module__actionDropdownItem";
|
|
2739
|
+
const selected = "ActionDropdown-module__selected";
|
|
2740
|
+
const style$1 = {
|
|
2741
|
+
actionDropdownContainer,
|
|
2742
|
+
collapsed,
|
|
2743
|
+
actionDropdownIcon,
|
|
2744
|
+
actionDropdownContent,
|
|
2745
|
+
actionDropdownTitle,
|
|
2746
|
+
actionDropdownList,
|
|
2747
|
+
actionDropdownItem,
|
|
2748
|
+
selected
|
|
2749
|
+
};
|
|
2750
|
+
const ActionDropdown = ({ title, data, onSelect }) => {
|
|
2751
|
+
const [Collapsed, setCollapsed] = useState(false);
|
|
2752
|
+
const DropdownRef = useRef(null);
|
|
2753
|
+
const ListRef = useRef(null);
|
|
2754
|
+
const [Selected, setSelected] = useState(null);
|
|
2755
|
+
const HandleSelect = (item) => {
|
|
2756
|
+
setSelected(item);
|
|
2757
|
+
onSelect?.(item);
|
|
2758
|
+
setCollapsed(false);
|
|
2759
|
+
};
|
|
2760
|
+
const CalculatePos = () => {
|
|
2761
|
+
const componentEl = DropdownRef.current;
|
|
2762
|
+
const dropdownEl = ListRef.current;
|
|
2763
|
+
if (!dropdownEl || !componentEl) return;
|
|
2764
|
+
const componentRect = componentEl.getBoundingClientRect();
|
|
2765
|
+
const windowHeight = window.innerHeight;
|
|
2766
|
+
dropdownEl.style.position = "fixed";
|
|
2767
|
+
dropdownEl.style.width = componentRect.width + "px";
|
|
2768
|
+
dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
|
|
2769
|
+
if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
|
|
2770
|
+
dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight - 4}px`;
|
|
2771
|
+
dropdownEl.style.bottom = "unset";
|
|
2772
|
+
} else {
|
|
2773
|
+
dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
|
|
2774
|
+
dropdownEl.style.bottom = "unset";
|
|
2775
|
+
}
|
|
2776
|
+
};
|
|
2777
|
+
useEffect(() => {
|
|
2778
|
+
CalculatePos();
|
|
2779
|
+
}, [DropdownRef, Collapsed]);
|
|
2780
|
+
useEffect(() => {
|
|
2781
|
+
const ClickHandler = (event) => {
|
|
2782
|
+
if (!DropdownRef.current) return;
|
|
2783
|
+
if (event.composedPath().includes(DropdownRef.current)) return;
|
|
2784
|
+
setCollapsed(false);
|
|
2785
|
+
};
|
|
2786
|
+
const ScrollHandler = (event) => {
|
|
2787
|
+
if (!DropdownRef.current || !ListRef.current) return;
|
|
2788
|
+
if (ListRef.current.contains(event.target)) return;
|
|
2789
|
+
setCollapsed(false);
|
|
2790
|
+
};
|
|
2791
|
+
document.addEventListener("click", ClickHandler);
|
|
2792
|
+
document.addEventListener("wheel", ScrollHandler);
|
|
2793
|
+
return () => {
|
|
2794
|
+
document.removeEventListener("click", ClickHandler);
|
|
2795
|
+
document.removeEventListener("wheel", ScrollHandler);
|
|
2796
|
+
};
|
|
2797
|
+
}, []);
|
|
2798
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style$1.actionDropdownContainer} ${Collapsed ? style$1.collapsed : ""}`, children: [
|
|
2799
|
+
/* @__PURE__ */ jsxs("div", { ref: DropdownRef, className: style$1.actionDropdownContent, onClick: () => setCollapsed((state) => !state), children: [
|
|
2800
|
+
/* @__PURE__ */ jsx("p", { title, className: style$1.actionDropdownTitle, children: Selected?.label || title }),
|
|
2801
|
+
/* @__PURE__ */ jsx("div", { className: style$1.actionDropdownIcon, children: /* @__PURE__ */ jsx(IconArrowUp, { width: "10", height: "6", color: "#131314" }) })
|
|
2802
|
+
] }),
|
|
2803
|
+
Collapsed && /* @__PURE__ */ jsx("ul", { ref: ListRef, onClick: (e) => e.stopPropagation(), className: style$1.actionDropdownList, children: data.map((item) => /* @__PURE__ */ jsx(
|
|
2804
|
+
"li",
|
|
2805
|
+
{
|
|
2806
|
+
onClick: (e) => {
|
|
2807
|
+
e.stopPropagation();
|
|
2808
|
+
HandleSelect(item);
|
|
2809
|
+
},
|
|
2810
|
+
className: `${style$1.actionDropdownItem} ${Selected?.id === item.id ? style$1.selected : ""}`,
|
|
2811
|
+
children: item.label
|
|
2812
|
+
},
|
|
2813
|
+
item.id
|
|
2814
|
+
)) }, data.length)
|
|
2815
|
+
] });
|
|
2816
|
+
};
|
|
2817
|
+
const inlineLoadingWrapper = "InlineLoading-module__inlineLoadingWrapper";
|
|
2818
|
+
const loading = "InlineLoading-module__loading";
|
|
2819
|
+
const style = {
|
|
2820
|
+
inlineLoadingWrapper,
|
|
2821
|
+
loading
|
|
2822
|
+
};
|
|
2823
|
+
const IconErrorDash = ({ size = "16", color = "#DA1A1C" }) => {
|
|
2824
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
|
|
2825
|
+
"path",
|
|
2826
|
+
{
|
|
2827
|
+
fillRule: "evenodd",
|
|
2828
|
+
clipRule: "evenodd",
|
|
2829
|
+
d: "M8 1C4.1 1 1 4.1 1 8C1 11.9 4.1 15 8 15C11.9 15 15 11.9 15 8C15 4.1 11.9 1 8 1ZM10.7 11.5L4.5 5.3L5.3 4.5L11.5 10.7L10.7 11.5Z",
|
|
2830
|
+
fill: color
|
|
2831
|
+
}
|
|
2832
|
+
) });
|
|
2833
|
+
};
|
|
2834
|
+
const IconLoading = ({ color1 = "#BCC1C2", color2 = "#0266EF", size = "16" }) => {
|
|
2835
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [
|
|
2836
|
+
/* @__PURE__ */ jsx(
|
|
2837
|
+
"path",
|
|
2838
|
+
{
|
|
2839
|
+
d: "M16 7.99998C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 7.99998C0 3.5817 3.58172 -2.28882e-05 8 -2.28882e-05C12.4183 -2.28882e-05 16 3.5817 16 7.99998ZM2.96 7.99998C2.96 10.7835 5.21649 13.04 8 13.04C10.7835 13.04 13.04 10.7835 13.04 7.99998C13.04 5.21646 10.7835 2.95998 8 2.95998C5.21649 2.95998 2.96 5.21646 2.96 7.99998Z",
|
|
2840
|
+
fill: color1
|
|
2841
|
+
}
|
|
2842
|
+
),
|
|
2843
|
+
/* @__PURE__ */ jsx(
|
|
2844
|
+
"path",
|
|
2845
|
+
{
|
|
2846
|
+
d: "M8 -2.28882e-05C9.58225 -2.28693e-05 11.129 0.469169 12.4446 1.34822C13.7602 2.22727 14.7855 3.4767 15.391 4.93851C15.9965 6.40032 16.155 8.00885 15.8463 9.5607C15.5376 11.1125 14.7757 12.538 13.6569 13.6568C12.538 14.7757 11.1126 15.5376 9.56072 15.8463C8.00887 16.1549 6.40034 15.9965 4.93853 15.391C3.47672 14.7855 2.22729 13.7601 1.34824 12.4445C0.469192 11.1289 -3.77363e-08 9.58223 0 7.99998L2.96 7.99998C2.96 8.99679 3.25559 9.97123 3.80939 10.8001C4.3632 11.6289 5.15034 12.2749 6.07128 12.6563C6.99222 13.0378 8.00559 13.1376 8.98326 12.9431C9.96092 12.7487 10.859 12.2687 11.5638 11.5638C12.2687 10.8589 12.7487 9.9609 12.9432 8.98323C13.1376 8.00557 13.0378 6.99219 12.6564 6.07125C12.2749 5.15031 11.6289 4.36317 10.8001 3.80937C9.97125 3.25557 8.99682 2.95998 8 2.95998L8 -2.28882e-05Z",
|
|
2847
|
+
fill: color2 ?? "#0266EF"
|
|
2848
|
+
}
|
|
2849
|
+
)
|
|
2850
|
+
] });
|
|
2851
|
+
};
|
|
2852
|
+
const IconSuccess = ({ size = "16", color = "#138761" }) => {
|
|
2853
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
|
|
2854
|
+
"path",
|
|
2855
|
+
{
|
|
2856
|
+
fillRule: "evenodd",
|
|
2857
|
+
clipRule: "evenodd",
|
|
2858
|
+
d: "M8 1C4.1 1 1 4.1 1 8C1 11.9 4.1 15 8 15C11.9 15 15 11.9 15 8C15 4.1 11.9 1 8 1ZM7 11L4.3 8.3L5.2 7.5L7 9.3L11 5.4L11.9 6.2L7 11Z",
|
|
2859
|
+
fill: color
|
|
2860
|
+
}
|
|
2861
|
+
) });
|
|
2862
|
+
};
|
|
2863
|
+
const InlineLoading = ({ loading: loading2, success: success2, error: error2, msg }) => {
|
|
2864
|
+
return /* @__PURE__ */ jsxs("div", { className: `${style.inlineLoadingWrapper}`, children: [
|
|
2865
|
+
loading2?.state && /* @__PURE__ */ jsxs("div", { className: style.loading, children: [
|
|
2866
|
+
/* @__PURE__ */ jsx(IconLoading, { color1: loading2?.color1 ?? "#BCC1C2", color2: loading2?.color2, size: loading2?.size }),
|
|
2867
|
+
/* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
|
|
2868
|
+
] }),
|
|
2869
|
+
!loading2?.state && success2?.state && /* @__PURE__ */ jsxs("div", { children: [
|
|
2870
|
+
/* @__PURE__ */ jsx(IconSuccess, { size: success2?.size, color: success2?.color }),
|
|
2871
|
+
/* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
|
|
2872
|
+
] }),
|
|
2873
|
+
!loading2?.state && error2?.state && /* @__PURE__ */ jsxs("div", { children: [
|
|
2874
|
+
/* @__PURE__ */ jsx(IconErrorDash, { size: error2?.size, color: error2?.color }),
|
|
2875
|
+
/* @__PURE__ */ jsx("span", { style: msg?.style ?? {}, children: msg?.text ?? "" })
|
|
2876
|
+
] })
|
|
2877
|
+
] });
|
|
2878
|
+
};
|
|
17
2879
|
export {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
2880
|
+
ActionDropdown,
|
|
2881
|
+
Checkbox,
|
|
2882
|
+
DatePicker,
|
|
2883
|
+
Dropdown,
|
|
2884
|
+
FormInput,
|
|
2885
|
+
InlineLoading,
|
|
2886
|
+
MainButton,
|
|
2887
|
+
Popup,
|
|
2888
|
+
Radio,
|
|
2889
|
+
Skeleton,
|
|
2890
|
+
Textarea,
|
|
2891
|
+
TimePicker,
|
|
2892
|
+
ToastProvider,
|
|
2893
|
+
Toggle,
|
|
2894
|
+
Tooltip,
|
|
2895
|
+
createNotificationToast
|
|
34
2896
|
};
|