@pdg/react-table 1.0.3 → 1.0.4
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.esm.js +19 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +19 -9
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8466,7 +8466,7 @@ var TableCommonCell = function (_a) {
|
|
|
8466
8466
|
}
|
|
8467
8467
|
}, [type, column, onClick, item, index]);
|
|
8468
8468
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
8469
|
-
return (React__default["default"].createElement(StyledTableCell, { align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis'), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
|
|
8469
|
+
return (React__default["default"].createElement(StyledTableCell, { align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
|
|
8470
8470
|
};
|
|
8471
8471
|
var templateObject_1$1;var TableHeadCell = function (_a) {
|
|
8472
8472
|
var column = _a.column, defaultAlign = _a.defaultAlign;
|
|
@@ -8479,11 +8479,21 @@ var templateObject_1$1;var TableHeadCell = function (_a) {
|
|
|
8479
8479
|
return column.label;
|
|
8480
8480
|
}
|
|
8481
8481
|
}, [column]))[0];
|
|
8482
|
-
return (React__default["default"].createElement(TableCommonCell, { type: 'head', column: column, defaultAlign: defaultAlign }, data));
|
|
8483
|
-
};var StyledButtonsBox = material.styled(material.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display:
|
|
8482
|
+
return (React__default["default"].createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', column: column, defaultAlign: defaultAlign }, data));
|
|
8483
|
+
};var StyledButtonsBox = material.styled(material.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"])));
|
|
8484
8484
|
var TableBodyCell = function (_a) {
|
|
8485
8485
|
// State -----------------------------------------------------------------------------------------------------------
|
|
8486
8486
|
var item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick;
|
|
8487
|
+
var buttonsBoxJustifyContent = useAutoUpdateState(React.useCallback(function () {
|
|
8488
|
+
switch (getTableColumnAlign(column, defaultAlign)) {
|
|
8489
|
+
case 'center':
|
|
8490
|
+
return 'center';
|
|
8491
|
+
case 'right':
|
|
8492
|
+
return 'end';
|
|
8493
|
+
default:
|
|
8494
|
+
return 'start';
|
|
8495
|
+
}
|
|
8496
|
+
}, [column, defaultAlign]))[0];
|
|
8487
8497
|
var _b = React.useState(), data = _b[0], setData = _b[1];
|
|
8488
8498
|
// Effect ----------------------------------------------------------------------------------------------------------
|
|
8489
8499
|
React.useEffect(function () {
|
|
@@ -8505,10 +8515,10 @@ var TableBodyCell = function (_a) {
|
|
|
8505
8515
|
}
|
|
8506
8516
|
break;
|
|
8507
8517
|
case 'button':
|
|
8508
|
-
data = React__default["default"].createElement(material.Box, { onClick: function (e) { return e.stopPropagation(); } }, data);
|
|
8518
|
+
data = (React__default["default"].createElement(material.Box, { className: 'TableBoxyCell-button-box', onClick: function (e) { return e.stopPropagation(); } }, data));
|
|
8509
8519
|
break;
|
|
8510
8520
|
case 'buttons':
|
|
8511
|
-
data = React__default["default"].createElement(StyledButtonsBox, { onClick: function (e) { return e.stopPropagation(); } }, data);
|
|
8521
|
+
data = (React__default["default"].createElement(StyledButtonsBox, { className: 'TableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: function (e) { return e.stopPropagation(); } }, data));
|
|
8512
8522
|
break;
|
|
8513
8523
|
}
|
|
8514
8524
|
switch (column.type) {
|
|
@@ -8519,7 +8529,7 @@ var TableBodyCell = function (_a) {
|
|
|
8519
8529
|
data = (React__default["default"].createElement("a", { href: data, target: '_blank', onClick: function (e) {
|
|
8520
8530
|
e.stopPropagation();
|
|
8521
8531
|
} },
|
|
8522
|
-
React__default["default"].createElement(material.Tooltip, __assign({ title: React__default["default"].createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
|
|
8532
|
+
React__default["default"].createElement(material.Tooltip, __assign({ className: 'TableBodyCell-tooltip', title: React__default["default"].createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
|
|
8523
8533
|
}
|
|
8524
8534
|
break;
|
|
8525
8535
|
case 'date':
|
|
@@ -8539,7 +8549,7 @@ var TableBodyCell = function (_a) {
|
|
|
8539
8549
|
tooltip = column.onGetTooltip(item, index);
|
|
8540
8550
|
}
|
|
8541
8551
|
if (tooltip) {
|
|
8542
|
-
data = (React__default["default"].createElement(material.Tooltip, __assign({ title: tooltip }, column.tooltipProps), React__default["default"].isValidElement(data) ? data : React__default["default"].createElement("span", null, data)));
|
|
8552
|
+
data = (React__default["default"].createElement(material.Tooltip, __assign({ className: 'TableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React__default["default"].isValidElement(data) ? data : React__default["default"].createElement("span", null, data)));
|
|
8543
8553
|
}
|
|
8544
8554
|
}
|
|
8545
8555
|
break;
|
|
@@ -8557,7 +8567,7 @@ var TableBodyCell = function (_a) {
|
|
|
8557
8567
|
}
|
|
8558
8568
|
}, [column, onClick]);
|
|
8559
8569
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
8560
|
-
return (React__default["default"].createElement(TableCommonCell, { type: 'body', column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, data));
|
|
8570
|
+
return (React__default["default"].createElement(TableCommonCell, { type: 'body', className: 'TableBodyCell', column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, data));
|
|
8561
8571
|
};
|
|
8562
8572
|
var templateObject_1;var TableFooterCell = function (_a) {
|
|
8563
8573
|
var column = _a.column, defaultAlign = _a.defaultAlign;
|
|
@@ -8570,7 +8580,7 @@ var templateObject_1;var TableFooterCell = function (_a) {
|
|
|
8570
8580
|
return (_c = column.footer) === null || _c === void 0 ? void 0 : _c.value;
|
|
8571
8581
|
}
|
|
8572
8582
|
}, [column]))[0];
|
|
8573
|
-
return (React__default["default"].createElement(TableCommonCell, { type: 'head', column: column, defaultAlign: defaultAlign, style: { borderTop: '1px solid rgba(224, 224, 224, 1)' } }, data));
|
|
8583
|
+
return (React__default["default"].createElement(TableCommonCell, { type: 'head', className: 'TableFooterCell', column: column, defaultAlign: defaultAlign, style: { borderTop: '1px solid rgba(224, 224, 224, 1)' } }, data));
|
|
8574
8584
|
};var TablePagination = function (_a) {
|
|
8575
8585
|
var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
|
|
8576
8586
|
return (React__default["default"].createElement(material.Stack, { alignItems: align },
|