@helpdice/ui 1.4.1 → 1.4.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/dist/index.js +75 -17
- package/dist/table/data-table.d.ts +6 -1
- package/dist/table/index.js +75 -17
- package/dist/table/table.d.ts +6 -0
- package/esm/table/data-table.d.ts +6 -1
- package/esm/table/data-table.js +21 -3
- package/esm/table/table-head.js +10 -10
- package/esm/table/table.d.ts +6 -0
- package/esm/table/table.js +47 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -42215,9 +42215,9 @@ var TableHead = function TableHead(props) {
|
|
|
42215
42215
|
});
|
|
42216
42216
|
};
|
|
42217
42217
|
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
42218
|
-
className: _JSXStyle.dynamic([["
|
|
42218
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
42219
42219
|
}, /*#__PURE__*/React.createElement("tr", {
|
|
42220
|
-
className: _JSXStyle.dynamic([["
|
|
42220
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
42221
42221
|
}, columns.map(function (column, index) {
|
|
42222
42222
|
var _String2;
|
|
42223
42223
|
var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
|
|
@@ -42231,23 +42231,23 @@ var TableHead = function TableHead(props) {
|
|
|
42231
42231
|
},
|
|
42232
42232
|
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
42233
42233
|
"data-column": dataName,
|
|
42234
|
-
className: _JSXStyle.dynamic([["
|
|
42234
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
|
|
42235
42235
|
}, /*#__PURE__*/React.createElement("div", {
|
|
42236
|
-
className: _JSXStyle.dynamic([["
|
|
42236
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
|
|
42237
42237
|
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
42238
|
-
className: _JSXStyle.dynamic([["
|
|
42238
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
42239
42239
|
}), /*#__PURE__*/React.createElement("span", {
|
|
42240
42240
|
style: {
|
|
42241
42241
|
textAlign: 'center'
|
|
42242
42242
|
},
|
|
42243
|
-
className: _JSXStyle.dynamic([["
|
|
42243
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
42244
42244
|
}, column.text)));
|
|
42245
42245
|
})), showFilters && /*#__PURE__*/React.createElement("tr", {
|
|
42246
|
-
className: _JSXStyle.dynamic([["
|
|
42246
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
42247
42247
|
}, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
42248
|
-
id: "
|
|
42249
|
-
dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n
|
|
42250
|
-
}, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n
|
|
42248
|
+
id: "2156261549",
|
|
42249
|
+
dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
|
|
42250
|
+
}, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
|
|
42251
42251
|
};
|
|
42252
42252
|
TableHead.displayName = 'TableHead';
|
|
42253
42253
|
|
|
@@ -42889,7 +42889,15 @@ function DataTable(_ref) {
|
|
|
42889
42889
|
viewLength = _ref.viewLength,
|
|
42890
42890
|
_onPageChange = _ref.onPageChange,
|
|
42891
42891
|
_ref$disableMenu = _ref.disableMenu,
|
|
42892
|
-
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu
|
|
42892
|
+
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu,
|
|
42893
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
42894
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
42895
|
+
previousCursor = _ref.previousCursor,
|
|
42896
|
+
nextCursor = _ref.nextCursor,
|
|
42897
|
+
_ref$hasMore = _ref.hasMore,
|
|
42898
|
+
hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
|
|
42899
|
+
onNextPage = _ref.onNextPage,
|
|
42900
|
+
onPreviousPage = _ref.onPreviousPage;
|
|
42893
42901
|
var TABLE_ID = _.uniqueId('tbl');
|
|
42894
42902
|
// const [anchorEl, setAnchorEl] = useState(null);
|
|
42895
42903
|
var _useState = React.useState([]),
|
|
@@ -42988,12 +42996,16 @@ function DataTable(_ref) {
|
|
|
42988
42996
|
// };
|
|
42989
42997
|
|
|
42990
42998
|
var COLUMNS = cols.filter(function (col) {
|
|
42991
|
-
|
|
42999
|
+
var _String3;
|
|
43000
|
+
var dataName = (_String3 = String(col === null || col === undefined ? undefined : col.name)) === null || _String3 === undefined ? undefined : _String3.replace(' ', '_').toLowerCase();
|
|
43001
|
+
return !hideColumn.includes(dataName);
|
|
42992
43002
|
});
|
|
42993
43003
|
var content = function content() {
|
|
42994
43004
|
return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
|
|
43005
|
+
var _String4;
|
|
42995
43006
|
var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
|
|
42996
|
-
var
|
|
43007
|
+
var dataName = (_String4 = String(option.name)) === null || _String4 === undefined ? undefined : _String4.replace(' ', '_').toLowerCase();
|
|
43008
|
+
var isSelected = !hideColumn.includes(dataName);
|
|
42997
43009
|
return /*#__PURE__*/React.createElement(Popover.Item, {
|
|
42998
43010
|
selected: isSelected,
|
|
42999
43011
|
key: colunqid,
|
|
@@ -43145,6 +43157,12 @@ function DataTable(_ref) {
|
|
|
43145
43157
|
}, style)
|
|
43146
43158
|
}, /*#__PURE__*/React.createElement(Table, {
|
|
43147
43159
|
stickyHeader: true,
|
|
43160
|
+
cursorPagination: cursorPagination,
|
|
43161
|
+
previousCursor: previousCursor,
|
|
43162
|
+
nextCursor: nextCursor,
|
|
43163
|
+
hasMore: hasMore,
|
|
43164
|
+
onNextPage: onNextPage,
|
|
43165
|
+
onPreviousPage: onPreviousPage,
|
|
43148
43166
|
dataLength: dataLength,
|
|
43149
43167
|
viewLength: viewLength,
|
|
43150
43168
|
onPageChange: function onPageChange(page, start, end) {
|
|
@@ -43392,7 +43410,7 @@ var TableColumn = function TableColumn(columnProps) {
|
|
|
43392
43410
|
};
|
|
43393
43411
|
TableColumn.displayName = 'TableColumn';
|
|
43394
43412
|
|
|
43395
|
-
var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
43413
|
+
var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
43396
43414
|
function TableComponent(tableProps) {
|
|
43397
43415
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
43398
43416
|
var _ref = tableProps,
|
|
@@ -43408,6 +43426,13 @@ function TableComponent(tableProps) {
|
|
|
43408
43426
|
rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
|
|
43409
43427
|
_ref$readOnly = _ref.readOnly,
|
|
43410
43428
|
readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
|
|
43429
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
43430
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
43431
|
+
previousCursor = _ref.previousCursor,
|
|
43432
|
+
nextCursor = _ref.nextCursor;
|
|
43433
|
+
_ref.hasMore;
|
|
43434
|
+
var onNextPage = _ref.onNextPage,
|
|
43435
|
+
onPreviousPage = _ref.onPreviousPage,
|
|
43411
43436
|
onRow = _ref.onRow,
|
|
43412
43437
|
onCell = _ref.onCell;
|
|
43413
43438
|
_ref.onChange;
|
|
@@ -43500,7 +43525,41 @@ function TableComponent(tableProps) {
|
|
|
43500
43525
|
rowDraggable: rowDraggable,
|
|
43501
43526
|
readOnly: readOnly,
|
|
43502
43527
|
onSelected: onSelected
|
|
43503
|
-
}), children,
|
|
43528
|
+
}), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
|
|
43529
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
43530
|
+
}, /*#__PURE__*/React.createElement("td", {
|
|
43531
|
+
colSpan: columns === null || columns === undefined ? undefined : columns.length,
|
|
43532
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
43533
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
43534
|
+
style: {
|
|
43535
|
+
display: 'flex',
|
|
43536
|
+
gap: 10,
|
|
43537
|
+
margin: '10px'
|
|
43538
|
+
},
|
|
43539
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
43540
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
43541
|
+
text: "Previous"
|
|
43542
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
43543
|
+
disabled: !previousCursor,
|
|
43544
|
+
onClick: function onClick() {
|
|
43545
|
+
return onPreviousPage && onPreviousPage(previousCursor);
|
|
43546
|
+
},
|
|
43547
|
+
auto: true,
|
|
43548
|
+
px: 0.6,
|
|
43549
|
+
scale: 2 / 3,
|
|
43550
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
|
|
43551
|
+
})), /*#__PURE__*/React.createElement(Tooltip, {
|
|
43552
|
+
text: "Next"
|
|
43553
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
43554
|
+
disabled: !nextCursor,
|
|
43555
|
+
onClick: function onClick() {
|
|
43556
|
+
return onNextPage && onNextPage(nextCursor);
|
|
43557
|
+
},
|
|
43558
|
+
auto: true,
|
|
43559
|
+
px: 0.6,
|
|
43560
|
+
scale: 2 / 3,
|
|
43561
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronRight$1, null)
|
|
43562
|
+
}))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
|
|
43504
43563
|
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
43505
43564
|
}, /*#__PURE__*/React.createElement("td", {
|
|
43506
43565
|
colSpan: columns === null || columns === undefined ? undefined : columns.length,
|
|
@@ -43509,8 +43568,7 @@ function TableComponent(tableProps) {
|
|
|
43509
43568
|
style: {
|
|
43510
43569
|
marginLeft: '10px',
|
|
43511
43570
|
marginRight: '10px',
|
|
43512
|
-
marginTop: '10px'
|
|
43513
|
-
marginBottom: '5px'
|
|
43571
|
+
marginTop: '10px'
|
|
43514
43572
|
},
|
|
43515
43573
|
onChange: function onChange(pageNumber) {
|
|
43516
43574
|
// Get the range for the current page
|
|
@@ -32,8 +32,13 @@ type DataTableProps = {
|
|
|
32
32
|
dataLength?: number;
|
|
33
33
|
viewLength?: number;
|
|
34
34
|
onPageChange?: (page: number, start: number, end: number) => void;
|
|
35
|
+
cursorPagination?: boolean;
|
|
36
|
+
previousCursor?: string;
|
|
37
|
+
nextCursor?: string;
|
|
38
|
+
onNextPage?: (next?: string) => void;
|
|
39
|
+
onPreviousPage?: (prev?: string) => void;
|
|
35
40
|
};
|
|
36
41
|
declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
|
|
37
|
-
onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu }: DataTableProps): React.JSX.Element;
|
|
42
|
+
onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu, cursorPagination, previousCursor, nextCursor, hasMore, onNextPage, onPreviousPage, }: DataTableProps): React.JSX.Element;
|
|
38
43
|
declare const _default: React.MemoExoticComponent<typeof DataTable>;
|
|
39
44
|
export default _default;
|
package/dist/table/index.js
CHANGED
|
@@ -19973,9 +19973,9 @@ var TableHead = function TableHead(props) {
|
|
|
19973
19973
|
});
|
|
19974
19974
|
};
|
|
19975
19975
|
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
19976
|
-
className: _JSXStyle.dynamic([["
|
|
19976
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
19977
19977
|
}, /*#__PURE__*/React.createElement("tr", {
|
|
19978
|
-
className: _JSXStyle.dynamic([["
|
|
19978
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
19979
19979
|
}, columns.map(function (column, index) {
|
|
19980
19980
|
var _String2;
|
|
19981
19981
|
var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
|
|
@@ -19989,23 +19989,23 @@ var TableHead = function TableHead(props) {
|
|
|
19989
19989
|
},
|
|
19990
19990
|
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
19991
19991
|
"data-column": dataName,
|
|
19992
|
-
className: _JSXStyle.dynamic([["
|
|
19992
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
|
|
19993
19993
|
}, /*#__PURE__*/React.createElement("div", {
|
|
19994
|
-
className: _JSXStyle.dynamic([["
|
|
19994
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
|
|
19995
19995
|
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
19996
|
-
className: _JSXStyle.dynamic([["
|
|
19996
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
19997
19997
|
}), /*#__PURE__*/React.createElement("span", {
|
|
19998
19998
|
style: {
|
|
19999
19999
|
textAlign: 'center'
|
|
20000
20000
|
},
|
|
20001
|
-
className: _JSXStyle.dynamic([["
|
|
20001
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
20002
20002
|
}, column.text)));
|
|
20003
20003
|
})), showFilters && /*#__PURE__*/React.createElement("tr", {
|
|
20004
|
-
className: _JSXStyle.dynamic([["
|
|
20004
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
20005
20005
|
}, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
20006
|
-
id: "
|
|
20007
|
-
dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n
|
|
20008
|
-
}, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n
|
|
20006
|
+
id: "2156261549",
|
|
20007
|
+
dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
|
|
20008
|
+
}, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
|
|
20009
20009
|
};
|
|
20010
20010
|
TableHead.displayName = 'TableHead';
|
|
20011
20011
|
|
|
@@ -31592,7 +31592,15 @@ function DataTable(_ref) {
|
|
|
31592
31592
|
viewLength = _ref.viewLength,
|
|
31593
31593
|
_onPageChange = _ref.onPageChange,
|
|
31594
31594
|
_ref$disableMenu = _ref.disableMenu,
|
|
31595
|
-
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu
|
|
31595
|
+
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu,
|
|
31596
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
31597
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
31598
|
+
previousCursor = _ref.previousCursor,
|
|
31599
|
+
nextCursor = _ref.nextCursor,
|
|
31600
|
+
_ref$hasMore = _ref.hasMore,
|
|
31601
|
+
hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
|
|
31602
|
+
onNextPage = _ref.onNextPage,
|
|
31603
|
+
onPreviousPage = _ref.onPreviousPage;
|
|
31596
31604
|
var TABLE_ID = _.uniqueId('tbl');
|
|
31597
31605
|
// const [anchorEl, setAnchorEl] = useState(null);
|
|
31598
31606
|
var _useState = React.useState([]),
|
|
@@ -31691,12 +31699,16 @@ function DataTable(_ref) {
|
|
|
31691
31699
|
// };
|
|
31692
31700
|
|
|
31693
31701
|
var COLUMNS = cols.filter(function (col) {
|
|
31694
|
-
|
|
31702
|
+
var _String3;
|
|
31703
|
+
var dataName = (_String3 = String(col === null || col === undefined ? undefined : col.name)) === null || _String3 === undefined ? undefined : _String3.replace(' ', '_').toLowerCase();
|
|
31704
|
+
return !hideColumn.includes(dataName);
|
|
31695
31705
|
});
|
|
31696
31706
|
var content = function content() {
|
|
31697
31707
|
return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
|
|
31708
|
+
var _String4;
|
|
31698
31709
|
var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
|
|
31699
|
-
var
|
|
31710
|
+
var dataName = (_String4 = String(option.name)) === null || _String4 === undefined ? undefined : _String4.replace(' ', '_').toLowerCase();
|
|
31711
|
+
var isSelected = !hideColumn.includes(dataName);
|
|
31700
31712
|
return /*#__PURE__*/React.createElement(Popover.Item, {
|
|
31701
31713
|
selected: isSelected,
|
|
31702
31714
|
key: colunqid,
|
|
@@ -31848,6 +31860,12 @@ function DataTable(_ref) {
|
|
|
31848
31860
|
}, style)
|
|
31849
31861
|
}, /*#__PURE__*/React.createElement(Table, {
|
|
31850
31862
|
stickyHeader: true,
|
|
31863
|
+
cursorPagination: cursorPagination,
|
|
31864
|
+
previousCursor: previousCursor,
|
|
31865
|
+
nextCursor: nextCursor,
|
|
31866
|
+
hasMore: hasMore,
|
|
31867
|
+
onNextPage: onNextPage,
|
|
31868
|
+
onPreviousPage: onPreviousPage,
|
|
31851
31869
|
dataLength: dataLength,
|
|
31852
31870
|
viewLength: viewLength,
|
|
31853
31871
|
onPageChange: function onPageChange(page, start, end) {
|
|
@@ -32445,7 +32463,7 @@ var Pagination = withScale(PaginationComponent);
|
|
|
32445
32463
|
Pagination.Previous = PaginationPrevious;
|
|
32446
32464
|
Pagination.Next = PaginationNext;
|
|
32447
32465
|
|
|
32448
|
-
var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
32466
|
+
var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
32449
32467
|
function TableComponent(tableProps) {
|
|
32450
32468
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
32451
32469
|
var _ref = tableProps,
|
|
@@ -32461,6 +32479,13 @@ function TableComponent(tableProps) {
|
|
|
32461
32479
|
rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
|
|
32462
32480
|
_ref$readOnly = _ref.readOnly,
|
|
32463
32481
|
readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
|
|
32482
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
32483
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
32484
|
+
previousCursor = _ref.previousCursor,
|
|
32485
|
+
nextCursor = _ref.nextCursor;
|
|
32486
|
+
_ref.hasMore;
|
|
32487
|
+
var onNextPage = _ref.onNextPage,
|
|
32488
|
+
onPreviousPage = _ref.onPreviousPage,
|
|
32464
32489
|
onRow = _ref.onRow,
|
|
32465
32490
|
onCell = _ref.onCell;
|
|
32466
32491
|
_ref.onChange;
|
|
@@ -32553,7 +32578,41 @@ function TableComponent(tableProps) {
|
|
|
32553
32578
|
rowDraggable: rowDraggable,
|
|
32554
32579
|
readOnly: readOnly,
|
|
32555
32580
|
onSelected: onSelected
|
|
32556
|
-
}), children,
|
|
32581
|
+
}), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
|
|
32582
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
32583
|
+
}, /*#__PURE__*/React.createElement("td", {
|
|
32584
|
+
colSpan: columns === null || columns === undefined ? undefined : columns.length,
|
|
32585
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
32586
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
32587
|
+
style: {
|
|
32588
|
+
display: 'flex',
|
|
32589
|
+
gap: 10,
|
|
32590
|
+
margin: '10px'
|
|
32591
|
+
},
|
|
32592
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
32593
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
32594
|
+
text: "Previous"
|
|
32595
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
32596
|
+
disabled: !previousCursor,
|
|
32597
|
+
onClick: function onClick() {
|
|
32598
|
+
return onPreviousPage && onPreviousPage(previousCursor);
|
|
32599
|
+
},
|
|
32600
|
+
auto: true,
|
|
32601
|
+
px: 0.6,
|
|
32602
|
+
scale: 2 / 3,
|
|
32603
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
|
|
32604
|
+
})), /*#__PURE__*/React.createElement(Tooltip, {
|
|
32605
|
+
text: "Next"
|
|
32606
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
32607
|
+
disabled: !nextCursor,
|
|
32608
|
+
onClick: function onClick() {
|
|
32609
|
+
return onNextPage && onNextPage(nextCursor);
|
|
32610
|
+
},
|
|
32611
|
+
auto: true,
|
|
32612
|
+
px: 0.6,
|
|
32613
|
+
scale: 2 / 3,
|
|
32614
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronRight$1, null)
|
|
32615
|
+
}))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
|
|
32557
32616
|
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
32558
32617
|
}, /*#__PURE__*/React.createElement("td", {
|
|
32559
32618
|
colSpan: columns === null || columns === undefined ? undefined : columns.length,
|
|
@@ -32562,8 +32621,7 @@ function TableComponent(tableProps) {
|
|
|
32562
32621
|
style: {
|
|
32563
32622
|
marginLeft: '10px',
|
|
32564
32623
|
marginRight: '10px',
|
|
32565
|
-
marginTop: '10px'
|
|
32566
|
-
marginBottom: '5px'
|
|
32624
|
+
marginTop: '10px'
|
|
32567
32625
|
},
|
|
32568
32626
|
onChange: function onChange(pageNumber) {
|
|
32569
32627
|
// Get the range for the current page
|
package/dist/table/table.d.ts
CHANGED
|
@@ -20,6 +20,12 @@ interface Props<TableDataItem extends TableDataItemBase> {
|
|
|
20
20
|
dataLength?: number;
|
|
21
21
|
viewLength?: number;
|
|
22
22
|
rowClassName?: TableRowClassNameHandler<TableDataItem>;
|
|
23
|
+
cursorPagination?: boolean;
|
|
24
|
+
previousCursor?: string;
|
|
25
|
+
nextCursor?: string;
|
|
26
|
+
hasMore?: boolean;
|
|
27
|
+
onNextPage?: (next?: string) => void;
|
|
28
|
+
onPreviousPage?: (prev?: string) => void;
|
|
23
29
|
}
|
|
24
30
|
type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
|
|
25
31
|
export type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
|
|
@@ -32,8 +32,13 @@ type DataTableProps = {
|
|
|
32
32
|
dataLength?: number;
|
|
33
33
|
viewLength?: number;
|
|
34
34
|
onPageChange?: (page: number, start: number, end: number) => void;
|
|
35
|
+
cursorPagination?: boolean;
|
|
36
|
+
previousCursor?: string;
|
|
37
|
+
nextCursor?: string;
|
|
38
|
+
onNextPage?: (next?: string) => void;
|
|
39
|
+
onPreviousPage?: (prev?: string) => void;
|
|
35
40
|
};
|
|
36
41
|
declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
|
|
37
|
-
onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu }: DataTableProps): React.JSX.Element;
|
|
42
|
+
onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu, cursorPagination, previousCursor, nextCursor, hasMore, onNextPage, onPreviousPage, }: DataTableProps): React.JSX.Element;
|
|
38
43
|
declare const _default: React.MemoExoticComponent<typeof DataTable>;
|
|
39
44
|
export default _default;
|
package/esm/table/data-table.js
CHANGED
|
@@ -51,7 +51,15 @@ function DataTable(_ref) {
|
|
|
51
51
|
viewLength = _ref.viewLength,
|
|
52
52
|
_onPageChange = _ref.onPageChange,
|
|
53
53
|
_ref$disableMenu = _ref.disableMenu,
|
|
54
|
-
disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu
|
|
54
|
+
disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu,
|
|
55
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
56
|
+
cursorPagination = _ref$cursorPagination === void 0 ? false : _ref$cursorPagination,
|
|
57
|
+
previousCursor = _ref.previousCursor,
|
|
58
|
+
nextCursor = _ref.nextCursor,
|
|
59
|
+
_ref$hasMore = _ref.hasMore,
|
|
60
|
+
hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
|
|
61
|
+
onNextPage = _ref.onNextPage,
|
|
62
|
+
onPreviousPage = _ref.onPreviousPage;
|
|
55
63
|
var TABLE_ID = _.uniqueId('tbl');
|
|
56
64
|
// const [anchorEl, setAnchorEl] = useState(null);
|
|
57
65
|
var _useState = useState([]),
|
|
@@ -150,12 +158,16 @@ function DataTable(_ref) {
|
|
|
150
158
|
// };
|
|
151
159
|
|
|
152
160
|
var COLUMNS = cols.filter(function (col) {
|
|
153
|
-
|
|
161
|
+
var _String3;
|
|
162
|
+
var dataName = (_String3 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
|
|
163
|
+
return !hideColumn.includes(dataName);
|
|
154
164
|
});
|
|
155
165
|
var content = function content() {
|
|
156
166
|
return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
|
|
167
|
+
var _String4;
|
|
157
168
|
var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
|
|
158
|
-
var
|
|
169
|
+
var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
|
|
170
|
+
var isSelected = !hideColumn.includes(dataName);
|
|
159
171
|
return /*#__PURE__*/React.createElement(Popover.Item, {
|
|
160
172
|
selected: isSelected,
|
|
161
173
|
key: colunqid,
|
|
@@ -307,6 +319,12 @@ function DataTable(_ref) {
|
|
|
307
319
|
}, style)
|
|
308
320
|
}, /*#__PURE__*/React.createElement(Table, {
|
|
309
321
|
stickyHeader: true,
|
|
322
|
+
cursorPagination: cursorPagination,
|
|
323
|
+
previousCursor: previousCursor,
|
|
324
|
+
nextCursor: nextCursor,
|
|
325
|
+
hasMore: hasMore,
|
|
326
|
+
onNextPage: onNextPage,
|
|
327
|
+
onPreviousPage: onPreviousPage,
|
|
310
328
|
dataLength: dataLength,
|
|
311
329
|
viewLength: viewLength,
|
|
312
330
|
onPageChange: function onPageChange(page, start, end) {
|
package/esm/table/table-head.js
CHANGED
|
@@ -127,9 +127,9 @@ var TableHead = function TableHead(props) {
|
|
|
127
127
|
});
|
|
128
128
|
};
|
|
129
129
|
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
130
|
-
className: _JSXStyle.dynamic([["
|
|
130
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
131
131
|
}, /*#__PURE__*/React.createElement("tr", {
|
|
132
|
-
className: _JSXStyle.dynamic([["
|
|
132
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
133
133
|
}, columns.map(function (column, index) {
|
|
134
134
|
var _String2;
|
|
135
135
|
var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
|
|
@@ -143,23 +143,23 @@ var TableHead = function TableHead(props) {
|
|
|
143
143
|
},
|
|
144
144
|
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
145
145
|
"data-column": dataName,
|
|
146
|
-
className: _JSXStyle.dynamic([["
|
|
146
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
|
|
147
147
|
}, /*#__PURE__*/React.createElement("div", {
|
|
148
|
-
className: _JSXStyle.dynamic([["
|
|
148
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
|
|
149
149
|
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
150
|
-
className: _JSXStyle.dynamic([["
|
|
150
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
151
151
|
}), /*#__PURE__*/React.createElement("span", {
|
|
152
152
|
style: {
|
|
153
153
|
textAlign: 'center'
|
|
154
154
|
},
|
|
155
|
-
className: _JSXStyle.dynamic([["
|
|
155
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
156
156
|
}, column.text)));
|
|
157
157
|
})), showFilters && /*#__PURE__*/React.createElement("tr", {
|
|
158
|
-
className: _JSXStyle.dynamic([["
|
|
158
|
+
className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
159
159
|
}, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
160
|
-
id: "
|
|
161
|
-
dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n
|
|
162
|
-
}, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n
|
|
160
|
+
id: "2156261549",
|
|
161
|
+
dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
|
|
162
|
+
}, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
|
|
163
163
|
};
|
|
164
164
|
TableHead.displayName = 'TableHead';
|
|
165
165
|
export default TableHead;
|
package/esm/table/table.d.ts
CHANGED
|
@@ -20,6 +20,12 @@ interface Props<TableDataItem extends TableDataItemBase> {
|
|
|
20
20
|
dataLength?: number;
|
|
21
21
|
viewLength?: number;
|
|
22
22
|
rowClassName?: TableRowClassNameHandler<TableDataItem>;
|
|
23
|
+
cursorPagination?: boolean;
|
|
24
|
+
previousCursor?: string;
|
|
25
|
+
nextCursor?: string;
|
|
26
|
+
hasMore?: boolean;
|
|
27
|
+
onNextPage?: (next?: string) => void;
|
|
28
|
+
onPreviousPage?: (prev?: string) => void;
|
|
23
29
|
}
|
|
24
30
|
type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
|
|
25
31
|
export type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
|
package/esm/table/table.js
CHANGED
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
-
var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
5
|
+
var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
6
6
|
import _JSXStyle from "../styled-jsx.es.js";
|
|
7
7
|
/* "use client" */
|
|
8
8
|
|
|
@@ -16,6 +16,8 @@ import useScale, { withScale } from '../use-scale';
|
|
|
16
16
|
import TableColumn from './table-column';
|
|
17
17
|
import { ChevronLeft, ChevronRight } from '@helpdice/icons';
|
|
18
18
|
import Pagination from '../pagination';
|
|
19
|
+
import Button from '../button';
|
|
20
|
+
import Tooltip from '../tooltip';
|
|
19
21
|
function TableComponent(tableProps) {
|
|
20
22
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
21
23
|
var _ref = tableProps,
|
|
@@ -31,6 +33,14 @@ function TableComponent(tableProps) {
|
|
|
31
33
|
rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
|
|
32
34
|
_ref$readOnly = _ref.readOnly,
|
|
33
35
|
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
36
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
37
|
+
cursorPagination = _ref$cursorPagination === void 0 ? false : _ref$cursorPagination,
|
|
38
|
+
previousCursor = _ref.previousCursor,
|
|
39
|
+
nextCursor = _ref.nextCursor,
|
|
40
|
+
_ref$hasMore = _ref.hasMore,
|
|
41
|
+
hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
|
|
42
|
+
onNextPage = _ref.onNextPage,
|
|
43
|
+
onPreviousPage = _ref.onPreviousPage,
|
|
34
44
|
onRow = _ref.onRow,
|
|
35
45
|
onCell = _ref.onCell,
|
|
36
46
|
onChange = _ref.onChange,
|
|
@@ -123,7 +133,41 @@ function TableComponent(tableProps) {
|
|
|
123
133
|
rowDraggable: rowDraggable,
|
|
124
134
|
readOnly: readOnly,
|
|
125
135
|
onSelected: onSelected
|
|
126
|
-
}), children,
|
|
136
|
+
}), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
|
|
137
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
138
|
+
}, /*#__PURE__*/React.createElement("td", {
|
|
139
|
+
colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
|
|
140
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
141
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
142
|
+
style: {
|
|
143
|
+
display: 'flex',
|
|
144
|
+
gap: 10,
|
|
145
|
+
margin: '10px'
|
|
146
|
+
},
|
|
147
|
+
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
148
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
149
|
+
text: "Previous"
|
|
150
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
151
|
+
disabled: !previousCursor,
|
|
152
|
+
onClick: function onClick() {
|
|
153
|
+
return onPreviousPage && onPreviousPage(previousCursor);
|
|
154
|
+
},
|
|
155
|
+
auto: true,
|
|
156
|
+
px: 0.6,
|
|
157
|
+
scale: 2 / 3,
|
|
158
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null)
|
|
159
|
+
})), /*#__PURE__*/React.createElement(Tooltip, {
|
|
160
|
+
text: "Next"
|
|
161
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
162
|
+
disabled: !nextCursor,
|
|
163
|
+
onClick: function onClick() {
|
|
164
|
+
return onNextPage && onNextPage(nextCursor);
|
|
165
|
+
},
|
|
166
|
+
auto: true,
|
|
167
|
+
px: 0.6,
|
|
168
|
+
scale: 2 / 3,
|
|
169
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronRight, null)
|
|
170
|
+
}))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
|
|
127
171
|
className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
|
|
128
172
|
}, /*#__PURE__*/React.createElement("td", {
|
|
129
173
|
colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
|
|
@@ -132,8 +176,7 @@ function TableComponent(tableProps) {
|
|
|
132
176
|
style: {
|
|
133
177
|
marginLeft: '10px',
|
|
134
178
|
marginRight: '10px',
|
|
135
|
-
marginTop: '10px'
|
|
136
|
-
marginBottom: '5px'
|
|
179
|
+
marginTop: '10px'
|
|
137
180
|
},
|
|
138
181
|
onChange: function onChange(pageNumber) {
|
|
139
182
|
// Get the range for the current page
|