@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.d.ts
CHANGED
|
@@ -450,6 +450,7 @@ type TTableListProps<TData> = {
|
|
|
450
450
|
isLoading?: boolean;
|
|
451
451
|
head?: (params: Params) => ReactNode;
|
|
452
452
|
foot?: (params: Params) => ReactNode;
|
|
453
|
+
leftSide?: (params: Params) => ReactNode;
|
|
453
454
|
onRowClick?: (context: Row<TData>) => void;
|
|
454
455
|
onChange?: (params: Params) => void;
|
|
455
456
|
styles?: TTableListStyles;
|
|
@@ -494,6 +495,7 @@ declare const base$e: {
|
|
|
494
495
|
};
|
|
495
496
|
};
|
|
496
497
|
foot: string;
|
|
498
|
+
leftSide: string;
|
|
497
499
|
};
|
|
498
500
|
type TTableListStyles = DeepPartialType<typeof base$e>;
|
|
499
501
|
|
package/dist/index.esm.js
CHANGED
|
@@ -5311,7 +5311,7 @@ var isValidState = function (state) {
|
|
|
5311
5311
|
|
|
5312
5312
|
var TableList2 = function (props) {
|
|
5313
5313
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5314
|
-
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;
|
|
5314
|
+
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;
|
|
5315
5315
|
var _j = useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _j[0], setSorting = _j[1];
|
|
5316
5316
|
var _k = useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
|
|
5317
5317
|
var _l = useState([]), columnOrder = _l[0], setColumnOrder = _l[1];
|
|
@@ -5436,41 +5436,41 @@ var TableList2 = function (props) {
|
|
|
5436
5436
|
setTableState(id, state);
|
|
5437
5437
|
}
|
|
5438
5438
|
}, [id, state]);
|
|
5439
|
-
return (jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsx("div", { className: styles.head, children: head(state) }), jsx("div", { className: styles.body.content, children: jsx("div", { className: styles.body.wrapper, children:
|
|
5440
|
-
|
|
5441
|
-
|
|
5442
|
-
|
|
5443
|
-
|
|
5444
|
-
|
|
5445
|
-
|
|
5446
|
-
|
|
5447
|
-
|
|
5448
|
-
|
|
5449
|
-
|
|
5450
|
-
|
|
5451
|
-
|
|
5452
|
-
|
|
5453
|
-
|
|
5454
|
-
|
|
5455
|
-
|
|
5456
|
-
|
|
5457
|
-
|
|
5458
|
-
|
|
5459
|
-
|
|
5460
|
-
|
|
5461
|
-
|
|
5462
|
-
|
|
5463
|
-
|
|
5464
|
-
|
|
5465
|
-
|
|
5466
|
-
|
|
5467
|
-
|
|
5468
|
-
|
|
5469
|
-
|
|
5470
|
-
|
|
5471
|
-
|
|
5472
|
-
|
|
5473
|
-
|
|
5439
|
+
return (jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsx("div", { className: styles.head, children: head(state) }), jsx("div", { className: styles.body.content, children: jsx("div", { className: styles.body.wrapper, children: jsxs("div", { className: styles.body.styleWrapper, children: [leftSide && (jsx("div", { className: styles.leftSide, children: leftSide(state) })), jsxs("div", { className: styles.body.tableWrapper, children: [jsxs("table", { className: styles.body.table.container, children: [jsx("thead", { className: styles.body.table.head.container, children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { className: styles.body.table.head.row, children: headerGroup.headers.map(function (header) {
|
|
5440
|
+
// Default sort icon to show a user that the column is sortable
|
|
5441
|
+
var SortIconElement = ChevronUpDownIcon;
|
|
5442
|
+
if (header.column.getIsSorted()) {
|
|
5443
|
+
SortIconElement =
|
|
5444
|
+
header.column.getIsSorted() === 'asc'
|
|
5445
|
+
? ChevronUpIcon
|
|
5446
|
+
: ChevronDownIcon;
|
|
5447
|
+
}
|
|
5448
|
+
return (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: {
|
|
5449
|
+
minWidth: !!header.column.columnDef.size &&
|
|
5450
|
+
header.column.columnDef.size !== 150
|
|
5451
|
+
? "".concat(header.column.columnDef.size, "px")
|
|
5452
|
+
: 'auto',
|
|
5453
|
+
}, children: jsxs("div", { className: "grid gap-x-1 items-center", style: {
|
|
5454
|
+
gridTemplateColumns: '1fr auto',
|
|
5455
|
+
}, children: [header.isPlaceholder ? null : (jsx("div", { className: styles.body.table.head.cell.text, children: flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getCanSort() && (jsx("span", { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
5456
|
+
.container, header.column.getIsSorted()
|
|
5457
|
+
? styles.body.table.head.cell
|
|
5458
|
+
.sortIndicator.isSorted
|
|
5459
|
+
: styles.body.table.head.cell
|
|
5460
|
+
.sortIndicator.isNotSorted), children: jsx(SortIconElement, { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
5461
|
+
.icon.container), "aria-hidden": "true" }) }))] }) }, header.id));
|
|
5462
|
+
}) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className: "border", children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
|
|
5463
|
+
var _a;
|
|
5464
|
+
return (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) &&
|
|
5465
|
+
index % 2 === 0 &&
|
|
5466
|
+
'bg-gray-50'), children: row.getVisibleCells().map(function (cell) {
|
|
5467
|
+
var _a, _b, _c;
|
|
5468
|
+
return (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) &&
|
|
5469
|
+
index !==
|
|
5470
|
+
((_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 &&
|
|
5471
|
+
'border-b border-gray-200'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
5472
|
+
}) }, row.id));
|
|
5473
|
+
}) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(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) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] })] }) }) }), foot && jsx("div", { className: styles.foot, children: foot(state) })] }));
|
|
5474
5474
|
};
|
|
5475
5475
|
|
|
5476
5476
|
var base$c = {
|
|
@@ -5480,7 +5480,7 @@ var base$c = {
|
|
|
5480
5480
|
container: 'flex flex-col',
|
|
5481
5481
|
wrapper: 'flow-root relative',
|
|
5482
5482
|
content: '',
|
|
5483
|
-
styleWrapper: 'overflow-x-scroll overflow-y-visible',
|
|
5483
|
+
styleWrapper: 'flex overflow-x-scroll overflow-y-visible',
|
|
5484
5484
|
tableWrapper: 'inline-block min-w-full align-middle',
|
|
5485
5485
|
table: {
|
|
5486
5486
|
container: 'min-w-full border-separate border-spacing-0',
|
|
@@ -5511,6 +5511,7 @@ var base$c = {
|
|
|
5511
5511
|
},
|
|
5512
5512
|
},
|
|
5513
5513
|
foot: '',
|
|
5514
|
+
leftSide: 'text-sm text-gray-500',
|
|
5514
5515
|
};
|
|
5515
5516
|
var styles$g = {
|
|
5516
5517
|
base: base$c,
|