@onehat/ui 0.4.40 → 0.4.42

package/src/Components/Form/Form.js

@@ -608,12 +608,15 @@ function Form(props) {
 			}
 
 			if (isEditorViewOnly || !isEditable) {
-				let value = record?.properties[name]?.displayValue || null;
-				if (_.isNil(value) && record && record[name]) {
-					value = record[name];
-				}
-				if (_.isNil(value) && startingValues && startingValues[name]) {
-					value = startingValues[name];
+				let value = null;
+				if (isSingle) {
+					value = record?.properties[name]?.displayValue || null;
+					if (_.isNil(value) && record && record[name]) {
+						value = record[name];
+					}
+					if (_.isNil(value) && startingValues && startingValues[name]) {
+						value = startingValues[name];
+					}
 				}
 
 				let elementClassName = 'field-' + name;
@@ -963,7 +966,7 @@ function Form(props) {
 		doReset = (values) => {
 			reset(values);
 			if (onReset) {
-				onReset(values, formSetValue, formGetValues);
+				onReset(values, formSetValue, formGetValues, trigger);
 			}
 		},
 		onSaveDecorated = async (data, e) => {
@@ -995,14 +998,14 @@ function Form(props) {
 		}
 		if (record === previousRecord) {
 			if (onInit) {
-				onInit(initialValues, formSetValue, formGetValues);
+				onInit(initialValues, formSetValue, formGetValues, trigger);
 			}
 		} else {
 			setPreviousRecord(record);
 			doReset(defaultValues);
 		}
 		if (formSetup) {
-			formSetup(formSetValue, formGetValues, formState);
+			formSetup(formSetValue, formGetValues, formState, trigger);
 		}
 	}, [record]);
 

package/src/Components/Grid/Grid.js

@@ -146,6 +146,7 @@ function GridComponent(props) {
 			disableBottomToolbar = false,
 			disablePagination = false,
 			bottomToolbar = 'pagination',
+			_paginationToolbarProps = {},
 			topToolbar = null,
 			additionalToolbarButtons = [],
 			bg = '#fff',
@@ -455,17 +456,20 @@ function GridComponent(props) {
 						if (isHeaderRow || isReorderMode) {
 							return
 						}
+						if (selection && selection[0] && selection[0].isRemotePhantom) {
+							return; // block context menu or changing selection when a remote phantom is already selected
+						}
 						
 						// context menu
-						const selection = [item];
+						const newSelection = [item];
 						if (!disableWithSelection) {
-							setSelection(selection);
+							setSelection(newSelection);
 						}
 						if (onEditorRowClick) { // e.g. inline editor
 							onEditorRowClick(item, index, e);
 						}
 						if (onContextMenu) {
-							onContextMenu(item, e, selection);
+							onContextMenu(item, e, newSelection);
 						}
 					}}
 					className="Pressable Row flex-row grow">
@@ -741,10 +745,12 @@ function GridComponent(props) {
 				let dragRecord,
 					dropRecord;
 				if (Repository) {
-					dragRecord = Repository.getByIx(dragIx);
-					dropRecord = Repository.getByIx(dropIx);
-					if (dropRecord) {
-						Repository.reorder(dragRecord, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
+					if (!Repository.isDestroyed) {
+						dragRecord = Repository.getByIx(dragIx);
+						dropRecord = Repository.getByIx(dropIx);
+						if (dropRecord) {
+							Repository.reorder(dragRecord, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
+						}
 					}
 				} else {
 					function arrayMove(arr, fromIndex, toIndex) {
@@ -763,21 +769,13 @@ function GridComponent(props) {
 			const
 				headerHeight = showHeaders ? 50 : 0,
 				footerHeight = !disablePagination ? 50 : 0,
-				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--;
+				availableHeight = containerHeight - headerHeight - footerHeight,
+				maxClassNormal = styles.GRID_ROW_MAX_HEIGHT_NORMAL, // e.g. max-h-[40px]
+				rowNormalHeight = parseInt(maxClassNormal.match(/\d+/)[0]);
+			
+			let pageSize = Math.floor(availableHeight / rowNormalHeight);
+			if (pageSize < 1) {
+				pageSize = 1;
 			}
 			return pageSize;
 		},
@@ -1159,6 +1157,7 @@ function GridComponent(props) {
 										toolbarItems={footerToolbarItemComponents}
 										disablePageSize={disablePageSize}
 										showMoreOnly={showMoreOnly}
+										{..._paginationToolbarProps}
 									/>;
 		} else if (footerToolbarItemComponents.length) {
 			listFooterComponent = <Toolbar>

package/src/Components/Grid/GridRow.js

@@ -92,8 +92,8 @@ function GridRow(props) {
 						justify-center
 						border-r-black-100
 						block
-						max-h-[40px]
-						overflow-scroll
+						overflow-auto
+						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
 					`;
 					if (isOnlyOneVisibleColumn) {
 						colClassName = ' w-full';
@@ -167,8 +167,9 @@ function GridRow(props) {
 									if (type.match(/(Tag|TagEditor|Json)$/)) {
 										elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
 									}
+									let cellProps = {};
 									if (config.getCellProps) {
-										_.assign(elementProps, config.getCellProps(item));
+										_.assign(cellProps, config.getCellProps(item));
 									}
 									let elementClassName = `
 										GridRow-Element
@@ -177,16 +178,19 @@ function GridRow(props) {
 										px-2
 										py-3
 										block
-										max-h-[40px]
 										overflow-scroll
 										${colClassName}
 										${styles.GRID_CELL_CLASSNAME}
+										${styles.GRID_ROW_MAX_HEIGHT_NORMAL}
 									`;
 									if (config.className) {
 										elementClassName += ' ' + config.className;
 									}
+									if (cellProps.className) {
+										elementClassName += ' ' + cellProps.className;
+									}
 									if (type.match(/(Tag|TagEditor)$/)) {
-										elementClassName += ' max-h-[80px]';
+										elementClassName += ' ' + styles.GRID_ROW_MAX_HEIGHT_EXTRA;
 									}
 									return <Element
 												{...testProps('cell-' + config.fieldName)}
@@ -232,14 +236,9 @@ function GridRow(props) {
 						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} 
+						${styles.GRID_CELL_CLASSNAME}
+						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
 					`;
 					if (config.className) {
 						textClassName += ' ' + config.className;

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

@@ -50,6 +50,7 @@ export default function withSelection(WrappedComponent) {
 			initialSelection = secondarySelection || secondaryDefaultSelection || [],
 			forceUpdate = useForceUpdate(),
 			secondarySelectionRef = useRef(initialSelection),
+			SecondaryRepositoryRef = useRef(SecondaryRepository),
 			[isReady, setIsReady] = useState(secondarySelection || false), // if secondarySelection is already defined, or secondaryValue is not null and we don't need to load repository, it's ready
 			secondarySetSelection = (secondarySelection) => {
 				if (_.isEqual(secondarySelection, secondaryGetSelection())) {
@@ -68,6 +69,9 @@ export default function withSelection(WrappedComponent) {
 			secondaryGetSelection = () => {
 				return secondarySelectionRef.current;
 			},
+			secondaryGetRepository = () => {
+				return SecondaryRepositoryRef.current;
+			},
 			secondarySelectPrev = () => {
 				secondarySelectDirection(SELECT_UP);
 			},
@@ -112,6 +116,7 @@ export default function withSelection(WrappedComponent) {
 				secondarySetSelection(newSelection);
 			},
 			secondaryRemoveFromSelection = (item) => {
+				const SecondaryRepository = secondaryGetRepository();
 				let newSelection = [];
 				if (SecondaryRepository) {
 					newSelection = _.remove(secondaryGetSelection(), (sel) => sel !== item);
@@ -132,7 +137,8 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(secondaryGetSelection(), (item) => item.id);
+					ids = _.map(secondaryGetSelection(), (item) => item.id),
+					SecondaryRepository = secondaryGetRepository();
 				_.each(ids, (id) => {
 					const found = SecondaryRepository.getById(id);
 					if (found) {
@@ -144,6 +150,7 @@ export default function withSelection(WrappedComponent) {
 			getMaxMinSelectionIndices = () => {
 				let items,
 					currentlySelectedRowIndices = [];
+				const SecondaryRepository = secondaryGetRepository();
 				if (SecondaryRepository) {
 					items = SecondaryRepository.getEntitiesOnPage();
 				} else {
@@ -194,6 +201,7 @@ export default function withSelection(WrappedComponent) {
 				secondarySetSelection(newSelection);
 			},
 			secondaryIsInSelection = (item) => {
+				const SecondaryRepository = secondaryGetRepository();
 				if (SecondaryRepository) {
 					return inArray(item, secondaryGetSelection());
 				}
@@ -204,6 +212,8 @@ export default function withSelection(WrappedComponent) {
 				return !!found;
 			},
 			getIndexOfSelectedItem = (item) => {
+				const SecondaryRepository = secondaryGetRepository();
+
 				// Gets ix of entity on page, or element in secondaryData array
 				if (SecondaryRepository) {
 					const entities = SecondaryRepository.getEntitiesOnPage();
@@ -223,12 +233,14 @@ export default function withSelection(WrappedComponent) {
 				if (!secondaryGetSelection()[0]) {
 					return null;
 				}
-				const secondaryValues = _.map(secondaryGetSelection(), (item) => {
-					if (SecondaryRepository) {
-						return item.id;
-					}
-					return item[secondaryIdIx];
-				});
+				const
+					SecondaryRepository = secondaryGetRepository(),
+					secondaryValues = _.map(secondaryGetSelection(), (item) => {
+						if (SecondaryRepository) {
+							return item.id;
+						}
+						return item[secondaryIdIx];
+					});
 				if (secondaryValues.length === 1) {
 					return secondaryValues[0];
 				}
@@ -239,6 +251,7 @@ export default function withSelection(WrappedComponent) {
 					return '';
 				}
 
+				const SecondaryRepository = secondaryGetRepository();
 				return _.map(secondarySelection, (item) => {
 							if (SecondaryRepository) {
 								return item.displayValue;
@@ -258,6 +271,7 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			conformSelectionToValue = async () => {
+				const SecondaryRepository = secondaryGetRepository();
 				let newSelection = [];
 				if (SecondaryRepository) {
 					if (SecondaryRepository.isLoading) {
@@ -325,6 +339,7 @@ export default function withSelection(WrappedComponent) {
 
 			(async () => {
 
+				const SecondaryRepository = secondaryGetRepository();
 				if (usesWithValue && SecondaryRepository?.isRemote 
 					&& !SecondaryRepository.isAutoLoad && !SecondaryRepository.isLoaded && !SecondaryRepository.isLoading && (!_.isNil(secondaryValue) || !_.isEmpty(secondarySelection)) || secondaryAutoSelectFirstItem) {
 					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 

package/src/Components/Hoc/withEditor.js

@@ -101,6 +101,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					onEditorClose();
 				}
 			},
+			setIsWaitModalShown = (bool) => {
+				const
+					dispatch = UiGlobals.redux?.dispatch,
+					setIsWaitModalShownAction = UiGlobals.debugReducer?.setIsWaitModalShownAction;
+				if (setIsWaitModalShownAction) {
+					console.log('withEditor:setIsWaitModalShownAction', bool);
+					dispatch(setIsWaitModalShownAction(bool));
+				}
+			},
 			setSelectionDecorated = (newSelection) => {
 				function doIt() {
 					setSelection(newSelection);
@@ -386,36 +395,66 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					return;
 				}
 
-				// check permissions for duplicate
-
 				const selection = getSelection();
 				if (selection.length !== 1) {
 					return;
 				}
+
 				if (useRemoteDuplicate) {
-					const results = await onRemoteDuplicate();
-					return results;
+					return await onRemoteDuplicate();
+				}
+
+				let isSuccess = false,
+					duplicateEntity;
+				try {
+					const
+						entity = selection[0],
+						idProperty = Repository.getSchema().model.idProperty,
+						rawValues = _.omit(entity.getOriginalData(), idProperty);
+					rawValues.id = null; // unset the id of the duplicate
+
+					setIsWaitModalShown(true);
+
+					duplicateEntity = await Repository.add(rawValues, false, true);
+					isSuccess = true;
+
+				} catch(err) {
+					// do nothing
+				} finally {
+					setIsWaitModalShown(false);
+				}
+
+				if (isSuccess) {
+					setIsIgnoreNextSelectionChange(true);
+					setSelection([duplicateEntity]);
+					setEditorMode(EDITOR_MODE__EDIT);
+					setIsEditorShown(true);
 				}
-				const
-					entity = selection[0],
-					idProperty = Repository.getSchema().model.idProperty,
-					rawValues = _.omit(entity.getOriginalData(), idProperty);
-				rawValues.id = null; // unset the id of the duplicate
-				const duplicate = await Repository.add(rawValues, false, true);
-				setIsIgnoreNextSelectionChange(true);
-				setSelection([duplicate]);
-				setEditorMode(EDITOR_MODE__EDIT);
-				setIsEditorShown(true);
 			},
 			onRemoteDuplicate = async () => {
-				const
-					selection = getSelection(),
-					entity = selection[0],
-					duplicateEntity = await Repository.remoteDuplicate(entity);
+				let isSuccess = false,
+					duplicateEntity;
+				try {
+					const
+						selection = getSelection(),
+						entity = selection[0];
+					
+					setIsWaitModalShown(true);
 
-				setIsIgnoreNextSelectionChange(true);
-				setSelection([duplicateEntity]);
-				doEdit();
+					duplicateEntity = await Repository.remoteDuplicate(entity);
+					isSuccess = true;
+					
+				} catch(err) {
+					// do nothing
+				} finally {
+					setIsWaitModalShown(false);
+				}
+				if (isSuccess) {
+					setIsIgnoreNextSelectionChange(true);
+					setSelection([duplicateEntity]);
+					doEdit();
+					return duplicateEntity;
+				}
 			},
 			doEditorSave = async (data, e) => {
 				let mode = getEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;

package/src/Components/Hoc/withFilters.js

@@ -654,7 +654,7 @@ export default function withFilters(WrappedComponent) {
 						<HStack className="withFilters-scrollViewContainer flex-1 items-center">
 							<ScrollView
 								ref={scrollViewRef}
-								className={`withFilters-ScrollView ${scrollViewClass}`}
+								className={`withFilters-ScrollView ${scrollViewClass} pb-1`}
 								horizontal={true}
 								contentContainerStyle={{ alignItems: 'center' }}
 								onContentSizeChange={onContentSizeChange}

package/src/Components/Hoc/withMultiSelection.js

@@ -5,8 +5,7 @@ import {
 
 export default function withMultiSelection(WrappedComponent) {
 	return forwardRef((props, ref) => {
-		const
-			{
+		const {
 				selectionMode = SELECTION_MODE_MULTI,
 			} = props;
 		return <WrappedComponent

package/src/Components/Hoc/withPdfButtons.js

@@ -141,6 +141,9 @@ export default function withPdfButtons(WrappedComponent) {
 					if (!_.isEmpty(items)) {
 						const defaults = item.defaults;
 						item.items = _.map(items, (item, ix) => {
+							if (!item){
+								return null;
+							}
 							return buildNextLayer(item, ix, defaults);
 						});
 					}

package/src/Components/Hoc/withSelection.js

@@ -48,6 +48,7 @@ export default function withSelection(WrappedComponent) {
 			initialSelection = selection || defaultSelection || [],
 			forceUpdate = useForceUpdate(),
 			selectionRef = useRef(initialSelection),
+			RepositoryRef = useRef(Repository),
 			[isReady, setIsReady] = useState(selection || false), // if selection is already defined, or value is not null and we don't need to load repository, it's ready
 			setSelection = (selection) => {
 				if (_.isEqual(selection, getSelection())) {
@@ -65,7 +66,10 @@ export default function withSelection(WrappedComponent) {
 			},
 			getSelection = () => {
 				return selectionRef.current;
-			}
+			},
+			getRepository = () => {
+				return RepositoryRef.current;
+			},
 			selectPrev = () => {
 				selectDirection(SELECT_UP);
 			},
@@ -110,6 +114,7 @@ export default function withSelection(WrappedComponent) {
 				setSelection(newSelection);
 			},
 			removeFromSelection = (item) => {
+				const Repository = getRepository();
 				let newSelection = [];
 				if (Repository) {
 					newSelection = _.remove(getSelection(), (sel) => sel !== item);
@@ -130,7 +135,8 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(getSelection(), (item) => item.id);
+					ids = _.map(getSelection(), (item) => item.id),
+					Repository = getRepository();
 				_.each(ids, (id) => {
 					const found = Repository.getById(id);
 					if (found) {
@@ -142,8 +148,11 @@ export default function withSelection(WrappedComponent) {
 			getMaxMinSelectionIndices = () => {
 				let items,
 					currentlySelectedRowIndices = [];
+				const Repository = getRepository();
 				if (Repository) {
-					items = Repository.getEntitiesOnPage();
+					if (!Repository.isDestroyed) {
+						items = Repository.getEntitiesOnPage();
+					}
 				} else {
 					items = data;
 				}
@@ -192,6 +201,7 @@ export default function withSelection(WrappedComponent) {
 				setSelection(newSelection);
 			},
 			isInSelection = (item) => {
+				const Repository = getRepository();
 				if (Repository) {
 					return inArray(item, getSelection());
 				}
@@ -202,10 +212,16 @@ export default function withSelection(WrappedComponent) {
 				return !!found;
 			},
 			getIndexOfSelectedItem = (item) => {
+				const Repository = getRepository();
+
 				// Gets ix of entity on page, or element in data array
 				if (Repository) {
-					const entities = Repository.getEntitiesOnPage();
-					return entities.indexOf(item);
+					if (!Repository.isDestroyed) {
+						const entities = Repository.getEntitiesOnPage();
+						return entities.indexOf(item);
+					} else {
+						return -1;
+					}
 				}
 				
 				let found;
@@ -221,12 +237,14 @@ export default function withSelection(WrappedComponent) {
 				if (!getSelection()[0]) {
 					return null;
 				}
-				const values = _.map(getSelection(), (item) => {
-					if (Repository) {
-						return item.id;
-					}
-					return item[idIx];
-				});
+				const
+					Repository = getRepository(),
+					values = _.map(getSelection(), (item) => {
+						if (Repository) {
+							return item.id;
+						}
+						return item[idIx];
+					});
 				if (values.length === 1) {
 					return values[0];
 				}
@@ -237,6 +255,7 @@ export default function withSelection(WrappedComponent) {
 					return '';
 				}
 
+				const Repository = getRepository();
 				return _.map(selection, (item) => {
 							if (Repository) {
 								return item.displayValue;
@@ -256,30 +275,33 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			conformSelectionToValue = async () => {
+				const Repository = getRepository();
 				let newSelection = [];
 				if (Repository) {
-					if (Repository.isLoading) {
-						await Repository.waitUntilDoneLoading();
-					}
-					// Get entity or entities that match value
-					if ((_.isArray(value) && !_.isEmpty(value)) || !!value) {
-						if (_.isArray(value)) {
-							newSelection = Repository.getBy((entity) => inArray(entity.id, value));
-						} else {
-							let found = Repository.getById(value);
-							if (found) {
-								newSelection.push(found);
-							// } else if (Repository?.isRemote && Repository?.entities.length) {
-
-							// 	// Value cannot be found in Repository, but actually exists on server
-							// 	// Try to get this value from the server directly
-							// 	Repository.filter(Repository.schema.model.idProperty, value);
-							// 	await Repository.load();
-							// 	found = Repository.getById(value);
-							// 	if (found) {
-							// 		newSelection.push(found);
-							// 	}
-
+					if (!Repository.isDestroyed) {
+						if (Repository.isLoading) {
+							await Repository.waitUntilDoneLoading();
+						}
+						// Get entity or entities that match value
+						if ((_.isArray(value) && !_.isEmpty(value)) || !!value) {
+							if (_.isArray(value)) {
+								newSelection = Repository.getBy((entity) => inArray(entity.id, value));
+							} else {
+								let found = Repository.getById(value);
+								if (found) {
+									newSelection.push(found);
+								// } else if (Repository?.isRemote && Repository?.entities.length) {
+	
+								// 	// Value cannot be found in Repository, but actually exists on server
+								// 	// Try to get this value from the server directly
+								// 	Repository.filter(Repository.schema.model.idProperty, value);
+								// 	await Repository.load();
+								// 	found = Repository.getById(value);
+								// 	if (found) {
+								// 		newSelection.push(found);
+								// 	}
+	
+								}
 							}
 						}
 					}
@@ -312,6 +334,9 @@ export default function withSelection(WrappedComponent) {
 
 		if (Repository) {
 			useEffect(() => {
+				if (Repository.isDestroyed) {
+					return null;
+				}
 				Repository.on('load', refreshSelection);
 				return () => {
 					Repository.off('load', refreshSelection);
@@ -323,6 +348,7 @@ export default function withSelection(WrappedComponent) {
 
 			(async () => {
 
+				const Repository = getRepository();
 				if (usesWithValue && Repository?.isRemote 
 					&& !Repository.isAutoLoad && !Repository.isLoaded && !Repository.isLoading && (!_.isNil(value) || !_.isEmpty(selection)) || autoSelectFirstItem) {
 					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 
@@ -341,8 +367,10 @@ export default function withSelection(WrappedComponent) {
 				} else if (autoSelectFirstItem) {
 					let newSelection = [];
 					if (Repository) {
-						const entitiesOnPage = Repository.getEntitiesOnPage();
-						newSelection = entitiesOnPage[0] ? [entitiesOnPage[0]] : [];
+						if (!Repository.isDestroyed) {
+							const entitiesOnPage = Repository.getEntitiesOnPage();
+							newSelection = entitiesOnPage[0] ? [entitiesOnPage[0]] : [];
+						}
 					} else {
 						newSelection = data[0] ? [data[0]] : [];
 					}

package/src/Components/Hoc/withTooltip.js

@@ -10,6 +10,7 @@ export default function withTooltip(WrappedComponent) {
 		const {
 				tooltip,
 				tooltipPlacement = 'bottom',
+				tooltipClassName,
 				_tooltip = {},
 				...propsToPass
 			} = props;
@@ -17,7 +18,12 @@ export default function withTooltip(WrappedComponent) {
 		let component = <WrappedComponent {...propsToPass} ref={ref} />;
 
 		if (tooltip || !_.isEmpty(_tooltip)) {
-			component = <Tooltip label={tooltip} placement={tooltipPlacement} {..._tooltip}>
+			component = <Tooltip
+							label={tooltip}
+							placement={tooltipPlacement}
+							className={tooltipClassName}
+							{..._tooltip}
+						>
 							{component}
 						</Tooltip>;
 		}