pds-dev-kit-web-test 2.5.490 → 2.5.491

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.
Files changed (82) hide show
  1. package/dist/index.d.ts +4 -4
  2. package/dist/index.js +4 -5
  3. package/dist/src/common/services/i18n/resources/en.json +42 -1
  4. package/dist/src/common/services/i18n/resources/es.json +41 -1
  5. package/dist/src/common/services/i18n/resources/fil.json +41 -1
  6. package/dist/src/common/services/i18n/resources/index.d.ts +285 -0
  7. package/dist/src/common/services/i18n/resources/ja.json +42 -1
  8. package/dist/src/common/services/i18n/resources/ko.json +42 -1
  9. package/dist/src/common/services/i18n/resources/zh-cn.json +42 -1
  10. package/dist/src/common/services/i18n/resources/zh-tw.json +42 -1
  11. package/dist/src/common/types/components.d.ts +9 -0
  12. package/dist/src/common/types/components.js +8 -0
  13. package/dist/src/common/types/index.d.ts +0 -1
  14. package/dist/src/common/types/index.js +0 -1
  15. package/dist/src/common/utils/dateHelper.d.ts +3 -0
  16. package/dist/src/common/utils/dateHelper.js +37 -0
  17. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts +18 -1
  18. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js +46 -3
  19. package/dist/src/desktop/components/BoxItem/BoxItem.d.ts +1 -5
  20. package/dist/src/desktop/components/BoxItem/BoxItem.js +5 -8
  21. package/dist/src/desktop/components/Calendar/AllDaySchedulesSection.d.ts +13 -0
  22. package/dist/src/desktop/components/Calendar/AllDaySchedulesSection.js +132 -0
  23. package/dist/src/desktop/components/Calendar/Calendar.d.ts +4 -0
  24. package/dist/src/desktop/components/Calendar/Calendar.js +384 -0
  25. package/dist/src/desktop/components/Calendar/CurrentTimeIndicator.d.ts +7 -0
  26. package/dist/src/desktop/components/Calendar/CurrentTimeIndicator.js +48 -0
  27. package/dist/src/desktop/components/Calendar/DailyView.d.ts +17 -0
  28. package/dist/src/desktop/components/Calendar/DailyView.js +64 -0
  29. package/dist/src/desktop/components/Calendar/MonthlyView.d.ts +27 -0
  30. package/dist/src/desktop/components/Calendar/MonthlyView.js +263 -0
  31. package/dist/src/desktop/components/Calendar/MultiWeekSchedulesLayer.d.ts +19 -0
  32. package/dist/src/desktop/components/Calendar/MultiWeekSchedulesLayer.js +73 -0
  33. package/dist/src/desktop/components/Calendar/ScheduleItem.d.ts +16 -0
  34. package/dist/src/desktop/components/Calendar/ScheduleItem.js +50 -0
  35. package/dist/src/desktop/components/Calendar/TimeBasedScheduleItem.d.ts +9 -0
  36. package/dist/src/desktop/components/Calendar/TimeBasedScheduleItem.js +170 -0
  37. package/dist/src/desktop/components/Calendar/WeeklyView.d.ts +21 -0
  38. package/dist/src/desktop/components/Calendar/WeeklyView.js +91 -0
  39. package/dist/src/desktop/components/Calendar/YearlyView.d.ts +12 -0
  40. package/dist/src/desktop/components/Calendar/YearlyView.js +76 -0
  41. package/dist/src/desktop/components/Calendar/calendarUtils.d.ts +24 -0
  42. package/dist/src/desktop/components/Calendar/calendarUtils.js +112 -0
  43. package/dist/src/desktop/components/Calendar/constants.d.ts +1 -0
  44. package/dist/src/desktop/components/Calendar/constants.js +31 -0
  45. package/dist/src/desktop/components/Calendar/index.d.ts +10 -0
  46. package/dist/src/desktop/components/Calendar/index.js +37 -0
  47. package/dist/src/desktop/components/Calendar/timeFormatUtils.d.ts +16 -0
  48. package/dist/src/desktop/components/Calendar/timeFormatUtils.js +45 -0
  49. package/dist/src/desktop/components/Calendar/types.d.ts +60 -0
  50. package/dist/src/desktop/components/Calendar/types.js +2 -0
  51. package/dist/src/desktop/components/index.d.ts +2 -2
  52. package/dist/src/desktop/components/index.js +4 -4
  53. package/dist/src/desktop/index.d.ts +1 -1
  54. package/dist/src/desktop/index.js +2 -2
  55. package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.d.ts +23 -0
  56. package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.js +199 -0
  57. package/dist/src/desktop/panels/MultilingualModal/index.d.ts +1 -0
  58. package/dist/src/desktop/panels/MultilingualModal/index.js +8 -0
  59. package/dist/src/desktop/panels/index.d.ts +2 -1
  60. package/dist/src/desktop/panels/index.js +6 -1
  61. package/dist/src/mobile/components/BoxItem/BoxItem.d.ts +1 -5
  62. package/dist/src/mobile/components/BoxItem/BoxItem.js +5 -7
  63. package/dist/src/mobile/components/index.d.ts +1 -2
  64. package/dist/src/mobile/components/index.js +1 -3
  65. package/dist/src/mobile/index.d.ts +1 -1
  66. package/dist/src/mobile/index.js +2 -3
  67. package/package.json +1 -1
  68. package/release-note.md +2 -2
  69. package/dist/src/common/types/form.d.ts +0 -9
  70. package/dist/src/common/types/form.js +0 -10
  71. package/dist/src/desktop/components/Snackbar/Snackbar.d.ts +0 -16
  72. package/dist/src/desktop/components/Snackbar/Snackbar.js +0 -209
  73. package/dist/src/desktop/components/Snackbar/index.d.ts +0 -1
  74. package/dist/src/desktop/components/Snackbar/index.js +0 -8
  75. package/dist/src/desktop/components/Snackbar/provider.d.ts +0 -11
  76. package/dist/src/desktop/components/Snackbar/provider.js +0 -52
  77. package/dist/src/mobile/components/Snackbar/Snackbar.d.ts +0 -16
  78. package/dist/src/mobile/components/Snackbar/Snackbar.js +0 -209
  79. package/dist/src/mobile/components/Snackbar/index.d.ts +0 -1
  80. package/dist/src/mobile/components/Snackbar/index.js +0 -8
  81. package/dist/src/mobile/components/Snackbar/provider.d.ts +0 -11
  82. package/dist/src/mobile/components/Snackbar/provider.js +0 -52
@@ -1,209 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
- Object.defineProperty(exports, "__esModule", { value: true });
21
- var jsx_runtime_1 = require("react/jsx-runtime");
22
- var react_1 = require("react");
23
- var react_dom_1 = require("react-dom");
24
- var panels_1 = require("../../panels");
25
- var components_1 = require("../../../hybrid/components");
26
- var styled_components_1 = __importDefault(require("styled-components"));
27
- var IconButton_1 = require("../IconButton");
28
- var TextButton_1 = require("../TextButton");
29
- var TextLabel_1 = require("../TextLabel");
30
- var Snackbar = function (_a) {
31
- var message = _a.message, _b = _a.actionBtnName, actionBtnName = _b === void 0 ? '' : _b, _c = _a.position, position = _c === void 0 ? 'bottom-center' : _c, _d = _a.hideActionBtn, hideActionBtn = _d === void 0 ? false : _d, onActionBtnClick = _a.onActionBtnClick, onClose = _a.onClose, _e = _a.duration, duration = _e === void 0 ? 2000 : _e, anchorRef = _a.anchorRef;
32
- var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
33
- var _g = (0, react_1.useState)({}), containerStyle = _g[0], setContainerStyle = _g[1];
34
- var timerRef = (0, react_1.useRef)();
35
- /*
36
- * 마운트 시 애니메이션
37
- */
38
- (0, react_1.useEffect)(function () {
39
- var showTimer = setTimeout(function () {
40
- setIsVisible(true);
41
- }, 10);
42
- return function () { return clearTimeout(showTimer); };
43
- }, []);
44
- /*
45
- * duration 타이머
46
- */
47
- (0, react_1.useEffect)(function () {
48
- if (duration > 0) {
49
- timerRef.current = setTimeout(function () {
50
- handleClose();
51
- }, duration);
52
- }
53
- return function () {
54
- if (timerRef.current) {
55
- clearTimeout(timerRef.current);
56
- }
57
- };
58
- }, [duration]);
59
- /*
60
- * 스크롤, 리사이즈시 포지션 업데이트
61
- */
62
- (0, react_1.useEffect)(function () {
63
- var updatePosition = function () {
64
- if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
65
- var rect = anchorRef.current.getBoundingClientRect();
66
- var style = getAnchorBasedStyle(position, rect);
67
- setContainerStyle(style);
68
- }
69
- else {
70
- var style = getViewportBasedStyle(position);
71
- setContainerStyle(style);
72
- }
73
- };
74
- // 초기 렌더링 시 약간의 딜레이를 주어 DOM이 완전히 준비되도록 함
75
- var initialTimer = setTimeout(updatePosition, 0);
76
- if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
77
- window.addEventListener('resize', updatePosition);
78
- // ResizeObserver로 anchorRef 요소의 크기 변화 감지
79
- var resizeObserver_1 = new ResizeObserver(updatePosition);
80
- resizeObserver_1.observe(anchorRef.current);
81
- return function () {
82
- clearTimeout(initialTimer);
83
- window.removeEventListener('resize', updatePosition);
84
- resizeObserver_1.disconnect();
85
- };
86
- }
87
- updatePosition();
88
- return function () {
89
- clearTimeout(initialTimer);
90
- };
91
- }, [position, anchorRef]);
92
- var handleClose = function () {
93
- setIsVisible(false);
94
- setTimeout(function () {
95
- onClose();
96
- }, 300);
97
- };
98
- var handleActionClick = function () {
99
- if (onActionBtnClick) {
100
- onActionBtnClick();
101
- }
102
- handleClose();
103
- };
104
- var getViewportBasedStyle = function (position) {
105
- var base = {
106
- position: 'fixed',
107
- zIndex: 9999
108
- };
109
- var offset = 24;
110
- switch (position) {
111
- case 'top-left':
112
- return __assign(__assign({}, base), { top: offset, left: offset });
113
- case 'top-center':
114
- return __assign(__assign({}, base), { top: offset, left: '50%', transform: 'translateX(-50%)' });
115
- case 'top-right':
116
- return __assign(__assign({}, base), { top: offset, right: offset });
117
- case 'right-top':
118
- return __assign(__assign({}, base), { top: offset, right: offset });
119
- case 'right-center':
120
- return __assign(__assign({}, base), { top: '50%', right: offset, transform: 'translateY(-50%)' });
121
- case 'right-bottom':
122
- return __assign(__assign({}, base), { bottom: offset, right: offset });
123
- case 'bottom-right':
124
- return __assign(__assign({}, base), { bottom: offset, right: offset });
125
- case 'bottom-center':
126
- return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
127
- case 'bottom-left':
128
- return __assign(__assign({}, base), { bottom: offset, left: offset });
129
- case 'left-bottom':
130
- return __assign(__assign({}, base), { bottom: offset, left: offset });
131
- case 'left-center':
132
- return __assign(__assign({}, base), { top: '50%', left: offset, transform: 'translateY(-50%)' });
133
- case 'left-top':
134
- return __assign(__assign({}, base), { top: offset, left: offset });
135
- case 'center':
136
- return __assign(__assign({}, base), { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' });
137
- default:
138
- return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
139
- }
140
- };
141
- var getAnchorBasedStyle = function (position, rect) {
142
- var base = {
143
- position: 'fixed',
144
- zIndex: 9999
145
- };
146
- var offset = 24;
147
- switch (position) {
148
- case 'top-left':
149
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left });
150
- case 'top-center':
151
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
152
- case 'top-right':
153
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, right: window.innerWidth - rect.right });
154
- case 'right-top':
155
- return __assign(__assign({}, base), { top: rect.top, left: rect.right + offset });
156
- case 'right-center':
157
- return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.right + offset, transform: 'translateY(-50%)' });
158
- case 'right-bottom':
159
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, left: rect.right + offset });
160
- case 'bottom-right':
161
- return __assign(__assign({}, base), { top: rect.bottom + offset, right: window.innerWidth - rect.right });
162
- case 'bottom-center':
163
- return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
164
- case 'bottom-left':
165
- return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left });
166
- case 'left-bottom':
167
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, right: window.innerWidth - rect.left + offset });
168
- case 'left-center':
169
- return __assign(__assign({}, base), { top: rect.top + rect.height / 2, right: window.innerWidth - rect.left + offset, transform: 'translateY(-50%)' });
170
- case 'left-top':
171
- return __assign(__assign({}, base), { top: rect.top, right: window.innerWidth - rect.left + offset });
172
- case 'center':
173
- return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.left + rect.width / 2, transform: 'translate(-50%, -50%)' });
174
- default:
175
- return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
176
- }
177
- };
178
- var snackbarContent = ((0, jsx_runtime_1.jsx)(S_Container, __assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)(S_SnackbarWrapper, __assign({ position: position, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ shapeType: "round", radius: 8, paddingTop: "none", paddingRight: "none", paddingBottom: "none", paddingLeft: "spacing_d", width: "max-content", height: "auto", overrideBackgroundColorKey: "ui_cpnt_snackbar_base", overrideCSS: {
179
- display: 'flex',
180
- alignItems: 'center',
181
- justifyContent: 'space-between',
182
- maxWidth: '640px'
183
- } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: message, styleTheme: "caption1Regular", colorOverride: "ui_cpnt_snackbar_text", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 2 }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" })] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_Buttons, { children: [onActionBtnClick && actionBtnName && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: actionBtnName, colorTheme: "grey_01", size: "xsmall", onClick: handleActionClick })), !hideActionBtn && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", iconColorKey: "ui_cpnt_snackbar_text", iconSize: 16, baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", onClick: handleClose })), hideActionBtn && actionBtnName && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })] })] })) })) })));
184
- return (0, react_dom_1.createPortal)(snackbarContent, document.body);
185
- };
186
- var S_Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"], ["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"])));
187
- var getInitialTransform = function (position) {
188
- if (position.startsWith('top-'))
189
- return 'translateY(-10px)';
190
- if (position.startsWith('bottom-'))
191
- return 'translateY(10px)';
192
- if (position.startsWith('left-'))
193
- return 'translateX(-10px)';
194
- if (position.startsWith('right-'))
195
- return 'translateX(10px)';
196
- if (position === 'center')
197
- return 'scale(0.95)';
198
- return 'translateY(0)';
199
- };
200
- var S_SnackbarWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n max-width: 640px;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: max-content;\n"], ["\n display: flex;\n justify-content: center;\n max-width: 640px;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: max-content;\n"])), function (_a) {
201
- var isVisible = _a.isVisible;
202
- return (isVisible ? 1 : 0);
203
- }, function (_a) {
204
- var isVisible = _a.isVisible, position = _a.position;
205
- return isVisible ? 'translate(0, 0) scale(1)' : getInitialTransform(position);
206
- });
207
- var S_Buttons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
208
- exports.default = Snackbar;
209
- var templateObject_1, templateObject_2, templateObject_3;
@@ -1 +0,0 @@
1
- export { default as Snackbar } from './Snackbar';
@@ -1,8 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Snackbar = void 0;
7
- var Snackbar_1 = require("./Snackbar");
8
- Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return __importDefault(Snackbar_1).default; } });
@@ -1,11 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { BaseSnackbarProps } from './Snackbar';
3
- interface SnackbarContextType {
4
- showSnackbar: (props: BaseSnackbarProps) => void;
5
- hideSnackbar: (id: string) => void;
6
- }
7
- export declare const SnackbarProvider: ({ children }: {
8
- children: ReactNode;
9
- }) => JSX.Element;
10
- export declare const useSnackbar: () => SnackbarContextType;
11
- export {};
@@ -1,52 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
14
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
15
- if (ar || !(i in from)) {
16
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
17
- ar[i] = from[i];
18
- }
19
- }
20
- return to.concat(ar || Array.prototype.slice.call(from));
21
- };
22
- var __importDefault = (this && this.__importDefault) || function (mod) {
23
- return (mod && mod.__esModule) ? mod : { "default": mod };
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.useSnackbar = exports.SnackbarProvider = void 0;
27
- var jsx_runtime_1 = require("react/jsx-runtime");
28
- var react_1 = require("react");
29
- var Snackbar_1 = __importDefault(require("./Snackbar"));
30
- var SnackbarContext = (0, react_1.createContext)(null);
31
- var SnackbarProvider = function (_a) {
32
- var children = _a.children;
33
- var _b = (0, react_1.useState)([]), snackbarList = _b[0], setSnackbarList = _b[1];
34
- var value = (0, react_1.useMemo)(function () { return ({
35
- showSnackbar: function (props) {
36
- var id = crypto.randomUUID();
37
- setSnackbarList(function (prev) { return __spreadArray(__spreadArray([], prev, true), [__assign(__assign({}, props), { id: id })], false); });
38
- },
39
- hideSnackbar: function (id) {
40
- setSnackbarList(function (prev) { return prev.filter(function (snackbar) { return snackbar.id !== id; }); });
41
- }
42
- }); }, []);
43
- return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, __assign({ value: value }, { children: [children, snackbarList.map(function (snackbar) { return ((0, jsx_runtime_1.jsx)(Snackbar_1.default, { message: snackbar.message, actionBtnName: snackbar.actionBtnName, position: snackbar.position, hideActionBtn: snackbar.hideActionBtn, onActionBtnClick: snackbar.onActionBtnClick, duration: snackbar.duration, anchorRef: snackbar.anchorRef, onClose: function () { return value.hideSnackbar(snackbar.id); } }, snackbar.id)); })] })));
44
- };
45
- exports.SnackbarProvider = SnackbarProvider;
46
- var useSnackbar = function () {
47
- var context = (0, react_1.useContext)(SnackbarContext);
48
- if (!context)
49
- throw new Error('useSnackbar must be used within a SnackbarProvider');
50
- return context;
51
- };
52
- exports.useSnackbar = useSnackbar;
@@ -1,16 +0,0 @@
1
- import React from 'react';
2
- export type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-center' | 'right-bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'center';
3
- export interface BaseSnackbarProps {
4
- message: string;
5
- actionBtnName?: string;
6
- position?: SnackbarPosition;
7
- hideActionBtn?: boolean;
8
- onActionBtnClick?: () => void;
9
- duration?: number;
10
- anchorRef?: React.RefObject<HTMLElement>;
11
- }
12
- export interface SnackbarProps extends BaseSnackbarProps {
13
- onClose: () => void;
14
- }
15
- declare const Snackbar: React.FC<SnackbarProps>;
16
- export default Snackbar;
@@ -1,209 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
- Object.defineProperty(exports, "__esModule", { value: true });
21
- var jsx_runtime_1 = require("react/jsx-runtime");
22
- var react_1 = require("react");
23
- var react_dom_1 = require("react-dom");
24
- var panels_1 = require("../../../desktop/panels");
25
- var components_1 = require("../../../hybrid/components");
26
- var styled_components_1 = __importDefault(require("styled-components"));
27
- var IconButton_1 = require("../IconButton");
28
- var TextButton_1 = require("../TextButton");
29
- var TextLabel_1 = require("../TextLabel");
30
- var Snackbar = function (_a) {
31
- var message = _a.message, _b = _a.actionBtnName, actionBtnName = _b === void 0 ? '' : _b, _c = _a.position, position = _c === void 0 ? 'bottom-center' : _c, _d = _a.hideActionBtn, hideActionBtn = _d === void 0 ? false : _d, onActionBtnClick = _a.onActionBtnClick, onClose = _a.onClose, _e = _a.duration, duration = _e === void 0 ? 2000 : _e, anchorRef = _a.anchorRef;
32
- var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
33
- var _g = (0, react_1.useState)({}), containerStyle = _g[0], setContainerStyle = _g[1];
34
- var timerRef = (0, react_1.useRef)();
35
- /*
36
- * 마운트 시 애니메이션
37
- */
38
- (0, react_1.useEffect)(function () {
39
- var showTimer = setTimeout(function () {
40
- setIsVisible(true);
41
- }, 10);
42
- return function () { return clearTimeout(showTimer); };
43
- }, []);
44
- /*
45
- * duration 타이머
46
- */
47
- (0, react_1.useEffect)(function () {
48
- if (duration > 0) {
49
- timerRef.current = setTimeout(function () {
50
- handleClose();
51
- }, duration);
52
- }
53
- return function () {
54
- if (timerRef.current) {
55
- clearTimeout(timerRef.current);
56
- }
57
- };
58
- }, [duration]);
59
- /*
60
- * 스크롤, 리사이즈시 포지션 업데이트
61
- */
62
- (0, react_1.useEffect)(function () {
63
- var updatePosition = function () {
64
- if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
65
- var rect = anchorRef.current.getBoundingClientRect();
66
- var style = getAnchorBasedStyle(position, rect);
67
- setContainerStyle(style);
68
- }
69
- else {
70
- var style = getViewportBasedStyle(position);
71
- setContainerStyle(style);
72
- }
73
- };
74
- // 초기 렌더링 시 약간의 딜레이를 주어 DOM이 완전히 준비되도록 함
75
- var initialTimer = setTimeout(updatePosition, 0);
76
- if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
77
- window.addEventListener('resize', updatePosition);
78
- // ResizeObserver로 anchorRef 요소의 크기 변화 감지
79
- var resizeObserver_1 = new ResizeObserver(updatePosition);
80
- resizeObserver_1.observe(anchorRef.current);
81
- return function () {
82
- clearTimeout(initialTimer);
83
- window.removeEventListener('resize', updatePosition);
84
- resizeObserver_1.disconnect();
85
- };
86
- }
87
- updatePosition();
88
- return function () {
89
- clearTimeout(initialTimer);
90
- };
91
- }, [position, anchorRef]);
92
- var handleClose = function () {
93
- setIsVisible(false);
94
- setTimeout(function () {
95
- onClose();
96
- }, 300);
97
- };
98
- var handleActionClick = function () {
99
- if (onActionBtnClick) {
100
- onActionBtnClick();
101
- }
102
- handleClose();
103
- };
104
- var getViewportBasedStyle = function (position) {
105
- var base = {
106
- position: 'fixed',
107
- zIndex: 9999
108
- };
109
- var offset = 24;
110
- switch (position) {
111
- case 'top-left':
112
- return __assign(__assign({}, base), { top: offset, left: offset });
113
- case 'top-center':
114
- return __assign(__assign({}, base), { top: offset, left: '50%', transform: 'translateX(-50%)' });
115
- case 'top-right':
116
- return __assign(__assign({}, base), { top: offset, right: offset });
117
- case 'right-top':
118
- return __assign(__assign({}, base), { top: offset, right: offset });
119
- case 'right-center':
120
- return __assign(__assign({}, base), { top: '50%', right: offset, transform: 'translateY(-50%)' });
121
- case 'right-bottom':
122
- return __assign(__assign({}, base), { bottom: offset, right: offset });
123
- case 'bottom-right':
124
- return __assign(__assign({}, base), { bottom: offset, right: offset });
125
- case 'bottom-center':
126
- return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
127
- case 'bottom-left':
128
- return __assign(__assign({}, base), { bottom: offset, left: offset });
129
- case 'left-bottom':
130
- return __assign(__assign({}, base), { bottom: offset, left: offset });
131
- case 'left-center':
132
- return __assign(__assign({}, base), { top: '50%', left: offset, transform: 'translateY(-50%)' });
133
- case 'left-top':
134
- return __assign(__assign({}, base), { top: offset, left: offset });
135
- case 'center':
136
- return __assign(__assign({}, base), { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' });
137
- default:
138
- return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
139
- }
140
- };
141
- var getAnchorBasedStyle = function (position, rect) {
142
- var base = {
143
- position: 'fixed',
144
- zIndex: 9999
145
- };
146
- var offset = 24;
147
- switch (position) {
148
- case 'top-left':
149
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left });
150
- case 'top-center':
151
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
152
- case 'top-right':
153
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, right: window.innerWidth - rect.right });
154
- case 'right-top':
155
- return __assign(__assign({}, base), { top: rect.top, left: rect.right + offset });
156
- case 'right-center':
157
- return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.right + offset, transform: 'translateY(-50%)' });
158
- case 'right-bottom':
159
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, left: rect.right + offset });
160
- case 'bottom-right':
161
- return __assign(__assign({}, base), { top: rect.bottom + offset, right: window.innerWidth - rect.right });
162
- case 'bottom-center':
163
- return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
164
- case 'bottom-left':
165
- return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left });
166
- case 'left-bottom':
167
- return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, right: window.innerWidth - rect.left + offset });
168
- case 'left-center':
169
- return __assign(__assign({}, base), { top: rect.top + rect.height / 2, right: window.innerWidth - rect.left + offset, transform: 'translateY(-50%)' });
170
- case 'left-top':
171
- return __assign(__assign({}, base), { top: rect.top, right: window.innerWidth - rect.left + offset });
172
- case 'center':
173
- return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.left + rect.width / 2, transform: 'translate(-50%, -50%)' });
174
- default:
175
- return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
176
- }
177
- };
178
- var snackbarContent = ((0, jsx_runtime_1.jsx)(S_Container, __assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)(S_SnackbarWrapper, __assign({ position: position, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ shapeType: "round", radius: 8, paddingTop: "none", paddingRight: "none", paddingBottom: "none", paddingLeft: "spacing_d", width: "max-content", height: "auto", overrideBackgroundColorKey: "ui_cpnt_snackbar_base", overrideCSS: {
179
- display: 'flex',
180
- alignItems: 'center',
181
- justifyContent: 'space-between',
182
- maxWidth: '640px'
183
- } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: message, styleTheme: "caption1Regular", colorOverride: "ui_cpnt_snackbar_text", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 2 }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" })] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_Buttons, { children: [onActionBtnClick && actionBtnName && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: actionBtnName, colorTheme: "grey_01", size: "xsmall", onClick: handleActionClick })), !hideActionBtn && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", iconColorKey: "ui_cpnt_snackbar_text", iconSize: 16, baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", onClick: handleClose })), hideActionBtn && actionBtnName && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })] })] })) })) })));
184
- return (0, react_dom_1.createPortal)(snackbarContent, document.body);
185
- };
186
- var S_Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"], ["\n pointer-events: none;\n width: max-content;\n & > * {\n pointer-events: auto;\n }\n"])));
187
- var getInitialTransform = function (position) {
188
- if (position.startsWith('top-'))
189
- return 'translateY(-10px)';
190
- if (position.startsWith('bottom-'))
191
- return 'translateY(10px)';
192
- if (position.startsWith('left-'))
193
- return 'translateX(-10px)';
194
- if (position.startsWith('right-'))
195
- return 'translateX(10px)';
196
- if (position === 'center')
197
- return 'scale(0.95)';
198
- return 'translateY(0)';
199
- };
200
- var S_SnackbarWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n max-width: 640px;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: max-content;\n"], ["\n display: flex;\n justify-content: center;\n max-width: 640px;\n opacity: ", ";\n transform: ", ";\n transition: opacity 0.3s ease, transform 0.3s ease;\n width: max-content;\n"])), function (_a) {
201
- var isVisible = _a.isVisible;
202
- return (isVisible ? 1 : 0);
203
- }, function (_a) {
204
- var isVisible = _a.isVisible, position = _a.position;
205
- return isVisible ? 'translate(0, 0) scale(1)' : getInitialTransform(position);
206
- });
207
- var S_Buttons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
208
- exports.default = Snackbar;
209
- var templateObject_1, templateObject_2, templateObject_3;
@@ -1 +0,0 @@
1
- export { default as Snackbar } from './Snackbar';
@@ -1,8 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Snackbar = void 0;
7
- var Snackbar_1 = require("./Snackbar");
8
- Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return __importDefault(Snackbar_1).default; } });
@@ -1,11 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { BaseSnackbarProps } from './Snackbar';
3
- interface SnackbarContextType {
4
- showSnackbar: (props: BaseSnackbarProps) => void;
5
- hideSnackbar: (id: string) => void;
6
- }
7
- export declare const SnackbarProvider: ({ children }: {
8
- children: ReactNode;
9
- }) => JSX.Element;
10
- export declare const useSnackbar: () => SnackbarContextType;
11
- export {};
@@ -1,52 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
14
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
15
- if (ar || !(i in from)) {
16
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
17
- ar[i] = from[i];
18
- }
19
- }
20
- return to.concat(ar || Array.prototype.slice.call(from));
21
- };
22
- var __importDefault = (this && this.__importDefault) || function (mod) {
23
- return (mod && mod.__esModule) ? mod : { "default": mod };
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.useSnackbar = exports.SnackbarProvider = void 0;
27
- var jsx_runtime_1 = require("react/jsx-runtime");
28
- var react_1 = require("react");
29
- var Snackbar_1 = __importDefault(require("./Snackbar"));
30
- var SnackbarContext = (0, react_1.createContext)(null);
31
- var SnackbarProvider = function (_a) {
32
- var children = _a.children;
33
- var _b = (0, react_1.useState)([]), snackbarList = _b[0], setSnackbarList = _b[1];
34
- var value = (0, react_1.useMemo)(function () { return ({
35
- showSnackbar: function (props) {
36
- var id = crypto.randomUUID();
37
- setSnackbarList(function (prev) { return __spreadArray(__spreadArray([], prev, true), [__assign(__assign({}, props), { id: id })], false); });
38
- },
39
- hideSnackbar: function (id) {
40
- setSnackbarList(function (prev) { return prev.filter(function (snackbar) { return snackbar.id !== id; }); });
41
- }
42
- }); }, []);
43
- return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, __assign({ value: value }, { children: [children, snackbarList.map(function (snackbar) { return ((0, jsx_runtime_1.jsx)(Snackbar_1.default, { message: snackbar.message, actionBtnName: snackbar.actionBtnName, position: snackbar.position, hideActionBtn: snackbar.hideActionBtn, onActionBtnClick: snackbar.onActionBtnClick, duration: snackbar.duration, anchorRef: snackbar.anchorRef, onClose: function () { return value.hideSnackbar(snackbar.id); } }, snackbar.id)); })] })));
44
- };
45
- exports.SnackbarProvider = SnackbarProvider;
46
- var useSnackbar = function () {
47
- var context = (0, react_1.useContext)(SnackbarContext);
48
- if (!context)
49
- throw new Error('useSnackbar must be used within a SnackbarProvider');
50
- return context;
51
- };
52
- exports.useSnackbar = useSnackbar;