@helpdice/ui 1.4.1 → 1.4.2
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 +45 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
|
+
var Button$1 = require('components/button');
|
|
6
|
+
var Tooltip$1 = require('components/tooltip');
|
|
5
7
|
var require$$0 = require('react-is');
|
|
6
8
|
var isEqual = require('react-fast-compare');
|
|
7
9
|
|
|
@@ -42215,9 +42217,9 @@ var TableHead = function TableHead(props) {
|
|
|
42215
42217
|
});
|
|
42216
42218
|
};
|
|
42217
42219
|
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
42218
|
-
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]]])
|
|
42219
42221
|
}, /*#__PURE__*/React.createElement("tr", {
|
|
42220
|
-
className: _JSXStyle.dynamic([["
|
|
42222
|
+
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
42223
|
}, columns.map(function (column, index) {
|
|
42222
42224
|
var _String2;
|
|
42223
42225
|
var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
|
|
@@ -42231,23 +42233,23 @@ var TableHead = function TableHead(props) {
|
|
|
42231
42233
|
},
|
|
42232
42234
|
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
42233
42235
|
"data-column": dataName,
|
|
42234
|
-
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]]]) + " " + (column.className || "")
|
|
42235
42237
|
}, /*#__PURE__*/React.createElement("div", {
|
|
42236
|
-
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]]]) + " " + "thead-box"
|
|
42237
42239
|
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
42238
|
-
className: _JSXStyle.dynamic([["
|
|
42240
|
+
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
42241
|
}), /*#__PURE__*/React.createElement("span", {
|
|
42240
42242
|
style: {
|
|
42241
42243
|
textAlign: 'center'
|
|
42242
42244
|
},
|
|
42243
|
-
className: _JSXStyle.dynamic([["
|
|
42245
|
+
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
42246
|
}, column.text)));
|
|
42245
42247
|
})), showFilters && /*#__PURE__*/React.createElement("tr", {
|
|
42246
|
-
className: _JSXStyle.dynamic([["
|
|
42248
|
+
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
42249
|
}, 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
|
|
42250
|
+
id: "2156261549",
|
|
42251
|
+
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]
|
|
42252
|
+
}, "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
42253
|
};
|
|
42252
42254
|
TableHead.displayName = 'TableHead';
|
|
42253
42255
|
|
|
@@ -42889,7 +42891,15 @@ function DataTable(_ref) {
|
|
|
42889
42891
|
viewLength = _ref.viewLength,
|
|
42890
42892
|
_onPageChange = _ref.onPageChange,
|
|
42891
42893
|
_ref$disableMenu = _ref.disableMenu,
|
|
42892
|
-
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu
|
|
42894
|
+
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu,
|
|
42895
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
42896
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
42897
|
+
previousCursor = _ref.previousCursor,
|
|
42898
|
+
nextCursor = _ref.nextCursor,
|
|
42899
|
+
_ref$hasMore = _ref.hasMore,
|
|
42900
|
+
hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
|
|
42901
|
+
onNextPage = _ref.onNextPage,
|
|
42902
|
+
onPreviousPage = _ref.onPreviousPage;
|
|
42893
42903
|
var TABLE_ID = _.uniqueId('tbl');
|
|
42894
42904
|
// const [anchorEl, setAnchorEl] = useState(null);
|
|
42895
42905
|
var _useState = React.useState([]),
|
|
@@ -42988,12 +42998,16 @@ function DataTable(_ref) {
|
|
|
42988
42998
|
// };
|
|
42989
42999
|
|
|
42990
43000
|
var COLUMNS = cols.filter(function (col) {
|
|
42991
|
-
|
|
43001
|
+
var _String3;
|
|
43002
|
+
var dataName = (_String3 = String(col === null || col === undefined ? undefined : col.name)) === null || _String3 === undefined ? undefined : _String3.replace(' ', '_').toLowerCase();
|
|
43003
|
+
return !hideColumn.includes(dataName);
|
|
42992
43004
|
});
|
|
42993
43005
|
var content = function content() {
|
|
42994
43006
|
return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
|
|
43007
|
+
var _String4;
|
|
42995
43008
|
var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
|
|
42996
|
-
var
|
|
43009
|
+
var dataName = (_String4 = String(option.name)) === null || _String4 === undefined ? undefined : _String4.replace(' ', '_').toLowerCase();
|
|
43010
|
+
var isSelected = !hideColumn.includes(dataName);
|
|
42997
43011
|
return /*#__PURE__*/React.createElement(Popover.Item, {
|
|
42998
43012
|
selected: isSelected,
|
|
42999
43013
|
key: colunqid,
|
|
@@ -43145,6 +43159,12 @@ function DataTable(_ref) {
|
|
|
43145
43159
|
}, style)
|
|
43146
43160
|
}, /*#__PURE__*/React.createElement(Table, {
|
|
43147
43161
|
stickyHeader: true,
|
|
43162
|
+
cursorPagination: cursorPagination,
|
|
43163
|
+
previousCursor: previousCursor,
|
|
43164
|
+
nextCursor: nextCursor,
|
|
43165
|
+
hasMore: hasMore,
|
|
43166
|
+
onNextPage: onNextPage,
|
|
43167
|
+
onPreviousPage: onPreviousPage,
|
|
43148
43168
|
dataLength: dataLength,
|
|
43149
43169
|
viewLength: viewLength,
|
|
43150
43170
|
onPageChange: function onPageChange(page, start, end) {
|
|
@@ -43392,7 +43412,7 @@ var TableColumn = function TableColumn(columnProps) {
|
|
|
43392
43412
|
};
|
|
43393
43413
|
TableColumn.displayName = 'TableColumn';
|
|
43394
43414
|
|
|
43395
|
-
var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
43415
|
+
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
43416
|
function TableComponent(tableProps) {
|
|
43397
43417
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
43398
43418
|
var _ref = tableProps,
|
|
@@ -43408,6 +43428,13 @@ function TableComponent(tableProps) {
|
|
|
43408
43428
|
rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
|
|
43409
43429
|
_ref$readOnly = _ref.readOnly,
|
|
43410
43430
|
readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
|
|
43431
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
43432
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
43433
|
+
previousCursor = _ref.previousCursor,
|
|
43434
|
+
nextCursor = _ref.nextCursor;
|
|
43435
|
+
_ref.hasMore;
|
|
43436
|
+
var onNextPage = _ref.onNextPage,
|
|
43437
|
+
onPreviousPage = _ref.onPreviousPage,
|
|
43411
43438
|
onRow = _ref.onRow,
|
|
43412
43439
|
onCell = _ref.onCell;
|
|
43413
43440
|
_ref.onChange;
|
|
@@ -43500,7 +43527,39 @@ function TableComponent(tableProps) {
|
|
|
43500
43527
|
rowDraggable: rowDraggable,
|
|
43501
43528
|
readOnly: readOnly,
|
|
43502
43529
|
onSelected: onSelected
|
|
43503
|
-
}), children,
|
|
43530
|
+
}), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
|
|
43531
|
+
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)]]])
|
|
43532
|
+
}, /*#__PURE__*/React.createElement("td", {
|
|
43533
|
+
colSpan: columns === null || columns === undefined ? undefined : columns.length,
|
|
43534
|
+
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)]]])
|
|
43535
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
43536
|
+
style: {
|
|
43537
|
+
display: 'flex',
|
|
43538
|
+
gap: 10,
|
|
43539
|
+
margin: '10px'
|
|
43540
|
+
},
|
|
43541
|
+
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)]]])
|
|
43542
|
+
}, /*#__PURE__*/React.createElement(Tooltip$1, {
|
|
43543
|
+
text: "Previous"
|
|
43544
|
+
}, /*#__PURE__*/React.createElement(Button$1, {
|
|
43545
|
+
disabled: !previousCursor,
|
|
43546
|
+
onClick: function onClick() {
|
|
43547
|
+
return onPreviousPage && onPreviousPage(previousCursor);
|
|
43548
|
+
},
|
|
43549
|
+
auto: true,
|
|
43550
|
+
px: 0.6,
|
|
43551
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
|
|
43552
|
+
})), /*#__PURE__*/React.createElement(Tooltip$1, {
|
|
43553
|
+
text: "Next"
|
|
43554
|
+
}, /*#__PURE__*/React.createElement(Button$1, {
|
|
43555
|
+
disabled: !nextCursor,
|
|
43556
|
+
onClick: function onClick() {
|
|
43557
|
+
return onNextPage && onNextPage(nextCursor);
|
|
43558
|
+
},
|
|
43559
|
+
auto: true,
|
|
43560
|
+
px: 0.6,
|
|
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
|
@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactDom = require('react-dom');
|
|
7
|
+
var Button$1 = require('components/button');
|
|
8
|
+
var Tooltip$1 = require('components/tooltip');
|
|
7
9
|
|
|
8
10
|
function _interopNamespaceDefault(e) {
|
|
9
11
|
var n = Object.create(null);
|
|
@@ -19973,9 +19975,9 @@ var TableHead = function TableHead(props) {
|
|
|
19973
19975
|
});
|
|
19974
19976
|
};
|
|
19975
19977
|
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
19976
|
-
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]]])
|
|
19977
19979
|
}, /*#__PURE__*/React.createElement("tr", {
|
|
19978
|
-
className: _JSXStyle.dynamic([["
|
|
19980
|
+
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
19981
|
}, columns.map(function (column, index) {
|
|
19980
19982
|
var _String2;
|
|
19981
19983
|
var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
|
|
@@ -19989,23 +19991,23 @@ var TableHead = function TableHead(props) {
|
|
|
19989
19991
|
},
|
|
19990
19992
|
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
19991
19993
|
"data-column": dataName,
|
|
19992
|
-
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]]]) + " " + (column.className || "")
|
|
19993
19995
|
}, /*#__PURE__*/React.createElement("div", {
|
|
19994
|
-
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]]]) + " " + "thead-box"
|
|
19995
19997
|
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
19996
|
-
className: _JSXStyle.dynamic([["
|
|
19998
|
+
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
19999
|
}), /*#__PURE__*/React.createElement("span", {
|
|
19998
20000
|
style: {
|
|
19999
20001
|
textAlign: 'center'
|
|
20000
20002
|
},
|
|
20001
|
-
className: _JSXStyle.dynamic([["
|
|
20003
|
+
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
20004
|
}, column.text)));
|
|
20003
20005
|
})), showFilters && /*#__PURE__*/React.createElement("tr", {
|
|
20004
|
-
className: _JSXStyle.dynamic([["
|
|
20006
|
+
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
20007
|
}, 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
|
|
20008
|
+
id: "2156261549",
|
|
20009
|
+
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]
|
|
20010
|
+
}, "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
20011
|
};
|
|
20010
20012
|
TableHead.displayName = 'TableHead';
|
|
20011
20013
|
|
|
@@ -31592,7 +31594,15 @@ function DataTable(_ref) {
|
|
|
31592
31594
|
viewLength = _ref.viewLength,
|
|
31593
31595
|
_onPageChange = _ref.onPageChange,
|
|
31594
31596
|
_ref$disableMenu = _ref.disableMenu,
|
|
31595
|
-
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu
|
|
31597
|
+
disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu,
|
|
31598
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
31599
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
31600
|
+
previousCursor = _ref.previousCursor,
|
|
31601
|
+
nextCursor = _ref.nextCursor,
|
|
31602
|
+
_ref$hasMore = _ref.hasMore,
|
|
31603
|
+
hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
|
|
31604
|
+
onNextPage = _ref.onNextPage,
|
|
31605
|
+
onPreviousPage = _ref.onPreviousPage;
|
|
31596
31606
|
var TABLE_ID = _.uniqueId('tbl');
|
|
31597
31607
|
// const [anchorEl, setAnchorEl] = useState(null);
|
|
31598
31608
|
var _useState = React.useState([]),
|
|
@@ -31691,12 +31701,16 @@ function DataTable(_ref) {
|
|
|
31691
31701
|
// };
|
|
31692
31702
|
|
|
31693
31703
|
var COLUMNS = cols.filter(function (col) {
|
|
31694
|
-
|
|
31704
|
+
var _String3;
|
|
31705
|
+
var dataName = (_String3 = String(col === null || col === undefined ? undefined : col.name)) === null || _String3 === undefined ? undefined : _String3.replace(' ', '_').toLowerCase();
|
|
31706
|
+
return !hideColumn.includes(dataName);
|
|
31695
31707
|
});
|
|
31696
31708
|
var content = function content() {
|
|
31697
31709
|
return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
|
|
31710
|
+
var _String4;
|
|
31698
31711
|
var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
|
|
31699
|
-
var
|
|
31712
|
+
var dataName = (_String4 = String(option.name)) === null || _String4 === undefined ? undefined : _String4.replace(' ', '_').toLowerCase();
|
|
31713
|
+
var isSelected = !hideColumn.includes(dataName);
|
|
31700
31714
|
return /*#__PURE__*/React.createElement(Popover.Item, {
|
|
31701
31715
|
selected: isSelected,
|
|
31702
31716
|
key: colunqid,
|
|
@@ -31848,6 +31862,12 @@ function DataTable(_ref) {
|
|
|
31848
31862
|
}, style)
|
|
31849
31863
|
}, /*#__PURE__*/React.createElement(Table, {
|
|
31850
31864
|
stickyHeader: true,
|
|
31865
|
+
cursorPagination: cursorPagination,
|
|
31866
|
+
previousCursor: previousCursor,
|
|
31867
|
+
nextCursor: nextCursor,
|
|
31868
|
+
hasMore: hasMore,
|
|
31869
|
+
onNextPage: onNextPage,
|
|
31870
|
+
onPreviousPage: onPreviousPage,
|
|
31851
31871
|
dataLength: dataLength,
|
|
31852
31872
|
viewLength: viewLength,
|
|
31853
31873
|
onPageChange: function onPageChange(page, start, end) {
|
|
@@ -32445,7 +32465,7 @@ var Pagination = withScale(PaginationComponent);
|
|
|
32445
32465
|
Pagination.Previous = PaginationPrevious;
|
|
32446
32466
|
Pagination.Next = PaginationNext;
|
|
32447
32467
|
|
|
32448
|
-
var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
|
|
32468
|
+
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
32469
|
function TableComponent(tableProps) {
|
|
32450
32470
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
32451
32471
|
var _ref = tableProps,
|
|
@@ -32461,6 +32481,13 @@ function TableComponent(tableProps) {
|
|
|
32461
32481
|
rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
|
|
32462
32482
|
_ref$readOnly = _ref.readOnly,
|
|
32463
32483
|
readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
|
|
32484
|
+
_ref$cursorPagination = _ref.cursorPagination,
|
|
32485
|
+
cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
|
|
32486
|
+
previousCursor = _ref.previousCursor,
|
|
32487
|
+
nextCursor = _ref.nextCursor;
|
|
32488
|
+
_ref.hasMore;
|
|
32489
|
+
var onNextPage = _ref.onNextPage,
|
|
32490
|
+
onPreviousPage = _ref.onPreviousPage,
|
|
32464
32491
|
onRow = _ref.onRow,
|
|
32465
32492
|
onCell = _ref.onCell;
|
|
32466
32493
|
_ref.onChange;
|
|
@@ -32553,7 +32580,39 @@ function TableComponent(tableProps) {
|
|
|
32553
32580
|
rowDraggable: rowDraggable,
|
|
32554
32581
|
readOnly: readOnly,
|
|
32555
32582
|
onSelected: onSelected
|
|
32556
|
-
}), children,
|
|
32583
|
+
}), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
|
|
32584
|
+
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)]]])
|
|
32585
|
+
}, /*#__PURE__*/React.createElement("td", {
|
|
32586
|
+
colSpan: columns === null || columns === undefined ? undefined : columns.length,
|
|
32587
|
+
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)]]])
|
|
32588
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
32589
|
+
style: {
|
|
32590
|
+
display: 'flex',
|
|
32591
|
+
gap: 10,
|
|
32592
|
+
margin: '10px'
|
|
32593
|
+
},
|
|
32594
|
+
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)]]])
|
|
32595
|
+
}, /*#__PURE__*/React.createElement(Tooltip$1, {
|
|
32596
|
+
text: "Previous"
|
|
32597
|
+
}, /*#__PURE__*/React.createElement(Button$1, {
|
|
32598
|
+
disabled: !previousCursor,
|
|
32599
|
+
onClick: function onClick() {
|
|
32600
|
+
return onPreviousPage && onPreviousPage(previousCursor);
|
|
32601
|
+
},
|
|
32602
|
+
auto: true,
|
|
32603
|
+
px: 0.6,
|
|
32604
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
|
|
32605
|
+
})), /*#__PURE__*/React.createElement(Tooltip$1, {
|
|
32606
|
+
text: "Next"
|
|
32607
|
+
}, /*#__PURE__*/React.createElement(Button$1, {
|
|
32608
|
+
disabled: !nextCursor,
|
|
32609
|
+
onClick: function onClick() {
|
|
32610
|
+
return onNextPage && onNextPage(nextCursor);
|
|
32611
|
+
},
|
|
32612
|
+
auto: true,
|
|
32613
|
+
px: 0.6,
|
|
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 'components/button';
|
|
20
|
+
import Tooltip from 'components/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,39 @@ 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
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null)
|
|
158
|
+
})), /*#__PURE__*/React.createElement(Tooltip, {
|
|
159
|
+
text: "Next"
|
|
160
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
161
|
+
disabled: !nextCursor,
|
|
162
|
+
onClick: function onClick() {
|
|
163
|
+
return onNextPage && onNextPage(nextCursor);
|
|
164
|
+
},
|
|
165
|
+
auto: true,
|
|
166
|
+
px: 0.6,
|
|
167
|
+
iconRight: /*#__PURE__*/React.createElement(ChevronRight, null)
|
|
168
|
+
}))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
|
|
127
169
|
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
170
|
}, /*#__PURE__*/React.createElement("td", {
|
|
129
171
|
colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
|
|
@@ -132,8 +174,7 @@ function TableComponent(tableProps) {
|
|
|
132
174
|
style: {
|
|
133
175
|
marginLeft: '10px',
|
|
134
176
|
marginRight: '10px',
|
|
135
|
-
marginTop: '10px'
|
|
136
|
-
marginBottom: '5px'
|
|
177
|
+
marginTop: '10px'
|
|
137
178
|
},
|
|
138
179
|
onChange: function onChange(pageNumber) {
|
|
139
180
|
// Get the range for the current page
|