@onehat/ui 0.4.97 → 0.4.98

package/package.json

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

package/src/Components/Container/Container.js

@@ -1,4 +1,4 @@
-import { cloneElement, useState, useEffect, useRef, } from 'react';
+import { cloneElement, useState, useEffect, useRef, useCallback, } from 'react';
 import {
 	BoxNative,
 	HStack,
@@ -16,6 +16,7 @@ import {
 } from '../../Constants/UiModes.js';
 import withComponent from '../Hoc/withComponent.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import Splitter from './Splitter.js';
@@ -106,6 +107,8 @@ function Container(props) {
 		} = props,
 		id = props.id || props.self?.path,
 		isWeb = CURRENT_MODE === UI_MODE_WEB,
+		useWindowSize = getComponentFromType('useWindowSize'),
+		windowSize = useWindowSize(),
 		forceUpdate = useForceUpdate(),
 		centerRef = useRef(null),
 		northRef = useRef(null),
@@ -122,6 +125,36 @@ function Container(props) {
 		localSouthIsCollapsedRef = useRef(southInitialIsCollapsed),
 		localEastIsCollapsedRef = useRef(eastInitialIsCollapsed),
 		localWestIsCollapsedRef = useRef(westInitialIsCollapsed),
+		onLayout = async (e) => {
+			console.log('Container onLayout', e.nativeEvent.layout.width);
+			if (id) {
+				// save prevScreenSize if changed
+				const
+					height = parseFloat(e.nativeEvent.layout.height),
+					width = parseFloat(e.nativeEvent.layout.width),
+					key = id + '-prevScreenSize',
+					prevScreenSize = await getSaved(key);
+				if (!prevScreenSize || prevScreenSize.width !== width || prevScreenSize.height !== height) {
+					await setSaved(key, {
+						height,
+						width,
+					});
+
+					// reset all sizes to null, so they recalculate
+					setNorthHeight(null);
+					setSouthHeight(null);
+					setEastWidth(null);
+					setWestWidth(null);
+					forceUpdate();
+				}
+			}
+		},
+		debouncedOnLayout = useCallback(
+			_.debounce((e) => {
+				onLayout(e);
+			}, 2000), // delay is signficant, as all we're trying to do is catch screen size changes
+			[]
+		),
 		setNorthIsCollapsed = (bool) => {
 			if (setExternalNorthIsCollapsed) {
 				setExternalNorthIsCollapsed(bool);
@@ -293,53 +326,72 @@ function Container(props) {
 
 			if (id) {
 				let key, val;
-				key = id + '-northIsCollapsed';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setNorthIsCollapsed(val);
-				}
 
-				key = id + '-southIsCollapsed';
+				// does screensize from previous render exist?
+				key = id + '-prevScreenSize';
 				val = await getSaved(key);
+				let prevScreenSize = null;
 				if (!_.isNil(val)) {
-					setSouthIsCollapsed(val);
+					prevScreenSize = val;
 				}
+				const currentScreenSize = {
+					width: windowSize?.width ?? null,
+					height: windowSize?.height ?? null,
+				};
+				if (!prevScreenSize || (prevScreenSize.width === currentScreenSize.width && prevScreenSize.height === currentScreenSize.height)) {
+				
+					// only load these saved settings if the screen size is the same as when they were saved
+					key = id + '-northIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setNorthIsCollapsed(val);
+					}
 
-				key = id + '-eastIsCollapsed';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setEastIsCollapsed(val);
-				}
+					key = id + '-southIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setSouthIsCollapsed(val);
+					}
 
-				key = id + '-westIsCollapsed';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setWestIsCollapsed(val);
-				}
+					key = id + '-eastIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setEastIsCollapsed(val);
+					}
 
-				key = id + '-northHeight';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setNorthHeight(val);
-				}
+					key = id + '-westIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setWestIsCollapsed(val);
+					}
 
-				key = id + '-southHeight';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setSouthHeight(val);
-				}
+					key = id + '-northHeight';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setNorthHeight(val);
+					}
 
-				key = id + '-eastWidth';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setEastWidth(val);
-				}
+					key = id + '-southHeight';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setSouthHeight(val);
+					}
 
-				key = id + '-westWidth';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setWestWidth(val);
+					key = id + '-eastWidth';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setEastWidth(val);
+					}
+
+					key = id + '-westWidth';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setWestWidth(val);
+					}
+				
 				}
+
+
 			}
 
 			if (!isReady) {
@@ -366,6 +418,7 @@ function Container(props) {
 
 	componentProps._panel.isCollapsible = false;
 	componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps.onLayout = debouncedOnLayout;
 	centerComponent = cloneElement(center, componentProps);
 	if (north) {
 		componentProps = { _panel: { ...north.props?._panel }, };

package/src/Components/Form/Form.js

@@ -1398,6 +1398,7 @@ function Form(props) {
 						onPress={() => doReset()}
 						icon={Rotate}
 						isDisabled={!formState.isDirty}
+						tooltip="Reset Form"
 					/>}
 
 				{showCancelBtn &&

package/src/Components/Hoc/withPresetButtons.js

@@ -339,6 +339,11 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case DUPLICATE:
 						key = 'duplicateBtn';
 						text = 'Duplicate';
+						if (model) {
+							let inflected = Inflector.singularize(model); // can only add one at a time
+							inflected = Inflector.camel2words(Inflector.humanize(Inflector.underscore(inflected))); // Separate with spaces, capitalize each word
+							text += ' ' + inflected;
+						}
 						handler = (parent, e) => {
 							onDuplicate();
 						};

package/src/Constants/PmStatuses.js

@@ -1,7 +1,16 @@
 export const PM_STATUSES__OK = 1;
+export const PM_STATUSES__OK_TEXT = 'OK';
 export const PM_STATUSES__PM_DUE = 2;
+export const PM_STATUSES__PM_DUE_TEXT = 'PM Due';
 export const PM_STATUSES__DELAYED = 3;
+export const PM_STATUSES__DELAYED_TEXT = 'Delayed';
 export const PM_STATUSES__WILL_CALL = 4;
+export const PM_STATUSES__WILL_CALL_TEXT = 'Will Call';
 export const PM_STATUSES__SCHEDULED = 5;
+export const PM_STATUSES__SCHEDULED_TEXT = 'Scheduled';
 export const PM_STATUSES__OVERDUE = 6;
+export const PM_STATUSES__OVERDUE_TEXT = 'Overdue';
 export const PM_STATUSES__COMPLETED = 7;
+export const PM_STATUSES__COMPLETED_TEXT = 'Completed';
+export const PM_STATUSES__DISABLED = 8;
+export const PM_STATUSES__DISABLED_TEXT = 'Disabled';

package/src/PlatformImports/Web/Attachments.js

@@ -1212,7 +1212,7 @@ function AttachmentsElement(props) {
 								onChangeSelection: (selection) => {
 									setTreeSelection(selection);
 								},
-								additionalToolbarButtons: canCrud ? [
+								additionalToolbarButtons: canCrud && treeSelection[0] && !treeSelection[0].isDestroyed ? [
 									{
 										key: 'Plus',
 										text: 'New Directory',