@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/index.mjs CHANGED
@@ -1,7 +1,12 @@
1
+ // src/index.ts
2
+ import "./index-2F2GVZE5.css";
3
+
1
4
  // src/components/input/Input.tsx
2
5
  import { useController } from "react-hook-form";
6
+ import "./Input-6MS2FZGM.css";
3
7
 
4
8
  // src/components/skeletonLoading/SkeletonLoading.tsx
9
+ import "./SkeletonLoading-UIP5RBIR.css";
5
10
  import { jsx } from "react/jsx-runtime";
6
11
  var SkeletonLoading = ({ radius = 10 }) => {
7
12
  return /* @__PURE__ */ jsx(
@@ -53,7 +58,553 @@ var Input = ({
53
58
  ] });
54
59
  };
55
60
  var Input_default = Input;
61
+
62
+ // src/components/button/Button.tsx
63
+ import { useMemo } from "react";
64
+ import "./Button-GX4BPUGQ.css";
65
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
66
+ var Button = ({
67
+ children,
68
+ onClick,
69
+ className,
70
+ type = "submit",
71
+ disabled = false,
72
+ loading = false,
73
+ size = "default",
74
+ removeMinWidth = false
75
+ }) => {
76
+ const buttonClass = useMemo(() => {
77
+ if (disabled || loading) return "disabledBtn";
78
+ switch (type) {
79
+ case "submit":
80
+ return "submitBtn";
81
+ case "danger":
82
+ return "dangerBtn";
83
+ case "warning":
84
+ return "warningBtn";
85
+ }
86
+ }, [type, disabled, loading]);
87
+ return /* @__PURE__ */ jsxs2(
88
+ "button",
89
+ {
90
+ className: `mainBtn ${className} ${buttonClass} ${`${size}__`} ${removeMinWidth && "noMinWidth__"}`,
91
+ onClick: () => {
92
+ if (!disabled) onClick();
93
+ },
94
+ disabled: disabled || loading,
95
+ children: [
96
+ /* @__PURE__ */ jsx3("div", { className: loading ? "hideContent" : "", children }),
97
+ /* @__PURE__ */ jsx3("div", { className: `loadingCircle ${loading && "show__"}` })
98
+ ]
99
+ }
100
+ );
101
+ };
102
+ var Button_default = Button;
103
+
104
+ // src/components/datePicker/DatePicker.tsx
105
+ import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
106
+ import "./DatePicker-ISUX6NNC.css";
107
+
108
+ // src/components/icon/Icon.tsx
109
+ import "./Icon-DCSTRBMX.css";
110
+ import { jsx as jsx4 } from "react/jsx-runtime";
111
+ var Icon = ({ src, className, flat = true }) => {
112
+ const classNames = ["icon", className, flat ? "flat__" : ""].join(" ");
113
+ return flat ? /* @__PURE__ */ jsx4("img", { className: classNames, src: src && src.toString() }) : /* @__PURE__ */ jsx4(
114
+ "i",
115
+ {
116
+ className: classNames,
117
+ style: {
118
+ maskImage: `url("${src}"`,
119
+ WebkitMaskImage: `url("${src}")`
120
+ }
121
+ }
122
+ );
123
+ };
124
+ var Icon_default = Icon;
125
+
126
+ // src/assets/dropdown.svg
127
+ 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>';
128
+
129
+ // src/components/datePicker/components/webDatePicker/WebDatePicker.tsx
130
+ import { useEffect, useMemo as useMemo2, useState } from "react";
131
+ import "./WebDatePicker-H2XZEEJG.css";
132
+ import {
133
+ addMonths,
134
+ addYears,
135
+ format,
136
+ getDaysInMonth,
137
+ isSameDay,
138
+ isToday,
139
+ setMonth,
140
+ setYear,
141
+ startOfMonth
142
+ } from "date-fns";
143
+ import { useController as useController2 } from "react-hook-form";
144
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
145
+ var daysShortName = ["S", "M", "T", "W", "T", "F", "S"];
146
+ var monthsShortName = [
147
+ "Jan",
148
+ "Feb",
149
+ "Mar",
150
+ "Apr",
151
+ "May",
152
+ "Jun",
153
+ "Jul",
154
+ "Aug",
155
+ "Sep",
156
+ "Oct",
157
+ "Nov",
158
+ "Dec"
159
+ ];
160
+ var WebDatePicker = ({
161
+ id,
162
+ show,
163
+ updateShow
164
+ }) => {
165
+ const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
166
+ const [selectionMode, setSelectionMode] = useState(
167
+ "day"
168
+ );
169
+ const [allYears, setAllYears] = useState([]);
170
+ const {
171
+ field: { onChange, value }
172
+ } = useController2({ name: id });
173
+ useEffect(() => {
174
+ if (show && value) {
175
+ setCurrentMonth(new Date(value));
176
+ }
177
+ if (show) {
178
+ setSelectionMode("day");
179
+ }
180
+ }, [show]);
181
+ const onAdd = () => {
182
+ if (selectionMode == "day") {
183
+ setCurrentMonth(addMonths(currentMonth, 1));
184
+ } else if (selectionMode == "month") {
185
+ setCurrentMonth(addYears(currentMonth, 1));
186
+ } else if (selectionMode == "year") {
187
+ setCurrentMonth(addYears(currentMonth, 10));
188
+ }
189
+ };
190
+ const onMinus = () => {
191
+ if (selectionMode == "day") {
192
+ setCurrentMonth(addMonths(currentMonth, -1));
193
+ } else if (selectionMode == "month") {
194
+ setCurrentMonth(addYears(currentMonth, -1));
195
+ } else if (selectionMode == "year") {
196
+ setCurrentMonth(addYears(currentMonth, -10));
197
+ }
198
+ };
199
+ const switchMode = () => {
200
+ if (selectionMode == "day") {
201
+ setSelectionMode("month");
202
+ } else if (selectionMode == "month") {
203
+ setSelectionMode("year");
204
+ }
205
+ };
206
+ const allDays = useMemo2(() => {
207
+ const totalDays = getDaysInMonth(currentMonth);
208
+ const firstDay = startOfMonth(currentMonth).getDay() || 7;
209
+ const previousMonth = addMonths(currentMonth, -1);
210
+ const previousMonthTotalDays = getDaysInMonth(previousMonth);
211
+ const nextMonth = addMonths(currentMonth, 1);
212
+ const prevDays = new Array(firstDay).fill("").map((_, index) => {
213
+ const date = previousMonthTotalDays - index;
214
+ const thisDate = new Date(
215
+ previousMonth.getFullYear(),
216
+ previousMonth.getMonth(),
217
+ date
218
+ );
219
+ let isSelected = false;
220
+ if (value) {
221
+ const selectedDate = new Date(value);
222
+ isSelected = isSameDay(selectedDate, thisDate);
223
+ }
224
+ return {
225
+ date,
226
+ month: previousMonth.getMonth(),
227
+ isToday: isToday(thisDate),
228
+ isSelected,
229
+ fullDate: thisDate
230
+ };
231
+ }).sort((a, b) => a.date - b.date);
232
+ const allDays2 = new Array(totalDays).fill("").map((_, index) => {
233
+ const date = index + 1;
234
+ const thisDate = new Date(
235
+ currentMonth.getFullYear(),
236
+ currentMonth.getMonth(),
237
+ date
238
+ );
239
+ let isSelected = false;
240
+ if (value) {
241
+ const selectedDate = new Date(value);
242
+ isSelected = isSameDay(selectedDate, thisDate);
243
+ }
244
+ return {
245
+ date,
246
+ month: currentMonth.getMonth(),
247
+ isToday: isToday(thisDate),
248
+ isSelected,
249
+ fullDate: thisDate
250
+ };
251
+ });
252
+ const nextDays = new Array(
253
+ 42 - prevDays.length - allDays2.length
254
+ ).fill("").map((_, index) => {
255
+ const date = index + 1;
256
+ const thisDate = new Date(
257
+ nextMonth.getFullYear(),
258
+ nextMonth.getMonth(),
259
+ date
260
+ );
261
+ let isSelected = false;
262
+ if (value) {
263
+ const selectedDate = new Date(value);
264
+ isSelected = isSameDay(selectedDate, thisDate);
265
+ }
266
+ return {
267
+ date,
268
+ month: nextMonth.getMonth(),
269
+ isToday: isToday(thisDate),
270
+ isSelected,
271
+ fullDate: thisDate
272
+ };
273
+ });
274
+ return [...prevDays, ...allDays2, ...nextDays];
275
+ }, [currentMonth, value]);
276
+ const pickerTopLabel = useMemo2(() => {
277
+ if (selectionMode == "day") {
278
+ return format(currentMonth, "MMM, yyyy");
279
+ } else if (selectionMode == "month") {
280
+ return format(currentMonth, "yyyy");
281
+ } else if (selectionMode == "year") {
282
+ const currentYear = currentMonth.getFullYear();
283
+ const startYear = currentYear - currentYear % 10 - 1;
284
+ const endYear = startYear + 10 + 2;
285
+ setAllYears(
286
+ new Array(endYear - startYear).fill("").map((_, ind) => startYear + ind)
287
+ );
288
+ return format(currentMonth, `${startYear + 1} - ${endYear - 2}`);
289
+ }
290
+ }, [currentMonth, selectionMode]);
291
+ const datesContent = /* @__PURE__ */ jsxs3("div", { className: "dateMainContainer", children: [
292
+ /* @__PURE__ */ jsx5("div", { className: "daysContainer", children: daysShortName.map((day, index) => /* @__PURE__ */ jsx5("div", { className: "dateItem", children: day }, `${day}_${index}`)) }),
293
+ /* @__PURE__ */ jsx5("div", { className: "dateContainer", children: allDays.map((day) => /* @__PURE__ */ jsx5(
294
+ "div",
295
+ {
296
+ className: `dateItem ${day.month != currentMonth.getMonth() && "nextPreviousDate__"} ${day.isToday && "isToday__"} ${day.isSelected && "isSelected__"}`,
297
+ onClick: () => {
298
+ onChange(day.fullDate);
299
+ updateShow(false);
300
+ },
301
+ children: day.date
302
+ }
303
+ )) })
304
+ ] });
305
+ const monthsContent = /* @__PURE__ */ jsx5("div", { className: "monthContainer", children: monthsShortName.map((mth, mthInd) => /* @__PURE__ */ jsx5(
306
+ "div",
307
+ {
308
+ 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__"}`,
309
+ onClick: () => {
310
+ setCurrentMonth(setMonth(currentMonth, mthInd));
311
+ setTimeout(() => {
312
+ setSelectionMode("day");
313
+ }, 10);
314
+ },
315
+ children: mth
316
+ }
317
+ )) });
318
+ const yearContent = /* @__PURE__ */ jsx5("div", { className: "monthContainer", children: allYears.map((yr, yrInd) => /* @__PURE__ */ jsx5(
319
+ "div",
320
+ {
321
+ className: `monthItem ${(/* @__PURE__ */ new Date()).getFullYear() == yr && "isToday__"} ${value && yr == new Date(value).getFullYear() && "isSelected__"} ${(yrInd == 0 || yrInd == allYears.length - 1) && "nextPreviousDate__"}`,
322
+ onClick: () => {
323
+ setCurrentMonth(setYear(currentMonth, yr));
324
+ setTimeout(() => {
325
+ setSelectionMode("month");
326
+ }, 10);
327
+ },
328
+ children: yr
329
+ }
330
+ )) });
331
+ const pickerContent = useMemo2(() => {
332
+ if (selectionMode == "day") {
333
+ return datesContent;
334
+ } else if (selectionMode == "month") {
335
+ return monthsContent;
336
+ } else if (selectionMode == "year") {
337
+ return yearContent;
338
+ }
339
+ }, [selectionMode, allDays, currentMonth, allYears]);
340
+ return /* @__PURE__ */ jsxs3("div", { className: `webDatePickerMainContainer ${show ? "show__" : "hide__"}`, children: [
341
+ /* @__PURE__ */ jsxs3("div", { className: "topContainer", children: [
342
+ /* @__PURE__ */ jsx5(
343
+ "div",
344
+ {
345
+ className: `monthName ${selectionMode == "year" && "noClick__"}`,
346
+ onClick: switchMode,
347
+ children: pickerTopLabel
348
+ }
349
+ ),
350
+ /* @__PURE__ */ jsx5("div", { onClick: onMinus, children: /* @__PURE__ */ jsx5(Icon_default, { className: `nextPreviousIcon previous__`, src: dropdown_default }) }),
351
+ /* @__PURE__ */ jsx5("div", { onClick: onAdd, children: /* @__PURE__ */ jsx5(Icon_default, { className: "nextPreviousIcon", src: dropdown_default }) })
352
+ ] }),
353
+ pickerContent,
354
+ /* @__PURE__ */ jsx5(
355
+ Button_default,
356
+ {
357
+ onClick: () => setCurrentMonth(/* @__PURE__ */ new Date()),
358
+ className: "todayButton",
359
+ size: "small",
360
+ removeMinWidth: true,
361
+ children: "Today"
362
+ }
363
+ )
364
+ ] });
365
+ };
366
+ var WebDatePicker_default = WebDatePicker;
367
+
368
+ // src/components/datePicker/DatePicker.tsx
369
+ import { useFormContext } from "react-hook-form";
370
+ import { format as format2 } from "date-fns";
371
+
372
+ // src/components/drawer/Drawer.tsx
373
+ import { useEffect as useEffect2 } from "react";
374
+ import "./Drawer-5ZWJQFIQ.css";
375
+ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
376
+ var Drawer = ({ show, updateShow, children }) => {
377
+ useEffect2(() => {
378
+ document.body.style.overflow = show ? "hidden" : "auto";
379
+ }, [show]);
380
+ return /* @__PURE__ */ jsxs4("div", { className: "drawerMainContainer", children: [
381
+ /* @__PURE__ */ jsx6(
382
+ "div",
383
+ {
384
+ onClick: () => updateShow(false),
385
+ className: `drawerBackgroundContainer ${show ? "show__" : "hide__"}`
386
+ }
387
+ ),
388
+ /* @__PURE__ */ jsx6("div", { className: `drawerContentContainer ${show ? "show__" : "hide__"}`, children })
389
+ ] });
390
+ };
391
+ var Drawer_default = Drawer;
392
+
393
+ // src/components/datePicker/DatePicker.tsx
394
+ import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
395
+ var DatePicker = ({
396
+ id,
397
+ label = "Label",
398
+ placeholder = "Placeholder",
399
+ loading = false,
400
+ disabled = false
401
+ }) => {
402
+ const datePickerRef = useRef(null);
403
+ const isMobile = false;
404
+ const { getValues } = useFormContext();
405
+ const [showPicker, setShowPicker] = useState2(false);
406
+ const docOnClickHandler = (e) => {
407
+ if (datePickerRef.current && e.target) {
408
+ if (datePickerRef.current && !datePickerRef.current.contains(e.target)) {
409
+ setShowPicker(false);
410
+ }
411
+ }
412
+ };
413
+ useEffect3(() => {
414
+ document.addEventListener("click", docOnClickHandler);
415
+ return () => {
416
+ document.removeEventListener("click", docOnClickHandler);
417
+ };
418
+ }, []);
419
+ return /* @__PURE__ */ jsxs5("div", { className: "datePickerMainContainer", ref: datePickerRef, children: [
420
+ /* @__PURE__ */ jsx7("div", { children: label }),
421
+ /* @__PURE__ */ jsxs5(
422
+ "div",
423
+ {
424
+ className: `pickerContainer ${disabled && disabled}`,
425
+ onClick: () => {
426
+ if (!disabled) {
427
+ setShowPicker(!showPicker);
428
+ }
429
+ },
430
+ children: [
431
+ /* @__PURE__ */ jsxs5("div", { className: "valueContainer", children: [
432
+ /* @__PURE__ */ jsx7("div", { className: `${!getValues(id) && placeholder}`, children: getValues(id) ? format2(getValues(id), "dd MMM yyyy") : placeholder }),
433
+ /* @__PURE__ */ jsx7(
434
+ Icon_default,
435
+ {
436
+ src: dropdown_default,
437
+ className: `dropdownIcon ${showPicker ? "dropdownIconFlip" : ""}`
438
+ }
439
+ )
440
+ ] }),
441
+ loading && /* @__PURE__ */ jsx7(SkeletonLoading_default, { radius: 8 })
442
+ ]
443
+ }
444
+ ),
445
+ isMobile ? /* @__PURE__ */ jsx7(Drawer_default, { show: showPicker, updateShow: setShowPicker, children: /* @__PURE__ */ jsx7(WebDatePicker_default, { id, show: showPicker, updateShow: setShowPicker }) }) : /* @__PURE__ */ jsx7(WebDatePicker_default, { id, show: showPicker, updateShow: setShowPicker })
446
+ ] });
447
+ };
448
+ var DatePicker_default = DatePicker;
449
+
450
+ // src/hooks/useSnackbar.ts
451
+ import { useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
452
+ var useSnackbar = (body, id = "snackbarRoot", timeout = 3e3) => {
453
+ const snackbarElement = useRef2(null);
454
+ const timeoutId = useRef2(null);
455
+ let root = document.getElementById(id);
456
+ const [isShowing, setIsShowing] = useState3(false);
457
+ const hoverInHandler = () => {
458
+ if (timeoutId.current) {
459
+ clearTimeout(timeoutId.current);
460
+ }
461
+ };
462
+ const hoverOutHandler = () => {
463
+ timeoutId.current = setTimeout(() => {
464
+ closeSnackbar();
465
+ }, timeout);
466
+ };
467
+ useEffect4(() => {
468
+ if (!root) {
469
+ const rootDiv = document.createElement("div");
470
+ rootDiv.setAttribute("id", id);
471
+ const contentDiv = document.createElement("div");
472
+ contentDiv.className = "snackbarContentContainer";
473
+ const contentInnerDiv = document.createElement("div");
474
+ contentInnerDiv.className = "hide__";
475
+ contentDiv.appendChild(contentInnerDiv);
476
+ rootDiv.appendChild(contentDiv);
477
+ if (body) {
478
+ body.appendChild(rootDiv);
479
+ } else {
480
+ document.body.appendChild(rootDiv);
481
+ }
482
+ root = rootDiv;
483
+ }
484
+ if (root) {
485
+ const snackbarContainer = root.children[0];
486
+ if (snackbarContainer) {
487
+ const snackbar = snackbarContainer.children[0];
488
+ if (snackbar) {
489
+ snackbarElement.current = snackbar;
490
+ }
491
+ }
492
+ }
493
+ }, []);
494
+ const showSnackbar = (message, type = "info") => {
495
+ let animTimeout = 0;
496
+ if (isShowing) {
497
+ closeSnackbar();
498
+ animTimeout = 300;
499
+ }
500
+ setTimeout(() => {
501
+ if (snackbarElement.current) {
502
+ snackbarElement.current.innerHTML = message;
503
+ snackbarElement.current.className = `show__ ${type}__`;
504
+ setIsShowing(true);
505
+ }
506
+ }, animTimeout);
507
+ };
508
+ const closeSnackbar = () => {
509
+ if (snackbarElement.current) {
510
+ snackbarElement.current.className = `hide__`;
511
+ setIsShowing(false);
512
+ }
513
+ };
514
+ useEffect4(() => {
515
+ if (isShowing && snackbarElement.current) {
516
+ snackbarElement.current.addEventListener("mouseenter", hoverInHandler);
517
+ snackbarElement.current.addEventListener("mouseleave", hoverOutHandler);
518
+ if (timeoutId.current) {
519
+ clearTimeout(timeoutId.current);
520
+ }
521
+ timeoutId.current = setTimeout(() => {
522
+ closeSnackbar();
523
+ }, timeout);
524
+ } else if (snackbarElement.current) {
525
+ snackbarElement.current.removeEventListener("mouseenter", hoverInHandler);
526
+ snackbarElement.current.removeEventListener(
527
+ "mouseleave",
528
+ hoverOutHandler
529
+ );
530
+ }
531
+ }, [isShowing]);
532
+ return {
533
+ showSnackbar
534
+ };
535
+ };
536
+
537
+ // src/hooks/usePostMessage.ts
538
+ import { useEffect as useEffect5 } from "react";
539
+ var usePostMessage = (url) => {
540
+ const sendDimension = () => {
541
+ const body = document.body;
542
+ const html = document.documentElement;
543
+ const width = Math.max(
544
+ body.scrollWidth,
545
+ body.offsetWidth,
546
+ html.clientWidth,
547
+ html.scrollWidth,
548
+ html.offsetWidth
549
+ );
550
+ const height = Math.max(
551
+ body.scrollHeight,
552
+ body.offsetHeight,
553
+ html.clientHeight,
554
+ html.scrollHeight,
555
+ html.offsetHeight
556
+ );
557
+ window.parent.postMessage({ type: "resize", height, width }, url);
558
+ };
559
+ const postMessage = (data) => {
560
+ window.parent.postMessage(data, url);
561
+ };
562
+ const postNotification = (data) => {
563
+ window.parent.postMessage(
564
+ {
565
+ type: "noti",
566
+ data
567
+ },
568
+ url
569
+ );
570
+ };
571
+ const postPopup = (data) => {
572
+ window.parent.postMessage({ type: "popup", data }, url);
573
+ };
574
+ const postQuestion = (data) => {
575
+ window.parent.postMessage({ type: "question", data }, url);
576
+ let resolve;
577
+ const prom = new Promise((res) => resolve = res);
578
+ const messageHandler = (ev) => {
579
+ resolve(ev.data);
580
+ window.removeEventListener("message", messageHandler);
581
+ };
582
+ window.addEventListener("message", messageHandler);
583
+ return prom;
584
+ };
585
+ useEffect5(() => {
586
+ sendDimension();
587
+ window.addEventListener("DOMContentLoaded", sendDimension);
588
+ window.addEventListener("resize", sendDimension);
589
+ return () => {
590
+ window.removeEventListener("DOMContentLoaded", sendDimension);
591
+ window.removeEventListener("resize", sendDimension);
592
+ };
593
+ }, []);
594
+ return {
595
+ sendDimension,
596
+ postMessage,
597
+ postNotification,
598
+ postPopup,
599
+ postQuestion
600
+ };
601
+ };
56
602
  export {
57
- Input_default as Input
603
+ Button_default as Button,
604
+ DatePicker_default as DatePicker,
605
+ Input_default as Input,
606
+ SkeletonLoading_default as SkeletonLoading,
607
+ usePostMessage,
608
+ useSnackbar
58
609
  };
59
610
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/input/Input.tsx","../src/components/skeletonLoading/SkeletonLoading.tsx"],"sourcesContent":["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":";AACA,SAAS,qBAAqB;;;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,8BAAC,SAAI,WAAW,yBAAyB;AAAA;AAAA,EAC3C;AAEJ;AAEA,IAAO,0BAAQ;;;ADcM,gBAAAA,MACf,YADe;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,IAAI,cAAc;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,MACL;AAAA,IACF;AAAA,EACF,CAAC;AAGD,SACE,qBAAC,SAAI,WAAW,kBACb;AAAA,KAAC,aAAa,gBAAAA,KAAC,SAAK,iBAAM;AAAA,IAC3B,qBAAC,SAAI,WAAW,yBACd;AAAA,sBAAAA;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,gBAAAA,KAAC,2BAAgB,QAAQ,GAAG;AAAA,OAC1C;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":["jsx"]}
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":["jsx","jsx","jsxs","useEffect","useState","jsx","useMemo","useController","jsx","jsxs","useController","useMemo","allDays","format","useEffect","jsx","jsxs","jsx","jsxs","useState","useEffect","format","useEffect","useRef","useState","useEffect"]}