@vendorflow/components 2.0.80 → 2.0.81
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 +9 -3
- package/lib/components/material-ui/DataTable/DataTable.story.js +1 -0
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +5 -2
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +6 -7
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.d.ts +2 -1
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js +4 -2
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts +2 -1
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +11 -9
- package/package.json +1 -1
|
@@ -176,10 +176,10 @@ function DataTable(_a) {
|
|
|
176
176
|
// eslint-disable-next-line react/jsx-key
|
|
177
177
|
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps(), { component: "div" }), headerGroup.headers.map(function (header) {
|
|
178
178
|
var _a = header.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? header.getSortByToggleProps() : undefined), key = _a.key, restOfHeaderProps = __rest(_a, ["key"]);
|
|
179
|
-
return (0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps });
|
|
179
|
+
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 }));
|
|
180
180
|
})));
|
|
181
181
|
})),
|
|
182
|
-
(0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
|
|
182
|
+
(0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
|
|
183
183
|
(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 }))));
|
|
184
184
|
}
|
|
185
185
|
exports.default = DataTable;
|
|
@@ -189,8 +189,14 @@ function usePluginConfig(options) {
|
|
|
189
189
|
? exports.CELL_PADDING * 2 + EXPAND_BTN_WIDTH + IndeterminateCheckbox_1.CHECKBOX_WIDTH
|
|
190
190
|
: Math.max(EXPAND_BTN_WIDTH, IndeterminateCheckbox_1.CHECKBOX_WIDTH) + exports.CELL_PADDING * 2;
|
|
191
191
|
return (0, react_2.useMemo)(function () {
|
|
192
|
+
var _a;
|
|
192
193
|
var result = [];
|
|
193
|
-
|
|
194
|
+
if ((_a = options.table) === null || _a === void 0 ? void 0 : _a.flexLayoutEnabled) {
|
|
195
|
+
result.push(react_table_1.useFlexLayout);
|
|
196
|
+
}
|
|
197
|
+
else {
|
|
198
|
+
result.push(react_table_1.useBlockLayout);
|
|
199
|
+
}
|
|
194
200
|
if (filters === null || filters === void 0 ? void 0 : filters.enabled) {
|
|
195
201
|
result.push(react_table_1.useFilters);
|
|
196
202
|
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/** @jsxRuntime classic */
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
1
4
|
import { CSSProperties } from 'react';
|
|
2
5
|
import { EnhancedRow } from '../DataTable';
|
|
3
6
|
import { TableRowProps } from 'react-table';
|
|
@@ -11,5 +14,5 @@ interface Props<D extends object> {
|
|
|
11
14
|
style?: CSSProperties;
|
|
12
15
|
measure?: () => void;
|
|
13
16
|
}
|
|
14
|
-
|
|
15
|
-
export
|
|
17
|
+
export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, measure, }: Props<D>): jsx.JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -52,7 +52,7 @@ 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
|
-
function
|
|
55
|
+
function BodyRow(_a) {
|
|
56
56
|
var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, measure = _a.measure;
|
|
57
57
|
var _b = __read((0, react_2.useState)(null), 2), element = _b[0], setElement = _b[1];
|
|
58
58
|
var className = rowProps.className, rowPropsStyle = rowProps.style, restOfRowProps = __rest(rowProps, ["className", "style"]);
|
|
@@ -71,18 +71,17 @@ function Row(_a) {
|
|
|
71
71
|
if (innerRef) {
|
|
72
72
|
innerRef(node);
|
|
73
73
|
}
|
|
74
|
-
}, css: cx(style && css(style)
|
|
74
|
+
}, css: cx(style && css(style)) },
|
|
75
75
|
(0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps, { component: "div", css: cx(
|
|
76
76
|
// @ts-ignore
|
|
77
|
-
css(rowPropsStyle), css(
|
|
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
78
|
var _a = cell.getCellProps(), key = _a.key, restOfCellProps = __rest(_a, ["key"]);
|
|
79
79
|
return (0, react_1.jsx)(BodyCell_1.default, { key: key, cell: cell, cellProps: restOfCellProps });
|
|
80
80
|
})),
|
|
81
|
-
isExpanded && !!ExpandedComponent && ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: css(
|
|
82
|
-
(0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: css(
|
|
81
|
+
isExpanded && !!ExpandedComponent && ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: css(templateObject_2 || (templateObject_2 = __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 && {\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 "]))) },
|
|
82
|
+
(0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n && {\n display: block;\n border-bottom: none;\n }\n "], ["\n && {\n display: block;\n border-bottom: none;\n }\n "]))) },
|
|
83
83
|
(0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
|
|
84
84
|
}));
|
|
85
85
|
}
|
|
86
|
-
var BodyRow = (0, react_2.memo)(Row);
|
|
87
86
|
exports.default = BodyRow;
|
|
88
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
87
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -5,8 +5,9 @@ import { EnhancedHeader } from '../DataTable';
|
|
|
5
5
|
import { TableHeaderProps } from 'react-table';
|
|
6
6
|
interface Props<D extends object> {
|
|
7
7
|
className?: string;
|
|
8
|
+
flexLayoutEnabled: boolean;
|
|
8
9
|
header: EnhancedHeader<D>;
|
|
9
10
|
headerProps: Omit<TableHeaderProps, 'key'>;
|
|
10
11
|
}
|
|
11
|
-
export default function HeaderCell<D extends object>({ className, header, headerProps }: Props<D>): jsx.JSX.Element;
|
|
12
|
+
export default function HeaderCell<D extends object>({ className, flexLayoutEnabled, header, headerProps }: Props<D>): jsx.JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -38,13 +38,15 @@ var material_1 = require("@mui/material");
|
|
|
38
38
|
var icons_material_1 = require("@mui/icons-material");
|
|
39
39
|
var DataTable_1 = require("../DataTable");
|
|
40
40
|
function HeaderCell(_a) {
|
|
41
|
-
var className = _a.className, header = _a.header, headerProps = _a.headerProps;
|
|
41
|
+
var className = _a.className, flexLayoutEnabled = _a.flexLayoutEnabled, header = _a.header, headerProps = _a.headerProps;
|
|
42
42
|
var headerPropsClassName = headerProps.className, style = headerProps.style, restOfProps = __rest(headerProps, ["className", "style"]);
|
|
43
43
|
return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
|
|
44
44
|
var css = _a.css, cx = _a.cx;
|
|
45
45
|
return ((0, react_1.jsx)(material_1.TableCell, __assign({}, restOfProps, { component: "div", variant: "head", css: cx(
|
|
46
46
|
// @ts-ignore
|
|
47
|
-
css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "], ["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "])), DataTable_1.CELL_PADDING),
|
|
47
|
+
css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "], ["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "])), DataTable_1.CELL_PADDING), !flexLayoutEnabled &&
|
|
48
|
+
header.minWidth !== undefined && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", "px;\n "], ["\n min-width: ", "px;\n "])), header.minWidth), !flexLayoutEnabled &&
|
|
49
|
+
header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: ", "px;\n "], ["\n max-width: ", "px;\n "])), header.maxWidth)), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
|
|
48
50
|
(0, react_1.jsx)("div", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "], ["\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "])), header.columns != null ? 'center' : 'flex-start')) },
|
|
49
51
|
(0, react_1.jsx)("span", { css: cx(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-weight: 600;\n flex: none;\n "], ["\n font-weight: 600;\n flex: none;\n "])))) }, header.render('Header')),
|
|
50
52
|
(0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc }),
|
|
@@ -8,6 +8,7 @@ interface Props<D extends object> {
|
|
|
8
8
|
ExpandedComponent: ((props: {
|
|
9
9
|
data: D;
|
|
10
10
|
}) => JSX.Element) | undefined;
|
|
11
|
+
flexLayoutEnabled: boolean;
|
|
11
12
|
hasScrollbarRefCallback: (node: HTMLDivElement | null) => void;
|
|
12
13
|
height: number | undefined;
|
|
13
14
|
isVirtualizeEnabled: boolean;
|
|
@@ -21,5 +22,5 @@ interface Props<D extends object> {
|
|
|
21
22
|
totalColumnsWidth: number;
|
|
22
23
|
width: number | undefined;
|
|
23
24
|
}
|
|
24
|
-
export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
|
|
25
|
+
export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
|
|
25
26
|
export {};
|
|
@@ -26,22 +26,24 @@ var BodyRow_1 = __importDefault(require("./BodyRow"));
|
|
|
26
26
|
var material_1 = require("@mui/material");
|
|
27
27
|
var react_2 = require("react");
|
|
28
28
|
function TableBodyContent(_a) {
|
|
29
|
-
var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
|
|
30
|
-
var
|
|
29
|
+
var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
|
|
30
|
+
var defaultWidth = (0, react_2.useMemo)(function () { return (flexLayoutEnabled && width && width > totalColumnsWidth ? width : totalColumnsWidth); }, [flexLayoutEnabled, totalColumnsWidth, width]);
|
|
31
|
+
var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: defaultWidth }));
|
|
31
32
|
(0, react_2.useEffect)(function () {
|
|
32
33
|
if (isVirtualizeEnabled) {
|
|
33
34
|
cache.current = new react_virtualized_1.CellMeasurerCache({
|
|
34
35
|
fixedWidth: true,
|
|
35
36
|
defaultHeight: defaultRowHeight,
|
|
36
|
-
defaultWidth:
|
|
37
|
+
defaultWidth: defaultWidth,
|
|
37
38
|
});
|
|
38
39
|
cache.current.clearAll();
|
|
39
40
|
}
|
|
40
|
-
}, [
|
|
41
|
+
}, [defaultWidth]);
|
|
41
42
|
function renderRow(_a) {
|
|
42
43
|
var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, key = _a.key, parent = _a.parent, style = _a.style;
|
|
43
44
|
var row = tableRows[rowIndex];
|
|
44
45
|
prepareRow(row);
|
|
46
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
45
47
|
var _b = row.getRowProps(), _ = _b.key, restOfRowProps = __rest(_b, ["key"]);
|
|
46
48
|
return ((0, react_1.jsx)(react_virtualized_1.CellMeasurer, { cache: cache.current, columnIndex: columnIndex, key: key, rowIndex: rowIndex, parent: parent }, function (_a) {
|
|
47
49
|
var measure = _a.measure, registerChild = _a.registerChild;
|
|
@@ -68,14 +70,14 @@ function TableBodyContent(_a) {
|
|
|
68
70
|
var scrollLeft = evt.target.scrollLeft;
|
|
69
71
|
setScrollLeft(scrollLeft);
|
|
70
72
|
} },
|
|
71
|
-
(0, react_1.jsx)("div",
|
|
73
|
+
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", "px;\n "], ["\n width: ", "px;\n "])), defaultWidth) }, tableRows.length > 0 ? (tableRows.map(function (row) {
|
|
72
74
|
prepareRow(row);
|
|
73
75
|
var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
|
|
74
76
|
return ((0, react_1.jsx)(BodyRow_1.default, { key: key, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
|
|
75
|
-
})) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(
|
|
76
|
-
(0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(
|
|
77
|
-
(0, react_1.jsx)("div", { css: (0, react_1.css)(
|
|
77
|
+
})) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __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 "]))) },
|
|
78
|
+
(0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __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 "]))) },
|
|
79
|
+
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
|
|
78
80
|
(0, react_1.jsx)("span", null, noMatchLabel))))))))));
|
|
79
81
|
}
|
|
80
82
|
exports.default = TableBodyContent;
|
|
81
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
83
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|