@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
69 lines • 3.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectStockImage = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
var React = tslib_1.__importStar(require("react"));
var constants_1 = require("./constants/constants");
var useSpAPI_1 = require("./hooks/useSpAPI");
var useUtils_1 = require("./hooks/useUtils");
var useImagePickerStyles_1 = require("./useImagePickerStyles");
/**
* Renders a component that allows the user to select a stock image.
*
* @component
* @example
* ```tsx
* <SelectStockImage
* context={context}
* onFileSelected={handleFileSelected}
* onCancel={handleCancel}
* />
* ```
*/
var SelectStockImage = function (props) {
var context = props.context, onFileSelected = props.onFileSelected, onCancel = props.onCancel;
var _a = (0, useUtils_1.useUtils)(), getFileNameFromUrl = _a.getFileNameFromUrl, getFileNameWithoutExtension = _a.getFileNameWithoutExtension;
var downloadBingContent = (0, useSpAPI_1.useSpAPI)(context).downloadBingContent;
var styles = (0, useImagePickerStyles_1.useImagePickerStyles)();
var handleSave = function (event) {
var filePickerResult = null;
var cdnFileInfo = event.Values && event.Values.length > 0 ? event.Values[0] : null;
if (cdnFileInfo) {
filePickerResult = {
downloadFileContent: function () {
return downloadBingContent(cdnFileInfo.sourceUrl, getFileNameFromUrl(getFileNameFromUrl(cdnFileInfo.sourceUrl)));
},
fileAbsoluteUrl: cdnFileInfo.sourceUrl,
fileName: getFileNameFromUrl(cdnFileInfo.sourceUrl),
fileNameWithoutExtension: getFileNameWithoutExtension(cdnFileInfo.sourceUrl),
previewDataUrl: cdnFileInfo.sourceUrl,
};
}
onFileSelected(filePickerResult);
};
var handleImageIframeEvent = function (event) {
if (!event || !event.origin || event.origin.indexOf(constants_1.CONTENT_URL) !== 0) {
return;
}
var eventData = JSON.parse(event.data);
if (eventData.MessageId === "AddItem") {
handleSave(eventData);
}
else if (eventData.MessageId === "CancelDialog") {
onCancel();
}
};
React.useLayoutEffect(function () {
window.addEventListener("message", handleImageIframeEvent);
return function () {
window.removeEventListener("message", handleImageIframeEvent);
};
}, []);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.stockImageContainer },
React.createElement("iframe", { style: { border: "none" }, className: styles.stockImagesPicker, role: "application", id: "stockImagesIFrame", src: constants_1.CONTENT_IMAGE_STOCK_URL }))));
};
exports.SelectStockImage = SelectStockImage;
//# sourceMappingURL=SelectStokImage.js.map