@onehat/ui 0.4.97 → 0.4.99

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.97",
+	"version": "0.4.99",
 	"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/Grid/Grid.js

@@ -208,6 +208,7 @@ function GridComponent(props) {
 			onRowDrop,
 			onDragStart,
 			onDragEnd,
+			rowLongPressDelayMs,
 
 			// withComponent
 			self,
@@ -300,6 +301,7 @@ function GridComponent(props) {
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
 		[isReorderMode, setIsReorderMode] = useState(false),
 		showRowHandle = showSelectHandle || areRowsDragSource || (canRowsReorder && isReorderMode),
+		rowLongPressDelay = rowLongPressDelayMs ?? ((areRowsDragSource || canRowsReorder) ? 800 : undefined),
 		[lastMeasuredContainerHeight, setLastMeasuredContainerHeight] = useState(0),
 		getMeasurementPhase = () => {
 			return measurementPhaseRaw.current;
@@ -469,11 +471,12 @@ function GridComponent(props) {
 				<Pressable
 					dataSet={{ ix: index }}
 					{...testProps(getRowTestId ? getRowTestId(row) : ((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id))}
+					delayLongPress={rowLongPressDelay}
 					onPress={(e) => {
 						if (e.preventDefault && e.cancelable) {
 							e.preventDefault();
 						}
-						if (isHeaderRow || isReorderMode) {
+						if (isHeaderRow) {
 							return
 						}
 						if (CURRENT_MODE === UI_MODE_WEB) {
@@ -485,6 +488,9 @@ function GridComponent(props) {
 									}
 									break;
 								case DOUBLE_CLICK:
+									if (isReorderMode) {
+										return; // don't allow double-clicks while in reorder mode
+									}
 									if (editorType === EDITOR_TYPE__SIDE) {
 										// For side-editors, a double-click just acts like a single click
 										if (!getIsEditorShown()) {
@@ -929,26 +935,58 @@ function GridComponent(props) {
 		onRowReorderEnd = (item, monitor) => {
 			const
 				{ ix: dropIx, useBottom, marker, rows, dragIx } = cachedDragElements.current,
-				shouldMove = dropIx !== dragIx;
-			if (shouldMove && dropIx !== -1) {
-				// Update the row with the new ix
-				let dragRecord,
-					dropRecord;
+				selectionList = item?.getSelection ? item.getSelection() : (dragSelectionRef.current || selection || []);
+			if (dropIx === -1) {
+				marker.remove();
+				cachedDragElements.current = null;
+				return;
+			}
+
+			const
+				// normalize the current selection to ids
+				itemsList = Repository ? entities : data,
+				dragItem = Repository ? Repository.getByIx(dragIx) : itemsList?.[dragIx],
+				selectionIds = _.compact(_.map(selectionList, (selectedItem) => {
+					if (!selectedItem) {
+						return null;
+					}
+					if (_.isObject(selectedItem)) {
+						return Repository ? selectedItem.id : selectedItem[idIx];
+					}
+					return selectedItem;
+				})),
+				// decide if we're moving the selected items or just the dragged item
+				dragItemId = dragItem ? (Repository ? dragItem.id : dragItem[idIx]) : null,
+				useSelection = !!(dragItemId && selectionIds.includes(dragItemId)),
+				dragItems = useSelection ? selectionIds : (dragItemId ? [dragItemId] : []),
+				// get the indices of the selected items
+				selectedIndicesRaw = Repository
+					? _.map(dragItems, (id) => itemsList?.findIndex((item) => item?.id === id))
+					: _.map(dragItems, (id) => itemsList?.findIndex((item) => item?.[idIx] === id)),
+				selectedIndices = _.uniq(_.filter(selectedIndicesRaw, (ix) => ix > -1)).sort((a, b) => a - b),
+				selectedIndicesSet = new Set(selectedIndices),
+				insertionIndexOriginal = useBottom ? dropIx + 1 : dropIx,
+				// get the drop record
+				dropRecord = Repository ? Repository.getByIx(dropIx) : itemsList?.[dropIx],
+				dropRecordId = dropRecord ? (Repository ? dropRecord.id : dropRecord[idIx]) : null,
+				// decide if we should move
+				shouldMove = !dropRecordId || !selectionIds.includes(dropRecordId);
+
+			if (shouldMove && selectedIndices.length) {
 				if (Repository) {
 					if (!Repository.isDestroyed) {
-						dragRecord = Repository.getByIx(dragIx);
-						dropRecord = Repository.getByIx(dropIx);
-						if (dropRecord) {
-							Repository.reorder(dragRecord, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
+						if (dropRecord && dragItems.length) {
+							Repository.reorder(dragItems, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
 						}
 					}
-				} else {
-					function arrayMove(arr, fromIndex, toIndex) {
-						var element = arr[fromIndex];
-						arr.splice(fromIndex, 1);
-						arr.splice(toIndex, 0, element);
-					}
-					arrayMove(data, compensatedDragIx, finalDropIx);
+				} else if (itemsList && itemsList.length) {
+					const
+						removedBefore = _.filter(selectedIndices, (ix) => ix < insertionIndexOriginal).length,
+						insertionIndex = insertionIndexOriginal - removedBefore,
+						selectedItems = _.map(selectedIndices, (ix) => itemsList[ix]),
+						remainingItems = _.filter(itemsList, (entry, ix) => !selectedIndicesSet.has(ix));
+					remainingItems.splice(insertionIndex, 0, ...selectedItems);
+					itemsList.splice(0, itemsList.length, ...remainingItems);
 				}
 			}
 

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

@@ -110,6 +110,7 @@ function TreeComponent(props) {
 			showHeaderToolbar = true,
 			showHovers = true,
 			showSelectHandle = true,
+			nodeLongPressDelayMs,
 			isNodeSelectable = true,
 			isNodeHoverable = true,
 			allowToggleSelection = true, // i.e. single click with no shift key toggles the selection of the node clicked on
@@ -219,6 +220,7 @@ function TreeComponent(props) {
 		[highlitedDatum, setHighlitedDatum] = useState(null),
 		[treeSearchValue, setTreeSearchValue] = useState(''),
 		showNodeHandle = showSelectHandle || areNodesDragSource,
+		nodeLongPressDelay = nodeLongPressDelayMs ?? ((areNodesDragSource || canNodesMoveInternally) ? 800 : undefined),
 		// state getters & setters
 		getTreeNodeData = () => {
 			return treeNodeData.current;
@@ -1092,6 +1094,7 @@ function TreeComponent(props) {
 			return <Pressable
 						{...testProps((Repository ? Repository.schema.name : 'TreeNode') + '-' + item?.id)}
 						key={item.hash}
+						delayLongPress={nodeLongPressDelay}
 						onPress={(e) => {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();

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',