@vendorflow/components 2.0.94 → 2.0.96
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/TablePieces/Toolbar.js +19 -23
- package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.d.ts +1 -0
- package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.js +3 -3
- package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.d.ts +1 -0
- package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.js +3 -3
- package/package.json +1 -1
|
@@ -35,29 +35,25 @@ var FilterTool_1 = __importDefault(require("../FilterTool"));
|
|
|
35
35
|
function Toolbar(_a) {
|
|
36
36
|
var title = _a.title, allColumns = _a.allColumns, columnNameById = _a.columnNameById, enableFilters = _a.enableFilters, enableGlobalSearch = _a.enableGlobalSearch, enableHideColumns = _a.enableHideColumns, hasRowsSelected = _a.hasRowsSelected, numRowsSelected = _a.numRowsSelected, globalFilter = _a.globalFilter, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, setAllFilters = _a.setAllFilters, setGlobalFilter = _a.setGlobalFilter;
|
|
37
37
|
var _b = __read((0, react_2.useState)(false), 2), showSearch = _b[0], setShowSearch = _b[1];
|
|
38
|
-
return ((0, react_1.jsx)(material_1.Toolbar, { sx: hasRowsSelected ? { backgroundColor: function (theme) { return (0, material_1.lighten)(theme.palette.primary.light, 0.85); } } : undefined },
|
|
39
|
-
(0, react_1.jsx)(material_1.Grid, {
|
|
40
|
-
(0, react_1.jsx)(material_1.
|
|
41
|
-
(0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 1.125rem;\n margin-top: 4px;\n "], ["\n font-size: 1.125rem;\n margin-top: 4px;\n "]))) },
|
|
38
|
+
return ((0, react_1.jsx)(material_1.Toolbar, { sx: hasRowsSelected ? { backgroundColor: function (theme) { return (0, material_1.lighten)(theme.palette.primary.light, 0.85); } } : undefined },
|
|
39
|
+
(0, react_1.jsx)(material_1.Grid, { container: true, spacing: 2 },
|
|
40
|
+
(0, react_1.jsx)(material_1.Grid, { item: true, sm: 6 },
|
|
41
|
+
(0, react_1.jsx)(material_1.Stack, { direction: "row" }, enableGlobalSearch && showSearch ? ((0, react_1.jsx)(GlobalSearchFilter_1.default, { globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, setShowSearch: setShowSearch })) : hasRowsSelected ? ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 1.125rem;\n margin-top: 4px;\n "], ["\n font-size: 1.125rem;\n margin-top: 4px;\n "]))) },
|
|
42
42
|
numRowsSelected,
|
|
43
|
-
" selected"))),
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
(0, react_1.jsx)(icons_material_1.Search, null)))),
|
|
58
|
-
enableHideColumns && (0, react_1.jsx)(ViewColumnTool_1.default, { allColumns: allColumns, columnNameById: columnNameById }),
|
|
59
|
-
enableFilters && ((0, react_1.jsx)(FilterTool_1.default, { allColumns: allColumns, columnNameById: columnNameById, setAllFilters: setAllFilters })),
|
|
60
|
-
renderActions && renderActions()))))));
|
|
43
|
+
" selected")) : ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 1.125rem;\n margin-top: 6px;\n "], ["\n font-size: 1.125rem;\n margin-top: 6px;\n "]))) }, title || '')))),
|
|
44
|
+
(0, react_1.jsx)(material_1.Grid, { item: true, sm: 6 },
|
|
45
|
+
(0, react_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "flex-end", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "]))) },
|
|
46
|
+
enableGlobalSearch && ((0, react_1.jsx)(material_1.Tooltip, { title: "Search" },
|
|
47
|
+
(0, react_1.jsx)(material_1.IconButton, { onClick: function () {
|
|
48
|
+
if (showSearch) {
|
|
49
|
+
setGlobalFilter(null);
|
|
50
|
+
}
|
|
51
|
+
setShowSearch(!showSearch);
|
|
52
|
+
} },
|
|
53
|
+
(0, react_1.jsx)(icons_material_1.Search, null)))),
|
|
54
|
+
enableHideColumns && (0, react_1.jsx)(ViewColumnTool_1.default, { allColumns: allColumns, columnNameById: columnNameById }),
|
|
55
|
+
enableFilters && ((0, react_1.jsx)(FilterTool_1.default, { allColumns: allColumns, columnNameById: columnNameById, setAllFilters: setAllFilters })),
|
|
56
|
+
hasRowsSelected ? renderRowSelectActions && renderRowSelectActions() : renderActions && renderActions())))));
|
|
61
57
|
}
|
|
62
58
|
exports.default = Toolbar;
|
|
63
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
59
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -43,8 +43,8 @@ var immer_1 = __importDefault(require("immer"));
|
|
|
43
43
|
var lodash_1 = require("lodash");
|
|
44
44
|
var material_1 = require("@mui/material");
|
|
45
45
|
function InputCheckboxGroup(props) {
|
|
46
|
-
var className = props.className, style = props.style, _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.multi, multi = _b === void 0 ? true : _b;
|
|
47
|
-
var
|
|
46
|
+
var className = props.className, style = props.style, _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.multi, multi = _b === void 0 ? true : _b, _c = props.size, size = _c === void 0 ? 'small' : _c;
|
|
47
|
+
var _d = __read((0, react_1.useState)({}), 2), values = _d[0], setValues = _d[1];
|
|
48
48
|
(0, react_1.useEffect)(function () {
|
|
49
49
|
var newValues = {};
|
|
50
50
|
options.forEach(function (_a) {
|
|
@@ -88,7 +88,7 @@ function InputCheckboxGroup(props) {
|
|
|
88
88
|
function renderOptions() {
|
|
89
89
|
return options.map(function (_a) {
|
|
90
90
|
var label = _a.label, value = _a.value;
|
|
91
|
-
return (react_1.default.createElement(material_1.FormControlLabel, { key: label, label: label, control: react_1.default.createElement(material_1.Checkbox, { color: color, disabled: disabled, onChange: handleOnChange, checked: values[value] || false, name: label }) }));
|
|
91
|
+
return (react_1.default.createElement(material_1.FormControlLabel, { key: label, label: label, control: react_1.default.createElement(material_1.Checkbox, { color: color, disabled: disabled, onChange: handleOnChange, checked: values[value] || false, name: label, size: size }) }));
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
94
|
return (react_1.default.createElement(material_1.FormControl, { className: className, style: style, component: "fieldset", error: error },
|
|
@@ -60,8 +60,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
60
60
|
var react_1 = __importStar(require("react"));
|
|
61
61
|
var material_1 = require("@mui/material");
|
|
62
62
|
function InputRadioGroup(props) {
|
|
63
|
-
var _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.row, row = _b === void 0 ? false : _b, restOfProps = __rest(props, ["color", "disabled", "error", "helperText", "label", "name", "onChange", "options", "row"]);
|
|
64
|
-
var
|
|
63
|
+
var _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.row, row = _b === void 0 ? false : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, restOfProps = __rest(props, ["color", "disabled", "error", "helperText", "label", "name", "onChange", "options", "row", "size"]);
|
|
64
|
+
var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
|
|
65
65
|
(0, react_1.useEffect)(function () {
|
|
66
66
|
if (props.value !== value) {
|
|
67
67
|
setValue(props.value);
|
|
@@ -72,7 +72,7 @@ function InputRadioGroup(props) {
|
|
|
72
72
|
onChange({ target: { name: name, value: value } });
|
|
73
73
|
}
|
|
74
74
|
function renderOptions() {
|
|
75
|
-
return options.map(function (option) { return (react_1.default.createElement(material_1.FormControlLabel, { key: option.label, value: option.value, label: option.label, control: react_1.default.createElement(material_1.Radio, { color: color, disabled: disabled }) })); });
|
|
75
|
+
return options.map(function (option) { return (react_1.default.createElement(material_1.FormControlLabel, { key: option.label, value: option.value, label: option.label, control: react_1.default.createElement(material_1.Radio, { size: size, color: color, disabled: disabled }) })); });
|
|
76
76
|
}
|
|
77
77
|
return (react_1.default.createElement(material_1.FormControl, __assign({ component: "fieldset", error: error }, restOfProps),
|
|
78
78
|
react_1.default.createElement(material_1.FormLabel, { component: "legend" }, label),
|