empower-container 0.1.2 → 0.1.5

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 (106) hide show
  1. package/README.md +240 -236
  2. package/package.json +5 -2
  3. package/src/main/DatetimeFormatter.js +24 -21
  4. package/src/main/DatetimeFormatter.tsx +7 -4
  5. package/src/main/Information.js +13 -15
  6. package/src/main/Information.tsx +40 -36
  7. package/src/main/MenuBar.d.ts +0 -1
  8. package/src/main/MenuBar.js +26 -22
  9. package/src/main/MenuBar.tsx +41 -37
  10. package/src/main/Modal.d.ts +1 -0
  11. package/src/main/Modal.js +5 -5
  12. package/src/main/Modal.tsx +7 -10
  13. package/src/main/assets/Asset.d.ts +1 -0
  14. package/src/main/assets/Asset.js +5 -1
  15. package/src/main/assets/Asset.tsx +9 -0
  16. package/src/main/inputs/Input.d.ts +0 -1
  17. package/src/main/inputs/Input.js +0 -1
  18. package/src/main/inputs/Input.tsx +0 -1
  19. package/src/main/inputs/Select.d.ts +0 -1
  20. package/src/main/inputs/Select.js +3 -3
  21. package/src/main/inputs/Select.tsx +3 -3
  22. package/src/main/tsconfig.common.json +2 -1
  23. package/src/main/tsconfig.json +1 -0
  24. package/src/sample/App.d.ts +0 -1
  25. package/src/sample/App.js +1 -1
  26. package/src/sample/App.tsx +2 -1
  27. package/src/sample/TestMenuBar.js +24 -4
  28. package/src/sample/TestMenuBar.tsx +40 -10
  29. package/src/scss/components/_modal.scss +41 -30
  30. package/src/scss/elements/_button.scss +1 -3
  31. package/src/scss/elements/_popover.scss +6 -38
  32. package/src/scss/foundation/_mixins.scss +0 -2
  33. package/src/scss/foundation/_typography.scss +0 -4
  34. package/src/scss/library/_information.scss +68 -0
  35. package/{dist/scss/library/input.scss → src/scss/library/_input.scss} +0 -2
  36. package/{dist/scss/library/menubar.scss → src/scss/library/_menubar.scss} +0 -2
  37. package/{dist/scss/library/select.scss → src/scss/library/_select.scss} +0 -4
  38. package/src/scss/style.scss +21 -5
  39. package/dist/assets/Asset.d.ts +0 -14
  40. package/dist/assets/Asset.js +0 -43
  41. package/dist/assets/Asset.tsx +0 -66
  42. package/dist/assets/icons/icon-check-white-sm.svg +0 -3
  43. package/dist/assets/images/icon-arrowdown-graydark.svg +0 -3
  44. package/dist/assets/images/icon-arrowleft-graydark.svg +0 -3
  45. package/dist/assets/images/icon-arrowright-graydark.svg +0 -3
  46. package/dist/assets/images/icon-arrowup-graydark.svg +0 -3
  47. package/dist/assets/images/icon-check-graydark.svg +0 -3
  48. package/dist/cjs/DatetimeFormatter.d.ts +0 -3
  49. package/dist/cjs/DatetimeFormatter.js +0 -386
  50. package/dist/cjs/Information.d.ts +0 -10
  51. package/dist/cjs/Information.js +0 -64
  52. package/dist/cjs/MenuBar.d.ts +0 -25
  53. package/dist/cjs/MenuBar.js +0 -534
  54. package/dist/cjs/Modal.d.ts +0 -32
  55. package/dist/cjs/Modal.js +0 -32
  56. package/dist/cjs/assets/Asset.d.ts +0 -14
  57. package/dist/cjs/assets/Asset.js +0 -28
  58. package/dist/cjs/constants/Constant.d.ts +0 -15
  59. package/dist/cjs/constants/Constant.js +0 -35
  60. package/dist/cjs/index.d.ts +0 -3
  61. package/dist/cjs/index.js +0 -10
  62. package/dist/cjs/inputs/Input.d.ts +0 -26
  63. package/dist/cjs/inputs/Input.js +0 -107
  64. package/dist/cjs/inputs/InputSelectionHandler.d.ts +0 -3
  65. package/dist/cjs/inputs/InputSelectionHandler.js +0 -36
  66. package/dist/cjs/inputs/Select.d.ts +0 -29
  67. package/dist/cjs/inputs/Select.js +0 -403
  68. package/dist/esm/DatetimeFormatter.d.ts +0 -3
  69. package/dist/esm/DatetimeFormatter.js +0 -382
  70. package/dist/esm/Information.d.ts +0 -10
  71. package/dist/esm/Information.js +0 -36
  72. package/dist/esm/MenuBar.d.ts +0 -25
  73. package/dist/esm/MenuBar.js +0 -529
  74. package/dist/esm/Modal.d.ts +0 -32
  75. package/dist/esm/Modal.js +0 -27
  76. package/dist/esm/assets/Asset.d.ts +0 -14
  77. package/dist/esm/assets/Asset.js +0 -25
  78. package/dist/esm/constants/Constant.d.ts +0 -15
  79. package/dist/esm/constants/Constant.js +0 -32
  80. package/dist/esm/index.d.ts +0 -3
  81. package/dist/esm/index.js +0 -3
  82. package/dist/esm/inputs/Input.d.ts +0 -26
  83. package/dist/esm/inputs/Input.js +0 -105
  84. package/dist/esm/inputs/InputSelectionHandler.d.ts +0 -3
  85. package/dist/esm/inputs/InputSelectionHandler.js +0 -31
  86. package/dist/esm/inputs/Select.d.ts +0 -29
  87. package/dist/esm/inputs/Select.js +0 -399
  88. package/dist/scss/components/_index.scss +0 -1
  89. package/dist/scss/components/_modal.scss +0 -55
  90. package/dist/scss/elements/_button.scss +0 -109
  91. package/dist/scss/elements/_index.scss +0 -2
  92. package/dist/scss/elements/_popover.scss +0 -40
  93. package/dist/scss/foundation/_colors.scss +0 -60
  94. package/dist/scss/foundation/_index.scss +0 -5
  95. package/dist/scss/foundation/_mixins.scss +0 -43
  96. package/dist/scss/foundation/_normalize.scss +0 -204
  97. package/dist/scss/foundation/_settings.scss +0 -36
  98. package/dist/scss/foundation/_typography.scss +0 -99
  99. package/dist/scss/library/_index.scss +0 -3
  100. package/dist/scss/style.scss +0 -8
  101. package/src/scss/components/_index.scss +0 -1
  102. package/src/scss/foundation/_index.scss +0 -5
  103. package/src/scss/library/_index.scss +0 -3
  104. package/src/scss/library/input.scss +0 -39
  105. package/src/scss/library/menubar.scss +0 -227
  106. package/src/scss/library/select.scss +0 -262
@@ -1,534 +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
- var jsx_runtime_1 = require("react/jsx-runtime");
27
- /* eslint-disable no-useless-concat */
28
- /* eslint-disable jsx-a11y/anchor-is-valid */
29
- var react_1 = require("react");
30
- require("../scss/style.scss");
31
- require("../scss/library/menubar.scss");
32
- // Imports
33
- var Asset_1 = require("./assets/Asset");
34
- var Constant_1 = require("./constants/Constant");
35
- var Information_1 = __importDefault(require("./Information"));
36
- var InputSelectionHandler_1 = __importDefault(require("./inputs/InputSelectionHandler"));
37
- var DatetimeFormatter_1 = __importDefault(require("./DatetimeFormatter"));
38
- var Select_1 = require("./inputs/Select");
39
- // Package
40
- var react_date_range_1 = require("react-date-range");
41
- var MenuBar = function (_a) {
42
- var config = _a.config, info = _a.info, button = _a.button, getActions = _a.getActions, dropdown = _a.dropdown, search = _a.search, pagination = _a.pagination, pivot = _a.pivot, check = _a.check, toggle = _a.toggle, mainButton = _a.mainButton, buttonFooter = _a.buttonFooter, undoButton = _a.undoButton, customClass = _a.customClass, children = _a.children;
43
- // React Hooks Popover
44
- var _b = (0, react_1.useState)(null), infoPopover = _b[0], setInfoPopover = _b[1];
45
- var _c = (0, react_1.useState)(null), mainButtonPopover = _c[0], setMainButtonPopover = _c[1];
46
- var _d = (0, react_1.useState)(null), dropdownPopover = _d[0], setDropdownPopover = _d[1];
47
- var _e = (0, react_1.useState)(null), paginationSummaryPopover = _e[0], setPaginationSummaryPopover = _e[1];
48
- var _f = (0, react_1.useState)(null), pivotPopover = _f[0], setPivotPopover = _f[1];
49
- var _g = (0, react_1.useState)(null), filterPopover = _g[0], setFilterPopover = _g[1];
50
- var _h = (0, react_1.useState)(""), calendarYear = _h[0], setCalendarYear = _h[1];
51
- var _j = (0, react_1.useState)(null), minMonthIdx = _j[0], setMinMonthIdx = _j[1];
52
- var _k = (0, react_1.useState)(null), maxMonthIdx = _k[0], setMaxMonthIdx = _k[1];
53
- // React Hooks Variables
54
- var _l = (0, react_1.useState)(''), searchTemporaryValue = _l[0], setSearchTemporaryValue = _l[1];
55
- var _m = (0, react_1.useState)(1), goToPage = _m[0], setGoToPage = _m[1];
56
- var _o = (0, react_1.useState)(""), perPageTemporaryValue = _o[0], setPerPageTemporaryValue = _o[1];
57
- var _p = (0, react_1.useState)([]), paginationSummaryFormError = _p[0], setPaginationSummaryFormError = _p[1];
58
- var _q = (0, react_1.useState)(false), loaded = _q[0], setLoaded = _q[1];
59
- var _r = (0, react_1.useState)(0), seconds = _r[0], setSeconds = _r[1];
60
- var _s = (0, react_1.useState)(undoButton && undoButton.show ? true : false), undoShow = _s[0], setUndoShow = _s[1];
61
- var _t = (0, react_1.useState)(false), doneTimer = _t[0], setDoneTimer = _t[1];
62
- (0, react_1.useEffect)(function () {
63
- if (dropdown && dropdown.minMonth) {
64
- var filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
65
- if (filteredMonthList.length > 0) {
66
- minMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
67
- setMinMonthIdx(minMonthIdx);
68
- }
69
- }
70
- if (dropdown && dropdown.maxMonth) {
71
- var filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
72
- if (filteredMonthList.length > 0) {
73
- maxMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
74
- setMaxMonthIdx(maxMonthIdx);
75
- }
76
- }
77
- if (search && search.value && loaded === false) {
78
- setSearchTemporaryValue(search.value);
79
- setLoaded(true);
80
- }
81
- if (undoButton && undoButton.show) {
82
- var buttonWithTimer_1 = undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.filter(function (item) { return (item.hasOwnProperty('timer') && item.timer !== undefined && item.timer.constructor === Number); })) : [];
83
- if (buttonWithTimer_1.length > 0) {
84
- if (undoShow !== undoButton.show) {
85
- if (buttonWithTimer_1[0] && buttonWithTimer_1[0].hasOwnProperty('timer')) {
86
- buttonWithTimer_1[0].timer && setSeconds(buttonWithTimer_1[0].timer);
87
- }
88
- setDoneTimer(false);
89
- setUndoShow(undoButton.show ? true : false);
90
- }
91
- var myInterval_1 = setInterval(function () {
92
- if (seconds > 0) {
93
- setSeconds(seconds - 1);
94
- }
95
- else {
96
- if (!doneTimer) {
97
- clearInterval(myInterval_1);
98
- setDoneTimer(true);
99
- returnValues('button', buttonWithTimer_1[0].action, null);
100
- }
101
- }
102
- }, 1000);
103
- return function () {
104
- clearInterval(myInterval_1);
105
- };
106
- }
107
- }
108
- else {
109
- setUndoShow(false);
110
- }
111
- });
112
- // Belt Configuration Variables
113
- info = info ? (info.constructor === Object && info.infoDetails ? (info) : info.constructor === String ? (info) : Constant_1.INFO_LOADER) : Constant_1.INFO_LOADER;
114
- var dropdownTitle = dropdown && (dropdown.type === 'list' || dropdown.type === 'button') ? (dropdown.title ? dropdown.title : "") : dropdown && dropdown.type === 'date-picker-weekly' ? (dropdown.selection && dropdown.selection.startDate && dropdown.selection.endDate ? (dropdown.selection.startDate + ' to ' + dropdown.selection.endDate) : "") : dropdown && dropdown.type === 'date-picker-monthly' ? dropdown.selection.startDate : "";
115
- /**
116
- * popoverRequestHandler
117
- * hide and show the popover of specific action
118
- * @param {*} e - event of the click item
119
- * @param {*} popover - popover type
120
- */
121
- var popoverRequestHandler = function (e, popover, hide) {
122
- if (hide === void 0) { hide = false; }
123
- switch (popover) {
124
- case 'info':
125
- var currentTarget_1 = e.currentTarget;
126
- if (hide === false && info.constructor === String && info === Constant_1.INFO_LOADER) {
127
- actionRequestHandler(e, 'icon', 'info');
128
- setInfoPopover(e.currentTarget);
129
- setTimeout(function () {
130
- setInfoPopover(null);
131
- setInfoPopover(currentTarget_1);
132
- }, 2000);
133
- }
134
- else {
135
- infoPopover ? setInfoPopover(null) : setInfoPopover(e.currentTarget);
136
- }
137
- break;
138
- case 'dropdown':
139
- if (dropdown.type === 'date-picker-monthly' && !dropdownPopover) {
140
- dropdown.selection && dropdown.selection.startDate ? setCalendarYear((0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'full-year')) : setCalendarYear(new Date());
141
- }
142
- else if (dropdown.type === 'date-picker-cutoff' && !dropdownPopover) {
143
- setCalendarYear(dropdown.currentYear); //need to improve on this one
144
- }
145
- dropdownPopover ? setDropdownPopover(null) : setDropdownPopover(e.currentTarget);
146
- break;
147
- case 'pagination-summary':
148
- if (!Boolean(paginationSummaryPopover)) {
149
- pagination && pagination.page ? setGoToPage(pagination.page) : setGoToPage(1);
150
- setPerPageTemporaryValue(pagination.perPage ? pagination.perPage.toString() : '');
151
- }
152
- paginationSummaryPopover ? setPaginationSummaryPopover(null) : setPaginationSummaryPopover(e.currentTarget);
153
- break;
154
- case 'pivot':
155
- pivotPopover ? setPivotPopover(null) : setPivotPopover(e.currentTarget);
156
- break;
157
- case 'filter':
158
- filterPopover ? setFilterPopover(null) : setFilterPopover(e.currentTarget);
159
- break;
160
- case 'main-button':
161
- if (hide) {
162
- setMainButtonPopover(null);
163
- }
164
- else {
165
- mainButtonPopover ? setMainButtonPopover(null) : setMainButtonPopover(e.currentTarget);
166
- }
167
- break;
168
- default:
169
- break;
170
- }
171
- };
172
- /**
173
- * actionRequestHandler
174
- * manipulate the action and data of each action
175
- * @param {*} e - event
176
- * @param {*} type - action type / can be the action itself
177
- * @param {*} action - it can be action type / data depends on the used actions
178
- */
179
- var actionRequestHandler = function (e, type, action, hidePopover) {
180
- if (hidePopover === void 0) { hidePopover = true; }
181
- if (e.preventDefault) {
182
- e.preventDefault();
183
- }
184
- var data = null;
185
- var addedParam = null;
186
- if (type === 'search') {
187
- data = searchTemporaryValue;
188
- }
189
- else if (type === 'pagination' || type === 'pagination-summary') {
190
- data = pagination;
191
- }
192
- else if (type === 'dropdown' || type === 'pivot' || type === 'main-button' || type === 'button' || type === 'icon' || type === 'check' || type === 'tab' || type === 'toggle') {
193
- data = action;
194
- action = type;
195
- if (dropdown && dropdown.type === 'date-picker-cutoff') {
196
- addedParam = calendarYear;
197
- }
198
- }
199
- else if (type === 'undo-button') {
200
- data = action;
201
- action = type;
202
- }
203
- if (hidePopover) {
204
- popoverRequestHandler(e, type, true);
205
- }
206
- setTimeout(function () {
207
- returnValues(action, data, addedParam);
208
- }, 200);
209
- };
210
- /**
211
- * handleChangeFormValue
212
- * manipulate the inputs temporary values
213
- * @param {*} e - event
214
- * @param {*} type - type of the input that has been changed
215
- */
216
- var handleChangeFormValue = function (e, type) {
217
- switch (type) {
218
- case 'search':
219
- e.target.value ? setSearchTemporaryValue(e.target.value) : setSearchTemporaryValue("");
220
- break;
221
- case 'show-per-page':
222
- setPerPageTemporaryValue(e.target.value.toString());
223
- setGoToPage(1);
224
- if (paginationSummaryFormError.indexOf('perPageTemporaryValue') >= 0 && (e !== "")) {
225
- paginationSummaryFormError = paginationSummaryFormError.filter(function (item) { return item !== 'perPageTemporaryValue'; });
226
- setPaginationSummaryFormError(paginationSummaryFormError);
227
- }
228
- break;
229
- case 'go-to-page':
230
- setGoToPage(e.target.value);
231
- if (paginationSummaryFormError.indexOf('goToPage') >= 0 && (e.currentTarget.value !== "" || e.currentTarget.value > 1)) {
232
- paginationSummaryFormError = paginationSummaryFormError.filter(function (item) { return item !== 'goToPage'; });
233
- setPaginationSummaryFormError(paginationSummaryFormError);
234
- }
235
- break;
236
- case 'advanced-filter':
237
- returnValues(type, e);
238
- break;
239
- default:
240
- break;
241
- }
242
- };
243
- /**
244
- * paginationRequestHandler
245
- * manipulate the paginations value depend on the action
246
- * @param {*} e - event
247
- * @param {*} action - action that the user do
248
- */
249
- var paginationRequestHandler = function (e, action) {
250
- e.preventDefault();
251
- var paginationCopy = __assign({}, pagination);
252
- switch (action) {
253
- case 'check-pagination-required':
254
- var formError = [];
255
- if (goToPage === "" || goToPage < 1) {
256
- formError.push('goToPage');
257
- }
258
- if (perPageTemporaryValue === "") {
259
- formError.push('perPageTemporaryValue');
260
- }
261
- return formError;
262
- case 'submit':
263
- var errorFields = paginationRequestHandler(e, 'check-pagination-required');
264
- if (errorFields.length > 0) {
265
- setPaginationSummaryFormError(errorFields);
266
- }
267
- else {
268
- pagination.perPage = perPageTemporaryValue ? parseInt(perPageTemporaryValue) : pagination.perPage;
269
- pagination.page = goToPage ? ((pagination.perPage * goToPage) > pagination.total ? (Math.floor(pagination.total / pagination.perPage) + 1) : parseInt(goToPage)) : 1;
270
- pagination.counter = (pagination.page * pagination.perPage) > pagination.total ? pagination.total : (pagination.page * pagination.perPage);
271
- // if (paginationCopy.perPage !== pagination.perPage || paginationCopy.page !== pagination.page || paginationCopy.counter !== pagination.counter) {
272
- actionRequestHandler(e, 'pagination-summary', 'pagination');
273
- // }
274
- }
275
- break;
276
- case 'next':
277
- pagination.page = ((pagination.page++) * pagination.perPage) > pagination.total ? (Math.floor(pagination.total / pagination.perPage) + 1) : pagination.page++;
278
- pagination.counter = (pagination.page * pagination.perPage) > pagination.total ? pagination.total : (pagination.page * pagination.perPage);
279
- if (paginationCopy.page !== pagination.page || paginationCopy.counter !== pagination.counter) {
280
- actionRequestHandler(e, 'pagination', 'pagination');
281
- }
282
- break;
283
- case 'prev':
284
- pagination.page = pagination.page > 1 ? pagination.page -= 1 : pagination.page;
285
- pagination.counter = pagination.page * pagination.perPage;
286
- if (paginationCopy.page !== pagination.page || paginationCopy.counter !== pagination.counter) {
287
- actionRequestHandler(e, 'pagination', 'pagination');
288
- }
289
- break;
290
- default:
291
- break;
292
- }
293
- };
294
- /**
295
- * checkboxRequestHandler
296
- * select all / unselect all items
297
- * @param {*} e - event
298
- * @param {*} action - action of the checkbox
299
- */
300
- var checkboxRequestHandler = function (e, action) {
301
- // e.preventDefault();
302
- if (check.disabled !== true) {
303
- if (action === 'all') {
304
- actionRequestHandler(e, 'check', 'all');
305
- }
306
- else {
307
- actionRequestHandler(e, 'check', 'none');
308
- }
309
- }
310
- };
311
- /**
312
- * onDatePickerChange
313
- * change the datepicker value
314
- * @param {*} e - event
315
- * @param {*} type - action type
316
- */
317
- var onDatePickerChange = function (e, type) {
318
- if (dropdown.type === 'date-picker-weekly') {
319
- dropdown.selection.startDate = (0, DatetimeFormatter_1.default)(e, 'start-of-Week');
320
- dropdown.selection.endDate = (0, DatetimeFormatter_1.default)(e, 'end-of-Week');
321
- }
322
- actionRequestHandler(e, type, dropdown.selection);
323
- };
324
- /**
325
- * dateMonthlyPickerHandler
326
- * selection of month on a calendar and changing of year
327
- * @param {*} e - event
328
- * @param {*} action - action type
329
- */
330
- var dateMonthlyPickerHandler = function (e, action, data) {
331
- if (data === void 0) { data = ''; }
332
- var _a = __assign({}, dropdown), maxYear = _a.maxYear, minYear = _a.minYear;
333
- if (action === 'next') {
334
- if (!maxYear || (maxYear && parseInt(maxYear) >= calendarYear + 1)) {
335
- calendarYear += 1;
336
- setCalendarYear(calendarYear);
337
- }
338
- }
339
- else if (action === 'prev') {
340
- if (!minYear || (minYear && parseInt(minYear) <= calendarYear - 1)) {
341
- calendarYear -= 1;
342
- setCalendarYear(calendarYear);
343
- }
344
- }
345
- else if (action === 'month-selection') {
346
- var newDateValue = (0, DatetimeFormatter_1.default)(data + ' ' + calendarYear, 'month-year');
347
- actionRequestHandler(e, 'dropdown', newDateValue);
348
- }
349
- else if (action === 'next-month') {
350
- var standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
351
- var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
352
- // selectedMonthDate = new Date(selectedMonthDate);
353
- var monthIdx = selectedMonthDate.getMonth();
354
- var fullYear = selectedMonthDate.getFullYear();
355
- if (monthIdx + 1 < 12) {
356
- monthIdx = monthIdx + 1;
357
- }
358
- else {
359
- monthIdx = 0;
360
- fullYear = fullYear + 1;
361
- }
362
- if ((!maxYear && !maxMonthIdx) || fullYear < parseInt(maxYear) || (fullYear === parseInt(maxYear) && monthIdx <= parseInt(maxMonthIdx))) {
363
- var newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
364
- actionRequestHandler(e, 'dropdown', newDateValue, false);
365
- }
366
- }
367
- else if (action === 'prev-month') {
368
- var standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
369
- var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
370
- // selectedMonthDate = new Date(selectedMonthDate);
371
- var monthIdx = selectedMonthDate.getMonth();
372
- var fullYear = selectedMonthDate.getFullYear();
373
- if (monthIdx - 1 >= 0) {
374
- monthIdx = monthIdx - 1;
375
- }
376
- else {
377
- monthIdx = 11;
378
- fullYear = fullYear - 1;
379
- }
380
- if ((!minYear && !minMonthIdx) || fullYear > parseInt(minYear) || (fullYear === parseInt(minYear) && monthIdx >= parseInt(minMonthIdx))) {
381
- var newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
382
- actionRequestHandler(e, 'dropdown', newDateValue, false);
383
- }
384
- }
385
- };
386
- var dateCutoffPickerHandler = function (e, label, value) {
387
- var cutOffVal = {
388
- "label": label,
389
- "value": value,
390
- };
391
- actionRequestHandler(e, 'dropdown', cutOffVal);
392
- };
393
- /**
394
- * returnValues
395
- * return manipulated value from beltConfig to the parent component
396
- * @param {*} action - done action on beltConfig
397
- * @param {*} data - manipulated data from the action
398
- */
399
- var returnValues = function (action, data, addedParam) {
400
- if (addedParam === void 0) { addedParam = null; }
401
- return getActions ? getActions(action, data, addedParam) : false;
402
- };
403
- /**
404
- * dateMonthlyPickerIsSelected
405
- * determine if month is selected
406
- * @param {*} month - month value
407
- */
408
- var dateMonthlyPickerIsSelected = function (month) {
409
- var isSelected = false;
410
- if (dropdown && dropdown.selection && dropdown.selection.startDate && calendarYear) {
411
- var monthYear = month + ' ' + calendarYear;
412
- isSelected = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate.toString(), 'month-year') === (0, DatetimeFormatter_1.default)(monthYear, 'month-year') ? true : false;
413
- }
414
- return isSelected;
415
- };
416
- var isDisabledDropdownPagination = function (action) {
417
- var _a = __assign({}, dropdown), maxYear = _a.maxYear, minYear = _a.minYear, selection = _a.selection;
418
- var selectedMonthDate = new Date(selection.startDate);
419
- var monthIdx = selectedMonthDate.getMonth();
420
- var fullYear = selectedMonthDate.getFullYear();
421
- if (action === 'prev') {
422
- if (minYear && minMonthIdx && fullYear === parseInt(minYear) && monthIdx === parseInt(minMonthIdx)) {
423
- return ' is-disabled';
424
- }
425
- else {
426
- return '';
427
- }
428
- }
429
- else if (action === 'next') {
430
- if (maxYear && maxMonthIdx && fullYear === parseInt(maxYear) && monthIdx === parseInt(maxMonthIdx)) {
431
- return ' is-disabled';
432
- }
433
- else {
434
- return '';
435
- }
436
- }
437
- };
438
- var toggleSelectionHandler = function (event, value) {
439
- event.preventDefault();
440
- actionRequestHandler(event, 'toggle', value, false);
441
- };
442
- return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: customClass && customClass.constructor === String ? customClass : 'custom-card' }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-card-belt" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-belt-left" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-beltleft-container" }, { children: [
443
- // Back Icon Configuration
444
- config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("back") >= 0) || (config.iconType === 'back')) ? ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-icon icon-back", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'back'); }, "data-testid": "menubar-back" }, { children: Asset_1.SVG_BACK }))) : null,
445
- // Check Icon Configuration
446
- config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("check") >= 0) || (config.iconType === 'check')) ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon-check", "data-testid": "menubar-checkbox" }, { children: check ? (check.selected === 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (event) { return checkboxRequestHandler(event, 'all'); } }, { children: Constant_1.CHECKBOX.NONE }))) : check.selected > 0 && check.selected < check.total ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (event) { return checkboxRequestHandler(event, 'all'); } }, { children: Constant_1.CHECKBOX.FEW }))) : check.selected === check.total ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (event) { return checkboxRequestHandler(event, 'none'); } }, { children: Constant_1.CHECKBOX.ALL }))) : (0, jsx_runtime_1.jsx)("div", { children: Constant_1.CHECKBOX.NONE })) : (0, jsx_runtime_1.jsx)("div", { children: Constant_1.CHECKBOX.NONE }) }))) : null,
447
- // Standard Icon Configuration
448
- config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("standard") >= 0) || (config.iconType === 'standard')) ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon", "data-testid": "menubar-standard-icon" }, { children: config.icon }))) : null, (0, jsx_runtime_1.jsxs)("div", __assign({ className: "belt-title" }, { children: [
449
- // Title Configuration
450
- check && check.selected && check.selected > 0 && check.selected < check.total ? ((0, jsx_runtime_1.jsx)("h6", { children: "".concat(check.selected, " ").concat(check.selected === 1 ? 'item selected' : 'items selected') })) : check && check.selected && check.selected === check.total ? ((0, jsx_runtime_1.jsx)("h6", { children: "All item(s) selected" })) : config && config.title && (config.title.constructor === String || config.title.constructor === Object) ? ((0, jsx_runtime_1.jsx)("h6", __assign({ className: "config-title", "data-testid": "menubar-title" }, { children: config.title }))) : null,
451
- // Title Information Configuration
452
- config && config.titleDescription ? ((0, jsx_runtime_1.jsx)("p", { children: config.titleDescription })) : null] })),
453
- // Information Configuration
454
- config && config.nativePopover === undefined && config.showInfo && config.showInfo.constructor === Boolean ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: (0, jsx_runtime_1.jsx)("i", { className: "belt-icon" }) })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: (0, jsx_runtime_1.jsx)(Information_1.default, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) : null,
455
- // Additional title on the modal
456
- config && config.addedTitle ? ((0, jsx_runtime_1.jsx)("p", { children: config.addedTitle })) : null] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
457
- return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);
458
- }) })) }))] })) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (mainButton.actions.map(function (btn, idx) {
459
- return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? 'belt-action ' + btn.class : 'belt-action', href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon " }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: btn.label ? btn.label : '' })] }), idx));
460
- })) : null) : null,
461
- // Button Actions Configuration
462
- button && button.show && button.show.constructor === Boolean &&
463
- button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (button.actions.map(function (btn, idx) {
464
- return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : ''), href: "#", onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); }, "data-testid": "menubar-button" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon belt-buttons" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx));
465
- })) : null,
466
- // UndoButton Actions Configuration
467
- undoButton && undoButton.show && !undoButton.isFooter &&
468
- undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
469
- return seconds > 0 || (btn.timer !== undefined) ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' button outline button-undo'), href: "#", "data-testid": "undo-button-".concat(btn.action) }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } }), { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": "undo-button-text" }, { children: btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : '' }))] }), idx)) : null;
470
- })) : null] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-belt-right" }, { children: [
471
- // Dropdown Actions Configuration
472
- dropdown && dropdown.show && dropdown.show.constructor === Boolean ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-dropdown" }, { children: [dropdown.type === 'list' ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-add" }, { children: dropdown.icon ? dropdown.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: dropdownTitle })] }))) : dropdown.type === 'date-picker-weekly' ? ((0, jsx_runtime_1.jsxs)("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: dropdownTitle }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-arrowdown" }, { children: Asset_1.SVG_ARROWDOWN }))] }))) : dropdown.type === 'date-picker-monthly' ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: dropdownTitle }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-arrowdown" }, { children: Asset_1.SVG_ARROWDOWN }))] })), dropdown.showPagination ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({ className: 'belt-prev' + isDisabledDropdownPagination('prev'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev-month'); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWLEFT })) })), (0, jsx_runtime_1.jsx)("a", __assign({ className: 'belt-next' + isDisabledDropdownPagination('next'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'next-month'); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWRIGHT })) }))] })) : null] })) : dropdown.type === 'date-picker-cutoff' ? (((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: (0, jsx_runtime_1.jsx)("span", { children: dropdown.cutoffValue && dropdown.cutoffValue.label ? dropdown.cutoffValue.label : '' }) })))) : dropdown.type === 'button' ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return actionRequestHandler(event, 'button', dropdown.action); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: dropdown.icon ? dropdown.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: dropdownTitle })] }))) : ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: (0, jsx_runtime_1.jsx)("span", { children: dropdownTitle }) }))), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "dropdownPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(dropdownPopover), onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: dropdown.type === 'list' ? (dropdown.actions && dropdown.actions.constructor === Array && dropdown.actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: dropdown.actions.map(function (drpdwn, idx) {
473
- return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'dropdown', drpdwn.value); } }, { children: drpdwn.label }), idx);
474
- }) }))) : null) : dropdown.type === 'date-picker-weekly' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "popover" }, { children: (0, jsx_runtime_1.jsx)(react_date_range_1.Calendar, { className: "dateRangePickerInput", onChange: function (event) { return onDatePickerChange(event, 'dropdown'); } }) }))) : dropdown.type === 'date-picker-monthly' ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover em-popover-months" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "list-years" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: Asset_1.SVG_ARROWLEFT })), (0, jsx_runtime_1.jsx)("div", { children: calendarYear }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: Asset_1.SVG_ARROWRIGHT }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "list-months" }, { children: Constant_1.MONTH_LIST.map(function (action, idx) {
475
- return dropdown.minYear && dropdown.minYear.toString() === calendarYear.toString() && minMonthIdx && minMonthIdx > idx ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: 'is-disabled', onClick: function (event) { event.preventDefault(); } }, { children: action.label }), idx)) : dropdown.maxYear && dropdown.maxYear.toString() === calendarYear.toString() && maxMonthIdx && maxMonthIdx < idx ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: 'is-disabled', onClick: function (event) { event.preventDefault(); } }, { children: action.label }), idx)) : ((0, jsx_runtime_1.jsx)("a", __assign({ className: dateMonthlyPickerIsSelected(action.label) ? 'is-selected' : '', href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'month-selection', action.value); } }, { children: action.label }), idx));
476
- }) }))] }))) : dropdown.type === 'date-picker-cutoff' ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover em-popover-months" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "list-years" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowleft-white.svg", alt: "" }) })), (0, jsx_runtime_1.jsx)("div", { children: calendarYear }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowright-white.svg", alt: "" }) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "list-months" }, { children: dropdown.cutoffDates !== null && dropdown.cutoffDates.length > 0 ? (dropdown.cutoffDates.map(function (action, idx) {
477
- var classSelect;
478
- if (JSON.stringify(action.label) === JSON.stringify(dropdown.cutoffValue.label)) {
479
- if (dropdown.currentYear === calendarYear) {
480
- classSelect = 'is-selected';
481
- }
482
- else {
483
- classSelect = '';
484
- }
485
- // classSelect = 'is-selected';
486
- }
487
- else {
488
- classSelect = '';
489
- }
490
- return (0, jsx_runtime_1.jsx)("a", __assign({ className: classSelect, href: "#", onClick: function (event) { return dateCutoffPickerHandler(event, action.label, action.value); } }, { children: action.label }), idx);
491
- })) : null }))] }))) : null }))] })) })) : null, pagination && pagination.show && pagination.show.constructor === Boolean ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!pagination.hideSummary || pagination.hideSummary === false ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-dropdown" }, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ className: "pagination-summary", href: "#", id: "pagination", onClick: function (event) { return popoverRequestHandler(event, 'pagination-summary'); }, "data-testid": "menubar-pagination" }, { children: [(pagination.counter > 0 ? (((pagination.page - 1) * pagination.perPage) + 1) : 0)
492
- + ' - ' +
493
- (pagination.page * pagination.perPage > pagination.total ?
494
- (pagination.total ? pagination.total : pagination.counter) :
495
- pagination.page * pagination.perPage), " of ", pagination.total ? pagination.total : 0] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "paginationSummaryPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(paginationSummaryPopover), onClick: function (event) { return popoverRequestHandler(event, 'pagination-summary'); } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover em-popover-input" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: 'e-field field field-input' + (paginationSummaryFormError.indexOf('perPageTemporaryValue') >= 0 ? ' is-invalid' : '') }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ className: 'e-input-label' }, { children: "SHOW" })), (0, jsx_runtime_1.jsx)(InputSelectionHandler_1.default, { config: {
496
- id: 'paginationPerPage',
497
- type: 'select',
498
- placeholder: '-',
499
- value: perPageTemporaryValue,
500
- options: Constant_1.PAGE_OPTION
501
- }, onChanged: function (event) { return handleChangeFormValue(event, 'show-per-page'); } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: 'e-field field field-input' + (paginationSummaryFormError.indexOf('goToPage') >= 0 ? ' is-invalid' : '') }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ className: 'e-input-label' }, { children: "GO TO PAGE" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "e-input" }, { children: (0, jsx_runtime_1.jsx)(InputSelectionHandler_1.default, { config: {
502
- id: 'goToPage',
503
- type: 'number',
504
- value: goToPage,
505
- placeholder: '-',
506
- maxLength: 5,
507
- min: '1',
508
- }, onChanged: function (event) { return handleChangeFormValue(event, 'go-to-page'); } }) }))] })), (0, jsx_runtime_1.jsx)("button", __assign({ className: "button-check", onClick: function (event) { return paginationRequestHandler(event, 'submit'); } }, { children: Asset_1.SVG_CHECK }))] })) }))] })) })) : null, (0, jsx_runtime_1.jsx)("a", __assign({ className: (pagination.page * pagination.perPage) > pagination.perPage ? 'belt-prev' : 'belt-prev is-disabled', href: "#" }, (((pagination.page * pagination.perPage) > pagination.perPage) ? { onClick: function (event) { return paginationRequestHandler(event, 'prev'); } } : { onClick: function (event) { event.preventDefault(); } }), { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWLEFT })) })), (0, jsx_runtime_1.jsx)("a", __assign({ className: pagination.total <= (pagination.page * pagination.perPage) ? 'belt-next is-disabled' : 'belt-next', href: "#" }, ((pagination.total <= (pagination.page * pagination.perPage)) ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return paginationRequestHandler(event, 'next'); } }), { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWRIGHT })) }))] })) : null,
509
- // Pivot Configuration
510
- pivot && pivot.show ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-dropdown" }, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ id: "months", className: "belt-dropdown ", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'pivot'); }, "data-testid": "menubar-pivot" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: pivot.selected && pivot.actions &&
511
- pivot.actions.constructor === Array && pivot.actions.length > 0 ? (pivot.actions.filter(function (item) { return (item.value === pivot.selected); }).length > 0 ? (pivot.actions.filter(function (item) { return (item.value === pivot.selected); })[0].label) : 'None') : 'None' }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-arrowdown" }, { children: Asset_1.SVG_ARROWDOWN }))] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "pivotPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(pivotPopover), onClick: function (event) { return popoverRequestHandler(event, 'pivot'); } }, { children: pivot.actions && pivot.actions.constructor === Array && pivot.actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: pivot.actions.map(function (pvt, idx) {
512
- return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'pivot', pvt.value); } }, { children: pvt.label }), idx);
513
- }) }))) : null }))] })) })) : null,
514
- // Close Icon Configuration
515
- config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("close") >= 0) || (config.iconType === 'close')) ? ((0, jsx_runtime_1.jsx)("a", __assign({ className: "modal-close", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'close'); }, "date-testid": "menubar-close" }, { children: Asset_1.SVG_CLOSE_GRAY }))) : null, toggle && toggle.show && toggle.buttons && toggle.buttons.constructor === Array ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-toggle" }, { children: toggle.buttons.map(function (item, idx) { return ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-icon icon-calendar " + (item.value === toggle.value ? ' is-active' : ''), href: "#", onClick: function (event) { return toggleSelectionHandler(event, item.value); } }, { children: item.value === toggle.value ? item.selectedIconDisplay : item.icon }), 'toggle-' + idx)); }) })) })) : null] }))] })),
516
- // Search Configuration
517
- search && search.show && search.show.constructor === Boolean ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "field em-card-search" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "e-input" }, { children: (0, jsx_runtime_1.jsx)(InputSelectionHandler_1.default, { config: {
518
- id: 'search',
519
- type: 'text',
520
- placeholder: search.placeholder ? search.placeholder : 'Search',
521
- maxLength: 30,
522
- readOnly: false,
523
- disabled: false,
524
- value: searchTemporaryValue ? searchTemporaryValue : ''
525
- }, onChanged: function (event) { return handleChangeFormValue(event, 'search'); }, keyPressed: function (event) { return actionRequestHandler(event, 'search', 'search'); } }) })) }))) : null, children, (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-card-footer" }, { children: [buttonFooter && buttonFooter.show && buttonFooter.actions.length > 0 &&
526
- (0, jsx_runtime_1.jsx)("div", __assign({ className: buttonFooter.className }, { children: buttonFooter.actions.map(function (btn, idx) { return (btn.show &&
527
- (0, jsx_runtime_1.jsxs)("a", __assign({ className: 'button ' + btn.className, href: "#" }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); } }), { "data-testid": btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx)); }) })),
528
- // UndoButton Actions Configuration
529
- undoButton && undoButton.show && undoButton.isFooter &&
530
- undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
531
- return seconds > 0 || (btn.timer !== undefined) ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'button ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : ''), href: "#", "data-testid": "undo-button-".concat(btn.action) }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } }), { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": "undo-button-text" }, { children: btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : '' }))] }), idx)) : null;
532
- })) : null] }))] })));
533
- };
534
- exports.default = MenuBar;
@@ -1,32 +0,0 @@
1
- import React from "react";
2
- interface IModalProps {
3
- id?: string;
4
- show: boolean;
5
- hideMenuBar?: boolean;
6
- config: {
7
- title: string;
8
- icon: any;
9
- showInfo: boolean;
10
- iconType: Array<string>;
11
- modalSize: string;
12
- };
13
- getActions: any;
14
- children?: any;
15
- button?: {
16
- show: boolean;
17
- actions?: Array<object>;
18
- };
19
- dropdown?: any;
20
- search?: any;
21
- pagination?: any;
22
- pivot?: any;
23
- check?: any;
24
- toggle?: any;
25
- mainButton?: any;
26
- buttonFooter?: any;
27
- undoButton?: any;
28
- info?: any;
29
- customClass?: string;
30
- }
31
- declare const Modal: React.FunctionComponent<IModalProps>;
32
- export default Modal;
package/dist/cjs/Modal.js DELETED
@@ -1,32 +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 __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- var jsx_runtime_1 = require("react/jsx-runtime");
18
- var react_dom_1 = __importDefault(require("react-dom"));
19
- var MenuBar_1 = __importDefault(require("./MenuBar"));
20
- var Modal = function (_a) {
21
- var id = _a.id, show = _a.show, hideMenuBar = _a.hideMenuBar, config = _a.config, getActions = _a.getActions, children = _a.children, button = _a.button, dropdown = _a.dropdown, search = _a.search, pagination = _a.pagination, pivot = _a.pivot, check = _a.check, toggle = _a.toggle, undoButton = _a.undoButton, mainButton = _a.mainButton, buttonFooter = _a.buttonFooter, info = _a.info, customClass = _a.customClass;
22
- var sendActions = function (actions, data) {
23
- returnValues(actions, data);
24
- };
25
- var returnValues = function (action, data, addedParam) {
26
- if (addedParam === void 0) { addedParam = null; }
27
- return getActions ? getActions(action, data, addedParam) : false;
28
- };
29
- console.log(hideMenuBar, 'hideMenuBar');
30
- return (show ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", __assign({ className: "e-modal" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "e-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? ((0, jsx_runtime_1.jsx)(MenuBar_1.default, __assign({ config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "card-content" }, { children: children })) }))) : (0, jsx_runtime_1.jsx)("div", __assign({ className: "card-content" }, { children: children })) })) })) })), document.getElementById('root')) : null);
31
- };
32
- exports.default = Modal;