@onehat/ui 0.4.14 → 0.4.15

package/package.json

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

package/src/Components/Form/Field/Tag/Tag.js

@@ -291,7 +291,7 @@ function TagComponent(props) {
 	if (minimizeForRow) {
 		if (isViewOnly) {
 			// combo is not shown, so allow valueBoxes to take up more space
-			valueBoxesClassName += ' h-auto min-h-[50px] max-h-[50px] overflow-auto flex-1';
+			valueBoxesClassName += ' min-h-[25px] h-full overflow-auto flex-1';
 		} else {
 			// shrink both down
 			valueBoxesClassName += ' h-auto min-h-[25px] max-h-[25px] overflow-auto flex-1';

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -38,7 +38,11 @@ export default function ValueBox(props) {
 						className: 'text-grey-600',
 					}}
 					onPress={onView}
-					className="ValueBox-eyeBtn h-full"
+					className={`
+						ValueBox-eyeBtn
+						h-full
+						${styles.FORM_TAG_BTN_CLASSNAME}
+					`}
 				/>
 				<Text
 					className={`
@@ -57,7 +61,11 @@ export default function ValueBox(props) {
 							className: 'text-grey-600',
 						}}
 						onPress={onDelete}
-						className="ValueBox-xBtn h-full"
+						className={`
+							ValueBox-xBtn
+							h-full
+							${styles.FORM_TAG_BTN_CLASSNAME}
+						`}
 					/>}
 			</HStackNative>;
 }

package/src/Components/Grid/Grid.js

@@ -489,7 +489,7 @@ function GridComponent(props) {
 												showColumnsSelector={showColumnsSelector}
 											/>;
 							if (showRowExpander) {
-								// align the header row to content rows
+								// align the header row to content rows by adding a spacer that matches the width of the Grid-rowExpander-expandBtn
 								headerRow = <HStack className="">
 												<Box className="w-[40px]"></Box>
 												{headerRow}
@@ -602,7 +602,10 @@ function GridComponent(props) {
 											_icon={{
 												size: 'sm',
 											}}
-											className="Grid-rowExpander-expandBtn py-0"
+											className={`
+												Grid-rowExpander-expandBtn
+												${styles.GRID_EXPAND_BTN_CLASSNAME}
+											`}
 											tooltip="Expand/Contract Row"
 										/>
 										{rowComponent}
@@ -943,7 +946,8 @@ function GridComponent(props) {
 			// second call -- do other necessary setup
 
 			
-			let localColumnsConfig = [],
+			let columnsConfigVariable = columnsConfig,
+				localColumnsConfig = [],
 				savedLocalColumnsConfig,
 				calculateLocalColumnsConfig = false;
 			if (localColumnsConfigKey && !UiGlobals.disableSavedColumnsConfig) {
@@ -954,7 +958,10 @@ function GridComponent(props) {
 				calculateLocalColumnsConfig = true;
 			}
 			if (calculateLocalColumnsConfig) {
-				if (_.isEmpty(columnsConfig)) {
+				if (_.isFunction(columnsConfigVariable)) {
+					columnsConfigVariable = columnsConfigVariable();
+				}
+				if (_.isEmpty(columnsConfigVariable)) {
 					if (Repository) {
 						// create a column for the displayProperty
 						localColumnsConfig.push({
@@ -966,7 +973,7 @@ function GridComponent(props) {
 						});
 					}
 				} else {
-					_.each(columnsConfig, (columnConfig) => {
+					_.each(columnsConfigVariable, (columnConfig) => {
 						if (!_.isPlainObject(columnConfig)) {
 							localColumnsConfig.push(columnConfig);
 							return;

package/src/Components/Grid/GridRow.js

@@ -90,7 +90,6 @@ function GridRow(props) {
 						p-1
 						justify-center
 						border-r-black-100
-						mr-1
 					`;
 					if (isOnlyOneVisibleColumn) {
 						colClassName = ' w-full';

package/src/Components/Hoc/withContextMenu.js

@@ -3,14 +3,11 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import UiGlobals from '../../UiGlobals.js';
 import Button from '../Buttons/Button.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
-const
-	CONTEXT_MENU_WIDTH = 180,
-	CONTEXT_MENU_ITEM_HEIGHT = 30;
-
 export default function withContextMenu(WrappedComponent) {
 	return forwardRef((props, ref) => {
 		const {
@@ -30,6 +27,7 @@ export default function withContextMenu(WrappedComponent) {
 				isModalShown,
 				whichModal,
 			} = props,
+			styles = UiGlobals.styles,
 			[doShowContextMenu, setDoShowContextMenu] = useState(false),
 			[left, setLeft] = useState(0),
 			[top, setTop] = useState(0),
@@ -133,16 +131,16 @@ export default function withContextMenu(WrappedComponent) {
 				screenHeight = window.innerHeight;
 			let l = left,
 				t = top;
-			if (screenWidth - CONTEXT_MENU_WIDTH < l) {
-				l = screenWidth - CONTEXT_MENU_WIDTH;
+			if (screenWidth - styles.CONTEXT_MENU_WIDTH < l) {
+				l = screenWidth - styles.CONTEXT_MENU_WIDTH;
 			}
-			if (screenHeight - (contextMenuItemComponents.length * CONTEXT_MENU_ITEM_HEIGHT) < t) {
-				t = screenHeight - (contextMenuItemComponents.length * CONTEXT_MENU_ITEM_HEIGHT);
+			if (screenHeight - (contextMenuItemComponents.length * styles.CONTEXT_MENU_ITEM_HEIGHT) < t) {
+				t = screenHeight - (contextMenuItemComponents.length * styles.CONTEXT_MENU_ITEM_HEIGHT);
 			}
 			const style = {
 				left: l,
 				top: t,
-				width: CONTEXT_MENU_WIDTH,
+				width: styles.CONTEXT_MENU_WIDTH,
 			};
 
 			showModal({

package/src/Components/Viewer/Viewer.js

@@ -183,7 +183,7 @@ function Viewer(props) {
 					return buildFromItem(item, ix, {...defaults, ...itemDefaults});
 				});
 
-				let elementClassName = '';
+				let elementClassName = 'Viewer-ElementFromItem';
 				const defaultsClassName = defaults.className;
 				if (defaultsClassName) {
 					elementClassName += ' ' + defaultsClassName;
@@ -234,7 +234,7 @@ function Viewer(props) {
 				}
 			}
 
-			let elementClassName = 'field-' + name;
+			let elementClassName = 'Viewer-field-' + name;
 			const defaultsClassName = defaults.className;
 			if (defaultsClassName) {
 				elementClassName += ' ' + defaultsClassName;
@@ -260,7 +260,7 @@ function Viewer(props) {
 							/>;
 
 			if (item.additionalViewButtons) {
-				element = <HStack className="flex-wrap">
+				element = <HStack className="Viewer-HStack1 flex-wrap">
 								{element}
 								{buildAdditionalButtons(item.additionalViewButtons, self)}
 							</HStack>;
@@ -275,18 +275,18 @@ function Viewer(props) {
 					style.width = '50px';
 				}
 				if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-					element = <HStack className="HStackA py-1">
+					element = <HStack className="Viewer-HStack2 py-1 w-full">
 									<Label style={style}>{label}</Label>
 									{element}
 								</HStack>;
 				} else {
-					element = <VStack className="HStackA w-full py-1 mt-3">
+					element = <VStack className="Viewer-HStack3 w-full py-1 mt-3">
 									<Label style={style}>{label}</Label>
 									{element}
 								</VStack>;
 				}
 			}
-			return <HStack key={ix} className="HStackB px-2 pb-1">{element}</HStack>;
+			return <HStack key={ix} className="Viewer-HStack4 px-2 pb-1">{element}</HStack>;
 		},
 		buildAncillary = () => {
 			const components = [];
@@ -304,6 +304,10 @@ function Viewer(props) {
 					if (type.match(/Grid/) && !itemPropsToPass.h) {
 						itemPropsToPass.h = 400;
 					}
+					let className = 'Viewer-ancillary-' + type;
+					if (itemPropsToPass.className) {
+						className += ' ' + itemPropsToPass.className;
+					}
 
 					const
 						Element = getComponentFromType(type),
@@ -317,6 +321,7 @@ function Viewer(props) {
 										uniqueRepository={true}
 										parent={self}
 										{...itemPropsToPass}
+										className={className}
 										canRowsReorder={false}
 									/>;
 					if (title) {
@@ -362,6 +367,10 @@ function Viewer(props) {
 		canEdit = false;
 	}
 
+	const style = props.style || {};
+	if (!hasWidth(props) && !hasFlex(props)) {
+		style.flex = 1;
+	}
 	let className = `
 		Viewer-VStackNative
 		h-full
@@ -373,8 +382,9 @@ function Viewer(props) {
 
 	return <VStackNative
 				{...testProps(self)}
-				className={className}
+				style={style}
 				onLayout={onLayout}
+				className={className}
 			>
 				{containerWidth && <>
 

package/src/Constants/Styles.js

@@ -9,6 +9,8 @@ const
 
 const defaults = {
 	ATTACHMENTS_MAX_FILESIZE: 1024 * 1024 * 5, // 5MB
+	CONTEXT_MENU_WIDTH: 180,
+	CONTEXT_MENU_ITEM_HEIGHT: 30,
 	DEFAULT_WINDOW_WIDTH: 900,
 	DEFAULT_WINDOW_HEIGHT: 800,
 	FILTER_LABEL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
@@ -51,6 +53,7 @@ const defaults = {
 	FORM_TAG_CLASSNAME: '',
 	FORM_TAG_VALUEBOX_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
 	FORM_TAG_VALUEBOX_ICON_SIZE: 'sm',
+	FORM_TAG_BTN_CLASSNAME: '',
 	FORM_TEXT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
 	FORM_TEXTAREA_CLASSNAME: 'bg-' + WHITE + ' ' +
 							'text-' + DEFAULT_FONTSIZE + ' ' +
@@ -63,6 +66,7 @@ const defaults = {
 	FORM_ONE_COLUMN_THRESHOLD: 900, // only allow one column in form unless form is wider than this
 	FORM_STACK_ROW_THRESHOLD: 400, // stack labels & fields if row is less than this width
 	GRID_CELL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
+	GRID_EXPAND_BTN_CLASSNAME: '',
 	GRID_HEADER_PRESSABLE_CLASSNAME: 'bg-[#eee] ' +
 									'hover:bg-[#ddd]',
 	GRID_HEADER_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,