@onehat/ui 0.4.107 → 0.4.108

package/package.json

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

package/src/Components/Container/Container.js

@@ -424,6 +424,8 @@ function Container(props) {
 
 	componentProps._panel.isCollapsible = false;
 	componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps.isCollapsible = false;
+	componentProps.isDisabled = isDisabled || isComponentsDisabled;
 	componentProps.onLayout = debouncedOnLayout;
 	centerComponent = cloneElement(center, componentProps);
 	if (north) {
@@ -432,9 +434,11 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (north.props.className || '');
+		componentProps.isDisabled = !!north.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (north.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
-			if (height && height !== northHeight) {
+			if (height && height !== getNorthHeight()) {
 				setNorthHeight(height);
 			}
 		};
@@ -453,6 +457,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = VERTICAL;
 		componentProps._panel.isCollapsed = getNorthIsCollapsed();
 		componentProps._panel.setIsCollapsed = setNorthIsCollapsed;
+		componentProps.collapseDirection = VERTICAL;
+		componentProps.isCollapsed = getNorthIsCollapsed();
+		componentProps.setIsCollapsed = setNorthIsCollapsed;
 		if (isWeb && northIsResizable) {
 			northSplitter = <Splitter
 								mode={VERTICAL}
@@ -470,6 +477,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (south.props.className || '');
+		componentProps.isDisabled = !!south.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (south.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== getSouthHeight()) {
@@ -491,6 +500,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = VERTICAL;
 		componentProps._panel.isCollapsed = getSouthIsCollapsed();
 		componentProps._panel.setIsCollapsed = setSouthIsCollapsed;
+		componentProps.collapseDirection = VERTICAL;
+		componentProps.isCollapsed = getSouthIsCollapsed();
+		componentProps.setIsCollapsed = setSouthIsCollapsed;
 		if (isWeb && southIsResizable) {
 			southSplitter = <Splitter
 								mode={VERTICAL}
@@ -508,6 +520,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (east.props.className || '');
+		componentProps.isDisabled = !!east.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (east.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getEastWidth()) {
@@ -529,6 +543,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = HORIZONTAL;
 		componentProps._panel.isCollapsed = getEastIsCollapsed();
 		componentProps._panel.setIsCollapsed = setEastIsCollapsed;
+		componentProps.collapseDirection = HORIZONTAL;
+		componentProps.isCollapsed = getEastIsCollapsed();
+		componentProps.setIsCollapsed = setEastIsCollapsed;
 		if (isWeb && eastIsResizable) {
 			eastSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -546,6 +563,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (west.props.className || '');
+		componentProps.isDisabled = !!west.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (west.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getWestWidth()) {
@@ -567,6 +586,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = HORIZONTAL;
 		componentProps._panel.isCollapsed = getWestIsCollapsed();
 		componentProps._panel.setIsCollapsed = setWestIsCollapsed;
+		componentProps.collapseDirection = HORIZONTAL;
+		componentProps.isCollapsed = getWestIsCollapsed();
+		componentProps.setIsCollapsed = setWestIsCollapsed;
 		if (isWeb && westIsResizable) {
 			westSplitter = <Splitter
 								mode={HORIZONTAL}

package/src/Components/Grid/GridRow.js

@@ -375,9 +375,11 @@ const GridRow = forwardRef((props, ref) => {
 					// TODO: incorporate better scrollbar formatting with
 					// tailwind plugin 'tailwind-scrollbar' (already installed, just not yet used here)
 
+					const isEmptyCellValue = _.isNil(value) || value === '';
+
 					let textClassName = clsx(
 						'GridRow-TextNative',
-						'self-center',
+						isEmptyCellValue ? 'self-stretch' : 'self-center', // if the cell value is empty, stretch the cell to be full height
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 						'[&::-webkit-scrollbar]:h-2',
 						'[&::-webkit-scrollbar-thumb]:bg-gray-300',
@@ -386,6 +388,14 @@ const GridRow = forwardRef((props, ref) => {
 						styles.GRID_CELL_CLASSNAME,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
+					const textStyle = {
+						// userSelect: 'none',
+						...colStyle,
+						...(isEmptyCellValue ? { // if the cell value is empty, stretch the cell to be full height
+							height: '100%',
+							display: 'block',
+						} : {}),
+					};
 					if (rowProps?._cell?.className) {
 						textClassName += ' ' + rowProps._cell.className;
 					}
@@ -395,16 +405,13 @@ const GridRow = forwardRef((props, ref) => {
 					return <TextNative
 								{...testProps('cell-' + config.fieldName)}
 								key={key}
-								style={{
-									// userSelect: 'none',
-									...colStyle,
-								}}
+								style={textStyle}
 								numberOfLines={1}
 								ellipsizeMode="head"
 								className={textClassName}
 								{...elementProps}
 								{...propsToPass}
-							>{value}</TextNative>;
+							>{isEmptyCellValue ? ' ' : value}</TextNative>;
 				});
 			} else {
 				// TODO: if 'columnsConfig' is an object, parse its contents

package/src/Components/Hoc/withEditor.js

@@ -36,6 +36,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
+				enableMultiDelete = false, // deleting multiple records at once is opt-in only
 				disableDuplicate = false,
 				disableView = false,
 				useRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
@@ -441,7 +442,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					cb = args;
 				}
 				const selection = getSelection();
-				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
+				const hasTreeSelection = isTree || _.some(selection, (selected) => !!selected?.isTree);
+				if (
+					_.isEmpty(selection) ||
+					(_.isArray(selection) && (
+						selection[0]?.isDestroyed ||
+						(selection.length > 1 && (!enableMultiDelete || hasTreeSelection))
+					))
+				) {
 					return;
 				}
 				if (onBeforeDelete) {
@@ -461,11 +469,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				const
 					isSingle = selection.length === 1,
 					firstSelection = selection[0],
-					isTree = firstSelection?.isTree,
-					hasChildren = isTree ? firstSelection?.hasChildren : false,
+					isTreeNode = firstSelection?.isTree,
+					hasChildren = isTreeNode ? firstSelection?.hasChildren : false,
 					isPhantom = firstSelection?.isPhantom;
 
-				if (isSingle && isTree && hasChildren) {
+				if (isSingle && isTreeNode && hasChildren) {
 					alert({
 						title: 'Move up children?',
 						message: 'The node you have selected for deletion has children. ' + 
@@ -1022,6 +1030,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditor={true}
 					userCanEdit={userCanEdit}
 					userCanView={userCanView}
+					enableMultiDelete={enableMultiDelete}
 					disableAdd={disableAdd || isEditorDisabledByParent || isCrudBlockedByInheritedView}
 					disableEdit={disableEdit || isEditorDisabledByParent || isCrudBlockedByInheritedView}
 					disableDelete={disableDelete || isEditorDisabledByParent || isCrudBlockedByInheritedView}

package/src/Components/Hoc/withFilters.js

@@ -97,7 +97,7 @@ export default function withFilters(WrappedComponent) {
 					
 					let title, type;
 					if (propertyDef) {
-						title = propertyDef.title;
+						title = propertyDef.filterTitle || propertyDef.title;
 						type = propertyDef.filterType;
 					} else if (modelAncillaryFilters[field]) {
 						const ancillaryFilter = modelFilterTypes[field];
@@ -262,7 +262,7 @@ export default function withFilters(WrappedComponent) {
 						
 					if (!title) {
 						const propertyDef = Repository.getSchema().getPropertyDefinition(field);
-						title = propertyDef?.title;
+						title = propertyDef?.filterTitle || propertyDef?.title;
 					}
 
 					if (_.isString(filterType)) {
@@ -398,7 +398,10 @@ export default function withFilters(WrappedComponent) {
 
 						// basic property filter
 						const propertyDef = Repository.getSchema().getPropertyDefinition(filterField);
-						data.push([ filterField, propertyDef?.title ]);
+						if (propertyDef?.isFilteringDisabled) {
+							return;
+						}
+						data.push([ filterField, propertyDef?.filterTitle || propertyDef?.title ]);
 					});
 
 					// sort by title

package/src/Components/Hoc/withPdfButtons.js

@@ -179,7 +179,7 @@ export default function withPdfButtons(WrappedComponent) {
 					type: 'Checkbox',
 					name,
 					title: resolvedTitle,
-					isEditable: false, // hack to force all checkboxes to use same render branch in Form
+					label: resolvedTitle,
 				};
 			},
 			buildValidator = () => {
@@ -228,6 +228,7 @@ export default function withPdfButtons(WrappedComponent) {
 								parent={self}
 								reference="chooseFieldsForm"
 								editorType={EDITOR_TYPE__PLAIN}
+								checkIsEditingDisabled={false /* hack so layout looks right */}
 								alert={alert}
 								columnDefaults={{
 									labelWidth: '100px',

package/src/Components/Hoc/withPresetButtons.js

@@ -75,6 +75,7 @@ export default function withPresetButtons(WrappedComponent) {
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
 				disableDelete = !isEditor,
+				enableMultiDelete = false,
 				disableView = isTree,
 				disableCopy = isTree,
 				disableDuplicate = !isEditor,
@@ -300,7 +301,7 @@ export default function withPresetButtons(WrappedComponent) {
 						icon = Trash;
 						if (isNoSelectorSelected() ||
 							isEmptySelection() ||
-							isMultiSelection() ||
+							(isMultiSelection() && (!enableMultiDelete || isTree)) ||
 							isProtectedValue() ||
 							(canRecordBeDeleted && !canRecordBeDeleted(selection))
 						) {

package/src/Components/Layout/ScreenHeader.js

@@ -22,6 +22,7 @@ function ScreenHeader(props) {
 	const {
 			title,
 			icon,
+			additionalButtons,
 			info,
 			_info = {},
 			useModeIcons = false,
@@ -88,6 +89,7 @@ function ScreenHeader(props) {
 							tooltip="To side editor"
 						/>
 					</>}
+				{additionalButtons}
 				{info && 
 					<IconButton
 						{...testProps('infoBtn')}