@vendorflow/components 2.0.90 → 2.0.92
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.js +1 -1
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +2 -1
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +2 -2
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js +1 -1
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +8 -10
- package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +3 -3
- package/package.json +6 -6
|
@@ -167,7 +167,7 @@ function DataTable(_a) {
|
|
|
167
167
|
(0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
|
|
168
168
|
(filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter })))),
|
|
169
169
|
(0, react_1.jsx)("div", { className: "DataTable__TableContainer", css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", "px;\n "], ["\n height: ", "px;\n "])), containerHeight) },
|
|
170
|
-
(0, react_1.jsx)(Table_1.default, { getTableProps: getTableProps, css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n "], ["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n "]))) },
|
|
170
|
+
(0, react_1.jsx)(Table_1.default, { getTableProps: getTableProps, css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n grid-template-columns: calc(100% + ", "px);\n "], ["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n grid-template-columns: calc(100% + ", "px);\n "])), hasScrollbar.vertical ? scrollbarWidth : 0) },
|
|
171
171
|
(0, react_1.jsx)(material_1.TableHead, { ref: tableHeadRef, className: "DataTable__TableHead", component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n && {\n display: block;\n height: auto;\n width: calc(100% - ", "px);\n overflow-x: auto;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n &::-webkit-scrollbar {\n /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n }\n "], ["\n && {\n display: block;\n height: auto;\n width: calc(100% - ", "px);\n overflow-x: auto;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n &::-webkit-scrollbar {\n /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n }\n "])), hasScrollbar.vertical ? scrollbarWidth : 0), onScroll: function (evt) {
|
|
172
172
|
var scrollLeft = evt.target.scrollLeft;
|
|
173
173
|
setScrollLeft(scrollLeft);
|
|
@@ -12,7 +12,8 @@ interface Props<D extends object> {
|
|
|
12
12
|
rowProps: Omit<TableRowProps, 'key'>;
|
|
13
13
|
innerRef?: ((element?: Element | undefined) => void) | undefined;
|
|
14
14
|
style?: CSSProperties;
|
|
15
|
+
className?: string;
|
|
15
16
|
measure?: () => void;
|
|
16
17
|
}
|
|
17
|
-
export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, measure, }: Props<D>): jsx.JSX.Element;
|
|
18
|
+
export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, className: rootClassName, measure, }: Props<D>): jsx.JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -53,7 +53,7 @@ var material_1 = require("@mui/material");
|
|
|
53
53
|
var BodyCell_1 = __importDefault(require("./BodyCell"));
|
|
54
54
|
var lodash_1 = require("lodash");
|
|
55
55
|
function BodyRow(_a) {
|
|
56
|
-
var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, measure = _a.measure;
|
|
56
|
+
var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, rootClassName = _a.className, 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"]);
|
|
59
59
|
var isExpanded = row.isExpanded;
|
|
@@ -71,7 +71,7 @@ function BodyRow(_a) {
|
|
|
71
71
|
if (innerRef) {
|
|
72
72
|
innerRef(node);
|
|
73
73
|
}
|
|
74
|
-
}, css: cx(style && css(style)) },
|
|
74
|
+
}, className: rootClassName, 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
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) {
|
|
@@ -46,7 +46,7 @@ function HeaderCell(_a) {
|
|
|
46
46
|
// @ts-ignore
|
|
47
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
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), header.id
|
|
49
|
+
header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: ", "px;\n "], ["\n max-width: ", "px;\n "])), header.maxWidth), header.id.includes(DataTable_1.ACTION_COLUMN_ID) && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: none;\n "], ["\n flex: none;\n "])))), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
|
|
50
50
|
(0, react_1.jsx)("div", { css: cx(css(templateObject_5 || (templateObject_5 = __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')) },
|
|
51
51
|
(0, react_1.jsx)("span", { css: cx(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n flex: none;\n "], ["\n font-weight: 600;\n flex: none;\n "])))) }, header.render('Header')),
|
|
52
52
|
(0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc }),
|
|
@@ -28,12 +28,10 @@ var react_2 = require("react");
|
|
|
28
28
|
var hooks_1 = require("@vendorflow/common/lib/hooks");
|
|
29
29
|
function TableBodyContent(_a) {
|
|
30
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;
|
|
31
|
+
var trueWidth = width ? width - (hasScrollbar.vertical ? scrollbarWidth : 0) : 0;
|
|
31
32
|
var scrollContentWidth = (0, react_2.useMemo)(function () {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
return width - (hasScrollbar.vertical ? scrollbarWidth : 0);
|
|
36
|
-
}, [flexLayoutEnabled, totalColumnsWidth, width, hasScrollbar, scrollbarWidth]);
|
|
33
|
+
return trueWidth > totalColumnsWidth ? trueWidth : totalColumnsWidth;
|
|
34
|
+
}, [flexLayoutEnabled, totalColumnsWidth, trueWidth, hasScrollbar, scrollbarWidth]);
|
|
37
35
|
var forceUpdate = (0, hooks_1.useForceUpdate)();
|
|
38
36
|
var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: scrollContentWidth }));
|
|
39
37
|
(0, react_2.useEffect)(function () {
|
|
@@ -81,11 +79,11 @@ function TableBodyContent(_a) {
|
|
|
81
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) {
|
|
82
80
|
prepareRow(row);
|
|
83
81
|
var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
|
|
84
|
-
return ((0, react_1.jsx)(BodyRow_1.default, { key: key, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
|
|
85
|
-
})) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(
|
|
86
|
-
(0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(
|
|
87
|
-
(0, react_1.jsx)("div", { css: (0, react_1.css)(
|
|
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 }));
|
|
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
|
+
(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
|
+
(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 "]))) },
|
|
88
86
|
(0, react_1.jsx)("span", null, noMatchLabel))))))))));
|
|
89
87
|
}
|
|
90
88
|
exports.default = TableBodyContent;
|
|
91
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
89
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -55,7 +55,7 @@ var useStyles = (0, styles_1.makeStyles)({
|
|
|
55
55
|
},
|
|
56
56
|
});
|
|
57
57
|
function InputSearchDropdown(props) {
|
|
58
|
-
var _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, label = props.label, helperText = props.helperText, name = props.name, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, autoFocus = props.autoFocus, _h = props.size, size = _h === void 0 ? 'small' : _h, restOfProps = __rest(props, ["autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max", "autoFocus", "size"]);
|
|
58
|
+
var _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, getKey = props.getKey, label = props.label, helperText = props.helperText, name = props.name, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, autoFocus = props.autoFocus, _h = props.size, size = _h === void 0 ? 'small' : _h, restOfProps = __rest(props, ["autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "getKey", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max", "autoFocus", "size"]);
|
|
59
59
|
var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
|
|
60
60
|
var _j = __read((0, react_2.useState)(null), 2), value = _j[0], setValue = _j[1];
|
|
61
61
|
var mainStyles = useStyles();
|
|
@@ -110,8 +110,8 @@ function InputSearchDropdown(props) {
|
|
|
110
110
|
var _a = getTagProps({ index: index }), key = _a.key, tagProps = __rest(_a, ["key"]);
|
|
111
111
|
return ((0, react_1.jsx)(material_1.Chip, __assign({ key: "chip-" + (typeof value === 'string'
|
|
112
112
|
? value
|
|
113
|
-
:
|
|
114
|
-
?
|
|
113
|
+
: getKey !== undefined
|
|
114
|
+
? getKey(value)
|
|
115
115
|
: props.getOptionLabel !== undefined
|
|
116
116
|
? props.getOptionLabel(value)
|
|
117
117
|
: JSON.stringify(value)), css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), errors && errors[index] ? 'red' : 'initial'), variant: "outlined", label: props.getOptionLabel ? props.getOptionLabel(value) : value, size: "small" }, tagProps)));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vendorflow/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.92",
|
|
4
4
|
"description": "React components for vendorflow",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -138,19 +138,19 @@
|
|
|
138
138
|
"devDependencies": {
|
|
139
139
|
"@babel/cli": "^7.15.7",
|
|
140
140
|
"@babel/preset-react": "^7.9.4",
|
|
141
|
-
"@storybook/addon-actions": "^6.
|
|
141
|
+
"@storybook/addon-actions": "^6.5.14",
|
|
142
142
|
"@storybook/addon-knobs": "^6.3.1",
|
|
143
|
-
"@storybook/addon-links": "^6.
|
|
144
|
-
"@storybook/addons": "^6.
|
|
143
|
+
"@storybook/addon-links": "^6.5.14",
|
|
144
|
+
"@storybook/addons": "^6.5.14",
|
|
145
145
|
"@storybook/preset-create-react-app": "^2.1.1",
|
|
146
|
-
"@storybook/react": "^6.
|
|
146
|
+
"@storybook/react": "^6.5.14",
|
|
147
147
|
"@types/lodash": "^4.14.150",
|
|
148
148
|
"@types/react-measure": "^2.0.7",
|
|
149
149
|
"@types/react-text-mask": "^5.4.6",
|
|
150
150
|
"@types/react-virtualized": "^9.21.21",
|
|
151
151
|
"eslint-config-prettier": "^8.3.0",
|
|
152
152
|
"eslint-plugin-prettier": "^3.4.0",
|
|
153
|
-
"eslint-plugin-storybook": "^0.
|
|
153
|
+
"eslint-plugin-storybook": "^0.6.8",
|
|
154
154
|
"eslint-webpack-plugin": "^2.5.4",
|
|
155
155
|
"prettier": "^2.0.5",
|
|
156
156
|
"tslint": "^6.1.2",
|