@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.7 → 1.0.4-beta.0

package/src/components/listing/ListingFileInput.jsx

@@ -14,27 +14,26 @@ const ListingFileInput = ({
 	errorMessage,
 	disabled = false,
 }) => {
-	const fileInputRef = useRef(null);
-	const [internalFiles, setInternalFiles] = useState([]);
+	const [inputs, setInputs] = useState([{ id: 0, fileUrl: null }]);
+	const nextIdRef = useRef(1);
 
-	// Normalize file data to enhanced structure - always handle as multiple files
+	// Initialize inputs from value prop - map each existing file to an input
 	useEffect(() => {
 		if (value) {
+			let fileData = [];
+
 			// Handle multiple files - could be array of URLs or array of file objects
 			if (Array.isArray(value)) {
-				const normalizedFiles = value
+				fileData = value
 					.map((file) => {
 						if (typeof file === "string") {
-							// Backward compatibility: array of URLs
 							const fileName = file.split("/").pop() || "Unknown File";
 							return {
 								url: file,
-								name: fileName.replace(/\.[^/.]+$/, ""), // Remove extension
+								name: fileName.replace(/\.[^/.]+$/, ""),
 								originalName: fileName,
-								uploading: false,
 							};
 						} else if (file && typeof file === "object" && file.url) {
-							// Enhanced structure
 							return {
 								url: file.url,
 								name: file.name || file.originalName || "Unknown File",
@@ -42,27 +41,22 @@ const ListingFileInput = ({
 									file.originalName ||
 									file.url.split("/").pop() ||
 									"Unknown File",
-								uploading: false,
 							};
 						}
 						return null;
 					})
 					.filter(Boolean);
-				setInternalFiles(normalizedFiles);
 			} else {
-				// Handle single file values - normalize to array
+				// Handle single file values
 				let singleFile = null;
 				if (typeof value === "string") {
-					// Backward compatibility: single URL
 					const fileName = value.split("/").pop() || "Unknown File";
 					singleFile = {
 						url: value,
 						name: fileName.replace(/\.[^/.]+$/, ""),
 						originalName: fileName,
-						uploading: false,
 					};
 				} else if (value && typeof value === "object" && value.url) {
-					// Enhanced structure - preserve empty name if explicitly set
 					singleFile = {
 						url: value.url,
 						name:
@@ -73,60 +67,104 @@ const ListingFileInput = ({
 							value.originalName ||
 							value.url.split("/").pop() ||
 							"Unknown File",
-						uploading: false,
 					};
 				}
-				setInternalFiles(singleFile ? [singleFile] : []);
+				fileData = singleFile ? [singleFile] : [];
 			}
+
+			// Create inputs for each existing file
+			const existingInputs = fileData.map((file, index) => ({
+				id: index,
+				fileUrl: file.url,
+				name: file.name,
+				originalName: file.originalName,
+			}));
+			// Add one empty input at the end
+			nextIdRef.current = fileData.length;
+			setInputs([...existingInputs, { id: nextIdRef.current, fileUrl: null }]);
+			nextIdRef.current++;
 		} else {
-			setInternalFiles([]);
+			setInputs([{ id: 0, fileUrl: null }]);
 		}
 	}, [value]);
 
 	// Handle new file upload from FileInput component
-	const handleFileUpload = (uploadedUrl) => {
-		// Handle case where uploadedUrl might be undefined
+	const handleFileUpload = (inputId, uploadedUrl) => {
 		if (!uploadedUrl) {
 			return;
 		}
 
 		const fileName = uploadedUrl.split("/").pop() || "Unknown File";
-		const newFile = {
-			url: uploadedUrl,
-			name: "", // Start with empty name as requested
-			originalName: fileName,
-			uploading: false,
-		};
-
-		// Always add new file to existing array for multiple file support
-		const updatedFiles = [...internalFiles, newFile];
-		setInternalFiles(updatedFiles);
-		notifyParent(updatedFiles);
+
+		// Find the input that triggered this upload and update it
+		setInputs((prevInputs) => {
+			const updatedInputs = prevInputs.map((input) => {
+				if (input.id === inputId) {
+					return {
+						...input,
+						fileUrl: uploadedUrl,
+						name: "",
+						originalName: fileName,
+					};
+				}
+				return input;
+			});
+
+			// Add a new empty input for the next upload
+			updatedInputs.push({ id: nextIdRef.current, fileUrl: null });
+			nextIdRef.current++;
+
+			return updatedInputs;
+		});
 	};
 
 	// Handle file name change
 	const handleNameChange = (url, newName) => {
-		const updatedFiles = internalFiles.map((file) =>
-			file.url === url ? { ...file, name: newName } : file,
+		setInputs((prevInputs) =>
+			prevInputs.map((input) =>
+				input.fileUrl === url ? { ...input, name: newName } : input,
+			),
 		);
-		setInternalFiles(updatedFiles);
-		notifyParent(updatedFiles);
 	};
 
 	// Handle file removal
 	const handleFileRemove = (url) => {
-		const updatedFiles = internalFiles.filter((file) => file.url !== url);
-		setInternalFiles(updatedFiles);
-		notifyParent(updatedFiles);
+		setInputs((prevInputs) => {
+			return prevInputs.map((input) => {
+				if (input.fileUrl === url) {
+					return { ...input, fileUrl: null };
+				}
+				return input;
+			});
+		});
 	};
 
-	// Notify parent component of changes
-	const notifyParent = (files) => {
-		if (onChange) {
-			// Always return array of files for multiple file support
+	// Get all uploaded files from inputs
+	const getUploadedFiles = () => {
+		return inputs
+			.filter((input) => input.fileUrl !== null)
+			.map((input) => ({
+				url: input.fileUrl,
+				name: input.name,
+				originalName: input.originalName,
+			}));
+	};
+
+	// Track previous uploaded files to prevent infinite loops
+	const prevFilesRef = useRef([]);
+
+	// Sync with parent when uploaded files actually change
+	useEffect(() => {
+		const files = getUploadedFiles();
+		const currentUrls = files.map((f) => f.url).join(",");
+		const prevUrls = prevFilesRef.current.map((f) => f.url).join(",");
+
+		// Only call onChange if the file list actually changed
+		if (currentUrls !== prevUrls && onChange) {
+			prevFilesRef.current = files;
 			onChange(field.id, files);
 		}
-	};
+	}, [inputs]);
 
 	// Define acceptable file types for documents and common formats
 	const acceptTypes = {
@@ -145,7 +183,11 @@ const ListingFileInput = ({
 		"image/png": [".png"],
 	};
 
-	// Always show drop zone regardless of existing files
+	// Get the last empty input (the one to show)
+	const emptyInput = inputs.find((input) => input.fileUrl === null);
+
+	// Get uploaded files for display
+	const uploadedFiles = getUploadedFiles();
 
 	return (
 		<div className={styles.listingFileInput}>
@@ -169,25 +211,26 @@ const ListingFileInput = ({
 				)}
 			</Text>
 
-			{/* Drop zone */}
+			{/* Drop zone - always show exactly one empty input */}
 			<div
 				className={`${styles.listingFileInput__dropZone} ${showError ? styles["listingFileInput__dropZone--error"] : ""}`}
 			>
-				<FileInput
-					ref={fileInputRef}
-					className="imageInputOuter-single"
-					refreshCallback={handleFileUpload}
-					hasDefault={null}
-					accept={acceptTypes}
-					multiple={false} // Always handle one file at a time in the upload callback
-					disabled={disabled}
-				/>
+				{emptyInput && (
+					<FileInput
+						key={emptyInput.id}
+						refreshCallback={(url) => handleFileUpload(emptyInput.id, url)}
+						hasDefault={null}
+						accept={acceptTypes}
+						multiple={false}
+						disabled={disabled}
+					/>
+				)}
 			</div>
 
 			{/* File list */}
-			{internalFiles.length > 0 && (
+			{uploadedFiles.length > 0 && (
 				<div className={styles.listingFileInput__fileList}>
-					{internalFiles.map((file) => (
+					{uploadedFiles.map((file) => (
 						<FileListItem
 							key={file.url}
 							file={file}
@@ -199,31 +242,6 @@ const ListingFileInput = ({
 				</div>
 			)}
 
-			{/* Add more files button - always show when files exist */}
-			{internalFiles.length > 0 && (
-				<div>
-					<FileInput
-						ref={fileInputRef}
-						className="imageInputOuter-single"
-						refreshCallback={handleFileUpload}
-						hasDefault={null}
-						accept={acceptTypes}
-						multiple={false}
-						disabled={disabled}
-						customButton={
-							<Button
-								buttonType="secondary"
-								className={styles.listingFileInput__addMoreButton}
-								disabled={disabled}
-							>
-								<FontAwesomeIcon icon={iconImports.plus} />
-								Add More Files
-							</Button>
-						}
-					/>
-				</div>
-			)}
-
 			{showError && errorMessage && (
 				<Text
 					type="help"

package/src/components/listing/ListingFileInput.module.css

@@ -38,9 +38,7 @@
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
-	padding: 0.75rem;
 	background-color: var(--bg-white);
-	margin-bottom: 0.5rem;
 	transition: all var(--transition-base) ease-in-out;
 }
 
@@ -50,9 +48,8 @@
 
 .fileListItem__icon {
 	color: var(--text-bluegrey);
-	font-size: var(--font-size-base);
+	font-size: 2rem;
 	flex-shrink: 0;
-	width: 1.5rem;
 	text-align: center;
 }
 

package/src/components/listing/ListingGalleryInput.module.css

@@ -3,6 +3,7 @@
 /* Gallery container styles */
 .galleryContainer {
 	margin-top: 0.75rem;
+	max-width: 200px;
 }
 
 /* Error border wrapper */
@@ -20,7 +21,7 @@
 
 .imageGrid {
 	display: grid;
-	grid-template-columns: repeat(var(--columns, 4), 1fr);
+	grid-template-columns: repeat(4, 160px);
 	gap: 1rem;
 	margin-top: 0.5rem;
 }

package/src/reducers/featureBuilderReducer.js

@@ -86,7 +86,7 @@ const DEFAULT_NEW_FIELD = {
 		allowCaption: false, // Default to not allowing captions for image fields
 		useAsSummary: false, // Default to not using as summary for description fields
 		minImages: 1, // Gallery-specific default
-		maxImages: 10, // Gallery-specific default
+		maxImages: 16, // Gallery-specific default
 		maxFileSize: "5MB", // Gallery-specific default
 		allowedTypes: [], // Gallery-specific default
 	},
@@ -138,7 +138,7 @@ function createNewField(id, type = "text", existingFields = []) {
 			baseField.values.label = "Image Gallery";
 			baseField.values.helpText = "Upload multiple images to create a gallery";
 			baseField.values.minImages = 1;
-			baseField.values.maxImages = 10;
+			baseField.values.maxImages = 16;
 			baseField.values.maxFileSize = "5MB";
 			baseField.values.allowedTypes = ["image/jpeg", "image/png", "image/webp"];
 			const {
@@ -277,8 +277,11 @@ const formReducer = (state = INITIAL_FORM_STATE, action) => {
 	switch (type) {
 		case formActionTypes.SET_INITIAL_VALUES: {
 			// The actual definition data is in payload.featureDefinition.definition
-			const definitionWrapper = (payload && payload.featureDefinition) || payload;
-			const definition = (definitionWrapper && definitionWrapper.definition) || definitionWrapper;
+			const definitionWrapper =
+				(payload && payload.featureDefinition) || payload;
+			const definition =
+				(definitionWrapper && definitionWrapper.definition) ||
+				definitionWrapper;
 
 			// Validate and map definition data to form state structure
 			const mappedValues = {
@@ -513,8 +516,11 @@ const definitionReducer = (state = INITIAL_STATE.definition, action) => {
 				const featureDefinitionWrapper =
 					(data && data.featureDefinition) || data;
 				definition =
-					(featureDefinitionWrapper && featureDefinitionWrapper.definition) || featureDefinitionWrapper;
-				definitionId = (featureDefinitionWrapper && featureDefinitionWrapper.id) || values.featureId;
+					(featureDefinitionWrapper && featureDefinitionWrapper.definition) ||
+					featureDefinitionWrapper;
+				definitionId =
+					(featureDefinitionWrapper && featureDefinitionWrapper.id) ||
+					values.featureId;
 
 				// Ensure fields array exists and preserves order property
 				if (definition?.fields) {