bananas-commerce-admin
Version:
What's this, an admin for apes?
71 lines • 4.39 kB
JavaScript
import React, { forwardRef, useCallback, useEffect, useState } from "react";
import { Box, ButtonBase, Dialog, FormHelperText, Grid2 as Grid, Stack, Typography, Zoom, } from "@mui/material";
import { useCardContext } from "../../contexts/CardContext";
import { useI18n } from "../../contexts/I18nContext";
export const ImageDisplay = ({ src, alt }) => {
const [openLightbox, setOpenLightbox] = useState(false);
const Transition = forwardRef(function Transition(props, ref) {
return React.createElement(Zoom, { ref: ref, in: openLightbox, ...props });
});
return (React.createElement(React.Fragment, null,
React.createElement(ButtonBase, { disableRipple: true, sx: { alignSelf: "baseline" }, onClick: () => setOpenLightbox((open) => !open) },
React.createElement(Box, { alt: alt, component: "img", src: src, sx: {
display: "block",
width: "auto",
height: "100%",
maxHeight: "200px",
maxWidth: "200px",
objectFit: "cover",
borderRadius: 2,
borderColor: "divider",
my: 2,
transition: "transform 150ms ease-out",
"&:hover": { transform: "scale(1.05)" },
} })),
openLightbox && (React.createElement(Dialog, { fullWidth: true, maxWidth: "lg", open: openLightbox, PaperProps: {
sx: { backgroundColor: "transparent", boxShadow: "none" },
}, TransitionComponent: Transition, onClose: () => setOpenLightbox(false) },
React.createElement(Box, { alt: alt, component: "img", src: src, sx: {
width: "100%",
height: "auto",
maxHeight: "90vh",
objectFit: "contain",
}, onClick: () => setOpenLightbox(false) })))));
};
export const CardFieldImage = ({ fallback, label, formName, value: defaultValue, required = false, isDisabled = false, size = "grow", isReadable = true, helperText, }) => {
const { isCompact, isEditing } = useCardContext();
const { t } = useI18n();
const [selectedFile, setSelectedFile] = useState();
const [preview, setPreview] = useState();
useEffect(() => {
if (selectedFile == null) {
setPreview(undefined);
return;
}
const objectUrl = URL.createObjectURL(selectedFile);
setPreview(objectUrl);
return () => URL.revokeObjectURL(objectUrl);
}, [selectedFile]);
const handleFileChange = useCallback(({ target: { files } }) => {
if (!files || files.length === 0) {
setSelectedFile(undefined);
return;
}
if (files.length === 1) {
setSelectedFile(files[0]);
}
else {
console.error("[CARD_FIELD_IMAGE]", t("Multiple files selected, this is not supported."));
setSelectedFile(undefined);
}
}, [setSelectedFile, t]);
return (React.createElement(Grid, { size: size }, isEditing ? (React.createElement(Stack, { component: "figure", direction: isCompact ? "row" : "column", justifyContent: isCompact ? "space-between" : "flex-start", spacing: 0.5, sx: { m: "unset !important" } },
React.createElement(Typography, { color: "grey.600", component: "figcaption", variant: "subtitle2" }, label),
React.createElement("input", { accept: "image/*", disabled: isDisabled, name: formName, required: required, type: "file", onChange: handleFileChange }),
preview && React.createElement(ImageDisplay, { alt: t("preview"), src: preview }),
helperText != null && React.createElement(FormHelperText, null, helperText))) : (isReadable && (React.createElement(Stack, { component: "figure", direction: isCompact ? "row" : "column", justifyContent: isCompact ? "space-between" : "flex-start", spacing: 0.5, sx: { m: "unset !important" } },
React.createElement(Typography, { color: "grey.600", component: "figcaption", fontWeight: 600, variant: "subtitle2" }, label),
typeof defaultValue === "string" ? (React.createElement(ImageDisplay, { alt: label, src: defaultValue })) : (React.createElement(Typography, null, fallback ?? t("No image available"))))))));
};
export default CardFieldImage;
//# sourceMappingURL=CardFieldImage.js.map