@cashub/ui 0.48.1 → 0.48.3
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 +26 -38
- package/Tab/TabPanel.js +20 -13
- package/Tab/TabTab.js +24 -36
- package/Tab/index.js +6 -3
- package/Tab/subComponent/TabListV2.js +18 -11
- package/Tab/subComponent/TabPanelV2.js +20 -16
- package/Tab/subComponent/TabTabV2.js +21 -33
- package/VerticalTab/TabList.js +18 -13
- package/VerticalTab/TabPanel.js +20 -16
- package/VerticalTab/TabTab.js +21 -40
- package/VerticalTab/VerticalTab.js +4 -8
- package/alert/Alert.js +5 -12
- package/animate/Collapse.js +7 -5
- package/animate/Loader.js +7 -18
- package/animate/PulseRing.js +5 -18
- package/animate/Spinner.js +3 -8
- package/backdrop/BaseBackdrop.js +3 -9
- package/backdrop/LoadingBackdrop.js +3 -7
- package/backdrop/ModalBackdrop.js +3 -5
- package/badge/Badge.js +3 -15
- package/badge/BadgeDot.js +3 -8
- package/badge/BadgeFill.js +6 -24
- package/badge/BadgeWithText.js +3 -13
- package/billing/BarChart.js +1 -1
- package/breadcrumb/Breadcrumb.js +3 -42
- package/button/Button.js +20 -88
- package/button/ButtonGroup.js +9 -33
- package/button/IconButton.js +10 -37
- package/button/ScrollToTopButton.js +4 -12
- package/callout/Callout.js +8 -37
- package/chart/BarChart.js +17 -10
- package/chart/DoughnutChart.js +20 -34
- package/chart/LineChart.js +34 -11
- package/chart/SingleBarChart.js +5 -22
- package/chart/utils/centerTextPlugin.js +2 -2
- package/chart/utils/customTooltip.js +14 -8
- package/chart/utils/htmlLegendPlugin.js +1 -1
- package/chart/utils/yAxisTopTitlePlugin.js +49 -0
- package/container/FlexContainer.js +7 -15
- package/cropper/Cropper.js +2 -1
- package/datetimePicker/DatePicker.js +26 -80
- package/datetimePicker/DatePickerV2.js +36 -95
- package/datetimePicker/DatetimePicker.js +11 -174
- package/datetimePicker/DatetimePickerV2.js +33 -87
- package/datetimePicker/DatetimePickerV3.js +11 -174
- package/datetimePicker/TimeInput.js +10 -35
- package/datetimePicker/TimePicker.js +22 -77
- package/datetimePicker/TimePickerStyle.js +3 -53
- package/datetimePicker/TimePickerV2.js +21 -54
- package/datetimePicker/accordion/Month.js +16 -93
- package/datetimePicker/accordion/Year.js +18 -96
- package/datetimePicker/hooks/useChangeNumber.js +6 -3
- package/datetimePicker/hooks/useDecrease.js +6 -3
- package/datetimePicker/hooks/useIncrease.js +6 -3
- package/datetimePicker/subComponent/Accordion.js +20 -101
- package/descriptionList/DescriptionDetail.js +4 -15
- package/descriptionList/DescriptionList.js +4 -12
- package/descriptionList/DescriptionTerm.js +3 -5
- package/divider/Divider.js +6 -15
- package/dropdown/DropdownButtonOption.js +6 -22
- package/dropdown/DropdownContent.js +15 -29
- package/dropdown/DropdownDivOption.js +3 -17
- package/dropdown/DropdownLinkOption.js +3 -14
- package/dropdown/DropdownToggle.js +15 -7
- package/dropzone/FileDropzone.js +22 -121
- package/dropzone/ImageDropzone.js +14 -83
- package/dropzone/subComponent/Message.js +4 -11
- package/figure/IconFigure.js +7 -16
- package/figure/ImageFigure.js +6 -19
- package/file/HiddenFileInput.js +3 -3
- package/form/Checkbox.js +13 -74
- package/form/Fieldset.js +3 -9
- package/form/FormItem.js +5 -10
- package/form/Input.js +7 -40
- package/form/Label.js +10 -34
- package/form/MutedText.js +4 -8
- package/form/PasswordInput.js +13 -20
- package/form/RadioButton.js +8 -55
- package/form/SearchSelect.js +12 -64
- package/form/Searchbox.js +19 -45
- package/form/Slider.js +10 -28
- package/form/SwitchButton.js +14 -48
- package/form/Textarea.js +3 -30
- package/form/TreeView.js +6 -13
- package/grid/Column.js +10 -23
- package/grid/Grid.js +6 -14
- package/heading/Heading1.js +4 -8
- package/heading/Heading2.js +5 -11
- package/heading/Heading3.js +8 -20
- package/iconbox/ApplicationIconBox.js +12 -48
- package/iconbox/IconBox.js +7 -31
- package/iconbox/IconBoxV2.js +8 -33
- package/iconbox/subComponent/IconBoxFigure.js +9 -17
- package/iconbox/subComponent/IconBoxImage.js +8 -21
- package/image/ImageFluid.js +3 -7
- package/image/UploadImage.js +18 -66
- package/jsoneditor/JsonEditor.js +15 -121
- package/keyframe/Pulse.js +3 -13
- package/keyframe/Spin.js +3 -5
- package/layout/Aside.js +5 -30
- package/layout/Backdrop.js +4 -8
- package/layout/Container.js +5 -21
- package/layout/Footer.js +7 -26
- package/link/LinkSpan.js +19 -37
- package/map/GoogleMap.js +7 -3
- package/map/GoogleReverseGeolocation.js +3 -6
- package/map/LeafletMap.js +2 -2
- package/map/subComponent/GoogleMapContainer.js +4 -16
- package/map/subComponent/GoogleMapPopup.js +10 -7
- package/map/subComponent/GoogleMapWrapper.js +15 -8
- package/map/subComponent/LeafletDrawControl.js +7 -9
- package/map/subComponent/LeafletMapContainer.js +4 -159
- package/modal/StateModal.js +28 -49
- package/modal/TitleModal.js +29 -70
- package/package.json +1 -1
- package/page/Disclaimer.js +3 -119
- package/paginate/Paginate.js +12 -54
- package/popover/Popover.js +25 -30
- package/qrcode/QRCode.js +6 -20
- package/qrcode/QRCodeContainter.js +4 -12
- package/ribbon/Ribbon.js +4 -29
- package/section/Section.js +20 -68
- package/section/SectionBody.js +8 -29
- package/section/SectionHeader.js +11 -36
- package/section/SectionToolbar.js +3 -9
- package/section/SectionToolbarItem.js +3 -8
- package/select/InputSelect.js +23 -16
- package/select/Select.js +43 -112
- package/select/subComponent/Checkbox.js +5 -24
- package/select/subComponent/Footer.js +3 -4
- package/select/subComponent/ListBox.js +5 -12
- package/select/subComponent/Option.js +7 -27
- package/select/subComponent/OptionGroup.js +3 -13
- package/select/subComponent/Options.js +5 -18
- package/select/subComponent/SearchBox.js +12 -34
- package/select/subComponent/SelectedMultipleTags.js +3 -21
- package/select/subComponent/SelectedMultipleText.js +4 -20
- package/select/subComponent/SelectedSingle.js +3 -7
- package/styles/GlobalStyle.js +45 -156
- package/styles/mixin/backgroundColor.js +8 -16
- package/styles/mixin/borderColor.js +7 -13
- package/styles/mixin/color.js +7 -13
- package/styles/mixin/colorOnBackground.js +7 -13
- package/styles/mixin/inputPlaceholder.js +3 -20
- package/styles/mixin/media.js +3 -5
- package/styles/mixin/rounded.js +6 -10
- package/styles/mixin/scrollbar.js +3 -13
- package/styles/theme/dark.theme.js +14 -15
- package/styles/theme/light.theme.js +14 -15
- package/styles/theme/white.theme.js +14 -15
- package/table/GridTable.js +33 -71
- package/table/ImageBox.js +5 -15
- package/table/InfiniteGridTable.js +46 -92
- package/table/PermissionTable.js +10 -32
- package/table/SimpleGridTable.js +17 -52
- package/table/Table.js +48 -198
- package/table/__mock__/columns.js +1 -1
- package/table/subComponent/BaseTableHeadCell.js +8 -37
- package/table/subComponent/GridTableFooter.js +4 -10
- package/table/subComponent/GridTableHeadCell.js +4 -6
- package/table/subComponent/Resizer.js +4 -19
- package/table/subComponent/TableFooter.js +6 -15
- package/table/subComponent/TableFooterInfo.js +3 -4
- package/table/subComponent/TableFooterPager.js +6 -19
- package/table/subComponent/TableHeadCell.js +3 -9
- package/table/subComponent/TableSort.js +7 -17
- package/tagify/TagifyStyle.js +3 -49
- package/tagify/Tags.js +21 -37
- package/tagify/templates/getCreateButtonTemplate.js +2 -5
- package/text/Paragraph.js +12 -50
- package/timeline/Timeline.js +17 -94
- package/toast/CustomToastContainer.js +3 -35
- package/toast/MessageContainer.js +4 -22
- package/tooltip/Tooltip.js +19 -47
- package/treeView/TreeViewV2.js +1 -1
- package/treeView/TreeflexStyle.js +3 -38
- package/wizard/Wizard.js +6 -115
|
@@ -12,7 +12,17 @@ var _GridTableHeadCell = _interopRequireDefault(require("./subComponent/GridTabl
|
|
|
12
12
|
var _Resizer = _interopRequireDefault(require("./subComponent/Resizer"));
|
|
13
13
|
var _Popover = _interopRequireDefault(require("../popover/Popover"));
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
16
|
+
const _excluded = ["title", "fieldName", "render", "custom", "width"];
|
|
15
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
19
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
20
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
21
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
24
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
25
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
16
26
|
const ROW_HEIGHT = 48;
|
|
17
27
|
const OVER_SCAN_COUNT = 5;
|
|
18
28
|
const InfiniteGridTable = _ref => {
|
|
@@ -40,10 +50,7 @@ const InfiniteGridTable = _ref => {
|
|
|
40
50
|
info: 'Showing _START_ to _END_ of _TOTAL_ entries',
|
|
41
51
|
empty: 'No data available in table'
|
|
42
52
|
};
|
|
43
|
-
return {
|
|
44
|
-
...defaultTexts,
|
|
45
|
-
...translation
|
|
46
|
-
};
|
|
53
|
+
return _objectSpread(_objectSpread({}, defaultTexts), translation);
|
|
47
54
|
}, [translation]);
|
|
48
55
|
const tableHeight = (0, _react.useMemo)(() => {
|
|
49
56
|
// when data is empty, table will generate a row to show a message
|
|
@@ -93,14 +100,11 @@ const InfiniteGridTable = _ref => {
|
|
|
93
100
|
setTableColumns(previous => {
|
|
94
101
|
return previous.map((column, index) => {
|
|
95
102
|
if (index === targetIndex) {
|
|
96
|
-
return {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
};
|
|
103
|
+
return _objectSpread(_objectSpread({}, column), {}, {
|
|
104
|
+
width: "".concat(width, "px")
|
|
105
|
+
});
|
|
100
106
|
}
|
|
101
|
-
return {
|
|
102
|
-
...column
|
|
103
|
-
};
|
|
107
|
+
return _objectSpread({}, column);
|
|
104
108
|
});
|
|
105
109
|
});
|
|
106
110
|
}, []);
|
|
@@ -149,11 +153,11 @@ const InfiniteGridTable = _ref => {
|
|
|
149
153
|
} = column;
|
|
150
154
|
let key = 'TH';
|
|
151
155
|
if (title) {
|
|
152
|
-
key +=
|
|
156
|
+
key += "".concat(key).concat(title);
|
|
153
157
|
} else if (fieldName) {
|
|
154
|
-
key +=
|
|
158
|
+
key += "".concat(key).concat(fieldName);
|
|
155
159
|
} else {
|
|
156
|
-
key +=
|
|
160
|
+
key += "".concat(key).concat(index);
|
|
157
161
|
}
|
|
158
162
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTableHeadCell.default, {
|
|
159
163
|
width: width,
|
|
@@ -189,13 +193,13 @@ const InfiniteGridTable = _ref => {
|
|
|
189
193
|
return visibleData.map((row, rowIndex) => {
|
|
190
194
|
const tds = tableColumns.map((column, columnIndex) => {
|
|
191
195
|
const {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
196
|
+
title,
|
|
197
|
+
fieldName,
|
|
198
|
+
render,
|
|
199
|
+
custom,
|
|
200
|
+
width
|
|
201
|
+
} = column,
|
|
202
|
+
props = _objectWithoutProperties(column, _excluded);
|
|
199
203
|
const key = rowIndex + columnIndex.toString();
|
|
200
204
|
let renderedData = null;
|
|
201
205
|
if (custom && render) {
|
|
@@ -209,13 +213,13 @@ const InfiniteGridTable = _ref => {
|
|
|
209
213
|
children: render ? render(row[fieldName], row) : String(row[fieldName])
|
|
210
214
|
});
|
|
211
215
|
}
|
|
212
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
|
|
216
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, _objectSpread(_objectSpread({
|
|
213
217
|
"data-label": title,
|
|
214
218
|
backgroundReverse: backgroundReverse,
|
|
215
|
-
$width: width
|
|
216
|
-
|
|
219
|
+
$width: width
|
|
220
|
+
}, props), {}, {
|
|
217
221
|
children: renderedData
|
|
218
|
-
}, columnIndex);
|
|
222
|
+
}), columnIndex);
|
|
219
223
|
});
|
|
220
224
|
tds.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
|
|
221
225
|
role: "presentation",
|
|
@@ -230,7 +234,7 @@ const InfiniteGridTable = _ref => {
|
|
|
230
234
|
position: 'absolute',
|
|
231
235
|
display: 'flex',
|
|
232
236
|
left: 0,
|
|
233
|
-
top:
|
|
237
|
+
top: "".concat(top, "px")
|
|
234
238
|
},
|
|
235
239
|
children: tds
|
|
236
240
|
}, index);
|
|
@@ -262,11 +266,10 @@ const InfiniteGridTable = _ref => {
|
|
|
262
266
|
} = column;
|
|
263
267
|
return title === previousTitle && fieldName === previousFieldName;
|
|
264
268
|
});
|
|
265
|
-
const width = previousColumn
|
|
266
|
-
return {
|
|
267
|
-
...column,
|
|
269
|
+
const width = (previousColumn === null || previousColumn === void 0 ? void 0 : previousColumn.width) || column.width;
|
|
270
|
+
return _objectSpread(_objectSpread({}, column), {}, {
|
|
268
271
|
width
|
|
269
|
-
};
|
|
272
|
+
});
|
|
270
273
|
});
|
|
271
274
|
});
|
|
272
275
|
}, [columns]);
|
|
@@ -293,7 +296,7 @@ const InfiniteGridTable = _ref => {
|
|
|
293
296
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
294
297
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
|
|
295
298
|
style: {
|
|
296
|
-
height:
|
|
299
|
+
height: "".concat(tableHeight, "px")
|
|
297
300
|
},
|
|
298
301
|
ref: wrapperRef,
|
|
299
302
|
backgroundReverse: backgroundReverse,
|
|
@@ -315,89 +318,40 @@ const InfiniteGridTable = _ref => {
|
|
|
315
318
|
})]
|
|
316
319
|
});
|
|
317
320
|
};
|
|
318
|
-
const TableWrapper = _styledComponents.default.div
|
|
319
|
-
overflow: hidden;
|
|
320
|
-
background: ${_ref2 => {
|
|
321
|
+
const TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n background: ", ";\n"])), _ref2 => {
|
|
321
322
|
let {
|
|
322
323
|
backgroundReverse
|
|
323
324
|
} = _ref2;
|
|
324
325
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
const
|
|
328
|
-
/* make fixed width work */
|
|
329
|
-
position: relative;
|
|
330
|
-
width: 0px;
|
|
331
|
-
color: var(--font-on-background);
|
|
332
|
-
table-layout: fixed;
|
|
333
|
-
border-collapse: collapse;
|
|
334
|
-
`;
|
|
335
|
-
const TD = _styledComponents.default.td`
|
|
336
|
-
align-content: center;
|
|
337
|
-
width: ${_ref3 => {
|
|
326
|
+
});
|
|
327
|
+
const ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* make fixed width work */\n position: relative;\n width: 0px;\n color: var(--font-on-background);\n table-layout: fixed;\n border-collapse: collapse;\n"])));
|
|
328
|
+
const TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n align-content: center;\n width: ", ";\n height: 48px;\n padding: 0 var(--spacing-xs);\n border-top: 1px solid var(--border-color);\n border-right: 1px solid var(--border-color);\n border-bottom: 1px solid var(--border-color);\n text-align: ", ";\n background: ", ";\n\n &:last-child {\n border-right: none;\n padding: 0;\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"])), _ref3 => {
|
|
338
329
|
let {
|
|
339
330
|
$width
|
|
340
331
|
} = _ref3;
|
|
341
332
|
return $width;
|
|
342
|
-
}
|
|
343
|
-
height: 48px;
|
|
344
|
-
padding: 0 var(--spacing-xs);
|
|
345
|
-
border-top: 1px solid var(--border-color);
|
|
346
|
-
border-right: 1px solid var(--border-color);
|
|
347
|
-
border-bottom: 1px solid var(--border-color);
|
|
348
|
-
text-align: ${_ref4 => {
|
|
333
|
+
}, _ref4 => {
|
|
349
334
|
let {
|
|
350
335
|
center
|
|
351
336
|
} = _ref4;
|
|
352
337
|
return center ? 'center' : 'left';
|
|
353
|
-
}
|
|
354
|
-
background: ${_ref5 => {
|
|
338
|
+
}, _ref5 => {
|
|
355
339
|
let {
|
|
356
340
|
backgroundReverse
|
|
357
341
|
} = _ref5;
|
|
358
342
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
&:last-child {
|
|
362
|
-
border-right: none;
|
|
363
|
-
padding: 0;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
> span {
|
|
367
|
-
display: inline-block;
|
|
368
|
-
width: 100%;
|
|
369
|
-
padding: 0 2px;
|
|
370
|
-
overflow: hidden;
|
|
371
|
-
white-space: pre;
|
|
372
|
-
text-overflow: ellipsis;
|
|
373
|
-
}
|
|
374
|
-
`;
|
|
375
|
-
const Scrollbar = _styledComponents.default.div`
|
|
376
|
-
position: sticky;
|
|
377
|
-
bottom: 0;
|
|
378
|
-
width: 100%;
|
|
379
|
-
overflow: auto;
|
|
380
|
-
background: ${_ref6 => {
|
|
343
|
+
});
|
|
344
|
+
const Scrollbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: sticky;\n bottom: 0;\n width: 100%;\n overflow: auto;\n background: ", ";\n\n ::before {\n display: block;\n content: '';\n width: ", ";\n height: 1px;\n }\n\n ", "\n"])), _ref6 => {
|
|
381
345
|
let {
|
|
382
346
|
backgroundReverse
|
|
383
347
|
} = _ref6;
|
|
384
348
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
::before {
|
|
388
|
-
display: block;
|
|
389
|
-
content: '';
|
|
390
|
-
width: ${_ref7 => {
|
|
349
|
+
}, _ref7 => {
|
|
391
350
|
let {
|
|
392
351
|
width
|
|
393
352
|
} = _ref7;
|
|
394
|
-
return
|
|
395
|
-
}
|
|
396
|
-
height: 1px;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
${(0, _scrollbar.default)({
|
|
353
|
+
return "".concat(width, "px");
|
|
354
|
+
}, (0, _scrollbar.default)({
|
|
400
355
|
size: 'large'
|
|
401
|
-
})
|
|
402
|
-
`;
|
|
356
|
+
}));
|
|
403
357
|
var _default = exports.default = InfiniteGridTable;
|
package/table/PermissionTable.js
CHANGED
|
@@ -5,59 +5,37 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
8
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
|
|
10
|
-
width: 100
|
|
11
|
-
|
|
12
|
-
table-layout: fixed;
|
|
13
|
-
border: 0;
|
|
14
|
-
color: var(--font-on-background);
|
|
15
|
-
`;
|
|
16
|
-
const TH = _styledComponents.default.th`
|
|
17
|
-
padding: var(--spacing) 0;
|
|
18
|
-
border-bottom: 1px solid var(--border-color);
|
|
19
|
-
font-weight: var(--font-bold);
|
|
20
|
-
|
|
21
|
-
${_ref => {
|
|
10
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
11
|
+
const PermissionTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n vertical-align: middle;\n table-layout: fixed;\n border: 0;\n color: var(--font-on-background);\n"])));
|
|
12
|
+
const TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid var(--border-color);\n font-weight: var(--font-bold);\n\n ", "\n ", "\n"])), _ref => {
|
|
22
13
|
let {
|
|
23
14
|
clickable
|
|
24
15
|
} = _ref;
|
|
25
16
|
return clickable && 'cursor: pointer;';
|
|
26
|
-
}
|
|
27
|
-
${_ref2 => {
|
|
17
|
+
}, _ref2 => {
|
|
28
18
|
let {
|
|
29
19
|
alignCenter
|
|
30
20
|
} = _ref2;
|
|
31
21
|
return alignCenter && 'text-align: center;';
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
const TD = _styledComponents.default.td`
|
|
35
|
-
padding: var(--spacing) 0;
|
|
36
|
-
border-bottom: 1px solid var(--border-color);
|
|
37
|
-
|
|
38
|
-
&:nth-child(even) {
|
|
39
|
-
background: var(--color-background1);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
${_ref3 => {
|
|
22
|
+
});
|
|
23
|
+
const TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid var(--border-color);\n\n &:nth-child(even) {\n background: var(--color-background1);\n }\n\n ", "\n ", "\n ", "\n"])), _ref3 => {
|
|
43
24
|
let {
|
|
44
25
|
clickable
|
|
45
26
|
} = _ref3;
|
|
46
27
|
return clickable && 'cursor: pointer;';
|
|
47
|
-
}
|
|
48
|
-
${_ref4 => {
|
|
28
|
+
}, _ref4 => {
|
|
49
29
|
let {
|
|
50
30
|
alignCenter
|
|
51
31
|
} = _ref4;
|
|
52
32
|
return alignCenter && 'text-align: center;';
|
|
53
|
-
}
|
|
54
|
-
${_ref5 => {
|
|
33
|
+
}, _ref5 => {
|
|
55
34
|
let {
|
|
56
35
|
bold
|
|
57
36
|
} = _ref5;
|
|
58
37
|
return bold && 'font-weight: var(--font-bold);';
|
|
59
|
-
}
|
|
60
|
-
`;
|
|
38
|
+
});
|
|
61
39
|
var _default = exports.default = Object.assign(PermissionTable, {
|
|
62
40
|
TH,
|
|
63
41
|
TD
|
package/table/SimpleGridTable.js
CHANGED
|
@@ -8,7 +8,14 @@ var _react = require("react");
|
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
var _GridTableHeadCell = _interopRequireDefault(require("./subComponent/GridTableHeadCell"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
11
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
14
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
18
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
12
19
|
const SimpleGridTable = _ref => {
|
|
13
20
|
let {
|
|
14
21
|
columns,
|
|
@@ -20,17 +27,14 @@ const SimpleGridTable = _ref => {
|
|
|
20
27
|
const defaultTexts = {
|
|
21
28
|
empty: 'No data available in table'
|
|
22
29
|
};
|
|
23
|
-
return {
|
|
24
|
-
...defaultTexts,
|
|
25
|
-
...translation
|
|
26
|
-
};
|
|
30
|
+
return _objectSpread(_objectSpread({}, defaultTexts), translation);
|
|
27
31
|
}, [translation]);
|
|
28
32
|
const tableHeads = (0, _react.useMemo)(() => {
|
|
29
33
|
const tableHeads = columns.map((column, index) => {
|
|
30
34
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TH, {
|
|
31
35
|
backgroundReverse: !backgroundReverse,
|
|
32
36
|
children: column.title
|
|
33
|
-
},
|
|
37
|
+
}, "TH".concat(index));
|
|
34
38
|
});
|
|
35
39
|
return tableHeads;
|
|
36
40
|
}, [backgroundReverse, columns]);
|
|
@@ -81,63 +85,24 @@ const SimpleGridTable = _ref => {
|
|
|
81
85
|
})
|
|
82
86
|
});
|
|
83
87
|
};
|
|
84
|
-
const TableWrapper = _styledComponents.default.div
|
|
85
|
-
background: ${_ref2 => {
|
|
88
|
+
const TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n"])), _ref2 => {
|
|
86
89
|
let {
|
|
87
90
|
backgroundReverse
|
|
88
91
|
} = _ref2;
|
|
89
92
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
color: var(--font-on-background);
|
|
95
|
-
table-layout: fixed;
|
|
96
|
-
border-collapse: separate;
|
|
97
|
-
border-spacing: 0;
|
|
98
|
-
border: 1px solid var(--border-color);
|
|
99
|
-
border-radius: 8px;
|
|
100
|
-
overflow: hidden;
|
|
101
|
-
`;
|
|
102
|
-
const TH = (0, _styledComponents.default)(_GridTableHeadCell.default)`
|
|
103
|
-
text-align: left;
|
|
104
|
-
border-top: none;
|
|
105
|
-
border-right: 1px solid var(--border-color);
|
|
106
|
-
|
|
107
|
-
&:last-child {
|
|
108
|
-
border-right: none;
|
|
109
|
-
}
|
|
110
|
-
`;
|
|
111
|
-
const TD = _styledComponents.default.td`
|
|
112
|
-
height: 48px;
|
|
113
|
-
padding: 0 var(--spacing-xs);
|
|
114
|
-
border-bottom: 1px solid var(--border-color);
|
|
115
|
-
border-right: 1px solid var(--border-color);
|
|
116
|
-
text-align: ${_ref3 => {
|
|
93
|
+
});
|
|
94
|
+
const ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n color: var(--font-on-background);\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n overflow: hidden;\n"])));
|
|
95
|
+
const TH = (0, _styledComponents.default)(_GridTableHeadCell.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n text-align: left;\n border-top: none;\n border-right: 1px solid var(--border-color);\n\n &:last-child {\n border-right: none;\n }\n"])));
|
|
96
|
+
const TD = _styledComponents.default.td(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 48px;\n padding: 0 var(--spacing-xs);\n border-bottom: 1px solid var(--border-color);\n border-right: 1px solid var(--border-color);\n text-align: ", ";\n background: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:last-child {\n border-right: none;\n }\n"])), _ref3 => {
|
|
117
97
|
let {
|
|
118
98
|
center
|
|
119
99
|
} = _ref3;
|
|
120
100
|
return center ? 'center' : 'left';
|
|
121
|
-
}
|
|
122
|
-
background: ${_ref4 => {
|
|
101
|
+
}, _ref4 => {
|
|
123
102
|
let {
|
|
124
103
|
backgroundReverse
|
|
125
104
|
} = _ref4;
|
|
126
105
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
text-overflow: ellipsis;
|
|
130
|
-
white-space: nowrap;
|
|
131
|
-
|
|
132
|
-
&:last-child {
|
|
133
|
-
border-right: none;
|
|
134
|
-
}
|
|
135
|
-
`;
|
|
136
|
-
const TR = _styledComponents.default.tr`
|
|
137
|
-
&:last-child {
|
|
138
|
-
${TD} {
|
|
139
|
-
border-bottom: none;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
`;
|
|
106
|
+
});
|
|
107
|
+
const TR = _styledComponents.default.tr(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &:last-child {\n ", " {\n border-bottom: none;\n }\n }\n"])), TD);
|
|
143
108
|
var _default = exports.default = SimpleGridTable;
|