@pnp/spfx-controls-react/lib-commonjs/controls/filterBar/FilterlBar.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterBar = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var FilterBar_module_scss_1 = tslib_1.__importDefault(require("./FilterBar.module.scss"));
var PillGroup_1 = require("./PillGroup");
var Pill_1 = require("./Pill");
var OverflowPill_1 = require("./OverflowPill");
var strings = tslib_1.__importStar(require("ControlStrings"));
var lodash_1 = require("lodash");
var Theme_1 = require("@fluentui/react/lib/Theme");
var Styling_1 = require("@fluentui/react/lib/Styling");
var FilterBar = function (props) {
    var orderedArray = function (arr) {
        var ret = [];
        arr.map(function (i) {
            var index = (0, lodash_1.findLastIndex)(ret, function (r) { return r.label === i.label; });
            if (index > -1) {
                ret.splice(index + 1, 0, i);
            }
            else {
                ret.push(i);
            }
        });
        return ret;
    };
    var groupItems = function (itms) { return itms.reduce(function (acc, itm) {
        var label = itm.label;
        var obj = acc.find(function (i) { return i.label === label; });
        if (!obj) {
            obj = {
                label: label,
                values: [itm.value]
            };
            acc.push(obj);
        }
        else {
            if (!obj.values.find(function (v) { return v === itm.value; })) {
                obj.values.push(itm.value);
            }
        }
        return acc;
    }, []); };
    var clearAll = function () {
        if (props.onClearFilters) {
            props.onClearFilters();
        }
    };
    var pillClick = function (label, value) {
        console.log(label, value);
        if (props.onRemoveFilter) {
            props.onRemoveFilter(label, value);
        }
    };
    //const [items, setItems] = React.useState());
    var defaultInlineItemCount = 5;
    var _a = React.useState(defaultInlineItemCount), inlineCount = _a[0], setInlineCount = _a[1];
    var groupedItems = React.useMemo(function () { return groupItems(orderedArray((0, lodash_1.uniq)(props.items))); }, [props.items]);
    React.useEffect(function () {
        var _a;
        setInlineCount((_a = props.inlineItemCount) !== null && _a !== void 0 ? _a : defaultInlineItemCount);
    }, [props.inlineItemCount]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Theme_1.ThemeProvider, { theme: (0, Styling_1.getTheme)() }, groupedItems && groupedItems.length > 0 && (React.createElement("div", { className: FilterBar_module_scss_1.default.container, "aria-label": strings.AppliedFiltersAriaLabel, role: 'region' },
            groupedItems.slice(0, inlineCount).map(function (i, index) { return React.createElement(PillGroup_1.PillGroup, { item: i, key: index, onRemoveFilter: pillClick }); }),
            groupedItems.length > inlineCount && (React.createElement(OverflowPill_1.OverflowPill, { items: groupedItems.slice(inlineCount), onClick: pillClick })),
            React.createElement(Pill_1.Pill, { clearAll: true, onClick: clearAll }))))));
};
exports.FilterBar = FilterBar;
//# sourceMappingURL=FilterlBar.js.map