@onehat/ui 0.4.35 → 0.4.37

package/package.json

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

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

@@ -56,6 +56,7 @@ export function ComboComponent(props) {
 			isDisabled = false,
 			isInTag = false,
 			minimizeForRow = false,
+			reloadOnTrigger = false,
 			menuHeight,
 			tooltipPlacement = 'bottom',
 			placeholder,
@@ -308,11 +309,14 @@ export function ComboComponent(props) {
 			resetTextInputValue();
 			hideMenu();
 		},
-		onTriggerPress = (e) => {
+		onTriggerPress = async (e) => {
 			if (!isRendered) {
 				return;
 			}
 			clearGridFilters();
+			if (reloadOnTrigger && Repository) {
+				await Repository.reload();
+			}
 			if (isMenuShown) {
 				hideMenu();
 			} else {

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

@@ -72,6 +72,7 @@ function TagComponent(props) {
 							editorType={EDITOR_TYPE__WINDOWED}
 							parent={self}
 							reference="viewer"
+							Repository={repository}
 							isEditorViewOnly={true}
 							selection={[record]}
 							onEditorClose={hideModal}

package/src/Components/Form/Form.js

@@ -80,6 +80,7 @@ function Form(props) {
 			checkIsEditingDisabled = true,
 			disableLabels = false,
 			disableDirtyIcon = false,
+			alwaysShowCancelButton = false,
 			onBack,
 			onReset,
 			onInit,
@@ -567,7 +568,7 @@ function Form(props) {
 					return buildFromItem(item, ix, {...defaults, ...itemDefaults});
 				});
 
-				let elementClassName = 'Form-ElementFromItem';
+				let elementClassName = 'Form-ElementFromItem gap-2';
 				const defaultsClassName = defaults.className;
 				if (defaultsClassName) {
 					elementClassName += ' ' + defaultsClassName;
@@ -785,7 +786,7 @@ function Form(props) {
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-									element = <HStack className="Form-HStack5 flex-1 flex-wrap items-center">
+									element = <HStack className="Form-HStack5 flex-1 flex-wrap items-center gap-2">
 													{element}
 													{buttons}
 												</HStack>;
@@ -1147,7 +1148,7 @@ function Form(props) {
 							</Toolbar>;
 			}
 			if (getEditorMode() === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
-				formButtons.push(<Toolbar key="additionalButtonsToolbar" className="justify-end flex-wrap">
+				formButtons.push(<Toolbar key="additionalButtonsToolbar" className="justify-end flex-wrap gap-2">
 									{additionalButtons}
 								</Toolbar>)
 			}
@@ -1170,27 +1171,31 @@ function Form(props) {
 			showResetBtn = true;
 		}
 		// determine whether we should show the close or cancel button
-		if (editorType !== EDITOR_TYPE__SIDE) {
-			if (isEditorViewOnly) {
-				showCloseBtn = true;
-			} else {
-				// if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
-				// 	showCancelBtn = true;
-				// }
-				if (formState.isDirty || isPhantom) {
-					if (isSingle && onCancel) {
-						showCancelBtn = true;
-					}
+		if (alwaysShowCancelButton) {
+			showCancelBtn = true;
+		} else {
+			if (editorType !== EDITOR_TYPE__SIDE) {
+				if (isEditorViewOnly) {
+					showCloseBtn = true;
 				} else {
-					if (onClose) {
-						showCloseBtn = true;
+					// if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
+					// 	showCancelBtn = true;
+					// }
+					if (formState.isDirty || isPhantom) {
+						if (isSingle && onCancel) {
+							showCancelBtn = true;
+						}
+					} else {
+						if (onClose) {
+							showCloseBtn = true;
+						}
 					}
 				}
-			}
-		} else {
-			// side editor only
-			if (isPhantom && isSingle && onCancel) {
-				showCancelBtn = true;
+			} else {
+				// side editor only
+				if (isPhantom && isSingle && onCancel) {
+					showCancelBtn = true;
+				}
 			}
 		}
 		if (!isEditorViewOnly && onSave) {
@@ -1267,11 +1272,16 @@ function Form(props) {
 					/>}
 			
 				{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
+					let isDisabled = false;
+					if (props.disableOnInvalid) {
+						isDisabled = !formState.isValid;
+					}
 					return <Button
 								{...testProps('additionalFooterBtn-' + props.key)}
 								{...props}
 								onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
 								text={props.text}
+								isDisabled={isDisabled}
 							/>;
 				})}
 			</>;

package/src/Components/Hoc/withModal.js

@@ -33,6 +33,7 @@ export default function withModal(WrappedComponent) {
 			[okBtnLabel, setOkBtnLabel] = useState(),
 			[onYes, setOnYes] = useState(),
 			[onNo, setOnNo] = useState(),
+			[onCancel, setOnCancel] = useState(),
 			[customButtons, setCustomButtons] = useState(),
 			[body, setBody] = useState(),
 			[whichModal, setWhichModal] = useState(),
@@ -40,9 +41,6 @@ export default function withModal(WrappedComponent) {
 			autoFocusRef = useRef(null),
 			cancelRef = useRef(null),
 			[windowWidth, windowHeight] = useAdjustedWindowSize(w, h),
-			onCancel = () => {
-				hideModal();
-			},
 			hideModal = () => {
 				setIsModalShown(false);
 			},
@@ -52,6 +50,7 @@ export default function withModal(WrappedComponent) {
 					body = null,
 					canClose = false,
 					includeCancel = false,
+					onCancel = null,
 					onOk = null,
 					okBtnLabel = null,
 					onYes = null,
@@ -76,6 +75,7 @@ export default function withModal(WrappedComponent) {
 				setBody(body);
 				setCanClose(canClose);
 				setIncludeCancel(includeCancel);
+				setOnCancel(() => onCancel);
 				setOnOk(onOk ? () => onOk : null);
 				setOkBtnLabel(okBtnLabel || 'OK');
 				setOnYes(onYes ? () => onYes : null);
@@ -101,7 +101,7 @@ export default function withModal(WrappedComponent) {
 				buttons.push(<Button
 									{...testProps('cancelBtn')}
 									key="cancelBtn"
-									onPress={onCancel}
+									onPress={onCancel || hideModal}
 									colorScheme="coolGray"
 									ref={cancelRef}
 									className="mr-2"
@@ -180,7 +180,7 @@ export default function withModal(WrappedComponent) {
 						{...props}
 						disableWithModal={false}
 						showModal={showModal}
-						hideModal={onCancel}
+						hideModal={onCancel || hideModal}
 						updateModalBody={updateModalBody}
 						isModalShown={isModalShown}
 						whichModal={whichModal}

package/src/Components/Report/Report.js

@@ -33,12 +33,9 @@ function Report(props) {
 			title,
 			description,
 			reportId,
-			// icon,
 			disablePdf = false,
 			disableExcel = false,
-			includePresets = false,
 			showReportHeaders = true,
-			h = '300px',
 		} = props,
 		buttons = [];
 
@@ -68,6 +65,7 @@ function Report(props) {
 				reportType: REPORT_TYPES__EXCEL,
 				showReportHeaders,
 			}),
+			disabledOnInvalid: true,
 		});
 	}
 	if (!disablePdf) {
@@ -82,6 +80,7 @@ function Report(props) {
 				reportType: REPORT_TYPES__PDF,
 				showReportHeaders,
 			}),
+			disableOnInvalid: true,
 		});
 	}
 	return <VStackNative

package/src/Components/Viewer/Viewer.js

@@ -234,7 +234,12 @@ function Viewer(props) {
 				}
 			}
 
-			let elementClassName = 'Viewer-field-' + name;
+			let elementClassName = `
+				Viewer-field
+				basis-auto
+				grow
+				shrink
+			`;
 			const defaultsClassName = defaults.className;
 			if (defaultsClassName) {
 				elementClassName += ' ' + defaultsClassName;

package/src/Functions/buildAdditionalButtons.js

@@ -21,7 +21,6 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 				text,
 				icon,
 				isDisabled,
-				className: 'ml-2',
 				tooltip,
 				color,
 			};

package/src/PlatformImports/Web/Attachments.js

@@ -45,17 +45,16 @@ function FileCardCustom(props) {
 			uploadStatus,
 		} = props,
 		isDownloading = uploadStatus && inArray(uploadStatus, ['preparing', 'uploading', 'success']);
-	return (
-        <Pressable
-            onPress={() => {
-                downloadInBackground(downloadUrl);
-            }}
-            className="px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700">
-                    {isDownloading && <Spinner className="mr-2" />}
-                    <Text>{filename}</Text>
-                    {onDelete && <IconButton ml={1} icon={Xmark} onPress={() => onDelete(id)} />}
-                </Pressable>
-    );
+	return <Pressable
+				onPress={() => {
+					downloadInBackground(downloadUrl);
+				}}
+				className="px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
+			>
+				{isDownloading && <Spinner className="mr-2" />}
+				<Text>{filename}</Text>
+				{onDelete && <IconButton ml={1} icon={Xmark} onPress={() => onDelete(id)} />}
+			</Pressable>;
 }
 
 
@@ -183,8 +182,9 @@ function AttachmentsElement(props) {
 			}
 		},
 		onFileDelete = (id) => {
+			const file = _.find(files, { id });
 			if (confirmBeforeDelete) {
-				confirm('Are you sure you want to delete the file?', () => doDelete(id));
+				confirm('Are you sure you want to delete the file "' + file.name + '"?', () => doDelete(id));
 			} else {
 				doDelete(id);
 			}
@@ -282,12 +282,19 @@ function AttachmentsElement(props) {
 	if (canCrud) {
 		_fileMosaic.onDelete = onFileDelete;
 	}
-	let className = 'w-full p-1 bg-white rounded-[5px]';
+	let className = `
+		AttachmentsElement
+		w-full
+		h-full
+		p-1
+		rounded-[5px]
+	`;
 	if (props.className) {
 		className += ' ' + props.className;
 	}
 	let content = <VStack className={className}>
-						<HStack className="flex-wrap">
+						<HStack className="AttachmentsElement-HStack flex-wrap">
+							{files.length === 0 && <Text className="text-grey-600 italic">No files</Text>}
 							{files.map((file) => {
 								return <Box
 											key={file.id}
@@ -312,7 +319,7 @@ function AttachmentsElement(props) {
 						{Repository.total <= collapsedMax ? null :
 							<Button
 								onPress={toggleShowAll}
-								className="mt-2"
+								className="AttachmentsElement-toggleShowAll mt-2"
 								text={'Show ' + (showAll ? ' Less' : ' All ' + Repository.total)}
 								_text={{
 									className: `