@pnp/spfx-controls-react/lib-commonjs/controls/imagePicker/ImagePicker.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImagePicker = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/no-unused-vars */
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var react_icons_1 = require("@fluentui/react-icons");
/* import { RenderSpinner } from "./RenderSpninner/RenderSpinner"; */
var selectFromSharePoint_1 = require("./selectFromSharePoint");
var contextState_1 = require("./atoms/contextState");
var css_1 = require("@emotion/css");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var jotai_1 = require("jotai");
var useImagePickerStyles_1 = require("./useImagePickerStyles");
var maxWidth = 200;
var maxHeight = 200;
var useStyles = function () {
    return {
        image: (0, css_1.css)({
            minWidth: maxWidth,
            maxWidth: maxWidth,
            height: maxHeight,
            objectPosition: "top center",
        }),
    };
};
/**
 * Renders the preview image component.
 *
 * @param props - The component props.
 * @param props.selectedImageFileUrl - The URL of the selected image file.
 * @returns The JSX element representing the preview image component.
 */
var RenderPreviewImage = function (props) {
    var selectedImageFileUrl = props.selectedImageFileUrl;
    var maxWidth = 200;
    var maxHeight = 200;
    var styles = (0, useImagePickerStyles_1.useImagePickerStyles)();
    var imageStyles = useStyles();
    if (!selectedImageFileUrl) {
        return null;
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: styles.renderImageContainer },
            React.createElement(react_components_1.Image, { src: selectedImageFileUrl, fit: "cover", className: imageStyles.image, alt: "Selected Image" }))));
};
/**
 * Renders an image picker component.
 *
 * @component
 * @example
 * ```tsx
 * <ImagePicker
 *   onFileSelected={handleFileSelected}
 *   onDeleteFile={handleDeleteFile}
 *   selectedFileUrl={selectedImageUrl}
 *   context={appContext}
 * />
 * ```
 */
var ImagePicker = function (props) {
    var onFileSelected = props.onFileSelected, onDeleteFile = props.onDeleteFile, selectedFileUrl = props.selectedFileUrl, context = props.context;
    var _a = React.useState(false), isOpen = _a[0], setIsOpen = _a[1];
    var styles = (0, useImagePickerStyles_1.useImagePickerStyles)();
    var ref = React.useRef(null);
    var _b = (0, jotai_1.useAtom)(contextState_1.contextState), appContext = _b[0], setAppContext = _b[1];
    React.useEffect(function () {
        setAppContext(tslib_1.__assign(tslib_1.__assign({}, appContext), { context: context }));
    }, []);
    var _c = React.useState(selectedFileUrl), selectedImageFileUrl = _c[0], setSelectedImageFileUrl = _c[1];
    var onDismiss = function () {
        setIsOpen(false);
    };
    var isFileSelected = React.useMemo(function () {
        return !!selectedImageFileUrl;
    }, [selectedImageFileUrl]);
    var onDeleteFileCLick = React.useCallback(function () {
        setSelectedImageFileUrl(undefined);
        onDeleteFile();
    }, []);
    var styleButtonDelete = { display: !isFileSelected ? "none" : "inline-flex" };
    if (!context)
        return null;
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: styles.root, ref: ref },
            React.createElement("div", { className: styles.buttonContainer },
                React.createElement(react_components_1.Button, { icon: React.createElement(react_icons_1.Image20Regular, null), shape: "circular", onClick: function () { return setIsOpen(true); } }, ControlStrings_1.default.ImagePickderSelectLabel),
                React.createElement(react_components_1.Button, { icon: React.createElement(react_icons_1.Delete16Regular, null), shape: "circular", style: styleButtonDelete, onClick: function () { return onDeleteFileCLick(); } }, ControlStrings_1.default.ImagePickerDeleteImageLabel)),
            React.createElement(selectFromSharePoint_1.SelectFromSharePoint, { isOpen: isOpen, onDismiss: onDismiss, onFileSelected: function (file) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
                    return tslib_1.__generator(this, function (_a) {
                        onFileSelected(file);
                        setSelectedImageFileUrl(file.previewDataUrl);
                        onDismiss();
                        return [2 /*return*/];
                    });
                }); } }),
            React.createElement(RenderPreviewImage, { selectedImageFileUrl: selectedImageFileUrl }))));
};
exports.ImagePicker = ImagePicker;
//# sourceMappingURL=ImagePicker.js.map