@aziziaziz/react-components 1.0.0 → 1.0.2
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/Button-GX4BPUGQ.css +98 -0
- package/dist/DatePicker-ISUX6NNC.css +44 -0
- package/dist/Drawer-5ZWJQFIQ.css +53 -0
- package/dist/Icon-DCSTRBMX.css +17 -0
- package/dist/Input-6MS2FZGM.css +33 -0
- package/dist/SkeletonLoading-UIP5RBIR.css +32 -0
- package/dist/WebDatePicker-H2XZEEJG.css +154 -0
- package/dist/index-2F2GVZE5.css +101 -0
- package/dist/index.d.mts +323 -3
- package/dist/index.d.ts +323 -3
- package/dist/index.js +546 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +552 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -3
- package/src/components/button/Button.css +98 -0
- package/src/components/datePicker/DatePicker.css +44 -0
- package/src/components/datePicker/components/webDatePicker/WebDatePicker.css +154 -0
- package/src/components/drawer/Drawer.css +53 -0
- package/src/components/icon/Icon.css +17 -0
- package/src/components/input/Input.css +33 -0
- package/src/components/skeletonLoading/SkeletonLoading.css +32 -0
- package/src/index.css +101 -0
- package/dist/index.css +0 -69
- package/dist/index.css.map +0 -1
package/dist/index.js
CHANGED
|
@@ -19,14 +19,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
19
19
|
// src/index.ts
|
|
20
20
|
var index_exports = {};
|
|
21
21
|
__export(index_exports, {
|
|
22
|
-
|
|
22
|
+
Button: () => Button_default,
|
|
23
|
+
DatePicker: () => DatePicker_default,
|
|
24
|
+
Input: () => Input_default,
|
|
25
|
+
SkeletonLoading: () => SkeletonLoading_default,
|
|
26
|
+
usePostMessage: () => usePostMessage,
|
|
27
|
+
useSnackbar: () => useSnackbar
|
|
23
28
|
});
|
|
24
29
|
module.exports = __toCommonJS(index_exports);
|
|
30
|
+
var import_index = require("./index-2F2GVZE5.css");
|
|
25
31
|
|
|
26
32
|
// src/components/input/Input.tsx
|
|
27
33
|
var import_react_hook_form = require("react-hook-form");
|
|
34
|
+
var import_Input = require("./Input-6MS2FZGM.css");
|
|
28
35
|
|
|
29
36
|
// src/components/skeletonLoading/SkeletonLoading.tsx
|
|
37
|
+
var import_SkeletonLoading = require("./SkeletonLoading-UIP5RBIR.css");
|
|
30
38
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
39
|
var SkeletonLoading = ({ radius = 10 }) => {
|
|
32
40
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -78,8 +86,544 @@ var Input = ({
|
|
|
78
86
|
] });
|
|
79
87
|
};
|
|
80
88
|
var Input_default = Input;
|
|
89
|
+
|
|
90
|
+
// src/components/button/Button.tsx
|
|
91
|
+
var import_react = require("react");
|
|
92
|
+
var import_Button = require("./Button-GX4BPUGQ.css");
|
|
93
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
94
|
+
var Button = ({
|
|
95
|
+
children,
|
|
96
|
+
onClick,
|
|
97
|
+
className,
|
|
98
|
+
type = "submit",
|
|
99
|
+
disabled = false,
|
|
100
|
+
loading = false,
|
|
101
|
+
size = "default",
|
|
102
|
+
removeMinWidth = false
|
|
103
|
+
}) => {
|
|
104
|
+
const buttonClass = (0, import_react.useMemo)(() => {
|
|
105
|
+
if (disabled || loading) return "disabledBtn";
|
|
106
|
+
switch (type) {
|
|
107
|
+
case "submit":
|
|
108
|
+
return "submitBtn";
|
|
109
|
+
case "danger":
|
|
110
|
+
return "dangerBtn";
|
|
111
|
+
case "warning":
|
|
112
|
+
return "warningBtn";
|
|
113
|
+
}
|
|
114
|
+
}, [type, disabled, loading]);
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
116
|
+
"button",
|
|
117
|
+
{
|
|
118
|
+
className: `mainBtn ${className} ${buttonClass} ${`${size}__`} ${removeMinWidth && "noMinWidth__"}`,
|
|
119
|
+
onClick: () => {
|
|
120
|
+
if (!disabled) onClick();
|
|
121
|
+
},
|
|
122
|
+
disabled: disabled || loading,
|
|
123
|
+
children: [
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: loading ? "hideContent" : "", children }),
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `loadingCircle ${loading && "show__"}` })
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
};
|
|
130
|
+
var Button_default = Button;
|
|
131
|
+
|
|
132
|
+
// src/components/datePicker/DatePicker.tsx
|
|
133
|
+
var import_react4 = require("react");
|
|
134
|
+
var import_DatePicker = require("./DatePicker-ISUX6NNC.css");
|
|
135
|
+
|
|
136
|
+
// src/components/icon/Icon.tsx
|
|
137
|
+
var import_Icon = require("./Icon-DCSTRBMX.css");
|
|
138
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
139
|
+
var Icon = ({ src, className, flat = true }) => {
|
|
140
|
+
const classNames = ["icon", className, flat ? "flat__" : ""].join(" ");
|
|
141
|
+
return flat ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { className: classNames, src: src && src.toString() }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
142
|
+
"i",
|
|
143
|
+
{
|
|
144
|
+
className: classNames,
|
|
145
|
+
style: {
|
|
146
|
+
maskImage: `url("${src}"`,
|
|
147
|
+
WebkitMaskImage: `url("${src}")`
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
};
|
|
152
|
+
var Icon_default = Icon;
|
|
153
|
+
|
|
154
|
+
// src/assets/dropdown.svg
|
|
155
|
+
var dropdown_default = 'data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">%0A%0D<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->%0A<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23000000">%0A%0D<g id="SVGRepo_bgCarrier" stroke-width="0"/>%0A%0D<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>%0A%0D<g id="SVGRepo_iconCarrier"> <path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z" fill="%23000000"/> </g>%0A%0D</svg>';
|
|
156
|
+
|
|
157
|
+
// src/components/datePicker/components/webDatePicker/WebDatePicker.tsx
|
|
158
|
+
var import_react2 = require("react");
|
|
159
|
+
var import_WebDatePicker = require("./WebDatePicker-H2XZEEJG.css");
|
|
160
|
+
var import_date_fns = require("date-fns");
|
|
161
|
+
var import_react_hook_form2 = require("react-hook-form");
|
|
162
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
163
|
+
var daysShortName = ["S", "M", "T", "W", "T", "F", "S"];
|
|
164
|
+
var monthsShortName = [
|
|
165
|
+
"Jan",
|
|
166
|
+
"Feb",
|
|
167
|
+
"Mar",
|
|
168
|
+
"Apr",
|
|
169
|
+
"May",
|
|
170
|
+
"Jun",
|
|
171
|
+
"Jul",
|
|
172
|
+
"Aug",
|
|
173
|
+
"Sep",
|
|
174
|
+
"Oct",
|
|
175
|
+
"Nov",
|
|
176
|
+
"Dec"
|
|
177
|
+
];
|
|
178
|
+
var WebDatePicker = ({
|
|
179
|
+
id,
|
|
180
|
+
show,
|
|
181
|
+
updateShow
|
|
182
|
+
}) => {
|
|
183
|
+
const [currentMonth, setCurrentMonth] = (0, import_react2.useState)(/* @__PURE__ */ new Date());
|
|
184
|
+
const [selectionMode, setSelectionMode] = (0, import_react2.useState)(
|
|
185
|
+
"day"
|
|
186
|
+
);
|
|
187
|
+
const [allYears, setAllYears] = (0, import_react2.useState)([]);
|
|
188
|
+
const {
|
|
189
|
+
field: { onChange, value }
|
|
190
|
+
} = (0, import_react_hook_form2.useController)({ name: id });
|
|
191
|
+
(0, import_react2.useEffect)(() => {
|
|
192
|
+
if (show && value) {
|
|
193
|
+
setCurrentMonth(new Date(value));
|
|
194
|
+
}
|
|
195
|
+
if (show) {
|
|
196
|
+
setSelectionMode("day");
|
|
197
|
+
}
|
|
198
|
+
}, [show]);
|
|
199
|
+
const onAdd = () => {
|
|
200
|
+
if (selectionMode == "day") {
|
|
201
|
+
setCurrentMonth((0, import_date_fns.addMonths)(currentMonth, 1));
|
|
202
|
+
} else if (selectionMode == "month") {
|
|
203
|
+
setCurrentMonth((0, import_date_fns.addYears)(currentMonth, 1));
|
|
204
|
+
} else if (selectionMode == "year") {
|
|
205
|
+
setCurrentMonth((0, import_date_fns.addYears)(currentMonth, 10));
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
const onMinus = () => {
|
|
209
|
+
if (selectionMode == "day") {
|
|
210
|
+
setCurrentMonth((0, import_date_fns.addMonths)(currentMonth, -1));
|
|
211
|
+
} else if (selectionMode == "month") {
|
|
212
|
+
setCurrentMonth((0, import_date_fns.addYears)(currentMonth, -1));
|
|
213
|
+
} else if (selectionMode == "year") {
|
|
214
|
+
setCurrentMonth((0, import_date_fns.addYears)(currentMonth, -10));
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
const switchMode = () => {
|
|
218
|
+
if (selectionMode == "day") {
|
|
219
|
+
setSelectionMode("month");
|
|
220
|
+
} else if (selectionMode == "month") {
|
|
221
|
+
setSelectionMode("year");
|
|
222
|
+
}
|
|
223
|
+
};
|
|
224
|
+
const allDays = (0, import_react2.useMemo)(() => {
|
|
225
|
+
const totalDays = (0, import_date_fns.getDaysInMonth)(currentMonth);
|
|
226
|
+
const firstDay = (0, import_date_fns.startOfMonth)(currentMonth).getDay() || 7;
|
|
227
|
+
const previousMonth = (0, import_date_fns.addMonths)(currentMonth, -1);
|
|
228
|
+
const previousMonthTotalDays = (0, import_date_fns.getDaysInMonth)(previousMonth);
|
|
229
|
+
const nextMonth = (0, import_date_fns.addMonths)(currentMonth, 1);
|
|
230
|
+
const prevDays = new Array(firstDay).fill("").map((_, index) => {
|
|
231
|
+
const date = previousMonthTotalDays - index;
|
|
232
|
+
const thisDate = new Date(
|
|
233
|
+
previousMonth.getFullYear(),
|
|
234
|
+
previousMonth.getMonth(),
|
|
235
|
+
date
|
|
236
|
+
);
|
|
237
|
+
let isSelected = false;
|
|
238
|
+
if (value) {
|
|
239
|
+
const selectedDate = new Date(value);
|
|
240
|
+
isSelected = (0, import_date_fns.isSameDay)(selectedDate, thisDate);
|
|
241
|
+
}
|
|
242
|
+
return {
|
|
243
|
+
date,
|
|
244
|
+
month: previousMonth.getMonth(),
|
|
245
|
+
isToday: (0, import_date_fns.isToday)(thisDate),
|
|
246
|
+
isSelected,
|
|
247
|
+
fullDate: thisDate
|
|
248
|
+
};
|
|
249
|
+
}).sort((a, b) => a.date - b.date);
|
|
250
|
+
const allDays2 = new Array(totalDays).fill("").map((_, index) => {
|
|
251
|
+
const date = index + 1;
|
|
252
|
+
const thisDate = new Date(
|
|
253
|
+
currentMonth.getFullYear(),
|
|
254
|
+
currentMonth.getMonth(),
|
|
255
|
+
date
|
|
256
|
+
);
|
|
257
|
+
let isSelected = false;
|
|
258
|
+
if (value) {
|
|
259
|
+
const selectedDate = new Date(value);
|
|
260
|
+
isSelected = (0, import_date_fns.isSameDay)(selectedDate, thisDate);
|
|
261
|
+
}
|
|
262
|
+
return {
|
|
263
|
+
date,
|
|
264
|
+
month: currentMonth.getMonth(),
|
|
265
|
+
isToday: (0, import_date_fns.isToday)(thisDate),
|
|
266
|
+
isSelected,
|
|
267
|
+
fullDate: thisDate
|
|
268
|
+
};
|
|
269
|
+
});
|
|
270
|
+
const nextDays = new Array(
|
|
271
|
+
42 - prevDays.length - allDays2.length
|
|
272
|
+
).fill("").map((_, index) => {
|
|
273
|
+
const date = index + 1;
|
|
274
|
+
const thisDate = new Date(
|
|
275
|
+
nextMonth.getFullYear(),
|
|
276
|
+
nextMonth.getMonth(),
|
|
277
|
+
date
|
|
278
|
+
);
|
|
279
|
+
let isSelected = false;
|
|
280
|
+
if (value) {
|
|
281
|
+
const selectedDate = new Date(value);
|
|
282
|
+
isSelected = (0, import_date_fns.isSameDay)(selectedDate, thisDate);
|
|
283
|
+
}
|
|
284
|
+
return {
|
|
285
|
+
date,
|
|
286
|
+
month: nextMonth.getMonth(),
|
|
287
|
+
isToday: (0, import_date_fns.isToday)(thisDate),
|
|
288
|
+
isSelected,
|
|
289
|
+
fullDate: thisDate
|
|
290
|
+
};
|
|
291
|
+
});
|
|
292
|
+
return [...prevDays, ...allDays2, ...nextDays];
|
|
293
|
+
}, [currentMonth, value]);
|
|
294
|
+
const pickerTopLabel = (0, import_react2.useMemo)(() => {
|
|
295
|
+
if (selectionMode == "day") {
|
|
296
|
+
return (0, import_date_fns.format)(currentMonth, "MMM, yyyy");
|
|
297
|
+
} else if (selectionMode == "month") {
|
|
298
|
+
return (0, import_date_fns.format)(currentMonth, "yyyy");
|
|
299
|
+
} else if (selectionMode == "year") {
|
|
300
|
+
const currentYear = currentMonth.getFullYear();
|
|
301
|
+
const startYear = currentYear - currentYear % 10 - 1;
|
|
302
|
+
const endYear = startYear + 10 + 2;
|
|
303
|
+
setAllYears(
|
|
304
|
+
new Array(endYear - startYear).fill("").map((_, ind) => startYear + ind)
|
|
305
|
+
);
|
|
306
|
+
return (0, import_date_fns.format)(currentMonth, `${startYear + 1} - ${endYear - 2}`);
|
|
307
|
+
}
|
|
308
|
+
}, [currentMonth, selectionMode]);
|
|
309
|
+
const datesContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dateMainContainer", children: [
|
|
310
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "daysContainer", children: daysShortName.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dateItem", children: day }, `${day}_${index}`)) }),
|
|
311
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dateContainer", children: allDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
312
|
+
"div",
|
|
313
|
+
{
|
|
314
|
+
className: `dateItem ${day.month != currentMonth.getMonth() && "nextPreviousDate__"} ${day.isToday && "isToday__"} ${day.isSelected && "isSelected__"}`,
|
|
315
|
+
onClick: () => {
|
|
316
|
+
onChange(day.fullDate);
|
|
317
|
+
updateShow(false);
|
|
318
|
+
},
|
|
319
|
+
children: day.date
|
|
320
|
+
}
|
|
321
|
+
)) })
|
|
322
|
+
] });
|
|
323
|
+
const monthsContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "monthContainer", children: monthsShortName.map((mth, mthInd) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
324
|
+
"div",
|
|
325
|
+
{
|
|
326
|
+
className: `monthItem ${mth == monthsShortName[(/* @__PURE__ */ new Date()).getMonth()] && (/* @__PURE__ */ new Date()).getFullYear() == currentMonth.getFullYear() && "isToday__"} ${value && mth == monthsShortName[new Date(value).getMonth()] && currentMonth.getFullYear() == new Date(value).getFullYear() && "isSelected__"}`,
|
|
327
|
+
onClick: () => {
|
|
328
|
+
setCurrentMonth((0, import_date_fns.setMonth)(currentMonth, mthInd));
|
|
329
|
+
setTimeout(() => {
|
|
330
|
+
setSelectionMode("day");
|
|
331
|
+
}, 10);
|
|
332
|
+
},
|
|
333
|
+
children: mth
|
|
334
|
+
}
|
|
335
|
+
)) });
|
|
336
|
+
const yearContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "monthContainer", children: allYears.map((yr, yrInd) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
337
|
+
"div",
|
|
338
|
+
{
|
|
339
|
+
className: `monthItem ${(/* @__PURE__ */ new Date()).getFullYear() == yr && "isToday__"} ${value && yr == new Date(value).getFullYear() && "isSelected__"} ${(yrInd == 0 || yrInd == allYears.length - 1) && "nextPreviousDate__"}`,
|
|
340
|
+
onClick: () => {
|
|
341
|
+
setCurrentMonth((0, import_date_fns.setYear)(currentMonth, yr));
|
|
342
|
+
setTimeout(() => {
|
|
343
|
+
setSelectionMode("month");
|
|
344
|
+
}, 10);
|
|
345
|
+
},
|
|
346
|
+
children: yr
|
|
347
|
+
}
|
|
348
|
+
)) });
|
|
349
|
+
const pickerContent = (0, import_react2.useMemo)(() => {
|
|
350
|
+
if (selectionMode == "day") {
|
|
351
|
+
return datesContent;
|
|
352
|
+
} else if (selectionMode == "month") {
|
|
353
|
+
return monthsContent;
|
|
354
|
+
} else if (selectionMode == "year") {
|
|
355
|
+
return yearContent;
|
|
356
|
+
}
|
|
357
|
+
}, [selectionMode, allDays, currentMonth, allYears]);
|
|
358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `webDatePickerMainContainer ${show ? "show__" : "hide__"}`, children: [
|
|
359
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "topContainer", children: [
|
|
360
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
361
|
+
"div",
|
|
362
|
+
{
|
|
363
|
+
className: `monthName ${selectionMode == "year" && "noClick__"}`,
|
|
364
|
+
onClick: switchMode,
|
|
365
|
+
children: pickerTopLabel
|
|
366
|
+
}
|
|
367
|
+
),
|
|
368
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: onMinus, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { className: `nextPreviousIcon previous__`, src: dropdown_default }) }),
|
|
369
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: onAdd, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { className: "nextPreviousIcon", src: dropdown_default }) })
|
|
370
|
+
] }),
|
|
371
|
+
pickerContent,
|
|
372
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
373
|
+
Button_default,
|
|
374
|
+
{
|
|
375
|
+
onClick: () => setCurrentMonth(/* @__PURE__ */ new Date()),
|
|
376
|
+
className: "todayButton",
|
|
377
|
+
size: "small",
|
|
378
|
+
removeMinWidth: true,
|
|
379
|
+
children: "Today"
|
|
380
|
+
}
|
|
381
|
+
)
|
|
382
|
+
] });
|
|
383
|
+
};
|
|
384
|
+
var WebDatePicker_default = WebDatePicker;
|
|
385
|
+
|
|
386
|
+
// src/components/datePicker/DatePicker.tsx
|
|
387
|
+
var import_react_hook_form3 = require("react-hook-form");
|
|
388
|
+
var import_date_fns2 = require("date-fns");
|
|
389
|
+
|
|
390
|
+
// src/components/drawer/Drawer.tsx
|
|
391
|
+
var import_react3 = require("react");
|
|
392
|
+
var import_Drawer = require("./Drawer-5ZWJQFIQ.css");
|
|
393
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
394
|
+
var Drawer = ({ show, updateShow, children }) => {
|
|
395
|
+
(0, import_react3.useEffect)(() => {
|
|
396
|
+
document.body.style.overflow = show ? "hidden" : "auto";
|
|
397
|
+
}, [show]);
|
|
398
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "drawerMainContainer", children: [
|
|
399
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
400
|
+
"div",
|
|
401
|
+
{
|
|
402
|
+
onClick: () => updateShow(false),
|
|
403
|
+
className: `drawerBackgroundContainer ${show ? "show__" : "hide__"}`
|
|
404
|
+
}
|
|
405
|
+
),
|
|
406
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `drawerContentContainer ${show ? "show__" : "hide__"}`, children })
|
|
407
|
+
] });
|
|
408
|
+
};
|
|
409
|
+
var Drawer_default = Drawer;
|
|
410
|
+
|
|
411
|
+
// src/components/datePicker/DatePicker.tsx
|
|
412
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
413
|
+
var DatePicker = ({
|
|
414
|
+
id,
|
|
415
|
+
label = "Label",
|
|
416
|
+
placeholder = "Placeholder",
|
|
417
|
+
loading = false,
|
|
418
|
+
disabled = false
|
|
419
|
+
}) => {
|
|
420
|
+
const datePickerRef = (0, import_react4.useRef)(null);
|
|
421
|
+
const isMobile = false;
|
|
422
|
+
const { getValues } = (0, import_react_hook_form3.useFormContext)();
|
|
423
|
+
const [showPicker, setShowPicker] = (0, import_react4.useState)(false);
|
|
424
|
+
const docOnClickHandler = (e) => {
|
|
425
|
+
if (datePickerRef.current && e.target) {
|
|
426
|
+
if (datePickerRef.current && !datePickerRef.current.contains(e.target)) {
|
|
427
|
+
setShowPicker(false);
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
};
|
|
431
|
+
(0, import_react4.useEffect)(() => {
|
|
432
|
+
document.addEventListener("click", docOnClickHandler);
|
|
433
|
+
return () => {
|
|
434
|
+
document.removeEventListener("click", docOnClickHandler);
|
|
435
|
+
};
|
|
436
|
+
}, []);
|
|
437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "datePickerMainContainer", ref: datePickerRef, children: [
|
|
438
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: label }),
|
|
439
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
440
|
+
"div",
|
|
441
|
+
{
|
|
442
|
+
className: `pickerContainer ${disabled && disabled}`,
|
|
443
|
+
onClick: () => {
|
|
444
|
+
if (!disabled) {
|
|
445
|
+
setShowPicker(!showPicker);
|
|
446
|
+
}
|
|
447
|
+
},
|
|
448
|
+
children: [
|
|
449
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "valueContainer", children: [
|
|
450
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${!getValues(id) && placeholder}`, children: getValues(id) ? (0, import_date_fns2.format)(getValues(id), "dd MMM yyyy") : placeholder }),
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
452
|
+
Icon_default,
|
|
453
|
+
{
|
|
454
|
+
src: dropdown_default,
|
|
455
|
+
className: `dropdownIcon ${showPicker ? "dropdownIconFlip" : ""}`
|
|
456
|
+
}
|
|
457
|
+
)
|
|
458
|
+
] }),
|
|
459
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonLoading_default, { radius: 8 })
|
|
460
|
+
]
|
|
461
|
+
}
|
|
462
|
+
),
|
|
463
|
+
isMobile ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Drawer_default, { show: showPicker, updateShow: setShowPicker, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WebDatePicker_default, { id, show: showPicker, updateShow: setShowPicker }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WebDatePicker_default, { id, show: showPicker, updateShow: setShowPicker })
|
|
464
|
+
] });
|
|
465
|
+
};
|
|
466
|
+
var DatePicker_default = DatePicker;
|
|
467
|
+
|
|
468
|
+
// src/hooks/useSnackbar.ts
|
|
469
|
+
var import_react5 = require("react");
|
|
470
|
+
var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
|
|
471
|
+
const snackbarElement = (0, import_react5.useRef)(null);
|
|
472
|
+
const timeoutId = (0, import_react5.useRef)(null);
|
|
473
|
+
let root = document.getElementById(id);
|
|
474
|
+
const [isShowing, setIsShowing] = (0, import_react5.useState)(false);
|
|
475
|
+
const hoverInHandler = () => {
|
|
476
|
+
if (timeoutId.current) {
|
|
477
|
+
clearTimeout(timeoutId.current);
|
|
478
|
+
}
|
|
479
|
+
};
|
|
480
|
+
const hoverOutHandler = () => {
|
|
481
|
+
timeoutId.current = setTimeout(() => {
|
|
482
|
+
closeSnackbar();
|
|
483
|
+
}, timeout);
|
|
484
|
+
};
|
|
485
|
+
(0, import_react5.useEffect)(() => {
|
|
486
|
+
if (!root) {
|
|
487
|
+
const rootDiv = document.createElement("div");
|
|
488
|
+
rootDiv.setAttribute("id", id);
|
|
489
|
+
const contentDiv = document.createElement("div");
|
|
490
|
+
contentDiv.className = "snackbarContentContainer";
|
|
491
|
+
const contentInnerDiv = document.createElement("div");
|
|
492
|
+
contentInnerDiv.className = "hide__";
|
|
493
|
+
contentDiv.appendChild(contentInnerDiv);
|
|
494
|
+
rootDiv.appendChild(contentDiv);
|
|
495
|
+
if (body) {
|
|
496
|
+
body.appendChild(rootDiv);
|
|
497
|
+
} else {
|
|
498
|
+
document.body.appendChild(rootDiv);
|
|
499
|
+
}
|
|
500
|
+
root = rootDiv;
|
|
501
|
+
}
|
|
502
|
+
if (root) {
|
|
503
|
+
const snackbarContainer = root.children[0];
|
|
504
|
+
if (snackbarContainer) {
|
|
505
|
+
const snackbar = snackbarContainer.children[0];
|
|
506
|
+
if (snackbar) {
|
|
507
|
+
snackbarElement.current = snackbar;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
}, []);
|
|
512
|
+
const showSnackbar = (message, type = "info") => {
|
|
513
|
+
let animTimeout = 0;
|
|
514
|
+
if (isShowing) {
|
|
515
|
+
closeSnackbar();
|
|
516
|
+
animTimeout = 300;
|
|
517
|
+
}
|
|
518
|
+
setTimeout(() => {
|
|
519
|
+
if (snackbarElement.current) {
|
|
520
|
+
snackbarElement.current.innerHTML = message;
|
|
521
|
+
snackbarElement.current.className = `show__ ${type}__`;
|
|
522
|
+
setIsShowing(true);
|
|
523
|
+
}
|
|
524
|
+
}, animTimeout);
|
|
525
|
+
};
|
|
526
|
+
const closeSnackbar = () => {
|
|
527
|
+
if (snackbarElement.current) {
|
|
528
|
+
snackbarElement.current.className = `hide__`;
|
|
529
|
+
setIsShowing(false);
|
|
530
|
+
}
|
|
531
|
+
};
|
|
532
|
+
(0, import_react5.useEffect)(() => {
|
|
533
|
+
if (isShowing && snackbarElement.current) {
|
|
534
|
+
snackbarElement.current.addEventListener("mouseenter", hoverInHandler);
|
|
535
|
+
snackbarElement.current.addEventListener("mouseleave", hoverOutHandler);
|
|
536
|
+
if (timeoutId.current) {
|
|
537
|
+
clearTimeout(timeoutId.current);
|
|
538
|
+
}
|
|
539
|
+
timeoutId.current = setTimeout(() => {
|
|
540
|
+
closeSnackbar();
|
|
541
|
+
}, timeout);
|
|
542
|
+
} else if (snackbarElement.current) {
|
|
543
|
+
snackbarElement.current.removeEventListener("mouseenter", hoverInHandler);
|
|
544
|
+
snackbarElement.current.removeEventListener(
|
|
545
|
+
"mouseleave",
|
|
546
|
+
hoverOutHandler
|
|
547
|
+
);
|
|
548
|
+
}
|
|
549
|
+
}, [isShowing]);
|
|
550
|
+
return {
|
|
551
|
+
showSnackbar
|
|
552
|
+
};
|
|
553
|
+
};
|
|
554
|
+
|
|
555
|
+
// src/hooks/usePostMessage.ts
|
|
556
|
+
var import_react6 = require("react");
|
|
557
|
+
var usePostMessage = (url) => {
|
|
558
|
+
const sendDimension = () => {
|
|
559
|
+
const body = document.body;
|
|
560
|
+
const html = document.documentElement;
|
|
561
|
+
const width = Math.max(
|
|
562
|
+
body.scrollWidth,
|
|
563
|
+
body.offsetWidth,
|
|
564
|
+
html.clientWidth,
|
|
565
|
+
html.scrollWidth,
|
|
566
|
+
html.offsetWidth
|
|
567
|
+
);
|
|
568
|
+
const height = Math.max(
|
|
569
|
+
body.scrollHeight,
|
|
570
|
+
body.offsetHeight,
|
|
571
|
+
html.clientHeight,
|
|
572
|
+
html.scrollHeight,
|
|
573
|
+
html.offsetHeight
|
|
574
|
+
);
|
|
575
|
+
window.parent.postMessage({ type: "resize", height, width }, url);
|
|
576
|
+
};
|
|
577
|
+
const postMessage = (data) => {
|
|
578
|
+
window.parent.postMessage(data, url);
|
|
579
|
+
};
|
|
580
|
+
const postNotification = (data) => {
|
|
581
|
+
window.parent.postMessage(
|
|
582
|
+
{
|
|
583
|
+
type: "noti",
|
|
584
|
+
data
|
|
585
|
+
},
|
|
586
|
+
url
|
|
587
|
+
);
|
|
588
|
+
};
|
|
589
|
+
const postPopup = (data) => {
|
|
590
|
+
window.parent.postMessage({ type: "popup", data }, url);
|
|
591
|
+
};
|
|
592
|
+
const postQuestion = (data) => {
|
|
593
|
+
window.parent.postMessage({ type: "question", data }, url);
|
|
594
|
+
let resolve;
|
|
595
|
+
const prom = new Promise((res) => resolve = res);
|
|
596
|
+
const messageHandler = (ev) => {
|
|
597
|
+
resolve(ev.data);
|
|
598
|
+
window.removeEventListener("message", messageHandler);
|
|
599
|
+
};
|
|
600
|
+
window.addEventListener("message", messageHandler);
|
|
601
|
+
return prom;
|
|
602
|
+
};
|
|
603
|
+
(0, import_react6.useEffect)(() => {
|
|
604
|
+
sendDimension();
|
|
605
|
+
window.addEventListener("DOMContentLoaded", sendDimension);
|
|
606
|
+
window.addEventListener("resize", sendDimension);
|
|
607
|
+
return () => {
|
|
608
|
+
window.removeEventListener("DOMContentLoaded", sendDimension);
|
|
609
|
+
window.removeEventListener("resize", sendDimension);
|
|
610
|
+
};
|
|
611
|
+
}, []);
|
|
612
|
+
return {
|
|
613
|
+
sendDimension,
|
|
614
|
+
postMessage,
|
|
615
|
+
postNotification,
|
|
616
|
+
postPopup,
|
|
617
|
+
postQuestion
|
|
618
|
+
};
|
|
619
|
+
};
|
|
81
620
|
// Annotate the CommonJS export names for ESM import in node:
|
|
82
621
|
0 && (module.exports = {
|
|
83
|
-
|
|
622
|
+
Button,
|
|
623
|
+
DatePicker,
|
|
624
|
+
Input,
|
|
625
|
+
SkeletonLoading,
|
|
626
|
+
usePostMessage,
|
|
627
|
+
useSnackbar
|
|
84
628
|
});
|
|
85
629
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx"],"sourcesContent":["export { default as Input } from \"./components/input/Input\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\r\n","import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\nconst Input: FC<InputProps> = ({\r\n id,\r\n required = false,\r\n hideLabel = false,\r\n label = \"Label\",\r\n placeholder = \"Placeholder\",\r\n loading = false,\r\n disabled = false,\r\n}) => {\r\n // #region Controller\r\n const {\r\n field: { value, onChange },\r\n } = useController({\r\n name: id,\r\n rules: {\r\n required: required,\r\n },\r\n });\r\n // #endregion Controller\r\n\r\n return (\r\n <div className={\"inputContainer\"}>\r\n {!hideLabel && <div>{label}</div>}\r\n <div className={\"inputElementContainer\"}>\r\n <input\r\n className={\"input\"}\r\n value={value}\r\n placeholder={placeholder}\r\n type=\"text\"\r\n onChange={(e) => onChange(e.target.value)}\r\n disabled={disabled}\r\n />\r\n {loading && <SkeletonLoading radius={8} />}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n return (\r\n <div\r\n className={\"skeletonMainContainer\"}\r\n style={{ borderRadius: `${radius}px` }}\r\n >\r\n <div className={\"skeletonAnimContainer\"}></div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,6BAA8B;;;ACSxB;AANN,IAAM,kBAA4C,CAAC,EAAE,SAAS,GAAG,MAAM;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,cAAc,GAAG,MAAM,KAAK;AAAA,MAErC,sDAAC,SAAI,WAAW,yBAAyB;AAAA;AAAA,EAC3C;AAEJ;AAEA,IAAO,0BAAQ;;;ADcM,IAAAA,sBAAA;AAtBrB,IAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AACb,MAAM;AAEJ,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS;AAAA,EAC3B,QAAI,sCAAc;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,MACL;AAAA,IACF;AAAA,EACF,CAAC;AAGD,SACE,8CAAC,SAAI,WAAW,kBACb;AAAA,KAAC,aAAa,6CAAC,SAAK,iBAAM;AAAA,IAC3B,8CAAC,SAAI,WAAW,yBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC;AAAA;AAAA,MACF;AAAA,MACC,WAAW,6CAAC,2BAAgB,QAAQ,GAAG;AAAA,OAC1C;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":["import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx","../src/components/button/Button.tsx","../src/components/datePicker/DatePicker.tsx","../src/components/icon/Icon.tsx","../src/components/datePicker/components/webDatePicker/WebDatePicker.tsx","../src/components/drawer/Drawer.tsx","../src/hooks/useSnackbar.ts","../src/hooks/usePostMessage.ts"],"sourcesContent":["import \"./index.css\";\r\n\r\n// #region Components\r\nexport { default as Input } from \"./components/input/Input\";\r\nexport type { InputProps } from \"./components/input/types\";\r\nexport { default as SkeletonLoading } from \"./components/skeletonLoading/SkeletonLoading\";\r\nexport type { SkeletonLoadingProps } from \"./components/skeletonLoading/types\";\r\nexport { default as Button } from \"./components/button/Button\";\r\nexport type { ButtonProps } from \"./components/button/types\";\r\nexport { default as DatePicker } from \"./components/datePicker/DatePicker\";\r\n// #endregion Components\r\n\r\n// #region Hooks\r\nexport { useSnackbar } from \"./hooks/useSnackbar\";\r\nexport { usePostMessage } from \"./hooks/usePostMessage\";\r\nexport type { NotificationType } from \"./hooks/types\";\r\n// #endregion Hooks\r\n","import { FC } from \"react\";\r\nimport { useController } from \"react-hook-form\";\r\n\r\nimport \"./Input.css\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\nimport { InputProps } from \"./types\";\r\n\r\n/** Create an input component including label\r\n *\r\n * This component needs to be wrap in FormProvider from react-hook-form\r\n */\r\nconst Input: FC<InputProps> = ({\r\n id,\r\n required = false,\r\n hideLabel = false,\r\n label = \"Label\",\r\n placeholder = \"Placeholder\",\r\n loading = false,\r\n disabled = false,\r\n}) => {\r\n // #region Controller\r\n const {\r\n field: { value, onChange },\r\n } = useController({\r\n name: id,\r\n rules: {\r\n required: required,\r\n },\r\n });\r\n // #endregion Controller\r\n\r\n return (\r\n <div className=\"inputContainer\">\r\n {!hideLabel && <div>{label}</div>}\r\n <div className=\"inputElementContainer\">\r\n <input\r\n className=\"input\"\r\n value={value}\r\n placeholder={placeholder}\r\n type=\"text\"\r\n onChange={(e) => onChange(e.target.value)}\r\n disabled={disabled}\r\n />\r\n {loading && <SkeletonLoading radius={8} />}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Input;\r\n","import { FC } from \"react\";\r\nimport \"./SkeletonLoading.css\";\r\nimport { SkeletonLoadingProps } from \"./types\";\r\n\r\n/** A skeleton loading with animation\r\n *\r\n * This needs to be wrap in a container with position: relative;\r\n */\r\nconst SkeletonLoading: FC<SkeletonLoadingProps> = ({ radius = 10 }) => {\r\n return (\r\n <div\r\n className={\"skeletonMainContainer\"}\r\n style={{ borderRadius: `${radius}px` }}\r\n >\r\n <div className={\"skeletonAnimContainer\"}></div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default SkeletonLoading;\r\n","import { FC, useMemo, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Button.css\";\r\nimport { ButtonProps } from \"./types\";\r\n\r\n/** The button component with size and type */\r\nconst Button: FC<ButtonProps> = ({\r\n children,\r\n onClick,\r\n className,\r\n type = \"submit\",\r\n disabled = false,\r\n loading = false,\r\n size = \"default\",\r\n removeMinWidth = false,\r\n}) => {\r\n // #region UseMemo\r\n const buttonClass = useMemo((): string => {\r\n if (disabled || loading) return \"disabledBtn\";\r\n\r\n switch (type) {\r\n case \"submit\":\r\n return \"submitBtn\";\r\n case \"danger\":\r\n return \"dangerBtn\";\r\n case \"warning\":\r\n return \"warningBtn\";\r\n }\r\n }, [type, disabled, loading]);\r\n // #endregion UseMemo\r\n\r\n return (\r\n <button\r\n className={`mainBtn ${className} ${buttonClass} ${`${size}__`} ${\r\n removeMinWidth && \"noMinWidth__\"\r\n }`}\r\n onClick={() => {\r\n if (!disabled) onClick();\r\n }}\r\n disabled={disabled || loading}\r\n >\r\n <div className={loading ? \"hideContent\" : \"\"}>{children}</div>\r\n\r\n <div className={`loadingCircle ${loading && \"show__\"}`}></div>\r\n </button>\r\n );\r\n};\r\n\r\nexport default Button;\r\n","import { useEffect, useRef, useState } from \"react\";\r\nimport SkeletonLoading from \"../skeletonLoading/SkeletonLoading\";\r\n\r\nimport \"./DatePicker.css\";\r\nimport Icon from \"../icon/Icon\";\r\nimport dropdownIcon from \"../../assets/dropdown.svg\";\r\n\r\nimport WebDatePicker from \"./components/webDatePicker/WebDatePicker\";\r\nimport { useFormContext } from \"react-hook-form\";\r\nimport { format } from \"date-fns\";\r\nimport Drawer from \"../drawer/Drawer\";\r\n\r\ninterface DatePickerProps {\r\n id: string;\r\n label?: string;\r\n placeholder?: string;\r\n loading?: boolean;\r\n disabled?: boolean;\r\n}\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = ({\r\n id,\r\n label = \"Label\",\r\n placeholder = \"Placeholder\",\r\n loading = false,\r\n disabled = false,\r\n}) => {\r\n const datePickerRef = useRef<HTMLDivElement>(null);\r\n // const isMobile = useMediaQuery({ maxWidth: 799.98 });\r\n const isMobile = false;\r\n\r\n const { getValues } = useFormContext();\r\n\r\n // #region States\r\n const [showPicker, setShowPicker] = useState<boolean>(false);\r\n // #endregion States\r\n\r\n // #region Click Handler\r\n const docOnClickHandler = (e: PointerEvent) => {\r\n if (datePickerRef.current && e.target) {\r\n if (\r\n datePickerRef.current &&\r\n !datePickerRef.current.contains(e.target as Node)\r\n ) {\r\n setShowPicker(false);\r\n }\r\n }\r\n };\r\n useEffect(() => {\r\n document.addEventListener(\"click\", docOnClickHandler);\r\n\r\n return () => {\r\n document.removeEventListener(\"click\", docOnClickHandler);\r\n };\r\n }, []);\r\n // #endregion Click Handler\r\n\r\n return (\r\n <div className=\"datePickerMainContainer\" ref={datePickerRef}>\r\n <div>{label}</div>\r\n <div\r\n className={`pickerContainer ${disabled && disabled}`}\r\n onClick={() => {\r\n if (!disabled) {\r\n setShowPicker(!showPicker);\r\n }\r\n }}\r\n >\r\n <div className=\"valueContainer\">\r\n <div className={`${!getValues(id) && placeholder}`}>\r\n {getValues(id)\r\n ? format(getValues(id) as Date, \"dd MMM yyyy\")\r\n : placeholder}\r\n </div>\r\n <Icon\r\n src={dropdownIcon}\r\n className={`dropdownIcon ${showPicker ? \"dropdownIconFlip\" : \"\"}`}\r\n />\r\n </div>\r\n {loading && <SkeletonLoading radius={8} />}\r\n </div>\r\n\r\n {isMobile ? (\r\n <Drawer show={showPicker} updateShow={setShowPicker}>\r\n <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n </Drawer>\r\n ) : (\r\n <WebDatePicker id={id} show={showPicker} updateShow={setShowPicker} />\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default DatePicker;\r\n","import \"./Icon.css\";\n\ninterface IconProps {\n src: string;\n className?: string;\n flat?: boolean;\n}\n\nconst Icon: React.FC<IconProps> = ({ src, className, flat = true }) => {\n const classNames = [\"icon\", className, flat ? \"flat__\" : \"\"].join(\" \");\n\n return flat ? (\n <img className={classNames} src={src && src.toString()} />\n ) : (\n <i\n className={classNames}\n style={{\n maskImage: `url(\"${src}\"`,\n WebkitMaskImage: `url(\"${src}\")`,\n }}\n ></i>\n );\n};\n\nexport default Icon;\n\n","import { useEffect, useMemo, useState } from \"react\";\r\nimport Icon from \"../../../icon/Icon\";\r\n\r\nimport \"./WebDatePicker.css\";\r\nimport {\r\n addMonths,\r\n addYears,\r\n format,\r\n getDaysInMonth,\r\n isSameDay,\r\n isToday,\r\n setMonth,\r\n setYear,\r\n startOfMonth,\r\n} from \"date-fns\";\r\nimport { useController } from \"react-hook-form\";\r\nimport Button from \"../../../button/Button\";\r\n\r\nimport dropdownIcon from \"../../../../assets/dropdown.svg\";\r\n\r\ninterface DateDetails {\r\n month: number;\r\n date: number;\r\n isToday: boolean;\r\n isSelected: boolean;\r\n fullDate: Date;\r\n}\r\n\r\nconst daysShortName = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"];\r\nconst monthsShortName = [\r\n \"Jan\",\r\n \"Feb\",\r\n \"Mar\",\r\n \"Apr\",\r\n \"May\",\r\n \"Jun\",\r\n \"Jul\",\r\n \"Aug\",\r\n \"Sep\",\r\n \"Oct\",\r\n \"Nov\",\r\n \"Dec\",\r\n];\r\n\r\ninterface WebDatePickerProps {\r\n id: string;\r\n show: boolean;\r\n updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst WebDatePicker: React.FC<WebDatePickerProps> = ({\r\n id,\r\n show,\r\n updateShow,\r\n}) => {\r\n // #region States\r\n const [currentMonth, setCurrentMonth] = useState<Date>(new Date());\r\n const [selectionMode, setSelectionMode] = useState<\"day\" | \"month\" | \"year\">(\r\n \"day\"\r\n );\r\n const [allYears, setAllYears] = useState<number[]>([]);\r\n // #endregion States\r\n\r\n // #region Forms\r\n const {\r\n field: { onChange, value },\r\n } = useController({ name: id });\r\n // #endregion Forms\r\n\r\n // #region UseEffect\r\n useEffect(() => {\r\n if (show && value) {\r\n setCurrentMonth(new Date(value));\r\n }\r\n\r\n if (show) {\r\n setSelectionMode(\"day\");\r\n }\r\n }, [show]);\r\n // #endregion UseEffect\r\n\r\n // #region Methods\r\n const onAdd = () => {\r\n if (selectionMode == \"day\") {\r\n setCurrentMonth(addMonths(currentMonth, 1));\r\n } else if (selectionMode == \"month\") {\r\n setCurrentMonth(addYears(currentMonth, 1));\r\n } else if (selectionMode == \"year\") {\r\n setCurrentMonth(addYears(currentMonth, 10));\r\n }\r\n };\r\n\r\n const onMinus = () => {\r\n if (selectionMode == \"day\") {\r\n setCurrentMonth(addMonths(currentMonth, -1));\r\n } else if (selectionMode == \"month\") {\r\n setCurrentMonth(addYears(currentMonth, -1));\r\n } else if (selectionMode == \"year\") {\r\n setCurrentMonth(addYears(currentMonth, -10));\r\n }\r\n };\r\n\r\n const switchMode = () => {\r\n if (selectionMode == \"day\") {\r\n setSelectionMode(\"month\");\r\n } else if (selectionMode == \"month\") {\r\n setSelectionMode(\"year\");\r\n }\r\n };\r\n // #endregion Methods\r\n\r\n // #region UseMemo\r\n const allDays = useMemo((): DateDetails[] => {\r\n const totalDays = getDaysInMonth(currentMonth);\r\n const firstDay = startOfMonth(currentMonth).getDay() || 7;\r\n\r\n const previousMonth = addMonths(currentMonth, -1);\r\n const previousMonthTotalDays = getDaysInMonth(previousMonth);\r\n\r\n const nextMonth = addMonths(currentMonth, 1);\r\n\r\n const prevDays: DateDetails[] = new Array(firstDay)\r\n .fill(\"\")\r\n .map((_: string, index) => {\r\n const date = previousMonthTotalDays - index;\r\n const thisDate = new Date(\r\n previousMonth.getFullYear(),\r\n previousMonth.getMonth(),\r\n date\r\n );\r\n\r\n let isSelected = false;\r\n if (value) {\r\n const selectedDate = new Date(value);\r\n isSelected = isSameDay(selectedDate, thisDate);\r\n }\r\n\r\n return {\r\n date: date,\r\n month: previousMonth.getMonth(),\r\n isToday: isToday(thisDate),\r\n isSelected: isSelected,\r\n fullDate: thisDate,\r\n };\r\n })\r\n .sort((a, b) => a.date - b.date);\r\n const allDays: DateDetails[] = new Array(totalDays)\r\n .fill(\"\")\r\n .map((_: string, index: number) => {\r\n const date = index + 1;\r\n const thisDate = new Date(\r\n currentMonth.getFullYear(),\r\n currentMonth.getMonth(),\r\n date\r\n );\r\n\r\n let isSelected = false;\r\n if (value) {\r\n const selectedDate = new Date(value);\r\n isSelected = isSameDay(selectedDate, thisDate);\r\n }\r\n\r\n return {\r\n date: date,\r\n month: currentMonth.getMonth(),\r\n isToday: isToday(thisDate),\r\n isSelected: isSelected,\r\n fullDate: thisDate,\r\n };\r\n });\r\n const nextDays: DateDetails[] = new Array(\r\n 42 - prevDays.length - allDays.length\r\n )\r\n .fill(\"\")\r\n .map((_: string, index: number) => {\r\n const date = index + 1;\r\n const thisDate = new Date(\r\n nextMonth.getFullYear(),\r\n nextMonth.getMonth(),\r\n date\r\n );\r\n\r\n let isSelected = false;\r\n if (value) {\r\n const selectedDate = new Date(value);\r\n isSelected = isSameDay(selectedDate, thisDate);\r\n }\r\n\r\n return {\r\n date: date,\r\n month: nextMonth.getMonth(),\r\n isToday: isToday(thisDate),\r\n isSelected: isSelected,\r\n fullDate: thisDate,\r\n };\r\n });\r\n\r\n return [...prevDays, ...allDays, ...nextDays];\r\n }, [currentMonth, value]);\r\n\r\n const pickerTopLabel = useMemo(() => {\r\n if (selectionMode == \"day\") {\r\n return format(currentMonth, \"MMM, yyyy\");\r\n } else if (selectionMode == \"month\") {\r\n return format(currentMonth, \"yyyy\");\r\n } else if (selectionMode == \"year\") {\r\n const currentYear = currentMonth.getFullYear();\r\n const startYear = currentYear - (currentYear % 10) - 1;\r\n const endYear = startYear + 10 + 2;\r\n\r\n setAllYears(\r\n new Array(endYear - startYear)\r\n .fill(\"\")\r\n .map((_: string, ind: number) => startYear + ind)\r\n );\r\n return format(currentMonth, `${startYear + 1} - ${endYear - 2}`);\r\n }\r\n }, [currentMonth, selectionMode]);\r\n // #endregion UseMemo\r\n\r\n // #region Content\r\n const datesContent = (\r\n <div className=\"dateMainContainer\">\r\n <div className=\"daysContainer\">\r\n {daysShortName.map((day, index) => (\r\n <div key={`${day}_${index}`} className=\"dateItem\">\r\n {day}\r\n </div>\r\n ))}\r\n </div>\r\n\r\n <div className=\"dateContainer\">\r\n {allDays.map((day: DateDetails) => (\r\n <div\r\n className={`dateItem ${\r\n day.month != currentMonth.getMonth() && \"nextPreviousDate__\"\r\n } ${day.isToday && \"isToday__\"} ${\r\n day.isSelected && \"isSelected__\"\r\n }`}\r\n onClick={() => {\r\n onChange(day.fullDate);\r\n updateShow(false);\r\n }}\r\n >\r\n {day.date}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n\r\n const monthsContent = (\r\n <div className=\"monthContainer\">\r\n {monthsShortName.map((mth: string, mthInd: number) => (\r\n <div\r\n className={`monthItem ${\r\n mth == monthsShortName[new Date().getMonth()] &&\r\n new Date().getFullYear() == currentMonth.getFullYear() &&\r\n \"isToday__\"\r\n } ${\r\n value &&\r\n mth == monthsShortName[new Date(value).getMonth()] &&\r\n currentMonth.getFullYear() == new Date(value).getFullYear() &&\r\n \"isSelected__\"\r\n }`}\r\n onClick={() => {\r\n setCurrentMonth(setMonth(currentMonth, mthInd));\r\n setTimeout(() => {\r\n setSelectionMode(\"day\");\r\n }, 10);\r\n }}\r\n >\r\n {mth}\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n\r\n const yearContent = (\r\n <div className=\"monthContainer\">\r\n {allYears.map((yr: number, yrInd: number) => (\r\n <div\r\n className={`monthItem ${\r\n new Date().getFullYear() == yr && \"isToday__\"\r\n } ${value && yr == new Date(value).getFullYear() && \"isSelected__\"} ${\r\n (yrInd == 0 || yrInd == allYears.length - 1) && \"nextPreviousDate__\"\r\n }`}\r\n onClick={() => {\r\n setCurrentMonth(setYear(currentMonth, yr));\r\n setTimeout(() => {\r\n setSelectionMode(\"month\");\r\n }, 10);\r\n }}\r\n >\r\n {yr}\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n\r\n const pickerContent = useMemo(() => {\r\n if (selectionMode == \"day\") {\r\n return datesContent;\r\n } else if (selectionMode == \"month\") {\r\n return monthsContent;\r\n } else if (selectionMode == \"year\") {\r\n return yearContent;\r\n }\r\n }, [selectionMode, allDays, currentMonth, allYears]);\r\n // #endregion Content\r\n\r\n return (\r\n <div className={`webDatePickerMainContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n <div className=\"topContainer\">\r\n <div\r\n className={`monthName ${selectionMode == \"year\" && \"noClick__\"}`}\r\n onClick={switchMode}\r\n >\r\n {pickerTopLabel}\r\n </div>\r\n <div onClick={onMinus}>\r\n <Icon className={`nextPreviousIcon previous__`} src={dropdownIcon} />\r\n </div>\r\n <div onClick={onAdd}>\r\n <Icon className=\"nextPreviousIcon\" src={dropdownIcon} />\r\n </div>\r\n </div>\r\n\r\n {pickerContent}\r\n\r\n <Button\r\n onClick={() => setCurrentMonth(new Date())}\r\n className=\"todayButton\"\r\n size=\"small\"\r\n removeMinWidth\r\n >\r\n Today\r\n </Button>\r\n </div>\r\n );\r\n};\r\n\r\nexport default WebDatePicker;\r\n","import { useEffect, type PropsWithChildren } from \"react\";\r\n\r\nimport \"./Drawer.css\";\r\n\r\ninterface DrawerProps extends PropsWithChildren {\r\n show: boolean;\r\n updateShow: (_: boolean) => void;\r\n}\r\n\r\nconst Drawer: React.FC<DrawerProps> = ({ show, updateShow, children }) => {\r\n // #region UseEffect\r\n useEffect(() => {\r\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\r\n }, [show]);\r\n // #endregion UseEffect\r\n\r\n return (\r\n <div className=\"drawerMainContainer\">\r\n <div\r\n onClick={() => updateShow(false)}\r\n className={`drawerBackgroundContainer ${show ? \"show__\" : \"hide__\"}`}\r\n ></div>\r\n <div className={`drawerContentContainer ${show ? \"show__\" : \"hide__\"}`}>\r\n {children}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Drawer;\r\n","import { useEffect, useRef, useState } from \"react\";\r\n\r\ntype SnackbarType = \"info\" | \"danger\" | \"warning\" | \"success\";\r\ninterface SnackbarReturn {\r\n /** To show the snackbar */\r\n showSnackbar: (\r\n /** Can be in any string format of the message to show */\r\n message: string,\r\n /** info, danger, warning or success - default: info */\r\n type?: SnackbarType\r\n ) => void;\r\n}\r\n\r\n/** Init the snackbar container\r\n *\r\n * @param id To set the id of the root container of the snackbar - default: snackbarRoot\r\n * @param timeout To set the timeout on when the snackbar will be auto hide - default: 3000\r\n */\r\nexport const useSnackbar = (\r\n body?: HTMLElement | null,\r\n id: string = \"snackbarRoot\",\r\n timeout: number = 3000\r\n): SnackbarReturn => {\r\n const snackbarElement = useRef<HTMLDivElement>(null);\r\n const timeoutId = useRef<any>(null);\r\n let root = document.getElementById(id);\r\n\r\n // #region States\r\n const [isShowing, setIsShowing] = useState<boolean>(false);\r\n // #endregion States\r\n\r\n // #region Handler\r\n const hoverInHandler = () => {\r\n if (timeoutId.current) {\r\n clearTimeout(timeoutId.current);\r\n }\r\n };\r\n const hoverOutHandler = () => {\r\n timeoutId.current = setTimeout(() => {\r\n closeSnackbar();\r\n }, timeout);\r\n };\r\n // #endregion Handler\r\n\r\n // #region UseEffect\r\n useEffect(() => {\r\n if (!root) {\r\n const rootDiv = document.createElement(\"div\");\r\n rootDiv.setAttribute(\"id\", id);\r\n\r\n const contentDiv = document.createElement(\"div\");\r\n contentDiv.className = \"snackbarContentContainer\";\r\n\r\n const contentInnerDiv = document.createElement(\"div\");\r\n contentInnerDiv.className = \"hide__\";\r\n\r\n contentDiv.appendChild(contentInnerDiv);\r\n rootDiv.appendChild(contentDiv);\r\n\r\n if (body) {\r\n body.appendChild(rootDiv);\r\n } else {\r\n document.body.appendChild(rootDiv);\r\n }\r\n\r\n root = rootDiv;\r\n }\r\n\r\n if (root) {\r\n const snackbarContainer = root.children[0];\r\n\r\n if (snackbarContainer) {\r\n const snackbar = snackbarContainer.children[0];\r\n\r\n if (snackbar) {\r\n snackbarElement.current = snackbar as HTMLDivElement;\r\n }\r\n }\r\n }\r\n }, []);\r\n // #endregion UseEffect\r\n\r\n const showSnackbar = (message: string, type: SnackbarType = \"info\") => {\r\n let animTimeout = 0;\r\n if (isShowing) {\r\n closeSnackbar();\r\n animTimeout = 300;\r\n }\r\n\r\n setTimeout(() => {\r\n if (snackbarElement.current) {\r\n snackbarElement.current.innerHTML = message;\r\n snackbarElement.current.className = `show__ ${type}__`;\r\n\r\n setIsShowing(true);\r\n }\r\n }, animTimeout);\r\n };\r\n\r\n const closeSnackbar = () => {\r\n if (snackbarElement.current) {\r\n snackbarElement.current.className = `hide__`;\r\n\r\n setIsShowing(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (isShowing && snackbarElement.current) {\r\n snackbarElement.current.addEventListener(\"mouseenter\", hoverInHandler);\r\n snackbarElement.current.addEventListener(\"mouseleave\", hoverOutHandler);\r\n\r\n if (timeoutId.current) {\r\n clearTimeout(timeoutId.current);\r\n }\r\n\r\n timeoutId.current = setTimeout(() => {\r\n closeSnackbar();\r\n }, timeout);\r\n } else if (snackbarElement.current) {\r\n snackbarElement.current.removeEventListener(\"mouseenter\", hoverInHandler);\r\n snackbarElement.current.removeEventListener(\r\n \"mouseleave\",\r\n hoverOutHandler\r\n );\r\n }\r\n }, [isShowing]);\r\n\r\n return {\r\n showSnackbar,\r\n };\r\n};\r\n","import { useEffect } from \"react\";\r\nimport {\r\n NotificationType,\r\n PopupType,\r\n QuestionType,\r\n UsePostMessageReturn,\r\n} from \"./types\";\r\n\r\n/**\r\n * React hook for communicating iframe dimensions and messages\r\n * to a parent window.\r\n *\r\n * This hook automatically:\r\n * - Sends initial iframe dimensions on mount\r\n * - Updates dimensions on DOM content load\r\n * - Updates dimensions on window resize\r\n *\r\n * @param url - The target origin for `postMessage`\r\n *\r\n * @returns Functions for sending dimensions and posting custom messages\r\n */\r\nexport const usePostMessage = (url: string): UsePostMessageReturn => {\r\n const sendDimension = () => {\r\n const body = document.body;\r\n const html = document.documentElement;\r\n\r\n const width = Math.max(\r\n body.scrollWidth,\r\n body.offsetWidth,\r\n html.clientWidth,\r\n html.scrollWidth,\r\n html.offsetWidth\r\n );\r\n\r\n const height = Math.max(\r\n body.scrollHeight,\r\n body.offsetHeight,\r\n html.clientHeight,\r\n html.scrollHeight,\r\n html.offsetHeight\r\n );\r\n\r\n window.parent.postMessage({ type: \"resize\", height, width }, url);\r\n };\r\n\r\n const postMessage = (data: any) => {\r\n window.parent.postMessage(data, url);\r\n };\r\n\r\n const postNotification = (data: NotificationType) => {\r\n window.parent.postMessage(\r\n {\r\n type: \"noti\",\r\n data: data,\r\n },\r\n url\r\n );\r\n };\r\n\r\n const postPopup = (data: PopupType) => {\r\n window.parent.postMessage({ type: \"popup\", data: data }, url);\r\n };\r\n\r\n const postQuestion = (data: QuestionType): Promise<string> => {\r\n window.parent.postMessage({ type: \"question\", data: data }, url);\r\n\r\n let resolve: (value: string | PromiseLike<string>) => void;\r\n const prom = new Promise<string>((res) => (resolve = res));\r\n\r\n const messageHandler = (ev: MessageEvent) => {\r\n resolve(ev.data);\r\n window.removeEventListener(\"message\", messageHandler);\r\n };\r\n window.addEventListener(\"message\", messageHandler);\r\n\r\n return prom;\r\n };\r\n\r\n useEffect(() => {\r\n sendDimension();\r\n\r\n window.addEventListener(\"DOMContentLoaded\", sendDimension);\r\n window.addEventListener(\"resize\", sendDimension);\r\n\r\n return () => {\r\n window.removeEventListener(\"DOMContentLoaded\", sendDimension);\r\n window.removeEventListener(\"resize\", sendDimension);\r\n };\r\n }, []);\r\n\r\n return {\r\n sendDimension,\r\n postMessage,\r\n postNotification,\r\n postPopup,\r\n postQuestion,\r\n };\r\n};\r\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_react_hook_form","import_jsx_runtime","allDays","import_react_hook_form","import_date_fns","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_react"]}
|