@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
88 lines • 4.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DashboardCallout = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_northstar_1 = require("@fluentui/react-northstar");
var getLocalTheme = function () {
return {
componentVariables: {
PopupContent: function (_a) {
var colorScheme = _a.colorScheme, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, shadowLevel1 = _a.shadowLevel1, shadowLevel4 = _a.shadowLevel4, theme = _a.theme;
return {
backgroundColor: colorScheme.grey.background,
backgroundColorHover: colorScheme.grey.background,
boxShadow: "".concat(shadowLevel1, ", ").concat(shadowLevel4),
borderRadius: borderRadius,
borderSize: borderWidth,
borderColor: theme === "teamsHighContrastTheme"
? colorScheme.grey.background2
: "transparent",
borderColorHover: theme === "teamsHighContrastTheme"
? colorScheme.grey.background2
: "transparent",
};
},
},
componentStyles: {
Menu: {
root: {
width: "100%",
marginRight: "0",
marginLeft: "0",
border: "none",
padding: "0 0.25rem",
},
},
MenuDivider: {
root: { margin: "0.25rem 0" },
},
PopupContent: {
content: {
width: "12.5rem",
padding: "0",
boxShadow: " 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13)",
},
},
},
};
};
var DashboardCallout = function (_a) {
var open = _a.open, onOpenChange = _a.onOpenChange, menuProps = _a.menuProps, globalTheme = _a.globalTheme, widgetActionGroup = _a.widgetActionGroup, actionHandlers = _a.actionHandlers;
var theme = (0, react_northstar_1.mergeThemes)(globalTheme, getLocalTheme());
var getMenuItems = function () {
var result = []; // eslint-disable-line @typescript-eslint/no-explicit-any
if (widgetActionGroup) {
result.push.apply(result, widgetActionGroup.map(function (widgetAction) {
return tslib_1.__assign(tslib_1.__assign({}, widgetAction), { key: widgetAction.id, content: widgetAction.title });
}));
}
if (actionHandlers && !actionHandlers.hideHideButton) {
if (result.length > 0) {
result.push({ kind: "divider" });
}
result.push({
id: "hide_widget",
content: "Hide widget",
onClick: actionHandlers.onHide,
icon: React.createElement(react_northstar_1.EyeSlashIcon, null),
});
}
return result;
};
var items = getMenuItems();
if (items.length === 0) {
return null;
}
return (React.createElement(react_northstar_1.Provider, { theme: theme },
React.createElement(react_northstar_1.Popup, tslib_1.__assign({}, menuProps, { open: open, onOpenChange: onOpenChange, trigger: React.createElement(react_northstar_1.Button, { text: true, iconOnly: true, "aria-label": "More actions", icon: React.createElement(react_northstar_1.MoreIcon, null), styles: {
margin: "0 -0.35rem",
} }), content: {
styles: { width: "12.5rem" },
content: (React.createElement(react_northstar_1.Menu, { items: items, vertical: true })),
}, trapFocus: {
firstFocusableSelector: ".extended-toolbar__filters-menu__tree [data-is-focusable=true]",
} }))));
};
exports.DashboardCallout = DashboardCallout;
//# sourceMappingURL=DashboardCallout.js.map