@onehat/ui 0.4.35 → 0.4.38

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.35",
+	"version": "0.4.38",
 	"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/Combo/MeterTypeCombo.js

@@ -0,0 +1,27 @@
+/**
+ * COPYRIGHT NOTICE
+ * This file is categorized as "Custom Source Code"
+ * and is subject to the terms and conditions defined in the
+ * "LICENSE.txt" file, which is part of this source code package.
+ */
+
+import ArrayCombo from './ArrayCombo.js';
+import {
+	METER_TYPES__HOURS,
+	METER_TYPES__MILES,
+} from '../../../../constants/MeterTypes.js';
+
+const data = [
+	[METER_TYPES__HOURS, 'Hours'],
+	[METER_TYPES__MILES, 'Miles'],
+];
+function MeterTypeCombo(props) {
+	return <ArrayCombo
+				reference="MeterTypeCombo"
+				data={data}
+				disableDirectEntry={true}
+				{...props}
+			/>;
+}
+
+export default MeterTypeCombo;

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/Grid/Grid.js

@@ -763,8 +763,18 @@ function GridComponent(props) {
 			const
 				headerHeight = showHeaders ? 50 : 0,
 				footerHeight = !disablePagination ? 50 : 0,
-				height = containerHeight - headerHeight - footerHeight,
-				rowsPerContainer = Math.floor(height / defaultRowHeight);
+				height = containerHeight - headerHeight - footerHeight;
+
+			const rowsPerContainer = Math.floor(height / defaultRowHeight);
+
+			// // Get the total height of all rows
+			// const rows = gridRef.current._listRef._scrollRef.childNodes[0].childNodes;
+			// let totalRowHeight = 0;
+			// rows.forEach((row) => {
+			// 	totalRowHeight += row.getBoundingClientRect().height;
+			// });
+			// const rowsPerContainer = Math.floor(height / (totalRowHeight / rows.length));
+
 			let pageSize = rowsPerContainer;
 			if (showHeaders) {
 				pageSize--;

package/src/Components/Grid/GridRow.js

@@ -83,13 +83,17 @@ function GridRow(props) {
 					if (config.isHidden) {
 						return null;
 					}
-					const propsToPass = columnProps[key] || {};
-					const colStyle = {};
+					const
+						propsToPass = columnProps[key] || {},
+						colStyle = {};
 					let colClassName = `
 						GridRow-column
 						p-1
 						justify-center
 						border-r-black-100
+						block
+						max-h-[40px]
+						overflow-scroll
 					`;
 					if (isOnlyOneVisibleColumn) {
 						colClassName = ' w-full';
@@ -152,9 +156,10 @@ function GridRow(props) {
 						if (config.fieldName) {
 
 							if (item?.properties && item.properties[config.fieldName]) {
-								const property = item.properties[config.fieldName];
+								const
+									property = item.properties[config.fieldName],
+									type = property?.viewerType?.type;
 								value = property.displayValue;
-								const type = property?.viewerType?.type;
 
 								if (type) {
 									const Element = getComponentFromType(type);
@@ -165,6 +170,24 @@ function GridRow(props) {
 									if (config.getCellProps) {
 										_.assign(elementProps, config.getCellProps(item));
 									}
+									let elementClassName = `
+										GridRow-Element
+										self-center
+										text-ellipsis
+										px-2
+										py-3
+										block
+										max-h-[40px]
+										overflow-scroll
+										${colClassName}
+										${styles.GRID_CELL_CLASSNAME}
+									`;
+									if (config.className) {
+										elementClassName += ' ' + config.className;
+									}
+									if (type.match(/(Tag|TagEditor)$/)) {
+										elementClassName += ' max-h-[80px]';
+									}
 									return <Element
 												{...testProps('cell-' + config.fieldName)}
 												value={value}
@@ -175,15 +198,7 @@ function GridRow(props) {
 													...colStyle,
 												}}
 												minimizeForRow={true}
-												className={`
-													GridRow-Element
-													self-center
-													text-ellipsis
-													px-2
-													py-3
-													${colClassName}
-													${styles.GRID_CELL_CLASSNAME}
-												`}
+												className={elementClassName}
 												numberOfLines={1}
 												ellipsizeMode="head"
 												{...propsToPass}
@@ -213,6 +228,22 @@ function GridRow(props) {
 					if (config.getCellProps) {
 						_.assign(elementProps, config.getCellProps(item));
 					}
+					let textClassName = `
+						GridRow-TextNative
+						self-center
+						overflow-hidden
+						text-ellipsis
+						truncate
+						whitespace-nowrap
+						overflow-hidden
+						${colClassName}
+						${styles.GRID_CELL_CLASSNAME} 
+						${styles.GRID_CELL_PX} 
+						${styles.GRID_CELL_PY} 
+					`;
+					if (config.className) {
+						textClassName += ' ' + config.className;
+					}
 					return <TextNative
 								{...testProps('cell-' + config.fieldName)}
 								key={key}
@@ -222,19 +253,7 @@ function GridRow(props) {
 								}}
 								numberOfLines={1}
 								ellipsizeMode="head"
-								className={`
-									GridRow-TextNative
-									self-center
-									overflow-hidden
-									text-ellipsis
-									truncate
-									whitespace-nowrap
-									overflow-hidden
-									${colClassName}
-									${styles.GRID_CELL_CLASSNAME} 
-									${styles.GRID_CELL_PX} 
-									${styles.GRID_CELL_PY} 
-								`}
+								className={textClassName}
 								{...elementProps}
 								{...propsToPass}
 							>{value}</TextNative>;

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/MeterTypeText.js

@@ -0,0 +1,23 @@
+import {
+	Text,
+} from '@project-components/Gluestack';
+import UiGlobals from '../../UiGlobals';
+
+export default function MeterTypeText(props) {
+	const styles = UiGlobals.styles;
+
+	let className = `
+		Text
+		flex-1
+		px-3
+		py-2
+		${styles.FORM_TEXT_CLASSNAME}
+	`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <Text
+				{...props}
+				className={className}
+			>{props.value ? 'Hours' : 'Miles'}</Text>;
+};

package/src/Components/Viewer/TextWithLinks.js

@@ -0,0 +1,98 @@
+import {
+	Linking,
+} from 'react-native';
+import {
+	BoxNative,
+	Text,
+	TextNative,
+} from '@project-components/Gluestack';
+import {
+	UI_MODE_WEB,
+} from '../../Constants/UiModes.js';
+import UiGlobals from '../../UiGlobals.js';
+import withComponent from '../Hoc/withComponent.js';
+import _ from 'lodash';
+
+function TextWithLinksElement(props) {
+	const {
+			value: text,
+		} = props,
+		styles = UiGlobals.styles,
+		openLink = (url) => {
+			Linking.openURL(url);
+		},
+		extractLinks = (text) => {
+
+			if (_.isNil(text) || _.isEmpty(text)) {
+				return [];
+			}
+			const
+				regex = /\b(?:https?|ftp):\/\/\S+/g,
+				links = text.match(regex) || [];
+		
+			return links.map((link, ix) => ({
+				link,
+				key: `link_${ix}`,
+			}));
+		},
+		renderTextWithLinks = () => {
+			const links = extractLinks(text);
+			let modifiedText = text;
+
+			if (_.isNil(modifiedText) || _.isEmpty(modifiedText)) {
+				return null;
+			}
+	
+			links.forEach(({ link, key }) => {
+				modifiedText = modifiedText.replace(link, key);
+			});
+
+			const
+				textClassName = `
+					TextWithLinks-Text
+					text-base
+					overflow-hidden
+				`,
+				textSegments = modifiedText.split(/(link_\d+)/);
+			if (textSegments.length === 1) {
+				return <Text className={textClassName}>{modifiedText}</Text>;
+			}
+
+			return textSegments.map((segment, ix) => {
+				const foundLink = links.find(({ key }) => segment === key);
+				let ret = <Text key={ix} className={textClassName}>{segment}</Text>;
+		
+				if (foundLink) {
+					ret = <TextNative
+								key={foundLink.key}
+								className={`
+									text-blue-600
+									${textClassName}
+								`}
+								onPress={() => openLink(foundLink.link)}
+							>{foundLink.link}</TextNative>;
+				}
+				return ret;
+			});
+		};
+  
+	const elementProps = {};
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		elementProps.textOverflow = 'ellipsis';
+	}
+	let className = `
+		overflow-auto
+		min-h-[40px]
+		px-3
+		py-2
+	`;
+	if (props.className) {
+		className += ` ${props.className}`;
+	}
+	return <BoxNative
+				className={className}
+				{...props}
+			>{renderTextWithLinks()}</BoxNative>;
+};
+
+export default withComponent(TextWithLinksElement);

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/Components/index.js

@@ -218,6 +218,8 @@ import Input from './Form/Field/Input.js';
 import IntervalsCombo from './Form/Field/Combo/IntervalsCombo.js';
 import Json from './Form/Field/Json.js';
 import Label from './Form/Label.js';
+import MeterTypeCombo from './Form/Field/Combo/MeterTypeCombo.js';
+import MeterTypeText from './Viewer/MeterTypeText.js';
 import MonthsCombo from './Form/Field/Combo/MonthsCombo.js';
 import Number from './Form/Field/Number.js';
 import NumberRange from './Filter/NumberRange.js';
@@ -231,6 +233,7 @@ import TabPanel from './Panel/TabPanel.js';
 import Tag from './Form/Field/Tag/Tag.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
+import TextWithLinks from './Viewer/TextWithLinks.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
 import Toggle from './Form/Field/Toggle.js';
 import Toolbar from './Toolbar/Toolbar.js';
@@ -458,6 +461,8 @@ const components = {
 	IntervalsCombo,
 	Json,
 	Label,
+	MeterTypeCombo,
+	MeterTypeText,
 	MonthsCombo,
 	Number,
 	NumberRange,
@@ -471,6 +476,7 @@ const components = {
 	Tag,
 	Text,
 	TextArea,
+	TextWithLinks,
 	TimezonesCombo,
 	Toggle,
 	Toolbar,

package/src/Constants/MeterTypes.js

@@ -0,0 +1,2 @@
+export const METER_TYPES__HOURS = 1;
+export const METER_TYPES__MILES = 2;

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: `