@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
110 lines • 6.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toolbar = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
var react_northstar_1 = require("@fluentui/react-northstar");
var ToolbarFilter_1 = require("./ToolbarFilter");
var ToolbarFind_1 = require("./ToolbarFind");
var ToolbarTheme_1 = require("./ToolbarTheme");
require("./toolbar.css");
var InFlowToolbarItem_1 = require("./InFlowToolbarItem");
var Toolbar_module_scss_1 = tslib_1.__importDefault(require("./Toolbar.module.scss"));
var ToolbarActionsUtils_1 = require("./ToolbarActionsUtils");
var telemetry_1 = require("../../common/telemetry");
var Icon_1 = require("@fluentui/react/lib/Icon");
var Toolbar = function (props) {
var actionGroups = props.actionGroups, filters = props.filters, selectedFilterIds = props.selectedFilterIds, filtersSingleSelect = props.filtersSingleSelect, find = props.find;
var allActions = (0, ToolbarActionsUtils_1.flattenedActions)(actionGroups);
var _a = React.useState(false), overflowOpen = _a[0], setOverflowOpen = _a[1];
var _b = React.useState(false), filtersOpen = _b[0], setFiltersOpen = _b[1];
var _c = React.useState("compact"), layout = _c[0], setLayout = _c[1];
var _d = React.useState(false), findActive = _d[0], setFindActive = _d[1];
var layoutQuery = React.useRef(null);
var onChangeLayout = function () {
setLayout(layoutQuery.current && layoutQuery.current.matches ? "verbose" : "compact");
};
(0, telemetry_1.useTelemetry)('ReactToolbar');
React.useLayoutEffect(function () {
layoutQuery.current = window.matchMedia("(min-width: 640px)");
layoutQuery.current.addEventListener("change", onChangeLayout);
onChangeLayout();
return function () {
if (layoutQuery.current) {
layoutQuery.current.removeEventListener("change", onChangeLayout);
}
};
});
var inFlowToolbarItems = (0, ToolbarActionsUtils_1.getInFlowToolbarItems)(allActions, function (action) { return React.createElement(InFlowToolbarItem_1.InFlowToolbarItem, { action: action, layout: layout }); });
var overflowToolbarItems = (0, ToolbarActionsUtils_1.getOverflowToolbarItems)(allActions, function (action) { return React.createElement(Icon_1.Icon, { iconName: action.iconName }); });
var displayFindOnly = find && layout === "compact" && findActive;
return (React.createElement(react_northstar_1.ProviderConsumer, { render: function (globalTheme) {
if (!globalTheme || globalTheme.fontFaces.length === 0) {
globalTheme = react_northstar_1.teamsTheme;
}
return React.createElement(ToolbarTheme_1.ToolbarTheme, { globalTheme: globalTheme },
React.createElement(react_northstar_1.Box, tslib_1.__assign({ className: "extended-toolbar", variables: function (_a) {
var colorScheme = _a.colorScheme, theme = _a.theme;
return ({
backgroundColor: theme === "teamsHighContrastTheme"
? colorScheme.grey.background
: colorScheme.grey.background2,
elevation: colorScheme.elevations[16],
});
}, styles: {
padding: "0 1.25rem",
marginBottom: "1.25rem",
display: "flex",
justifyContent: "space-between",
} }, (0, omit_1.default)(props, [
"actionGroups",
"filters",
"find",
"filtersSingleSelect",
"onSelectedFiltersChange",
"onFindQueryChange",
])),
!displayFindOnly && (React.createElement(react_northstar_1.Toolbar, { "aria-label": "Extended toolbar", className: "extended-toolbar__near-side " + Toolbar_module_scss_1.default.toolbarButtonStyles, items: inFlowToolbarItems, overflow: true, overflowOpen: overflowOpen, overflowItem: {
title: "More",
menu: InFlowToolbarItem_1.toolbarMenuProps,
}, onOverflowOpenChange: function (event, changeProps) {
if (changeProps && changeProps.overflowOpen) {
setOverflowOpen(changeProps.overflowOpen);
if (changeProps.overflowOpen) {
setFiltersOpen(false);
}
}
else {
setOverflowOpen(false);
}
}, getOverflowItems: function (startIndex) {
return overflowToolbarItems.slice(startIndex);
}, styles: {
flex: "1 0 0",
overflow: "hidden",
maxWidth: "40rem",
minWidth: "2rem",
} })),
React.createElement(react_northstar_1.Box, { className: "extended-toolbar__far-side", styles: {
flex: displayFindOnly ? "1 1 100%" : "0 1 auto",
display: "flex",
flexFlow: "row nowrap",
overflow: "hidden",
paddingLeft: displayFindOnly ? "0" : "2.5rem",
} },
!displayFindOnly && filters && (React.createElement(ToolbarFilter_1.ToolbarFilter, { layout: layout, filters: filters, selectedFilterIds: selectedFilterIds, singleSelect: !!filtersSingleSelect, open: filtersOpen, onOpenChange: function (_e, changeProps) {
if (changeProps.open) {
setFiltersOpen(changeProps.open);
setOverflowOpen(false);
}
else {
setFiltersOpen(false);
setOverflowOpen(false);
}
}, onSelectedFiltersChange: props.onSelectedFiltersChange, toolbarMenuProps: InFlowToolbarItem_1.toolbarMenuProps })),
find && (React.createElement(ToolbarFind_1.ToolbarFind, { layout: layout, findActive: findActive, setFindActive: setFindActive, onFindQueryChange: props.onFindQueryChange })))));
} }));
};
exports.Toolbar = Toolbar;
//# sourceMappingURL=Toolbar.js.map