@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.js
CHANGED
|
@@ -6003,11 +6003,13 @@ var TableList2 = function (props) {
|
|
|
6003
6003
|
zIndex: isDragging ? 1 : 0,
|
|
6004
6004
|
position: 'relative',
|
|
6005
6005
|
};
|
|
6006
|
-
return (jsxRuntime.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) &&
|
|
6006
|
+
return (jsxRuntime.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) &&
|
|
6007
|
+
index % 2 === 0 &&
|
|
6008
|
+
styles.body.table.body.striped), children: lodash.map(row.getVisibleCells(), function (cell) {
|
|
6007
6009
|
var _a, _b, _c;
|
|
6008
6010
|
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) &&
|
|
6009
6011
|
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 &&
|
|
6010
|
-
|
|
6012
|
+
styles.body.table.body.sticky), style: { width: cell.column.getSize() }, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
6011
6013
|
}) }, row.id));
|
|
6012
6014
|
};
|
|
6013
6015
|
var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
|
|
@@ -6030,8 +6032,6 @@ var TableList2 = function (props) {
|
|
|
6030
6032
|
var isPinned = column.getIsPinned();
|
|
6031
6033
|
var isLastLeftPinnedColumn = column.id == ((_c = lodash.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);
|
|
6032
6034
|
var isFirstRightPinnedColumn = column.id == ((_f = lodash.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);
|
|
6033
|
-
if (isFirstRightPinnedColumn)
|
|
6034
|
-
console.log(column.id);
|
|
6035
6035
|
var width = (_l = lodash.find(lodash.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), {
|
|
6036
6036
|
name: column.id,
|
|
6037
6037
|
})) === null || _l === void 0 ? void 0 : _l.size;
|
|
@@ -6040,9 +6040,9 @@ var TableList2 = function (props) {
|
|
|
6040
6040
|
maxWidth: width,
|
|
6041
6041
|
minWidth: width,
|
|
6042
6042
|
boxShadow: isLastLeftPinnedColumn
|
|
6043
|
-
?
|
|
6043
|
+
? styles.body.table.pinnedColumns.left
|
|
6044
6044
|
: isFirstRightPinnedColumn
|
|
6045
|
-
?
|
|
6045
|
+
? styles.body.table.pinnedColumns.right
|
|
6046
6046
|
: undefined,
|
|
6047
6047
|
left: isPinned === 'left'
|
|
6048
6048
|
? "".concat(getPinnedColumnsWidth('left', column.id), "px")
|
|
@@ -6065,11 +6065,11 @@ var TableList2 = function (props) {
|
|
|
6065
6065
|
? solid.ChevronUpIcon
|
|
6066
6066
|
: solid.ChevronDownIcon;
|
|
6067
6067
|
}
|
|
6068
|
-
return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container,
|
|
6068
|
+
return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, header.column.getCanSort() && 'cursor-pointer', header.column.getIsPinned() &&
|
|
6069
6069
|
styles.body.table.head.column.pinned.cell), onClick: header.column.getToggleSortingHandler(), style: __assign$1({ minWidth: !!header.column.columnDef.size &&
|
|
6070
6070
|
header.column.columnDef.size !== 150
|
|
6071
6071
|
? "".concat(header.column.columnDef.size, "px")
|
|
6072
|
-
: 'auto' }, getCommonPinningStyles(header.column)), children: jsxRuntime.jsxs("div", { className:
|
|
6072
|
+
: 'auto' }, getCommonPinningStyles(header.column)), children: jsxRuntime.jsxs("div", { className: styles.body.table.head.cell.wrapper, style: {
|
|
6073
6073
|
gridTemplateColumns: '1fr auto',
|
|
6074
6074
|
}, 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
|
|
6075
6075
|
.container, header.column.getIsSorted()
|
|
@@ -6078,22 +6078,22 @@ var TableList2 = function (props) {
|
|
|
6078
6078
|
: styles.body.table.head.cell
|
|
6079
6079
|
.sortIndicator.isNotSorted), children: jsxRuntime.jsx(SortIconElement, { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
6080
6080
|
.icon.container), "aria-hidden": "true" }) }))] }) }, header.id));
|
|
6081
|
-
}) }, headerGroup.id)); }) }), !isLoading && (jsxRuntime.jsx("tbody", { className:
|
|
6081
|
+
}) }, headerGroup.id)); }) }), !isLoading && (jsxRuntime.jsx("tbody", { className: styles.body.table.body.container, children: isDraggable ? (jsxRuntime.jsx(SortableContext, { items: lodash.map(config.data, function (entity) {
|
|
6082
6082
|
return lodash.get(entity, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey);
|
|
6083
6083
|
}), strategy: verticalListSortingStrategy, children: lodash.map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) { return (jsxRuntime.jsx(DraggableRow, { row: row, index: index }, lodash.get(row.original, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey))); }) })) : (lodash.map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) {
|
|
6084
6084
|
var _a;
|
|
6085
6085
|
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) &&
|
|
6086
6086
|
index % 2 === 0 &&
|
|
6087
|
-
|
|
6087
|
+
styles.body.table.body.striped), children: lodash.map(row.getVisibleCells(), function (cell) {
|
|
6088
6088
|
var _a, _b, _c;
|
|
6089
6089
|
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) &&
|
|
6090
6090
|
index !==
|
|
6091
6091
|
((_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) -
|
|
6092
6092
|
1 &&
|
|
6093
|
-
|
|
6093
|
+
styles.body.table.body.sticky, cell.column.getIsPinned() &&
|
|
6094
6094
|
styles.body.table.body.column.pinned.cell), style: __assign$1({ width: cell.column.getSize() }, getCommonPinningStyles(cell.column)), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
6095
6095
|
}) }, row.id));
|
|
6096
|
-
})) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.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) : (jsxRuntime.jsx("div", { className:
|
|
6096
|
+
})) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.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) : (jsxRuntime.jsx("div", { className: styles$g.empty, children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: styles$g.loading.container, children: lodash.times(8, function (index) { return (jsxRuntime.jsxs("div", { className: styles$g.loading.row.container, children: [jsxRuntime.jsx("div", { className: styles$g.loading.row.first }), jsxRuntime.jsx("div", { className: styles$g.loading.row.last })] }, index)); }) }))] })] }) }) }), foot && jsxRuntime.jsx("div", { className: styles.foot, children: foot(state) })] }));
|
|
6097
6097
|
return isDraggable ? (jsxRuntime.jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, sensors: sensors, children: Content })) : (Content);
|
|
6098
6098
|
};
|
|
6099
6099
|
|
|
@@ -6109,6 +6109,10 @@ var base$c = {
|
|
|
6109
6109
|
tableWrapperWithLeftSide: '!min-w-max w-full',
|
|
6110
6110
|
table: {
|
|
6111
6111
|
container: 'min-w-full border-separate border-spacing-0',
|
|
6112
|
+
pinnedColumns: {
|
|
6113
|
+
left: '-4px 0 4px -4px gray inset',
|
|
6114
|
+
right: '4px 0 4px -4px gray inset',
|
|
6115
|
+
},
|
|
6112
6116
|
head: {
|
|
6113
6117
|
container: '',
|
|
6114
6118
|
row: '',
|
|
@@ -6119,7 +6123,8 @@ var base$c = {
|
|
|
6119
6123
|
},
|
|
6120
6124
|
},
|
|
6121
6125
|
cell: {
|
|
6122
|
-
container: '
|
|
6126
|
+
container: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group border-b',
|
|
6127
|
+
wrapper: 'grid gap-x-1 items-center',
|
|
6123
6128
|
text: 'whitespace-normal break-words',
|
|
6124
6129
|
sortIndicator: {
|
|
6125
6130
|
container: 'ml-2 inline-flex items-center rounded',
|
|
@@ -6132,14 +6137,16 @@ var base$c = {
|
|
|
6132
6137
|
},
|
|
6133
6138
|
},
|
|
6134
6139
|
body: {
|
|
6135
|
-
container: '
|
|
6140
|
+
container: 'border',
|
|
6136
6141
|
row: '',
|
|
6142
|
+
striped: 'bg-gray-50',
|
|
6137
6143
|
column: {
|
|
6138
6144
|
pinned: {
|
|
6139
6145
|
cell: 'bg-white sticky z-10 overflow-hidden text-ellipsis',
|
|
6140
6146
|
},
|
|
6141
6147
|
},
|
|
6142
6148
|
cell: 'whitespace-nowrap py-2.5 px-3 text-sm text-gray-500',
|
|
6149
|
+
sticky: 'border-b border-gray-200',
|
|
6143
6150
|
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',
|
|
6144
6151
|
indicator: 'absolute inset-y-0 left-0 w-0.5 bg-primary-600',
|
|
6145
6152
|
},
|
|
@@ -6150,6 +6157,15 @@ var base$c = {
|
|
|
6150
6157
|
};
|
|
6151
6158
|
var styles$g = {
|
|
6152
6159
|
base: base$c,
|
|
6160
|
+
loading: {
|
|
6161
|
+
container: 'flex flex-col gap-y-2 w-full pt-5',
|
|
6162
|
+
row: {
|
|
6163
|
+
container: 'flex gap-2',
|
|
6164
|
+
first: 'w-20 h-12 rounded-md bg-gray-100 animate-pulse',
|
|
6165
|
+
last: 'w-full h-12 rounded-md bg-gray-100 animate-pulse',
|
|
6166
|
+
},
|
|
6167
|
+
},
|
|
6168
|
+
empty: 'w-full flex justify-center my-2',
|
|
6153
6169
|
};
|
|
6154
6170
|
|
|
6155
6171
|
var createColumnHelper = function () {
|