@ballistix.digital/react-components 4.0.0 → 4.1.0
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 +7 -0
- package/dist/index.esm.js +30 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +30 -14
- 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
|
@@ -492,6 +492,10 @@ declare const base$e: {
|
|
|
492
492
|
tableWrapperWithLeftSide: string;
|
|
493
493
|
table: {
|
|
494
494
|
container: string;
|
|
495
|
+
pinnedColumns: {
|
|
496
|
+
left: string;
|
|
497
|
+
right: string;
|
|
498
|
+
};
|
|
495
499
|
head: {
|
|
496
500
|
container: string;
|
|
497
501
|
row: string;
|
|
@@ -503,6 +507,7 @@ declare const base$e: {
|
|
|
503
507
|
};
|
|
504
508
|
cell: {
|
|
505
509
|
container: string;
|
|
510
|
+
wrapper: string;
|
|
506
511
|
text: string;
|
|
507
512
|
sortIndicator: {
|
|
508
513
|
container: string;
|
|
@@ -517,12 +522,14 @@ declare const base$e: {
|
|
|
517
522
|
body: {
|
|
518
523
|
container: string;
|
|
519
524
|
row: string;
|
|
525
|
+
striped: string;
|
|
520
526
|
column: {
|
|
521
527
|
pinned: {
|
|
522
528
|
cell: string;
|
|
523
529
|
};
|
|
524
530
|
};
|
|
525
531
|
cell: string;
|
|
532
|
+
sticky: string;
|
|
526
533
|
checkbox: string;
|
|
527
534
|
indicator: string;
|
|
528
535
|
};
|
package/dist/index.esm.js
CHANGED
|
@@ -6001,11 +6001,13 @@ var TableList2 = function (props) {
|
|
|
6001
6001
|
zIndex: isDragging ? 1 : 0,
|
|
6002
6002
|
position: 'relative',
|
|
6003
6003
|
};
|
|
6004
|
-
return (jsx("tr", { ref: setNodeRef, style: style, onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_b = config.options) === null || _b === void 0 ? void 0 : _b.isStriped) &&
|
|
6004
|
+
return (jsx("tr", { ref: setNodeRef, style: style, onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_b = config.options) === null || _b === void 0 ? void 0 : _b.isStriped) &&
|
|
6005
|
+
index % 2 === 0 &&
|
|
6006
|
+
styles.body.table.body.striped), children: map(row.getVisibleCells(), function (cell) {
|
|
6005
6007
|
var _a, _b, _c;
|
|
6006
6008
|
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) &&
|
|
6007
6009
|
index !== ((_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 &&
|
|
6008
|
-
|
|
6010
|
+
styles.body.table.body.sticky), style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
6009
6011
|
}) }, row.id));
|
|
6010
6012
|
};
|
|
6011
6013
|
var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
|
|
@@ -6028,8 +6030,6 @@ var TableList2 = function (props) {
|
|
|
6028
6030
|
var isPinned = column.getIsPinned();
|
|
6029
6031
|
var isLastLeftPinnedColumn = column.id == ((_c = last((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.columnPinning) === null || _b === void 0 ? void 0 : _b.left)) === null || _c === void 0 ? void 0 : _c.name);
|
|
6030
6032
|
var isFirstRightPinnedColumn = column.id == ((_f = first((_e = (_d = config.options) === null || _d === void 0 ? void 0 : _d.columnPinning) === null || _e === void 0 ? void 0 : _e.right)) === null || _f === void 0 ? void 0 : _f.name);
|
|
6031
|
-
if (isFirstRightPinnedColumn)
|
|
6032
|
-
console.log(column.id);
|
|
6033
6033
|
var width = (_l = find(concat((_h = (_g = config.options) === null || _g === void 0 ? void 0 : _g.columnPinning) === null || _h === void 0 ? void 0 : _h.left, (_k = (_j = config.options) === null || _j === void 0 ? void 0 : _j.columnPinning) === null || _k === void 0 ? void 0 : _k.right), {
|
|
6034
6034
|
name: column.id,
|
|
6035
6035
|
})) === null || _l === void 0 ? void 0 : _l.size;
|
|
@@ -6038,9 +6038,9 @@ var TableList2 = function (props) {
|
|
|
6038
6038
|
maxWidth: width,
|
|
6039
6039
|
minWidth: width,
|
|
6040
6040
|
boxShadow: isLastLeftPinnedColumn
|
|
6041
|
-
?
|
|
6041
|
+
? styles.body.table.pinnedColumns.left
|
|
6042
6042
|
: isFirstRightPinnedColumn
|
|
6043
|
-
?
|
|
6043
|
+
? styles.body.table.pinnedColumns.right
|
|
6044
6044
|
: undefined,
|
|
6045
6045
|
left: isPinned === 'left'
|
|
6046
6046
|
? "".concat(getPinnedColumnsWidth('left', column.id), "px")
|
|
@@ -6063,11 +6063,11 @@ var TableList2 = function (props) {
|
|
|
6063
6063
|
? ChevronUpIcon
|
|
6064
6064
|
: ChevronDownIcon;
|
|
6065
6065
|
}
|
|
6066
|
-
return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container,
|
|
6066
|
+
return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, header.column.getCanSort() && 'cursor-pointer', header.column.getIsPinned() &&
|
|
6067
6067
|
styles.body.table.head.column.pinned.cell), onClick: header.column.getToggleSortingHandler(), style: __assign$1({ minWidth: !!header.column.columnDef.size &&
|
|
6068
6068
|
header.column.columnDef.size !== 150
|
|
6069
6069
|
? "".concat(header.column.columnDef.size, "px")
|
|
6070
|
-
: 'auto' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className:
|
|
6070
|
+
: 'auto' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className: styles.body.table.head.cell.wrapper, style: {
|
|
6071
6071
|
gridTemplateColumns: '1fr auto',
|
|
6072
6072
|
}, 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
|
|
6073
6073
|
.container, header.column.getIsSorted()
|
|
@@ -6076,22 +6076,22 @@ var TableList2 = function (props) {
|
|
|
6076
6076
|
: styles.body.table.head.cell
|
|
6077
6077
|
.sortIndicator.isNotSorted), children: jsx(SortIconElement, { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
6078
6078
|
.icon.container), "aria-hidden": "true" }) }))] }) }, header.id));
|
|
6079
|
-
}) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className:
|
|
6079
|
+
}) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className: styles.body.table.body.container, children: isDraggable ? (jsx(SortableContext, { items: map(config.data, function (entity) {
|
|
6080
6080
|
return get(entity, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey);
|
|
6081
6081
|
}), strategy: verticalListSortingStrategy, children: map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) { return (jsx(DraggableRow, { row: row, index: index }, get(row.original, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey))); }) })) : (map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) {
|
|
6082
6082
|
var _a;
|
|
6083
6083
|
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) &&
|
|
6084
6084
|
index % 2 === 0 &&
|
|
6085
|
-
|
|
6085
|
+
styles.body.table.body.striped), children: map(row.getVisibleCells(), function (cell) {
|
|
6086
6086
|
var _a, _b, _c;
|
|
6087
6087
|
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) &&
|
|
6088
6088
|
index !==
|
|
6089
6089
|
((_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) -
|
|
6090
6090
|
1 &&
|
|
6091
|
-
|
|
6091
|
+
styles.body.table.body.sticky, cell.column.getIsPinned() &&
|
|
6092
6092
|
styles.body.table.body.column.pinned.cell), style: __assign$1({ width: cell.column.getSize() }, getCommonPinningStyles(cell.column)), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
6093
6093
|
}) }, row.id));
|
|
6094
|
-
})) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment, { children: ((_v = config === null || config === void 0 ? void 0 : config.options) === null || _v === void 0 ? void 0 : _v.emptyComponent) ? ((_w = config === null || config === void 0 ? void 0 : config.options) === null || _w === void 0 ? void 0 : _w.emptyComponent) : (jsx("div", { className:
|
|
6094
|
+
})) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment, { children: ((_v = config === null || config === void 0 ? void 0 : config.options) === null || _v === void 0 ? void 0 : _v.emptyComponent) ? ((_w = config === null || config === void 0 ? void 0 : config.options) === null || _w === void 0 ? void 0 : _w.emptyComponent) : (jsx("div", { className: styles$g.empty, children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: styles$g.loading.container, children: times(8, function (index) { return (jsxs("div", { className: styles$g.loading.row.container, children: [jsx("div", { className: styles$g.loading.row.first }), jsx("div", { className: styles$g.loading.row.last })] }, index)); }) }))] })] }) }) }), foot && jsx("div", { className: styles.foot, children: foot(state) })] }));
|
|
6095
6095
|
return isDraggable ? (jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, sensors: sensors, children: Content })) : (Content);
|
|
6096
6096
|
};
|
|
6097
6097
|
|
|
@@ -6107,6 +6107,10 @@ var base$c = {
|
|
|
6107
6107
|
tableWrapperWithLeftSide: '!min-w-max w-full',
|
|
6108
6108
|
table: {
|
|
6109
6109
|
container: 'min-w-full border-separate border-spacing-0',
|
|
6110
|
+
pinnedColumns: {
|
|
6111
|
+
left: '-4px 0 4px -4px gray inset',
|
|
6112
|
+
right: '4px 0 4px -4px gray inset',
|
|
6113
|
+
},
|
|
6110
6114
|
head: {
|
|
6111
6115
|
container: '',
|
|
6112
6116
|
row: '',
|
|
@@ -6117,7 +6121,8 @@ var base$c = {
|
|
|
6117
6121
|
},
|
|
6118
6122
|
},
|
|
6119
6123
|
cell: {
|
|
6120
|
-
container: '
|
|
6124
|
+
container: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group border-b',
|
|
6125
|
+
wrapper: 'grid gap-x-1 items-center',
|
|
6121
6126
|
text: 'whitespace-normal break-words',
|
|
6122
6127
|
sortIndicator: {
|
|
6123
6128
|
container: 'ml-2 inline-flex items-center rounded',
|
|
@@ -6130,14 +6135,16 @@ var base$c = {
|
|
|
6130
6135
|
},
|
|
6131
6136
|
},
|
|
6132
6137
|
body: {
|
|
6133
|
-
container: '
|
|
6138
|
+
container: 'border',
|
|
6134
6139
|
row: '',
|
|
6140
|
+
striped: 'bg-gray-50',
|
|
6135
6141
|
column: {
|
|
6136
6142
|
pinned: {
|
|
6137
6143
|
cell: 'bg-white sticky z-10 overflow-hidden text-ellipsis',
|
|
6138
6144
|
},
|
|
6139
6145
|
},
|
|
6140
6146
|
cell: 'whitespace-nowrap py-2.5 px-3 text-sm text-gray-500',
|
|
6147
|
+
sticky: 'border-b border-gray-200',
|
|
6141
6148
|
checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
|
|
6142
6149
|
indicator: 'absolute inset-y-0 left-0 w-0.5 bg-primary-600',
|
|
6143
6150
|
},
|
|
@@ -6148,6 +6155,15 @@ var base$c = {
|
|
|
6148
6155
|
};
|
|
6149
6156
|
var styles$g = {
|
|
6150
6157
|
base: base$c,
|
|
6158
|
+
loading: {
|
|
6159
|
+
container: 'flex flex-col gap-y-2 w-full pt-5',
|
|
6160
|
+
row: {
|
|
6161
|
+
container: 'flex gap-2',
|
|
6162
|
+
first: 'w-20 h-12 rounded-md bg-gray-100 animate-pulse',
|
|
6163
|
+
last: 'w-full h-12 rounded-md bg-gray-100 animate-pulse',
|
|
6164
|
+
},
|
|
6165
|
+
},
|
|
6166
|
+
empty: 'w-full flex justify-center my-2',
|
|
6151
6167
|
};
|
|
6152
6168
|
|
|
6153
6169
|
var createColumnHelper = function () {
|