@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
42 lines • 2.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WidgetBody = void 0;
var tslib_1 = require("tslib");
var react_northstar_1 = require("@fluentui/react-northstar");
var React = tslib_1.__importStar(require("react"));
var EmptyState = function (_a) {
var borderColor = _a.borderColor;
return (React.createElement(react_northstar_1.Box, { styles: {
height: "100%",
border: "1px dashed ".concat(borderColor),
} }));
};
var WidgetBody = function (_a) {
var widget = _a.widget, siteVariables = _a.siteVariables;
var _b = React.useState(0), activeTabId = _b[0], setActiveTabId = _b[1];
return (React.createElement(react_northstar_1.Card.Body, { style: {
marginBottom: "0.75rem",
height: "100%",
overflow: "hidden",
}, fitted: true }, widget.body ? (React.createElement(React.Fragment, null,
widget.body.length > 1 && (React.createElement(react_northstar_1.Menu, { style: {
border: "none",
background: "none",
marginBottom: "1.25rem",
}, items: Array.from(widget.body, function (_a) {
var id = _a.id, title = _a.title;
return Object.assign({ key: id, content: title });
}), activeIndex: activeTabId, onItemClick: function (_a, props) {
var currentTarget = _a.currentTarget;
return setActiveTabId(props && props.index ? props.index : 0);
}, accessibility: react_northstar_1.tabListBehavior, underlined: true, primary: true })),
widget.body.map(function (_a, i) {
var id = _a.id, content = _a.content;
return (React.createElement(react_northstar_1.Flex, { key: id, styles: {
height: "100%",
display: activeTabId === i ? "flex" : "none",
}, column: true }, content));
}))) : (React.createElement(EmptyState, { borderColor: siteVariables.colors.grey["300"] }))));
};
exports.WidgetBody = WidgetBody;
//# sourceMappingURL=WidgetBody.js.map