@onehat/ui 0.4.45 → 0.4.47

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.45",
+	"version": "0.4.47",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Form/Field/Date.js

@@ -17,6 +17,7 @@ import {
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
+import Button from '../../Buttons/Button.js';
 import UiGlobals from '../../../UiGlobals.js';
 import Formatters from '@onehat/data/src/Util/Formatters.js';
 import Parsers from '@onehat/data/src/Util/Parsers.js';
@@ -219,6 +220,9 @@ export const DateElement = forwardRef((props, ref) => {
 				setBothValues(value);
 				setTextInputValue(value);
 			}
+		},
+		onToday = () => {
+			onPickerChange(moment());
 		};
 
 	useEffect(() => {
@@ -460,6 +464,15 @@ export const DateElement = forwardRef((props, ref) => {
 											timeFormat={mode === TIME || mode === DATETIME ? 'HH:mm:ss' : false}
 											onChange={onPickerChange}
 										/>
+										<Button
+											{...testProps('todayBtn')}
+											key="todayBtn"
+											onPress={onToday}
+											className={`
+												mt-2
+											`}
+											text="Today"
+										/>
 									</PopoverBody>
 								</PopoverContent>
 							</Popover>;

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -465,13 +465,15 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 
 				setIsSaving(true);
-				let success;
-				try {
-					await SecondaryRepository.save(null, useStaged);
-					success = true;
-				} catch (e) {
-					success = e;
-				}
+				let success = true;
+				const tempListener = (msg, data) => {
+					success = { msg, data };
+				};
+
+				SecondaryRepository.on('error', tempListener); // add a temporary listener for the error event
+				await SecondaryRepository.save(null, useStaged);
+				SecondaryRepository.off('error', tempListener); // remove the temporary listener
+				
 				setIsSaving(false);
 
 				if (_.isBoolean(success) && success) {
@@ -499,7 +501,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 							secondaryOnSave(secondarySelection);
 						}
 					}
-					// setIsEditorShown(false);
+					if (secondaryEditorType === EDITOR_TYPE__INLINE) {
+						secondarySetIsEditorShown(false);
+					}
+
 				}
 
 				return success;

package/src/Components/Hoc/withAlert.js

@@ -62,6 +62,7 @@ function withAlert(WrappedComponent) {
 									text-${color}
 									text-[18px]
 									flex-none
+									mr-2
 								`}>{message}</Text>
 							</Box>
 						</HStack>;

package/src/Components/Hoc/withEditor.js

@@ -500,13 +500,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				setIsSaving(true);
-				let success;
-				try {
-					await Repository.save(null, useStaged);
-					success = true;
-				} catch (e) {
-					success = e;
-				}
+				let success = true;
+				const tempListener = (msg, data) => {
+					success = { msg, data };
+				};
+
+				Repository.on('error', tempListener); // add a temporary listener for the error event
+				await Repository.save(null, useStaged);
+				Repository.off('error', tempListener); // remove the temporary listener
+				
 				setIsSaving(false);
 
 				if (_.isBoolean(success) && success) {
@@ -534,7 +536,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 							onSave(selection);
 						}
 					}
-					// setIsEditorShown(false);
+					if (editorType === EDITOR_TYPE__INLINE) {
+						setIsEditorShown(false);
+					}
 				}
 
 				return success;

package/src/PlatformImports/Web/Attachments.js

@@ -21,12 +21,17 @@ import {
 import { Avatar, Dropzone, FileMosaic, FileCard, FileInputButton, } from "@files-ui/react";
 import inArray from '../../Functions/inArray.js';
 import IconButton from '../../Components/Buttons/IconButton.js';
-import Xmark from '../../Components/Icons/Xmark.js'
+import Xmark from '../../Components/Icons/Xmark.js';
+import Eye from '../../Components/Icons/Eye.js';
+import ChevronLeft from '../../Components/Icons/ChevronLeft.js';
+import ChevronRight from '../../Components/Icons/ChevronRight.js';
 import withAlert from '../../Components/Hoc/withAlert.js';
 import withComponent from '../../Components/Hoc/withComponent.js';
 import withData from '../../Components/Hoc/withData.js';
+import CenterBox from '../../Components/Layout/CenterBox.js';
 import downloadInBackground from '../../Functions/downloadInBackground.js';
 import downloadWithFetch from '../../Functions/downloadWithFetch.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import _ from 'lodash';
 
 const
@@ -35,16 +40,18 @@ const
 	isPwa = !!window?.navigator?.standalone;
 
 function FileCardCustom(props) {
-	const
-		{
+	const {
 			id,
 			name: filename,
 			type: mimetype,
 			onDelete,
+			onSee,
 			downloadUrl,
 			uploadStatus,
 		} = props,
-		isDownloading = uploadStatus && inArray(uploadStatus, ['preparing', 'uploading', 'success']);
+		isDownloading = uploadStatus && inArray(uploadStatus, ['preparing', 'uploading', 'success']),
+		isPdf = mimetype === 'application/pdf';
+
 	return <Pressable
 				onPress={() => {
 					downloadInBackground(downloadUrl);
@@ -52,6 +59,7 @@ function FileCardCustom(props) {
 				className="px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
 			>
 				{isDownloading && <Spinner className="mr-2" />}
+				{onSee && isPdf && <IconButton mr={1} icon={Eye} onPress={() => onSee(null, id)} />}
 				<Text>{filename}</Text>
 				{onDelete && <IconButton ml={1} icon={Xmark} onPress={() => onDelete(id)} />}
 			</Pressable>;
@@ -81,7 +89,7 @@ function AttachmentsElement(props) {
 			expandedMax = EXPANDED_MAX,
 			collapsedMax = COLLAPSED_MAX,
 			autoUpload = true,
-			onBeforeDropzoneChange,
+			onAfterDropzoneChange, // fn, should return true if it mutated the files array
 
 			// withComponent
 			self,
@@ -94,6 +102,8 @@ function AttachmentsElement(props) {
 			Repository,
 
 			// withAlert
+			showModal,
+			updateModalBody,
 			alert,
 			confirm,
 
@@ -102,6 +112,7 @@ function AttachmentsElement(props) {
 		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
 		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity[selectorSelectedField]) : selectorSelected?.[selectorSelectedField],
 		modelid = useRef(modelidCalc),
+		forceUpdate = useForceUpdate(),
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),
 		[showAll, setShowAll] = useState(false),
@@ -135,7 +146,7 @@ function AttachmentsElement(props) {
 		toggleShowAll = () => {
 			setShowAll(!showAll);
 		},
-		onDropzoneChange = (files) => {
+		onDropzoneChange = async (files) => {
 			if (!files.length) {
 				alert('No files accepted. Perhaps they were too large or the wrong file type?');
 				return;
@@ -148,8 +159,11 @@ function AttachmentsElement(props) {
 					...extraUploadData,
 				};
 			});
-			if (onBeforeDropzoneChange) {
-				onBeforeDropzoneChange(files);
+			if (onAfterDropzoneChange) {
+				const isChanged = await onAfterDropzoneChange(files);
+				if (isChanged) {
+					forceUpdate();
+				}
 			}
 		},
 		onUploadStart = (files) => {
@@ -199,9 +213,120 @@ function AttachmentsElement(props) {
 				downloadInBackground(url);
 			}
 		},
+		buildModalBody = (url, id) => {
+			// This method was abstracted out so showModal/onPrev/onNext can all use it.
+			// url comes from FileMosaic, which passes in imageUrl,
+			// whereas FileCardCustom passes in id.
+
+			function findFile(url, id) {
+				if (id) {
+					return _.find(files, { id });
+				}
+				return _.find(files, (file) => file.imageUrl === url);
+			}
+			function findPrevFile(url, id) {
+				const
+					currentFile = findFile(url, id),
+					currentIx = _.findIndex(files, currentFile);
+				if (currentIx > 0) {
+					return files[currentIx - 1];
+				}
+				return null;
+			}
+			function findNextFile(url, id) {
+				const
+					currentFile = findFile(url, id),
+					currentIx = _.findIndex(files, currentFile);
+				if (currentIx < files.length - 1) {
+					return files[currentIx + 1];
+				}
+				return null;
+			}
+
+			const
+				prevFile = findPrevFile(url, id),
+				isPrevDisabled = !prevFile,
+				nextFile = findNextFile(url, id),
+				isNextDisabled = !nextFile,
+				onPrev = () => {
+					const { imageUrl, id } = prevFile;
+					updateModalBody(buildModalBody(imageUrl, id));
+				},
+				onNext = () => {
+					const { imageUrl, id } = nextFile;
+					updateModalBody(buildModalBody(imageUrl, id));
+				};
+
+			let isPdf = false,
+				body = null;
+
+			if (id) {
+				const file = _.find(files, { id });
+				url = file.imageUrl;
+				isPdf = true;
+			} else if (url?.match(/\.pdf$/)) {
+				isPdf = true;
+			}
+
+			if (isPdf) {
+				body = <iframe
+							src={url}
+							className="w-full h-full"
+						/>;
+			} else {
+				body = <CenterBox className="w-full h-full">
+							<img src={url} />
+						</CenterBox>;
+			}
+			return <HStack
+						className="w-full h-full"
+					>
+						<IconButton
+							onPress={onPrev}
+							className="Lightbox-prevBtn h-full w-[50px]"
+							icon={ChevronLeft}
+							isDisabled={isPrevDisabled}
+						/>
+						{body}
+						<IconButton
+							onPress={onNext}
+							className="Lightbox-prevBtn h-full w-[50px]"
+							icon={ChevronRight}
+							isDisabled={isNextDisabled}
+						/>
+					</HStack>;
+		},
+		onViewLightbox = (url, id) => {
+			if (!url && !id) {
+				alert('Cannot view lightbox until image is uploaded.');
+				return;
+			}
+			showModal({
+				title: 'Lightbox',
+				body: buildModalBody(url, id),
+				canClose: true,
+				includeCancel: true,
+				w: 1920,
+				h: 1080,
+			});
+		},
 		doDelete = (id) => {
-			Repository.deleteById(id);
-			Repository.save();
+			const file = Repository.getById(id);
+			if (file) {
+				// if the file exists in the repository, delete it there
+				Repository.deleteById(id);
+				Repository.save();
+
+			} else {
+				// simply remove it from the files array
+				const newFiles = [];
+				_.each(files, (file) => {
+					if (file.id !== id) {
+						newFiles.push(file);
+					}
+				});
+				setFiles(newFiles);
+			}
 		};
 
 	if (!_.isEqual(modelidCalc, modelid.current)) {
@@ -296,6 +421,12 @@ function AttachmentsElement(props) {
 						<HStack className="AttachmentsElement-HStack flex-wrap">
 							{files.length === 0 && <Text className="text-grey-600 italic">No files</Text>}
 							{files.map((file) => {
+								let seeProps = {};
+								if (file.type && (file.type.match(/^image\//) || file.type === 'application/pdf')) {
+									seeProps = {
+										onSee: onViewLightbox,
+									};
+								}
 								return <Box
 											key={file.id}
 											className="mr-2"
@@ -306,12 +437,14 @@ function AttachmentsElement(props) {
 													backgroundBlurImage={false}
 													onDownload={onDownload}
 													{..._fileMosaic}
+													{...seeProps}
 												/>}
 											{!useFileMosaic &&
 												<FileCardCustom
 													{...file}
 													backgroundBlurImage={false}
 													{..._fileMosaic}
+													{...seeProps}
 												/>}
 										</Box>;
 							})}