@cashub/ui 0.5.0 → 0.6.1
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/Tab/TabList.js +1 -1
- package/Tab/TabPanel.js +3 -3
- package/animate/Collapse.js +1 -1
- package/animate/NumberCounter.js +1 -1
- package/backdrop/index.js +31 -0
- package/badge/BadgeFill.js +3 -3
- package/billing/BarChart.js +3 -3
- package/billing/Grid.js +10 -10
- package/breadcrumb/Breadcrumb.js +11 -6
- package/button/IconButton.js +1 -1
- package/chart/BarChart.js +4 -4
- package/chart/DoughnutChart.js +1 -1
- package/chart/LineChart.js +6 -6
- package/chart/SingleBarChart.js +2 -2
- package/cropper/Cropper.js +1 -1
- package/datetimePicker/Accordion.js +13 -13
- package/datetimePicker/CustomTimeInput.js +9 -9
- package/datetimePicker/DatePicker.js +24 -12
- package/datetimePicker/DatePickerV2.js +95 -71
- package/datetimePicker/DatetimePicker.js +6 -6
- package/datetimePicker/DatetimePickerV2.js +94 -54
- package/datetimePicker/TimePicker.js +15 -15
- package/datetimePicker/accordion/Month.js +20 -18
- package/datetimePicker/accordion/Year.js +7 -7
- package/datetimePicker/hooks/useChangeNumber.js +1 -1
- package/datetimePicker/hooks/useDecrease.js +1 -1
- package/datetimePicker/hooks/useIncrease.js +1 -1
- package/datetimePicker/utils/GMTDate.js +23 -0
- package/divider/Divider.js +4 -1
- package/dropdown/DropdownContent.js +1 -1
- package/dropdown/DropdownItem.js +2 -2
- package/dropzone/FileDropzone.js +24 -24
- package/dropzone/ImageDropzone.js +33 -33
- package/form/Label.js +1 -1
- package/form/Searchbox.js +4 -4
- package/geolocation/MapInteractor.js +4 -4
- package/heading/Heading1.js +2 -2
- package/heading/Heading2.js +3 -3
- package/heading/Heading3.js +10 -7
- package/icon/IconFigure.js +2 -2
- package/iconbox/ApplicationIconBox.js +8 -8
- package/iconbox/IconBoxFigure.js +6 -6
- package/iconbox/IconBoxImage.js +2 -2
- package/iconbox/IconBoxV2.js +4 -4
- package/image/UploadImage.js +2 -2
- package/index.js +13 -0
- package/jsoneditor/JsonEditor.js +1 -1
- package/layout/Backdrop.js +1 -1
- package/layout/MenuIcon.js +1 -1
- package/link/LinkSpan.js +4 -4
- package/map/LeafletMap.js +4 -4
- package/modal/StateModal.js +2 -2
- package/modal/TitleModal.js +4 -4
- package/package.json +1 -1
- package/paginate/Paginate.js +1 -1
- package/popover/Popover.js +3 -3
- package/ribbon/Ribbon.js +1 -1
- package/section/Section.js +27 -24
- package/section/SectionBody.js +1 -1
- package/section/SectionHeader.js +3 -3
- package/select/SearchBox.js +2 -2
- package/select/Select.js +59 -54
- package/table/Logo.js +1 -1
- package/table/PermissionTable.js +5 -5
- package/table/Table.js +31 -31
- package/table/TableHeadCell.js +3 -3
- package/table/hooks/useLimitChange.js +3 -3
- package/table/hooks/usePageChange.js +3 -3
- package/table/hooks/useSortChange.js +1 -1
- package/text/Paragraph.js +8 -5
- package/timeline/Timeline.js +4 -4
- package/toast/CustomToastContainer.js +1 -1
- package/tooltip/Tooltip.js +7 -7
- package/utils/array/generateRange.js +2 -2
- package/utils/chart/customTooltip.js +18 -18
- package/utils/chart/padEmptyChartBar.js +8 -8
- package/utils/dataURLtoFile.js +23 -6
- package/utils/format/datetimeFormat.js +7 -8
- package/utils/format/formatDate.js +7 -7
- package/utils/format/formatSize.js +1 -1
- package/utils/getBase64.js +2 -5
- package/utils/hooks/useCustomPopper.js +3 -4
- package/utils/image/resize.js +7 -7
- package/utils/react/setRef.js +1 -1
- package/wizard/Wizard.js +5 -12
- package/module/geolocation/api.js +0 -51
- package/module/message/index.js +0 -59
- package/services/api/index.js +0 -73
package/select/Select.js
CHANGED
|
@@ -225,16 +225,15 @@ var Select = function Select(_ref) {
|
|
|
225
225
|
|
|
226
226
|
return nextItem;
|
|
227
227
|
}, [dropdownElement]);
|
|
228
|
-
var handleOnSelect = (0, _react.useCallback)(function (
|
|
229
|
-
|
|
230
|
-
if (disabled === true) return;
|
|
231
|
-
|
|
228
|
+
var handleOnSelect = (0, _react.useCallback)(function (event, value) {
|
|
229
|
+
event.stopPropagation();
|
|
230
|
+
if (disabled === true) return;
|
|
232
231
|
onSelect(value);
|
|
233
232
|
setSearch('');
|
|
234
233
|
setDisplay(false);
|
|
235
234
|
}, [disabled, onSelect]);
|
|
236
|
-
var handleOnDeselect = (0, _react.useCallback)(function (
|
|
237
|
-
|
|
235
|
+
var handleOnDeselect = (0, _react.useCallback)(function (event, value) {
|
|
236
|
+
event.stopPropagation();
|
|
238
237
|
if (disabled === true) return;
|
|
239
238
|
onDeselect(value);
|
|
240
239
|
}, [disabled, onDeselect]); // list all selected option
|
|
@@ -245,19 +244,19 @@ var Select = function Select(_ref) {
|
|
|
245
244
|
return selectedOptions.map(function (value) {
|
|
246
245
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
|
|
247
246
|
content: value.text,
|
|
248
|
-
onClick: function onClick(
|
|
249
|
-
return handleOnDeselect(
|
|
247
|
+
onClick: function onClick(event) {
|
|
248
|
+
return handleOnDeselect(event, value.id);
|
|
250
249
|
}
|
|
251
250
|
}, value.id);
|
|
252
251
|
});
|
|
253
|
-
} else {
|
|
254
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedSingle.default, {
|
|
255
|
-
children: selectedOptions[0].text
|
|
256
|
-
});
|
|
257
252
|
}
|
|
258
|
-
|
|
259
|
-
return
|
|
253
|
+
|
|
254
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedSingle.default, {
|
|
255
|
+
children: selectedOptions[0].text
|
|
256
|
+
});
|
|
260
257
|
}
|
|
258
|
+
|
|
259
|
+
return placeholder;
|
|
261
260
|
}, [placeholder, handleOnDeselect, multiple, selectedOptions]);
|
|
262
261
|
var optionItem = (0, _react.useMemo)(function () {
|
|
263
262
|
if (optionList.length <= 0) return null;
|
|
@@ -274,8 +273,8 @@ var Select = function Select(_ref) {
|
|
|
274
273
|
role: "option",
|
|
275
274
|
tabIndex: "0",
|
|
276
275
|
id: option.id,
|
|
277
|
-
onClick: function onClick(
|
|
278
|
-
return handleOnSelect(
|
|
276
|
+
onClick: function onClick(event) {
|
|
277
|
+
return handleOnSelect(event, option.id);
|
|
279
278
|
},
|
|
280
279
|
focus: focusedOption && focusedOption.id === option.id.toString(),
|
|
281
280
|
selected: option.selected,
|
|
@@ -290,8 +289,8 @@ var Select = function Select(_ref) {
|
|
|
290
289
|
role: "option",
|
|
291
290
|
tabIndex: "0",
|
|
292
291
|
id: option.id,
|
|
293
|
-
onClick: function onClick(
|
|
294
|
-
return handleOnSelect(
|
|
292
|
+
onClick: function onClick(event) {
|
|
293
|
+
return handleOnSelect(event, option.id);
|
|
295
294
|
},
|
|
296
295
|
focus: focusedOption && focusedOption.id === option.id.toString(),
|
|
297
296
|
selected: option.selected,
|
|
@@ -336,40 +335,46 @@ var Select = function Select(_ref) {
|
|
|
336
335
|
break;
|
|
337
336
|
|
|
338
337
|
case _keycode.default.UP:
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
338
|
+
{
|
|
339
|
+
if (!focusedOption) {
|
|
340
|
+
return;
|
|
341
|
+
}
|
|
342
342
|
|
|
343
|
-
|
|
343
|
+
var previousItem = findPreviousItem(focusedOption);
|
|
344
344
|
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
345
|
+
if (previousItem) {
|
|
346
|
+
handleFocusItem(previousItem);
|
|
347
|
+
}
|
|
348
348
|
|
|
349
|
-
|
|
349
|
+
break;
|
|
350
|
+
}
|
|
350
351
|
|
|
351
352
|
case _keycode.default.DOWN:
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
353
|
+
{
|
|
354
|
+
if (!focusedOption) {
|
|
355
|
+
return;
|
|
356
|
+
}
|
|
355
357
|
|
|
356
|
-
|
|
358
|
+
var nextItem = findNextItem(focusedOption);
|
|
357
359
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
360
|
+
if (nextItem) {
|
|
361
|
+
handleFocusItem(nextItem);
|
|
362
|
+
}
|
|
361
363
|
|
|
362
|
-
|
|
364
|
+
break;
|
|
365
|
+
}
|
|
363
366
|
|
|
364
367
|
case _keycode.default.END:
|
|
365
|
-
|
|
366
|
-
|
|
368
|
+
{
|
|
369
|
+
event.preventDefault();
|
|
370
|
+
var itemList = dropdownElement.querySelectorAll('[role="option"]');
|
|
367
371
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
372
|
+
if (itemList.length) {
|
|
373
|
+
handleFocusItem(itemList[itemList.length - 1]);
|
|
374
|
+
}
|
|
371
375
|
|
|
372
|
-
|
|
376
|
+
break;
|
|
377
|
+
}
|
|
373
378
|
|
|
374
379
|
case _keycode.default.HOME:
|
|
375
380
|
event.preventDefault();
|
|
@@ -400,8 +405,8 @@ var Select = function Select(_ref) {
|
|
|
400
405
|
}; // handle search keyword change
|
|
401
406
|
|
|
402
407
|
|
|
403
|
-
var handleSearchChange = function handleSearchChange(
|
|
404
|
-
setSearch(
|
|
408
|
+
var handleSearchChange = function handleSearchChange(event) {
|
|
409
|
+
setSearch(event.target.value);
|
|
405
410
|
}; // determine selected option(s)
|
|
406
411
|
|
|
407
412
|
|
|
@@ -489,19 +494,19 @@ var Select = function Select(_ref) {
|
|
|
489
494
|
});
|
|
490
495
|
})
|
|
491
496
|
});
|
|
492
|
-
}
|
|
493
|
-
var _selected = false;
|
|
497
|
+
}
|
|
494
498
|
|
|
495
|
-
|
|
496
|
-
_selected = true;
|
|
497
|
-
} else if (parsedSelected === option.id.toString()) {
|
|
498
|
-
_selected = true;
|
|
499
|
-
}
|
|
499
|
+
var selected = false;
|
|
500
500
|
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
501
|
+
if (multiple && parsedSelected.includes(option.id.toString())) {
|
|
502
|
+
selected = true;
|
|
503
|
+
} else if (parsedSelected === option.id.toString()) {
|
|
504
|
+
selected = true;
|
|
504
505
|
}
|
|
506
|
+
|
|
507
|
+
return _objectSpread(_objectSpread({}, option), {}, {
|
|
508
|
+
selected: selected
|
|
509
|
+
});
|
|
505
510
|
}));
|
|
506
511
|
}, [filteredOptions, multiple, parsedSelected]); // filter options on search keyword changed
|
|
507
512
|
|
|
@@ -589,7 +594,7 @@ var Select = function Select(_ref) {
|
|
|
589
594
|
});
|
|
590
595
|
};
|
|
591
596
|
|
|
592
|
-
var Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n min-height: 36px;\n min-width: 160px;\n cursor: pointer;\n position: relative;\n background: transparent;\n color: var(--color-white);\n font-size: var(--font-body1);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius-l);\n padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n &:focus {\n ", ";\n }\n\n ", "\n\n ", "
|
|
597
|
+
var Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n min-height: 36px;\n min-width: 160px;\n cursor: pointer;\n position: relative;\n background: transparent;\n color: var(--color-white);\n font-size: var(--font-body1);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius-l);\n padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n &:focus {\n ", ";\n }\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref2) {
|
|
593
598
|
var disabled = _ref2.disabled;
|
|
594
599
|
return !disabled && "\n border-color: var(--color-primary);\n outline: none;\n ";
|
|
595
600
|
}, function (_ref3) {
|
|
@@ -597,7 +602,7 @@ var Combobox = _styledComponents.default.div(_templateObject || (_templateObject
|
|
|
597
602
|
return $display && "\n border-color: var(--color-primary);\n outline: none;\n ";
|
|
598
603
|
}, function (_ref4) {
|
|
599
604
|
var disabled = _ref4.disabled;
|
|
600
|
-
return disabled &&
|
|
605
|
+
return disabled && 'cursor: not-allowed;opacity: 0.5;';
|
|
601
606
|
}, function (_ref5) {
|
|
602
607
|
var fullWidth = _ref5.fullWidth;
|
|
603
608
|
return fullWidth ? 'width: 100%' : 'max-width: 320px';
|
package/table/Logo.js
CHANGED
|
@@ -33,7 +33,7 @@ var Logo = function Logo(_ref) {
|
|
|
33
33
|
|
|
34
34
|
var Figure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 32px;\n height: 32px;\n border-radius: ", ";\n overflow: hidden;\n"])), function (_ref2) {
|
|
35
35
|
var round = _ref2.round;
|
|
36
|
-
return round ?
|
|
36
|
+
return round ? 'var(--border-radius-round)' : 'var(--border-radius-s)';
|
|
37
37
|
});
|
|
38
38
|
|
|
39
39
|
var _default = Logo;
|
package/table/PermissionTable.js
CHANGED
|
@@ -17,21 +17,21 @@ var PermissionTable = _styledComponents.default.table(_templateObject || (_templ
|
|
|
17
17
|
|
|
18
18
|
var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n font-weight: var(--font-bold);\n\n ", "\n ", "\n"])), function (_ref) {
|
|
19
19
|
var clickable = _ref.clickable;
|
|
20
|
-
return clickable &&
|
|
20
|
+
return clickable && 'cursor: pointer;';
|
|
21
21
|
}, function (_ref2) {
|
|
22
22
|
var alignCenter = _ref2.alignCenter;
|
|
23
|
-
return alignCenter &&
|
|
23
|
+
return alignCenter && 'text-align: center;';
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n\n &:nth-child(even) {\n background: var(--color-background1);\n }\n\n ", "\n ", "\n ", "\n"])), function (_ref3) {
|
|
27
27
|
var clickable = _ref3.clickable;
|
|
28
|
-
return clickable &&
|
|
28
|
+
return clickable && 'cursor: pointer;';
|
|
29
29
|
}, function (_ref4) {
|
|
30
30
|
var alignCenter = _ref4.alignCenter;
|
|
31
|
-
return alignCenter &&
|
|
31
|
+
return alignCenter && 'text-align: center;';
|
|
32
32
|
}, function (_ref5) {
|
|
33
33
|
var bold = _ref5.bold;
|
|
34
|
-
return bold &&
|
|
34
|
+
return bold && 'font-weight: var(--font-bold);';
|
|
35
35
|
});
|
|
36
36
|
|
|
37
37
|
var _default = Object.assign(PermissionTable, {
|
package/table/Table.js
CHANGED
|
@@ -96,8 +96,8 @@ var Table = function Table(_ref) {
|
|
|
96
96
|
|
|
97
97
|
var texts = (0, _react.useMemo)(function () {
|
|
98
98
|
var defaultTexts = {
|
|
99
|
-
info:
|
|
100
|
-
empty:
|
|
99
|
+
info: 'Showing _START_ to _END_ of _TOTAL_ entries',
|
|
100
|
+
empty: 'No data available in table'
|
|
101
101
|
};
|
|
102
102
|
return _objectSpread(_objectSpread({}, defaultTexts), translation);
|
|
103
103
|
}, [translation]);
|
|
@@ -106,28 +106,28 @@ var Table = function Table(_ref) {
|
|
|
106
106
|
onSortChange(columnName);
|
|
107
107
|
}
|
|
108
108
|
}, [onSortChange]);
|
|
109
|
-
var handleRowClick = (0, _react.useCallback)(function (
|
|
109
|
+
var handleRowClick = (0, _react.useCallback)(function (event, rowData) {
|
|
110
110
|
if (onRowClick) {
|
|
111
|
-
onRowClick(
|
|
111
|
+
onRowClick(event, rowData);
|
|
112
112
|
}
|
|
113
113
|
}, [onRowClick]);
|
|
114
|
-
var showFullValue = (0, _react.useCallback)(function (
|
|
115
|
-
var id =
|
|
114
|
+
var showFullValue = (0, _react.useCallback)(function (event) {
|
|
115
|
+
var id = event.target.id;
|
|
116
116
|
|
|
117
117
|
if (!id) {
|
|
118
|
-
id =
|
|
119
|
-
|
|
118
|
+
id = event.currentTarget.id;
|
|
119
|
+
event.target.id = id;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
var containerLength =
|
|
123
|
-
var textLength =
|
|
122
|
+
var containerLength = event.target.offsetWidth;
|
|
123
|
+
var textLength = event.target.scrollWidth;
|
|
124
124
|
|
|
125
125
|
if (textLength > containerLength) {
|
|
126
|
-
|
|
126
|
+
event.stopPropagation();
|
|
127
127
|
(0, _Popover.default)({
|
|
128
|
-
target: e.target,
|
|
129
|
-
content: e.target.innerText,
|
|
130
128
|
id: id,
|
|
129
|
+
target: event.target,
|
|
130
|
+
content: event.target.innerText,
|
|
131
131
|
boundary: tableRef.current
|
|
132
132
|
});
|
|
133
133
|
}
|
|
@@ -141,17 +141,17 @@ var Table = function Table(_ref) {
|
|
|
141
141
|
var sortColumnIndex = sortColumn.indexOf(fieldName);
|
|
142
142
|
|
|
143
143
|
if (sortColumnIndex !== -1) {
|
|
144
|
-
if (sortType[sortColumnIndex] ===
|
|
144
|
+
if (sortType[sortColumnIndex] === 'asc') {
|
|
145
145
|
isActiveAsc = true;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
if (sortType[sortColumnIndex] ===
|
|
148
|
+
if (sortType[sortColumnIndex] === 'desc') {
|
|
149
149
|
isActiveDesc = true;
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
|
-
} else if (fieldName === sortColumn && sortType ===
|
|
152
|
+
} else if (fieldName === sortColumn && sortType === 'asc') {
|
|
153
153
|
isActiveAsc = true;
|
|
154
|
-
} else if (fieldName === sortColumn && sortType ===
|
|
154
|
+
} else if (fieldName === sortColumn && sortType === 'desc') {
|
|
155
155
|
isActiveDesc = true;
|
|
156
156
|
}
|
|
157
157
|
|
|
@@ -215,11 +215,11 @@ var Table = function Table(_ref) {
|
|
|
215
215
|
var key = rowIndex + columnIndex.toString(); // 如果有matcher,比對當前 column 的 fieldName 是不是等於 matcher
|
|
216
216
|
|
|
217
217
|
if (matcher && fieldName === matcher) {
|
|
218
|
-
if (type ===
|
|
218
|
+
if (type === 'single' && selected === row[fieldName]) {
|
|
219
219
|
active = true;
|
|
220
220
|
}
|
|
221
221
|
|
|
222
|
-
if (type ===
|
|
222
|
+
if (type === 'multiple' && selected.includes(row[fieldName])) {
|
|
223
223
|
active = true;
|
|
224
224
|
}
|
|
225
225
|
}
|
|
@@ -253,8 +253,8 @@ var Table = function Table(_ref) {
|
|
|
253
253
|
active: active,
|
|
254
254
|
primary: rowConfig.primary,
|
|
255
255
|
backgroundReverse: backgroundReverse,
|
|
256
|
-
onClick: function onClick(
|
|
257
|
-
handleRowClick(
|
|
256
|
+
onClick: function onClick(event) {
|
|
257
|
+
handleRowClick(event, row);
|
|
258
258
|
},
|
|
259
259
|
children: tds
|
|
260
260
|
}, rowIndex);
|
|
@@ -301,7 +301,7 @@ var Table = function Table(_ref) {
|
|
|
301
301
|
})]
|
|
302
302
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableFooter.default, {
|
|
303
303
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooterInfo.default, {
|
|
304
|
-
children: texts.info.replace(
|
|
304
|
+
children: texts.info.replace('_START_', start).replace('_END_', end).replace('_TOTAL_', total)
|
|
305
305
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableFooterPager.default, {
|
|
306
306
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Paginate.default, {
|
|
307
307
|
currentPage: currentPage,
|
|
@@ -314,19 +314,19 @@ var Table = function Table(_ref) {
|
|
|
314
314
|
allowSearch: false,
|
|
315
315
|
options: [{
|
|
316
316
|
id: 10,
|
|
317
|
-
text:
|
|
317
|
+
text: '10'
|
|
318
318
|
}, {
|
|
319
319
|
id: 20,
|
|
320
|
-
text:
|
|
320
|
+
text: '20'
|
|
321
321
|
}, {
|
|
322
322
|
id: 30,
|
|
323
|
-
text:
|
|
323
|
+
text: '30'
|
|
324
324
|
}, {
|
|
325
325
|
id: 40,
|
|
326
|
-
text:
|
|
326
|
+
text: '40'
|
|
327
327
|
}, {
|
|
328
328
|
id: 50,
|
|
329
|
-
text:
|
|
329
|
+
text: '50'
|
|
330
330
|
}],
|
|
331
331
|
selected: limit,
|
|
332
332
|
onSelect: onLimitChange
|
|
@@ -346,7 +346,7 @@ var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4
|
|
|
346
346
|
return (active || primary) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n > td {\n background: var(--color-background4);\n }\n "])));
|
|
347
347
|
}, function (_ref4) {
|
|
348
348
|
var clickable = _ref4.clickable;
|
|
349
|
-
return clickable &&
|
|
349
|
+
return clickable && 'pointer: cursor;';
|
|
350
350
|
}, _media.default.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n overflow: hidden;\n position: relative;\n transition: .3s;\n display: block;\n margin-bottom: 0.75rem;\n padding: var(--spacing-xs) var(--spacing-s);\n background: var(\n --color-background", "\n );\n border-radius: var(--border-radius);\n transition: .3s;\n border: 1px solid transparent;\n\n &:hover {\n border: var(--border-width) solid var(--color-primary);\n }\n\n ", "\n\n ", "\n "])), function (_ref5) {
|
|
351
351
|
var backgroundReverse = _ref5.backgroundReverse;
|
|
352
352
|
return backgroundReverse ? 1 : 2;
|
|
@@ -359,12 +359,12 @@ var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4
|
|
|
359
359
|
return noData && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 168px;\n\n > td {\n &:first-child:before {\n display: none;\n }\n }\n "])));
|
|
360
360
|
}));
|
|
361
361
|
|
|
362
|
-
var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\n border-top-left-radius: var(--border-radius-l);\n border-bottom-left-radius: var(--border-radius-l);\n padding-left: var(--spacing);\n }\n\n &:last-child {\n border-right: var(--border-width) solid transparent;\n border-top-right-radius: var(--border-radius-l);\n border-bottom-right-radius: var(--border-radius-l);\n padding-right: var(--spacing);\n }\n\n > span {\n display: inline-block;\n width: 100%;\n padding: 0 2px;\n overflow: hidden;\n white-space:
|
|
362
|
+
var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\n border-top-left-radius: var(--border-radius-l);\n border-bottom-left-radius: var(--border-radius-l);\n padding-left: var(--spacing);\n }\n\n &:last-child {\n border-right: var(--border-width) solid transparent;\n border-top-right-radius: var(--border-radius-l);\n border-bottom-right-radius: var(--border-radius-l);\n padding-right: var(--spacing);\n }\n\n > span {\n display: inline-block;\n width: 100%;\n padding: 0 2px;\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n }\n\n ", "\n\n ", "\n"])), function (_ref8) {
|
|
363
363
|
var backgroundReverse = _ref8.backgroundReverse;
|
|
364
|
-
return backgroundReverse ?
|
|
364
|
+
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
365
365
|
}, function (_ref9) {
|
|
366
366
|
var center = _ref9.center;
|
|
367
|
-
return center ?
|
|
367
|
+
return center ? 'center' : 'left';
|
|
368
368
|
}, function (_ref10) {
|
|
369
369
|
var noData = _ref10.noData;
|
|
370
370
|
return noData && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding: 20px 0;\n "])));
|
package/table/TableHeadCell.js
CHANGED
|
@@ -19,15 +19,15 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
19
19
|
|
|
20
20
|
var TableHeadCell = _styledComponents.default.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n font-weight: var(--font-bold);\n padding: var(--spacing-s) var(--spacing-xs);\n width: ", ";\n position: relative;\n max-width: 0px;\n\n > div {\n display: flex;\n\n > span {\n max-width: calc(100% - 0.5rem - 1rem);\n padding-right: var(--spacing-xs);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n\n &:first-child {\n padding-left: var(--spacing);\n }\n\n &:last-child {\n padding-right: var(--spacing);\n }\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
21
21
|
var width = _ref.width;
|
|
22
|
-
return width ||
|
|
22
|
+
return width || 'auto';
|
|
23
23
|
}, function (_ref2) {
|
|
24
24
|
var sortable = _ref2.sortable;
|
|
25
|
-
return sortable &&
|
|
25
|
+
return sortable && 'cursor: pointer;';
|
|
26
26
|
}, function (_ref3) {
|
|
27
27
|
var align = _ref3.align;
|
|
28
28
|
|
|
29
29
|
switch (align) {
|
|
30
|
-
case
|
|
30
|
+
case 'center':
|
|
31
31
|
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n > div {\n justify-content: center;\n }\n "])));
|
|
32
32
|
|
|
33
33
|
default:
|
|
@@ -18,14 +18,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
18
18
|
var useLimitChange = function useLimitChange(setState) {
|
|
19
19
|
return (0, _react.useCallback)(function (limit) {
|
|
20
20
|
setState(function (previous) {
|
|
21
|
-
if (_typeof(previous) ===
|
|
21
|
+
if (_typeof(previous) === 'object') {
|
|
22
22
|
return _objectSpread(_objectSpread({}, previous), {}, {
|
|
23
23
|
page: 1,
|
|
24
24
|
limit: limit
|
|
25
25
|
});
|
|
26
|
-
} else {
|
|
27
|
-
return limit;
|
|
28
26
|
}
|
|
27
|
+
|
|
28
|
+
return limit;
|
|
29
29
|
});
|
|
30
30
|
}, [setState]);
|
|
31
31
|
};
|
|
@@ -18,13 +18,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
18
18
|
var usePageChange = function usePageChange(setState) {
|
|
19
19
|
return (0, _react.useCallback)(function (page) {
|
|
20
20
|
setState(function (previous) {
|
|
21
|
-
if (_typeof(previous) ===
|
|
21
|
+
if (_typeof(previous) === 'object') {
|
|
22
22
|
return _objectSpread(_objectSpread({}, previous), {}, {
|
|
23
23
|
page: page
|
|
24
24
|
});
|
|
25
|
-
} else {
|
|
26
|
-
return page;
|
|
27
25
|
}
|
|
26
|
+
|
|
27
|
+
return page;
|
|
28
28
|
});
|
|
29
29
|
}, [setState]);
|
|
30
30
|
};
|
|
@@ -18,7 +18,7 @@ var useSortChange = function useSortChange(setState, sortColumn, sortType) {
|
|
|
18
18
|
var type = null;
|
|
19
19
|
|
|
20
20
|
if (columnName === sortColumn) {
|
|
21
|
-
type = sortType ===
|
|
21
|
+
type = sortType === 'asc' ? 'desc' : 'asc';
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
setState(function (previous) {
|
package/text/Paragraph.js
CHANGED
|
@@ -13,21 +13,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
|
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
15
|
|
|
16
|
-
var Paragraph = _styledComponents.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n margin-bottom: var(--spacing-s);\n word-break: break-word;\n overflow-wrap: break-word;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
16
|
+
var Paragraph = _styledComponents.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n margin-bottom: var(--spacing-s);\n word-break: break-word;\n overflow-wrap: break-word;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
17
17
|
var flex = _ref.flex;
|
|
18
|
-
return flex &&
|
|
18
|
+
return flex && 'display: flex;';
|
|
19
19
|
}, function (_ref2) {
|
|
20
20
|
var justifyContentBetween = _ref2.justifyContentBetween;
|
|
21
|
-
return justifyContentBetween &&
|
|
21
|
+
return justifyContentBetween && 'justify-content: space-between;';
|
|
22
22
|
}, function (_ref3) {
|
|
23
23
|
var inline = _ref3.inline;
|
|
24
24
|
return inline && "\n display: inline;\n margin-right: var(--spacing-s);\n ";
|
|
25
25
|
}, function (_ref4) {
|
|
26
26
|
var fontH3 = _ref4.fontH3;
|
|
27
|
-
return fontH3 &&
|
|
27
|
+
return fontH3 && 'font-size: var(--font-h3);';
|
|
28
28
|
}, function (_ref5) {
|
|
29
29
|
var fontWeightBold = _ref5.fontWeightBold;
|
|
30
|
-
return fontWeightBold &&
|
|
30
|
+
return fontWeightBold && 'font-weight: bold;';
|
|
31
|
+
}, function (_ref6) {
|
|
32
|
+
var marginBottomXS = _ref6.marginBottomXS;
|
|
33
|
+
return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
|
|
31
34
|
});
|
|
32
35
|
|
|
33
36
|
var _default = Paragraph;
|
package/timeline/Timeline.js
CHANGED
|
@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
|
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
15
|
|
|
16
|
-
var Timeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n &:before {\n content:
|
|
16
|
+
var Timeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n &:before {\n content: '';\n position: absolute;\n left: 7.8rem;\n width: 0.214rem;\n top: 5px;\n bottom: 5px;\n height: calc(100% - 5px);\n background-color: #e7e9f5;\n }\n"])));
|
|
17
17
|
|
|
18
18
|
var Items = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
|
19
19
|
|
|
@@ -23,13 +23,13 @@ var ItemTag = _styledComponents.default.span(_templateObject4 || (_templateObjec
|
|
|
23
23
|
|
|
24
24
|
var ItemCircle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-radius: 50%;\n border: 0.89rem solid #2d2c4c;\n z-index: 1;\n top: 0.2rem;\n left: 7rem;\n position: relative;\n\n > svg {\n font-size: 1.5rem;\n top: 0;\n left: 0;\n transform: translate(-50%, -50%);\n position: absolute;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
25
25
|
var success = _ref.success;
|
|
26
|
-
return success &&
|
|
26
|
+
return success && 'color: var(--color-success);';
|
|
27
27
|
}, function (_ref2) {
|
|
28
28
|
var danger = _ref2.danger;
|
|
29
|
-
return danger &&
|
|
29
|
+
return danger && 'color: var(--color-danger);';
|
|
30
30
|
}, function (_ref3) {
|
|
31
31
|
var warning = _ref3.warning;
|
|
32
|
-
return warning &&
|
|
32
|
+
return warning && 'color: var(--color-warning);';
|
|
33
33
|
});
|
|
34
34
|
|
|
35
35
|
var ItemDescription = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: table-cell;\n vertical-align: top;\n font-size: 1rem;\n padding: 0 0 0 8rem;\n color: #fff;\n"])));
|
|
@@ -15,6 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
|
|
16
16
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
17
|
|
|
18
|
-
var CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 360px;\n\n .Toastify__toast {\n padding: 15px 15px 15px 50px;\n box-shadow: 0 0 8px #999999;\n background-repeat: no-repeat;\n background-position: 15px center;\n }\n\n .Toastify__toast--error {\n background-color: var(--color-danger);\n background-image: url(
|
|
18
|
+
var CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 360px;\n\n .Toastify__toast {\n padding: 15px 15px 15px 50px;\n box-shadow: 0 0 8px #999999;\n background-repeat: no-repeat;\n background-position: 15px center;\n }\n\n .Toastify__toast--error {\n background-color: var(--color-danger);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');\n }\n\n .Toastify__toast--success {\n background-color: var(--color-success);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n }\n\n .Toastify__toast--warning {\n background-color: var(--color-warning);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n }\n"])));
|
|
19
19
|
var _default = CustomToastContainer;
|
|
20
20
|
exports.default = _default;
|
package/tooltip/Tooltip.js
CHANGED
|
@@ -105,14 +105,14 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
105
105
|
return {
|
|
106
106
|
onClick: toggle
|
|
107
107
|
};
|
|
108
|
-
} else {
|
|
109
|
-
return {
|
|
110
|
-
// mode ==="hover"
|
|
111
|
-
onClick: handleClose,
|
|
112
|
-
onMouseOver: handleOpen,
|
|
113
|
-
onMouseLeave: handleClose
|
|
114
|
-
};
|
|
115
108
|
}
|
|
109
|
+
|
|
110
|
+
return {
|
|
111
|
+
// mode ==="hover"
|
|
112
|
+
onClick: handleClose,
|
|
113
|
+
onMouseOver: handleOpen,
|
|
114
|
+
onMouseLeave: handleClose
|
|
115
|
+
};
|
|
116
116
|
}, [mode, handleClose, handleOpen, toggle, disabled]);
|
|
117
117
|
|
|
118
118
|
var childrenProps = _objectSpread(_objectSpread({}, children.props), {}, {
|