@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
92 lines (91 loc) • 6.91 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Button_1 = tslib_1.__importDefault(require("react-bootstrap/Button"));
var ButtonGroup_1 = tslib_1.__importDefault(require("react-bootstrap/ButtonGroup"));
var Col_1 = tslib_1.__importDefault(require("react-bootstrap/Col"));
var Container_1 = tslib_1.__importDefault(require("react-bootstrap/Container"));
var Modal_1 = tslib_1.__importDefault(require("react-bootstrap/Modal"));
var Row_1 = tslib_1.__importDefault(require("react-bootstrap/Row"));
var arrayUtils_1 = require("../../arrayUtils");
var ControlledContext_1 = require("../ControlledContext");
var FieldsListControl_1 = tslib_1.__importDefault(require("./FieldsListControl"));
var SortableFieldsListControl_1 = tslib_1.__importDefault(require("./SortableFieldsListControl"));
var VisibleFieldsModal = function (_a) {
var onHide = _a.onHide, show = _a.show;
var _b = ControlledContext_1.useControlledContext(), disableVisibleFieldsChange = _b.disableVisibleFieldsChange, itemModel = _b.itemModel, onVisibleFieldsChange = _b.onVisibleFieldsChange, visibleFields = _b.visibleFields;
var fieldsMap = react_1.useMemo(function () {
return new Map(itemModel.fields.map(function (field) { return [field.key, field]; }));
}, [itemModel.fields]);
var visibleFieldsSet = react_1.useMemo(function () { return new Set(visibleFields); }, [visibleFields]);
var available = react_1.useMemo(function () {
return itemModel.fields.filter(function (_a) {
var key = _a.key;
return !visibleFieldsSet.has(key);
});
}, [itemModel, visibleFieldsSet]);
var visible = react_1.useMemo(function () {
return visibleFields.map(function (fieldKey) { return fieldsMap.get(fieldKey); }).filter(arrayUtils_1.notEmpty);
}, [visibleFields, fieldsMap]);
var _c = tslib_1.__read(react_1.useState([]), 2), availableSelected = _c[0], setAvailableSelected = _c[1];
var _d = tslib_1.__read(react_1.useState([]), 2), visibleSelected = _d[0], setVisibleSelected = _d[1];
var handleAllToRight = react_1.useCallback(function () {
onVisibleFieldsChange(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(visibleFields)), tslib_1.__read(available.map(function (_a) {
var key = _a.key;
return key;
}))));
setAvailableSelected([]);
}, [available, onVisibleFieldsChange, visibleFields]);
var handleToRight = react_1.useCallback(function () {
onVisibleFieldsChange(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(visibleFields)), tslib_1.__read(availableSelected)));
setAvailableSelected([]);
}, [onVisibleFieldsChange, setAvailableSelected, visibleFields, availableSelected]);
var handleToLeft = react_1.useCallback(function () {
onVisibleFieldsChange(visibleFields.filter(function (fieldKey) { return !visibleSelected.includes(fieldKey); }));
setVisibleSelected([]);
}, [onVisibleFieldsChange, visibleFields, visibleSelected, setVisibleSelected]);
var handleAllToLeft = react_1.useCallback(function () {
onVisibleFieldsChange([]);
setVisibleSelected([]);
}, [onVisibleFieldsChange, setVisibleSelected]);
var handleReset = react_1.useCallback(function () {
var defaultFields = itemModel.fields
.filter(function (_a) {
var hiddenByDefault = _a.hiddenByDefault;
return !hiddenByDefault;
}).map(function (_a) {
var key = _a.key;
return key;
});
onVisibleFieldsChange(defaultFields);
setAvailableSelected([]);
setVisibleSelected([]);
}, [itemModel, onVisibleFieldsChange, setAvailableSelected, setVisibleSelected]);
if (disableVisibleFieldsChange) {
return null;
}
return react_1.default.createElement(Modal_1.default, { onHide: onHide, show: show },
react_1.default.createElement(Modal_1.default.Dialog, { style: { margin: 0, width: '100%' } },
react_1.default.createElement(Modal_1.default.Header, { closeButton: true },
react_1.default.createElement(Modal_1.default.Title, null, "Manage displayed columns")),
react_1.default.createElement(Modal_1.default.Body, null,
react_1.default.createElement(Container_1.default, null,
react_1.default.createElement(Row_1.default, null,
react_1.default.createElement(Col_1.default, null,
react_1.default.createElement(FieldsListControl_1.default, { onSelectedChange: setAvailableSelected, options: available, placeholder: "All fields are selected to display. Select and move some fields from right part of the dialog to hide their columns.", selected: availableSelected })),
react_1.default.createElement(Col_1.default, { as: ButtonGroup_1.default, lg: 1, style: { height: 'fit-content', padding: 0 }, vertical: true },
react_1.default.createElement(Button_1.default, { disabled: available.length === 0, onClick: handleAllToRight, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-double-right" })),
react_1.default.createElement(Button_1.default, { disabled: availableSelected.length === 0, onClick: handleToRight, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-right" })),
react_1.default.createElement(Button_1.default, { disabled: visibleSelected.length === 0, onClick: handleToLeft, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-left" })),
react_1.default.createElement(Button_1.default, { disabled: visible.length === 0, onClick: handleAllToLeft, variant: "light" },
react_1.default.createElement("i", { className: "fa fa-angle-double-left" }))),
react_1.default.createElement(SortableFieldsListControl_1.default, { onOptionsChange: onVisibleFieldsChange, onSelectedChange: setVisibleSelected, options: visible, placeholder: "Move fields here to show their columns.", selected: visibleSelected })))),
react_1.default.createElement(Modal_1.default.Footer, null,
react_1.default.createElement(Button_1.default, { onClick: handleReset, variant: "secondaty" }, "Reset to defaults"),
react_1.default.createElement(Button_1.default, { onClick: onHide, variant: "primary" }, "Close"))));
};
exports.default = react_1.default.memo(VisibleFieldsModal);