@vlsergey/react-bootstrap-pagetable/lib/cjs/controlled/visibleFields/FieldsListControl.js

Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Form_1 = tslib_1.__importDefault(require("react-bootstrap/Form"));
function FieldsListControl(_a) {
    var onSelectedChange = _a.onSelectedChange, options = _a.options, placeholder = _a.placeholder, selected = _a.selected;
    var handleSelectChange = react_1.useCallback(function (_a) {
        var currentTarget = _a.currentTarget;
        return onSelectedChange(tslib_1.__spreadArray([], tslib_1.__read(currentTarget.options)).filter(function (_a) {
            var selected = _a.selected;
            return selected;
        }).map(function (_a) {
            var value = _a.value;
            return value;
        }));
    }, [onSelectedChange]);
    return react_1.default.createElement(Form_1.default.Control, { as: "select", htmlSize: 10, multiple: true, onChange: handleSelectChange, style: { height: options.length === 0 ? '15em' : undefined }, value: selected },
        options.length === 0 && react_1.default.createElement("option", { disabled: true, key: "", style: { whiteSpace: 'break-spaces' }, value: "" }, placeholder),
        options.map(function (field) {
            return react_1.default.createElement("option", { key: field.key, value: field.key }, field.title);
        }));
}
exports.default = react_1.default.memo(FieldsListControl);