@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
28 lines • 1.58 kB
JavaScript
/**
* 2024-11-04: Migrated from PhotoFormWebpart
*
*/
import * as React from 'react';
import { useState, useCallback } from 'react';
import ImagePaste from './fps-ImagePaste'; // Adjust the import path as needed
const ParentForm = (props) => {
const { imageCount, elementCSS = {}, imageBoxCSS = {}, imageCSS, preloadImages, elementClassName } = props;
const [images, setImages] = useState(preloadImages ? preloadImages : Array(imageCount).fill(null));
const setParentImageData = useCallback((index) => {
return (data) => {
setImages((prevImages) => {
const newImages = [...prevImages]; // Create a new array based on the previous state
newImages[index] = data; // Update specific index with the new image data
return newImages; // Return the new array
});
};
}, []); // No dependencies to avoid infinite loops
const count = images.filter(x => x !== null).length;
return (React.createElement("div", null,
React.createElement("div", { className: elementClassName, style: { ...{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }, ...elementCSS } }, images.map((image, index) => (React.createElement(ImagePaste, { key: index, setParentImageData: setParentImageData(index), imageUrl: image, imageBoxCSS: imageBoxCSS, imageCSS: imageCSS })))),
React.createElement("h2", null,
count,
" images in state")));
};
export default ParentForm;
//# sourceMappingURL=fps-MultiImageParent.js.map