@vendorflow/components 2.0.98 → 2.0.99
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/lib/components/material-ui/DataTable/DataTable.d.ts +1 -0
- package/lib/components/material-ui/DataTable/DataTable.js +2 -1
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +3 -1
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +3 -2
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts +3 -1
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +3 -3
- package/package.json +1 -1
|
@@ -154,6 +154,7 @@ function DataTable(_a) {
|
|
|
154
154
|
var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
|
|
155
155
|
var containerHeight = (rootContentRect.height || 0) - (toolbarContentRect.height || 0) - (paginationContentRect.height || 0);
|
|
156
156
|
var defaultRowHeight = (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.defaultRowHeight) || 50;
|
|
157
|
+
var getRowClassName = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowClassName;
|
|
157
158
|
(0, react_2.useEffect)(function () {
|
|
158
159
|
if (tableHeadRef.current) {
|
|
159
160
|
tableHeadRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
|
|
@@ -180,7 +181,7 @@ function DataTable(_a) {
|
|
|
180
181
|
return ((0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false }));
|
|
181
182
|
})));
|
|
182
183
|
})),
|
|
183
|
-
(0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbar: hasScrollbar, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, scrollbarWidth: scrollbarWidth, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
|
|
184
|
+
(0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbar: hasScrollbar, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, scrollbarWidth: scrollbarWidth, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width, getRowClassName: getRowClassName }))),
|
|
184
185
|
(paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { ref: paginationRef, className: "DataTable__Pagination", component: "div", count: rows.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize, rowsPerPageOptions: pageOptions }))));
|
|
185
186
|
}
|
|
186
187
|
exports.default = DataTable;
|
|
@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
|
|
|
4
4
|
import { CSSProperties } from 'react';
|
|
5
5
|
import { EnhancedRow } from '../DataTable';
|
|
6
6
|
import { TableRowProps } from 'react-table';
|
|
7
|
+
import { Maybe } from '@vendorflow/types';
|
|
7
8
|
interface Props<D extends object> {
|
|
8
9
|
ExpandedComponent: ((props: {
|
|
9
10
|
data: D;
|
|
@@ -14,6 +15,7 @@ interface Props<D extends object> {
|
|
|
14
15
|
style?: CSSProperties;
|
|
15
16
|
className?: string;
|
|
16
17
|
measure?: () => void;
|
|
18
|
+
getRowClassName?: Maybe<(rowId: string) => string>;
|
|
17
19
|
}
|
|
18
|
-
export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, className: rootClassName, measure, }: Props<D>): jsx.JSX.Element;
|
|
20
|
+
export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, className: rootClassName, measure, getRowClassName, }: Props<D>): jsx.JSX.Element;
|
|
19
21
|
export {};
|
|
@@ -52,8 +52,9 @@ var react_2 = require("react");
|
|
|
52
52
|
var material_1 = require("@mui/material");
|
|
53
53
|
var BodyCell_1 = __importDefault(require("./BodyCell"));
|
|
54
54
|
var lodash_1 = require("lodash");
|
|
55
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
55
56
|
function BodyRow(_a) {
|
|
56
|
-
var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, rootClassName = _a.className, measure = _a.measure;
|
|
57
|
+
var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, rootClassName = _a.className, measure = _a.measure, getRowClassName = _a.getRowClassName;
|
|
57
58
|
var _b = __read((0, react_2.useState)(null), 2), element = _b[0], setElement = _b[1];
|
|
58
59
|
var className = rowProps.className, rowPropsStyle = rowProps.style, restOfRowProps = __rest(rowProps, ["className", "style"]);
|
|
59
60
|
var isExpanded = row.isExpanded;
|
|
@@ -74,7 +75,7 @@ function BodyRow(_a) {
|
|
|
74
75
|
}, className: rootClassName, css: cx(style && css(style)) },
|
|
75
76
|
(0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps, { component: "div", css: cx(
|
|
76
77
|
// @ts-ignore
|
|
77
|
-
css(rowPropsStyle), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "])))), className: className }), row.cells.map(function (cell) {
|
|
78
|
+
css(rowPropsStyle), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "])))), className: (0, classnames_1.default)(className, getRowClassName && getRowClassName(row.id)) }), row.cells.map(function (cell) {
|
|
78
79
|
var _a = cell.getCellProps(), key = _a.key, restOfCellProps = __rest(_a, ["key"]);
|
|
79
80
|
return (0, react_1.jsx)(BodyCell_1.default, { key: key, cell: cell, cellProps: restOfCellProps });
|
|
80
81
|
})),
|
|
@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
|
|
|
4
4
|
import { Dispatch, MutableRefObject, SetStateAction } from 'react';
|
|
5
5
|
import { Row } from 'react-table';
|
|
6
6
|
import { HasScrollbar } from '@vendorflow/common/lib/hooks';
|
|
7
|
+
import { Maybe } from '@vendorflow/types';
|
|
7
8
|
interface Props<D extends object> {
|
|
8
9
|
defaultRowHeight: number;
|
|
9
10
|
ExpandedComponent?: ((props: {
|
|
@@ -24,6 +25,7 @@ interface Props<D extends object> {
|
|
|
24
25
|
tableRows: Row<D>[];
|
|
25
26
|
totalColumnsWidth: number;
|
|
26
27
|
width: number | undefined;
|
|
28
|
+
getRowClassName: Maybe<(rowId: string) => string>;
|
|
27
29
|
}
|
|
28
|
-
export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbar, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollbarWidth, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
|
|
30
|
+
export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbar, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollbarWidth, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, getRowClassName, }: Props<D>): jsx.JSX.Element;
|
|
29
31
|
export {};
|
|
@@ -27,7 +27,7 @@ var material_1 = require("@mui/material");
|
|
|
27
27
|
var react_2 = require("react");
|
|
28
28
|
var hooks_1 = require("@vendorflow/common/lib/hooks");
|
|
29
29
|
function TableBodyContent(_a) {
|
|
30
|
-
var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbar = _a.hasScrollbar, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollbarWidth = _a.scrollbarWidth, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
|
|
30
|
+
var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbar = _a.hasScrollbar, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollbarWidth = _a.scrollbarWidth, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width, getRowClassName = _a.getRowClassName;
|
|
31
31
|
var trueWidth = width ? width - (hasScrollbar.vertical ? scrollbarWidth : 0) : 0;
|
|
32
32
|
var scrollContentWidth = (0, react_2.useMemo)(function () {
|
|
33
33
|
return trueWidth > totalColumnsWidth ? trueWidth : totalColumnsWidth;
|
|
@@ -53,7 +53,7 @@ function TableBodyContent(_a) {
|
|
|
53
53
|
var _b = row.getRowProps(), _ = _b.key, restOfRowProps = __rest(_b, ["key"]);
|
|
54
54
|
return ((0, react_1.jsx)(react_virtualized_1.CellMeasurer, { cache: cache.current, columnIndex: columnIndex, key: key, rowIndex: rowIndex, parent: parent }, function (_a) {
|
|
55
55
|
var measure = _a.measure, registerChild = _a.registerChild;
|
|
56
|
-
return ((0, react_1.jsx)(BodyRow_1.default, { key: key, innerRef: registerChild, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps, style: style, measure: measure }));
|
|
56
|
+
return ((0, react_1.jsx)(BodyRow_1.default, { key: key, innerRef: registerChild, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps, style: style, measure: measure, getRowClassName: getRowClassName }));
|
|
57
57
|
}));
|
|
58
58
|
}
|
|
59
59
|
return ((0, react_1.jsx)(material_1.TableBody, { ref: function (node) {
|
|
@@ -79,7 +79,7 @@ function TableBodyContent(_a) {
|
|
|
79
79
|
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", "px;\n "], ["\n width: ", "px;\n "])), scrollContentWidth) }, tableRows.length > 0 ? (tableRows.map(function (row) {
|
|
80
80
|
prepareRow(row);
|
|
81
81
|
var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
|
|
82
|
-
return ((0, react_1.jsx)(BodyRow_1.default, { key: key, css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), trueWidth > totalColumnsWidth ? '100%' : 'max-content'), ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
|
|
82
|
+
return ((0, react_1.jsx)(BodyRow_1.default, { key: key, css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), trueWidth > totalColumnsWidth ? '100%' : 'max-content'), ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps, getRowClassName: getRowClassName }));
|
|
83
83
|
})) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "]))) },
|
|
84
84
|
(0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "], ["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "]))) },
|
|
85
85
|
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
|