@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
162 lines • 9.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarFilter = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var get_1 = tslib_1.__importDefault(require("lodash/get"));
var react_northstar_1 = require("@fluentui/react-northstar");
var react_icons_northstar_1 = require("@fluentui/react-icons-northstar");
var Toolbar_module_scss_1 = tslib_1.__importDefault(require("./Toolbar.module.scss"));
var treeItemIconStyles = {
position: "relative",
left: "-1rem",
height: "1rem",
width: "0",
display: "block",
pointerEvents: "none",
};
var treeItemTitleRenderer = function (Component, _a) {
var content = _a.content, expanded = _a.expanded, hasSubtree = _a.hasSubtree, restProps = tslib_1.__rest(_a, ["content", "expanded", "hasSubtree"]);
return (React.createElement(Component, tslib_1.__assign({ expanded: expanded, hasSubtree: hasSubtree, styles: {
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
padding: "0.325rem 0.875rem 0.325rem 1.125rem",
}, selectionIndicator: {
styles: { flex: "0 0 auto", marginLeft: "1rem" },
} }, restProps),
hasSubtree ? (expanded ? (React.createElement(react_icons_northstar_1.TriangleDownIcon, { styles: treeItemIconStyles })) : (React.createElement(react_icons_northstar_1.TriangleEndIcon, { styles: treeItemIconStyles }))) : null,
React.createElement(react_northstar_1.Text, { styles: {
flex: "1 1 auto",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
pointerEvents: "none",
marginRight: ".5rem",
}, content: content, className: "extended-toolbar__filters-menu__item__content" })));
};
var addSelectableParent = function (items) {
return items.map(function (item) {
if (item && item.hasOwnProperty("items")) // eslint-disable-line no-prototype-builtins
return Object.assign(item, {
selectableParent: true,
items: addSelectableParent((0, get_1.default)(item, ["items"], [])),
});
else
return item;
});
};
var findSingleTitle = function (selectedId, filters) {
var result = undefined;
for (var i = 0; i < filters.length; i += 1) {
if ((0, get_1.default)(filters, [i, "id"]) === selectedId) {
result = (0, get_1.default)(filters, [i, "title"]);
break;
}
else if (Array.isArray((0, get_1.default)(filters, [i, "items"]))) {
var deepResult = findSingleTitle(selectedId, (0, get_1.default)(filters, [i, "items"]));
if (deepResult) {
result = deepResult;
break;
}
}
}
return result;
};
var getSingleTitle = function (layout, selectedId, filters) {
switch (layout) {
case "verbose":
return (selectedId && findSingleTitle(selectedId, filters)) || "Filter";
default:
case "compact":
return selectedId ? "(1)" : "";
}
};
var ToolbarFilter = function (props) {
var layout = props.layout, filters = props.filters, externalSelectedFilters = props.selectedFilterIds, singleSelect = props.singleSelect, open = props.open, onOpenChange = props.onOpenChange, toolbarMenuProps = props.toolbarMenuProps;
var _a = React.useState([]), selectedFilters = _a[0], setSelectedFilters = _a[1];
var propagateSetSelectedFilters = function (eventSelectedFilters) {
if (props.onSelectedFiltersChange) {
var selectedFiltersAfterNotifyingChange = props.onSelectedFiltersChange(eventSelectedFilters);
// If Toolbar is used as a controlled component - i.e. selectedFilterIds is defined - then we ignore the value
// returned by the onSelectedFiltersChange callback and assume that selectedFilterIds will be updated
// to reflect the new set of selected filters.
// If Toolbar is uncontrolled then a defined returned value from the onSelectedFilterChange callback will be
// used as the new set of selected filters.
if (externalSelectedFilters === undefined) {
console.log("externalSelectedFilters is undefined");
if (selectedFiltersAfterNotifyingChange !== undefined && Array.isArray(selectedFiltersAfterNotifyingChange)) {
setSelectedFilters(selectedFiltersAfterNotifyingChange);
}
else {
setSelectedFilters(eventSelectedFilters);
}
}
}
else {
setSelectedFilters(eventSelectedFilters);
}
};
React.useEffect(function () {
if (externalSelectedFilters !== undefined) {
setSelectedFilters(externalSelectedFilters);
}
}, [externalSelectedFilters]);
var invokerTitle = singleSelect
? getSingleTitle(layout, selectedFilters[0], filters)
: "".concat(layout === "verbose" ? "Filter" : "").concat(selectedFilters.length > 0 ? " (".concat(selectedFilters.length, ")") : "");
var filtersForTree = singleSelect
? filters
: addSelectableParent(filters);
var filterInvoker = (React.createElement(react_northstar_1.Button, { text: true, title: "Filter", content: invokerTitle, className: "extended-toolbar__filters-invoker " + Toolbar_module_scss_1.default.toolbarButtonStyles, icon: React.createElement(react_icons_northstar_1.AudienceIcon, { outline: true }), styles: {
marginRight: ".5rem",
flex: "0 0 auto",
}, onClick: function (e) { return onOpenChange(e, { open: !open }); } }));
return filters.length ? (React.createElement(react_northstar_1.Popup, tslib_1.__assign({}, toolbarMenuProps, { open: open, onOpenChange: onOpenChange, trigger: layout === "compact" ? (React.createElement(react_northstar_1.Tooltip, { trigger: filterInvoker, content: "Filter", accessibility: react_northstar_1.tooltipAsLabelBehavior })) : (filterInvoker), content: {
styles: { width: "13.75rem" },
content: (React.createElement(react_northstar_1.Box, { className: "extended-toolbar__filters-menu" },
React.createElement(react_northstar_1.Box, { className: "extended-toolbar__filters-menu__header", styles: {
display: "flex",
flexFlow: "row wrap",
alignItems: "center",
padding: "0 .5rem",
} },
React.createElement(react_northstar_1.Text, { content: "Filter", className: "extended-toolbar__filters-menu__title", styles: {
flex: "1 0 auto",
padding: ".5rem 0",
} }),
React.createElement(react_northstar_1.Button, { text: true, primary: true, content: "Clear", "aria-label": "Clear filter", className: "extended-toolbar__filters-menu__clear-action", onClick: function () { return propagateSetSelectedFilters([]); }, styles: {
marginRight: "calc(1px - .5rem)",
padding: ".5rem",
height: "2rem",
minWidth: 0,
}, variables: function (_a) {
var colorScheme = _a.colorScheme, theme = _a.theme;
var color = colorScheme.brand.foreground;
switch (theme) {
case "teamsHighContrastTheme":
color = colorScheme.grey.foregroundHover;
break;
}
return { color: color };
} })),
React.createElement(react_northstar_1.Divider, { styles: { padding: 0, margin: "0 .5rem" } }),
React.createElement(react_northstar_1.Tree, { selectable: true, items: filtersForTree, onSelectedItemIdsChange: function (event, selectProps) {
if (selectProps && selectProps.selectedItemIds) {
var selectedItemIds = selectProps.selectedItemIds;
var nextSelectedFilters = typeof selectedItemIds === "function"
? selectedItemIds(selectedFilters)
: Array.isArray(selectedItemIds)
? selectedItemIds
: [];
propagateSetSelectedFilters(singleSelect
? nextSelectedFilters.slice(nextSelectedFilters.length - 1, nextSelectedFilters.length)
: nextSelectedFilters);
}
}, selectedItemIds: selectedFilters, renderItemTitle: treeItemTitleRenderer, className: "extended-toolbar__filters-menu__tree", "aria-labelledby": "extended-toolbar__filters-menu__title", styles: { padding: "0.3125rem 0" } }))),
}, trapFocus: {
firstFocusableSelector: ".extended-toolbar__filters-menu__tree [data-is-focusable=true]",
} }))) : null;
};
exports.ToolbarFilter = ToolbarFilter;
//# sourceMappingURL=ToolbarFilter.js.map