@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
108 lines • 5.44 kB
JavaScript
/**
* 2024-11-04: Migrated from PhotoFormWebpart
*
*/
import * as React from 'react';
import { useState, useEffect } from 'react';
import { handleImagePaste } from '@mikezimm/fps-core-v7/lib/components/atoms/Inputs/ClipboardImage/handlePasteImage';
require('@mikezimm/fps-styles/dist/fps-ImagePaste.css');
const defaultImageCSS = { objectFit: 'contain', width: '100%', height: '100%' };
const ImagePaste = ({ setParentImageData, clearId, imageUrl, imageBoxCSS = {}, imageBoxClassName = '', imageCSS = {}, viewOnly = false }) => {
const [imageData, setImageData] = useState(null);
const [existed, setExisted] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [clearIdX, setClearIdX] = useState(clearId);
const [loading, setLoading] = useState(true);
const handleClipboard = (e) => {
handleImagePaste(e, setImageData);
};
useEffect(() => {
if (imageUrl) {
const img = new Image();
img.src = imageUrl;
img.onload = () => {
setImageData(imageUrl); // Set the imageData if the image loads successfully
setLoading(false); // Stop loading
setExisted(imageUrl && imageUrl.indexOf('http') === 0 ? true : false);
};
img.onerror = () => {
setLoading(false); // Stop loading, allow pasting
// setExisted( false );
};
}
else {
setLoading(false); // If no URL is provided, allow pasting immediately
// setExisted(false); // If no URL is provided, allow pasting immediately
}
}, [imageUrl]);
/**
* Added to fix clearing the image https://github.com/fps-solutions/FPS-Photo-Form/issues/80
*/
useEffect(() => {
setIsFocused(false);
setImageData(null); // Set the imageData if the image loads successfully
setLoading(false); // If no URL is provided, allow pasting immediately
setClearIdX(clearId);
// setExisted( false );
}, [clearId, clearIdX]);
useEffect(() => {
if (imageData !== null && imageData !== imageUrl) {
setParentImageData(imageData); // Update parent only if imageData is not null
}
}, [imageData, setParentImageData]);
const handleFocus = () => setIsFocused(true);
const handleBlur = () => setIsFocused(false);
// Reset the component and clear image data
const handleClearImage = () => {
setImageData(null);
setParentImageData(null);
setClearIdX(undefined); // Optional: reset clearIdX if necessary
setExisted(false);
};
let title = ``;
let showFetched = false; // https://github.com/fps-solutions/FPS-Photo-Form/issues/75
if (loading) {
title = `Attempting to load image ${imageUrl}`;
}
else if (!loading && !imageUrl && !imageData) {
title = `Copy image to clipboard, select this and paste!`;
}
else {
if (!imageData && imageUrl) {
title = `Double check url: ${imageUrl}`;
}
else if (imageData && imageData !== imageUrl) {
title = 'Pasted image';
}
else if (imageData === imageUrl) {
showFetched = imageData.indexOf('data') === 0 ? false : true;
title = showFetched === true ? 'Image fetched' : 'Image pasted';
}
}
// https://github.com/fps-solutions/FPS-Photo-Form/issues/75
const showFetchedCSS = showFetched ? { borderStyle: 'dashed' } : {};
return (React.createElement("div", { tabIndex: 0,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onPaste: handleClipboard, onFocus: handleFocus, onBlur: handleBlur, className: `image-paste-box ${isFocused ? 'focused' : ''} ${imageBoxClassName}`, style: { ...imageBoxCSS, ...showFetchedCSS }, title: title }, loading ? (React.createElement("span", null, "Loading...") // Show loading message while checking URL
) : imageData ? (React.createElement("div", { style: { position: 'relative' } },
React.createElement("img", { src: imageData, alt: "Pasted", className: "image-preview", style: { ...defaultImageCSS, ...imageCSS } }),
existed ? null : React.createElement("button", { onClick: existed ? null : handleClearImage, disabled: existed ? true : false, style: {
position: 'absolute',
top: '5px',
right: '5px',
background: 'rgba(255, 255, 255, 0.7)',
border: 'none',
borderRadius: '50%',
width: '2.25em',
height: '2.25em',
fontSize: '14px',
color: '#333',
cursor: existed ? null : 'pointer',
zIndex: 10,
padding: '0px', // Added this when using trash icon
}, title: existed === true ? 'Unable to paste over image' : "Clear Image" }, "\uD83D\uDDD1\uFE0F"))) : (React.createElement("div", { style: { display: 'block' } },
viewOnly ? undefined : React.createElement("div", { className: "placeholder-text" }, "Paste image here"),
imageUrl ? React.createElement("div", { className: "placeholder-text" }, "Nothing found at Url") : undefined))));
};
export default ImagePaste;
//# sourceMappingURL=fps-ImagePaste.js.map