@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
52 lines • 3.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var resize_observer_1 = require("@juggle/resize-observer");
var useCardStyles_1 = require("./useCardStyles");
var Card = function (props) {
var className = props.className, cardBody = props.cardBody, cardBodyClassName = props.cardBodyClassName, cardHeader = props.cardHeader, cardHeaderClassName = props.cardHeaderClassName, cardHeaderImage = props.cardHeaderImage, cardHeaderAction = props.cardHeaderAction, cardHeaderDescription = props.cardHeaderDescription, cardFooterAction = props.cardFooterAction, cardFooterClassName = props.cardFooterClassName, cardFooterContent = props.cardFooterContent, cardPreviewImage = props.cardPreviewImage, cardPreviewLogo = props.cardPreviewLogo, _a = props.cardPreviewPosition, cardPreviewPosition = _a === void 0 ? "top" : _a;
var _b = (0, useCardStyles_1.useCardStyles)(props), cardStyles = _b.cardStyles, bodyCardDefaultStyles = _b.bodyCardDefaultStyles;
var ref = React.useRef(null);
var _c = React.useState(0), width = _c[0], setWidth = _c[1];
var _d = React.useState(0), height = _d[0], setHeight = _d[1];
React.useEffect(function () {
var resizeObserver;
if (ref.current) {
// observer to detect changes in the size of the container
resizeObserver = new resize_observer_1.ResizeObserver(function (entries) {
for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
var entry = entries_1[_i];
var _a = entry.contentRect, width_1 = _a.width, height_1 = _a.height;
setWidth(width_1);
setHeight(height_1);
}
});
resizeObserver.observe(ref.current);
}
return function () {
if (resizeObserver) {
resizeObserver.disconnect();
}
};
}, []);
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: ref },
React.createElement(react_components_1.Card, tslib_1.__assign({ className: className, style: cardStyles(width, height) }, props),
cardPreviewImage && cardPreviewPosition === "top" && (React.createElement(react_components_1.CardPreview, { logo: cardPreviewLogo },
cardPreviewImage,
" ")),
cardHeader && (React.createElement(react_components_1.CardHeader, { className: cardHeaderClassName, image: cardHeaderImage, header: cardHeader, description: cardHeaderDescription, action: cardHeaderAction })),
cardPreviewImage && cardPreviewPosition === "afterHeader" && (React.createElement(react_components_1.CardPreview, { logo: cardPreviewLogo },
cardPreviewImage,
" ")),
cardBody && (React.createElement("div", { className: (0, react_components_1.mergeClasses)(cardBodyClassName), style: bodyCardDefaultStyles }, cardBody)),
cardPreviewImage && cardPreviewPosition === "bottom" && (React.createElement(react_components_1.CardPreview, { logo: cardPreviewLogo },
cardPreviewImage,
" ")),
cardFooterContent && (React.createElement(react_components_1.CardFooter, { action: cardFooterAction, className: cardFooterClassName }, cardFooterContent))))));
};
exports.Card = Card;
//# sourceMappingURL=Card.js.map