@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
90 lines (89 loc) • 5.99 kB
JavaScript
import { __read, __spreadArray } from "tslib";
import React, { useCallback, useMemo, useState } from 'react';
import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Modal from 'react-bootstrap/Modal';
import Row from 'react-bootstrap/Row';
import { notEmpty } from '../../arrayUtils';
import { useControlledContext } from '../ControlledContext';
import FieldsListControl from './FieldsListControl';
import SortableFieldsListControl from './SortableFieldsListControl';
var VisibleFieldsModal = function (_a) {
var onHide = _a.onHide, show = _a.show;
var _b = useControlledContext(), disableVisibleFieldsChange = _b.disableVisibleFieldsChange, itemModel = _b.itemModel, onVisibleFieldsChange = _b.onVisibleFieldsChange, visibleFields = _b.visibleFields;
var fieldsMap = useMemo(function () {
return new Map(itemModel.fields.map(function (field) { return [field.key, field]; }));
}, [itemModel.fields]);
var visibleFieldsSet = useMemo(function () { return new Set(visibleFields); }, [visibleFields]);
var available = useMemo(function () {
return itemModel.fields.filter(function (_a) {
var key = _a.key;
return !visibleFieldsSet.has(key);
});
}, [itemModel, visibleFieldsSet]);
var visible = useMemo(function () {
return visibleFields.map(function (fieldKey) { return fieldsMap.get(fieldKey); }).filter(notEmpty);
}, [visibleFields, fieldsMap]);
var _c = __read(useState([]), 2), availableSelected = _c[0], setAvailableSelected = _c[1];
var _d = __read(useState([]), 2), visibleSelected = _d[0], setVisibleSelected = _d[1];
var handleAllToRight = useCallback(function () {
onVisibleFieldsChange(__spreadArray(__spreadArray([], __read(visibleFields)), __read(available.map(function (_a) {
var key = _a.key;
return key;
}))));
setAvailableSelected([]);
}, [available, onVisibleFieldsChange, visibleFields]);
var handleToRight = useCallback(function () {
onVisibleFieldsChange(__spreadArray(__spreadArray([], __read(visibleFields)), __read(availableSelected)));
setAvailableSelected([]);
}, [onVisibleFieldsChange, setAvailableSelected, visibleFields, availableSelected]);
var handleToLeft = useCallback(function () {
onVisibleFieldsChange(visibleFields.filter(function (fieldKey) { return !visibleSelected.includes(fieldKey); }));
setVisibleSelected([]);
}, [onVisibleFieldsChange, visibleFields, visibleSelected, setVisibleSelected]);
var handleAllToLeft = useCallback(function () {
onVisibleFieldsChange([]);
setVisibleSelected([]);
}, [onVisibleFieldsChange, setVisibleSelected]);
var handleReset = 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.createElement(Modal, { onHide: onHide, show: show },
React.createElement(Modal.Dialog, { style: { margin: 0, width: '100%' } },
React.createElement(Modal.Header, { closeButton: true },
React.createElement(Modal.Title, null, "Manage displayed columns")),
React.createElement(Modal.Body, null,
React.createElement(Container, null,
React.createElement(Row, null,
React.createElement(Col, null,
React.createElement(FieldsListControl, { 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.createElement(Col, { as: ButtonGroup, lg: 1, style: { height: 'fit-content', padding: 0 }, vertical: true },
React.createElement(Button, { disabled: available.length === 0, onClick: handleAllToRight, variant: "light" },
React.createElement("i", { className: "fa fa-angle-double-right" })),
React.createElement(Button, { disabled: availableSelected.length === 0, onClick: handleToRight, variant: "light" },
React.createElement("i", { className: "fa fa-angle-right" })),
React.createElement(Button, { disabled: visibleSelected.length === 0, onClick: handleToLeft, variant: "light" },
React.createElement("i", { className: "fa fa-angle-left" })),
React.createElement(Button, { disabled: visible.length === 0, onClick: handleAllToLeft, variant: "light" },
React.createElement("i", { className: "fa fa-angle-double-left" }))),
React.createElement(SortableFieldsListControl, { onOptionsChange: onVisibleFieldsChange, onSelectedChange: setVisibleSelected, options: visible, placeholder: "Move fields here to show their columns.", selected: visibleSelected })))),
React.createElement(Modal.Footer, null,
React.createElement(Button, { onClick: handleReset, variant: "secondaty" }, "Reset to defaults"),
React.createElement(Button, { onClick: onHide, variant: "primary" }, "Close"))));
};
export default React.memo(VisibleFieldsModal);