@ballistix.digital/react-components 3.1.8 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +38 -37
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +38 -37
- package/dist/index.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5332,7 +5332,7 @@ var isValidState = function (state) {
|
|
|
5332
5332
|
|
|
5333
5333
|
var TableList2 = function (props) {
|
|
5334
5334
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5335
|
-
var id = props.id, config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onRowClick = props.onRowClick, onChange = props.onChange, stylesOverrides = props.styles;
|
|
5335
|
+
var id = props.id, config = props.table, head = props.head, foot = props.foot, leftSide = props.leftSide, isLoading = props.isLoading, onRowClick = props.onRowClick, onChange = props.onChange, stylesOverrides = props.styles;
|
|
5336
5336
|
var _j = React.useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _j[0], setSorting = _j[1];
|
|
5337
5337
|
var _k = React.useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
|
|
5338
5338
|
var _l = React.useState([]), columnOrder = _l[0], setColumnOrder = _l[1];
|
|
@@ -5457,41 +5457,41 @@ var TableList2 = function (props) {
|
|
|
5457
5457
|
setTableState(id, state);
|
|
5458
5458
|
}
|
|
5459
5459
|
}, [id, state]);
|
|
5460
|
-
return (jsxRuntime.jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsxRuntime.jsx("div", { className: styles.head, children: head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.
|
|
5461
|
-
|
|
5462
|
-
|
|
5463
|
-
|
|
5464
|
-
|
|
5465
|
-
|
|
5466
|
-
|
|
5467
|
-
|
|
5468
|
-
|
|
5469
|
-
|
|
5470
|
-
|
|
5471
|
-
|
|
5472
|
-
|
|
5473
|
-
|
|
5474
|
-
|
|
5475
|
-
|
|
5476
|
-
|
|
5477
|
-
|
|
5478
|
-
|
|
5479
|
-
|
|
5480
|
-
|
|
5481
|
-
|
|
5482
|
-
|
|
5483
|
-
|
|
5484
|
-
|
|
5485
|
-
|
|
5486
|
-
|
|
5487
|
-
|
|
5488
|
-
|
|
5489
|
-
|
|
5490
|
-
|
|
5491
|
-
|
|
5492
|
-
|
|
5493
|
-
|
|
5494
|
-
|
|
5460
|
+
return (jsxRuntime.jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsxRuntime.jsx("div", { className: styles.head, children: head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.jsxs("div", { className: styles.body.styleWrapper, children: [leftSide && (jsxRuntime.jsx("div", { className: styles.leftSide, children: leftSide(state) })), jsxRuntime.jsxs("div", { className: styles.body.tableWrapper, children: [jsxRuntime.jsxs("table", { className: styles.body.table.container, children: [jsxRuntime.jsx("thead", { className: styles.body.table.head.container, children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { className: styles.body.table.head.row, children: headerGroup.headers.map(function (header) {
|
|
5461
|
+
// Default sort icon to show a user that the column is sortable
|
|
5462
|
+
var SortIconElement = solid.ChevronUpDownIcon;
|
|
5463
|
+
if (header.column.getIsSorted()) {
|
|
5464
|
+
SortIconElement =
|
|
5465
|
+
header.column.getIsSorted() === 'asc'
|
|
5466
|
+
? solid.ChevronUpIcon
|
|
5467
|
+
: solid.ChevronDownIcon;
|
|
5468
|
+
}
|
|
5469
|
+
return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
|
|
5470
|
+
minWidth: !!header.column.columnDef.size &&
|
|
5471
|
+
header.column.columnDef.size !== 150
|
|
5472
|
+
? "".concat(header.column.columnDef.size, "px")
|
|
5473
|
+
: 'auto',
|
|
5474
|
+
}, children: jsxRuntime.jsxs("div", { className: "grid gap-x-1 items-center", style: {
|
|
5475
|
+
gridTemplateColumns: '1fr auto',
|
|
5476
|
+
}, children: [header.isPlaceholder ? null : (jsxRuntime.jsx("div", { className: styles.body.table.head.cell.text, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getCanSort() && (jsxRuntime.jsx("span", { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
5477
|
+
.container, header.column.getIsSorted()
|
|
5478
|
+
? styles.body.table.head.cell
|
|
5479
|
+
.sortIndicator.isSorted
|
|
5480
|
+
: styles.body.table.head.cell
|
|
5481
|
+
.sortIndicator.isNotSorted), children: jsxRuntime.jsx(SortIconElement, { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
5482
|
+
.icon.container), "aria-hidden": "true" }) }))] }) }, header.id));
|
|
5483
|
+
}) }, headerGroup.id)); }) }), !isLoading && (jsxRuntime.jsx("tbody", { className: "border", children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
|
|
5484
|
+
var _a;
|
|
5485
|
+
return (jsxRuntime.jsx("tr", { onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
|
|
5486
|
+
index % 2 === 0 &&
|
|
5487
|
+
'bg-gray-50'), children: row.getVisibleCells().map(function (cell) {
|
|
5488
|
+
var _a, _b, _c;
|
|
5489
|
+
return (jsxRuntime.jsx("td", { className: toClassName(styles.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
|
|
5490
|
+
index !==
|
|
5491
|
+
((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
|
|
5492
|
+
'border-b border-gray-200'), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
5493
|
+
}) }, row.id));
|
|
5494
|
+
}) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.emptyComponent) ? ((_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] })] }) }) }), foot && jsxRuntime.jsx("div", { className: styles.foot, children: foot(state) })] }));
|
|
5495
5495
|
};
|
|
5496
5496
|
|
|
5497
5497
|
var base$c = {
|
|
@@ -5501,7 +5501,7 @@ var base$c = {
|
|
|
5501
5501
|
container: 'flex flex-col',
|
|
5502
5502
|
wrapper: 'flow-root relative',
|
|
5503
5503
|
content: '',
|
|
5504
|
-
styleWrapper: 'overflow-x-scroll overflow-y-visible',
|
|
5504
|
+
styleWrapper: 'flex overflow-x-scroll overflow-y-visible',
|
|
5505
5505
|
tableWrapper: 'inline-block min-w-full align-middle',
|
|
5506
5506
|
table: {
|
|
5507
5507
|
container: 'min-w-full border-separate border-spacing-0',
|
|
@@ -5532,6 +5532,7 @@ var base$c = {
|
|
|
5532
5532
|
},
|
|
5533
5533
|
},
|
|
5534
5534
|
foot: '',
|
|
5535
|
+
leftSide: 'text-sm text-gray-500',
|
|
5535
5536
|
};
|
|
5536
5537
|
var styles$g = {
|
|
5537
5538
|
base: base$c,
|