@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
30 lines • 1.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OverflowPill = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var Callout_1 = require("@fluentui/react/lib/Callout");
var react_hooks_1 = require("@fluentui/react-hooks");
var FilterBar_module_scss_1 = tslib_1.__importDefault(require("./FilterBar.module.scss"));
var PillGroup_1 = require("./PillGroup");
var strings = tslib_1.__importStar(require("ControlStrings"));
var OverflowPill = function (props) {
var _a = (0, react_hooks_1.useBoolean)(false), overlayVisible = _a[0], toggleOverlayVisible = _a[1].toggle;
var divId = (0, react_hooks_1.useId)('callout-div');
var onClick = function (event) {
toggleOverlayVisible();
};
var pillClick = function (label, value) {
if (props.onClick) {
props.onClick(label, value);
}
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { id: divId, className: "".concat(FilterBar_module_scss_1.default.pill, " pillOverflow"), "data-is-focusable": true, "aria-label": strings.FilterOverflowAriaLabel, onClick: onClick, tabIndex: -1 },
"+",
props.items.length),
overlayVisible && (react_1.default.createElement(Callout_1.Callout, { onDismiss: toggleOverlayVisible, target: "#".concat(divId), isBeakVisible: false },
react_1.default.createElement("div", { className: FilterBar_module_scss_1.default.overflow }, props.items.map(function (i, index) { return react_1.default.createElement(PillGroup_1.PillGroup, { item: i, key: index, onRemoveFilter: pillClick }); }))))));
};
exports.OverflowPill = OverflowPill;
//# sourceMappingURL=OverflowPill.js.map