@onehat/ui 0.4.13 → 0.4.15

package/src/Components/Form/Form.js

@@ -646,7 +646,7 @@ function Form(props) {
 					}
 					if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
 						if (!style.width) {
-							style.width = '100px';
+							style.width = '120px';
 						}
 						element = <HStack className="Form-HStack1 w-full py-1">
 										<Label style={style}>{label}</Label>
@@ -812,7 +812,15 @@ function Form(props) {
 									isRequired = true;
 								}
 								if (isRequired) {
-									requiredIndicator = <Text className="text-[#f00] text-[30px] pr-1">*</Text>;
+									requiredIndicator = <Text
+															className={`
+																Form-requiredIndicator
+																self-center
+																text-[#f00]
+																text-[30px]
+																pr-1
+															`}
+														>*</Text>;
 								}
 							}
 							if (!disableLabels && label && editorType !== EDITOR_TYPE__INLINE) {
@@ -822,15 +830,21 @@ function Form(props) {
 								}
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
 									if (!style.width) {
-										style.width = '100px';
+										style.width = '120px';
 									}
 									element = <HStack className="Form-HStack8 w-full">
-								 					<Label style={style}>{requiredIndicator}{label}</Label>
+								 					<Label style={style}>
+														{requiredIndicator}
+														{label}
+													</Label>
 													{element}
 								 				</HStack>;
 								} else {
 									element = <VStack className="Form-VStack9 w-full mt-3">
-													<Label style={style}>{requiredIndicator}{label}</Label>
+													<Label style={style}>
+														{requiredIndicator}
+														{label}
+													</Label>
 													{element}
 												</VStack>;
 								}
@@ -907,7 +921,7 @@ function Form(props) {
 									className={`
 										Form-Ancillary-Title
 										font-bold
-										${styles.FORM_ANCILLARY_TITLE_FONTSIZE}
+										${styles.FORM_ANCILLARY_TITLE_CLASSNAME}
 									`}
 								>{title}</Text>;
 					}
@@ -916,7 +930,7 @@ function Form(props) {
 										className={`
 											Form-Ancillary-Description
 											italic
-											${styles.FORM_ANCILLARY_DESCRIPTION_FONTSIZE}
+											${styles.FORM_ANCILLARY_DESCRIPTION_CLASSNAME}
 										`}
 									>{description}</Text>;
 					}
@@ -1280,8 +1294,7 @@ function Form(props) {
 							justify-center
 							items-center
 							rounded-b-lg
-							bg-red-500
-							${styles.GRID_INLINE_EDITOR_BG}
+							bg-primary-700
 						`}
 					>{footerButtons}</HStack>
 				</Box>;

package/src/Components/Form/Label.js

@@ -16,8 +16,9 @@ export default function Label(props) {
 	}
 	let textClassName = `
 		Label-TextNative
+		flex
 		text-ellipsis
-		${styles.FORM_LABEL_FONTSIZE}
+		${styles.FORM_LABEL_CLASSNAME}
 	`;
 	if (props._text?.className) {
 		textClassName += ' ' + props._text.className;

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/GridHeaderRow.js

@@ -363,8 +363,7 @@ export default function GridHeaderRow(props) {
 									items-center
 									justify-center
 									${rowClassName}
-									${styles.GRID_HEADER_BG}
-									${styles.GRID_HEADER_BG_HOVER}
+									${styles.GRID_HEADER_PRESSABLE_CLASSNAME}
 								`}
 								style={rowStyle}
 							>
@@ -404,9 +403,9 @@ export default function GridHeaderRow(props) {
 										text-center
 										overflow-hidden
 										text-ellipsis
-										${styles.GRID_HEADER_FONTSIZE}
-										${styles.GRID_HEADER_CELL_PX}
-										${styles.GRID_HEADER_CELL_PY}
+										px-2
+										py-3
+										${styles.GRID_HEADER_CLASSNAME}
 									`}
 								>{header}</TextNative>
 								
@@ -419,8 +418,7 @@ export default function GridHeaderRow(props) {
 											GridHeaderRow-Icon
 											text-center
 											text-grey-500
-											${styles.GRID_HEADER_ICON_MT}
-											${styles.GRID_HEADER_ICON_MR}
+											${styles.GRID_HEADER_ICON_CLASSNAME}
 										`} />}
 								
 								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 

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';
@@ -180,10 +179,10 @@ function GridRow(props) {
 													GridRow-Element
 													self-center
 													text-ellipsis
+													px-2
+													py-3
 													${colClassName}
-													${styles.GRID_CELL_FONTSIZE}
-													${styles.GRID_CELL_PX}
-													${styles.GRID_CELL_PY}
+													${styles.GRID_CELL_CLASSNAME}
 												`}
 												numberOfLines={1}
 												ellipsizeMode="head"
@@ -228,8 +227,11 @@ function GridRow(props) {
 									self-center
 									overflow-hidden
 									text-ellipsis
+									truncate
+									whitespace-nowrap
+									overflow-hidden
 									${colClassName}
-									${styles.GRID_CELL_FONTSIZE} 
+									${styles.GRID_CELL_CLASSNAME} 
 									${styles.GRID_CELL_PX} 
 									${styles.GRID_CELL_PY} 
 								`}
@@ -278,7 +280,7 @@ function GridRow(props) {
 			rowContents = <HStack
 								ref={dragSourceRef}
 								className={`
-									dragSourceRef
+									GridRow-dragSourceRef
 									w-full
 									flex-1
 									grow-1
@@ -292,7 +294,7 @@ function GridRow(props) {
 			rowContents = <HStack
 								ref={dropTargetRef}
 								className={`
-									dropTargetRef
+									GridRow-dropTargetRef
 									w-full
 									flex-1
 									grow-1

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/Hoc/withFilters.js

@@ -313,7 +313,7 @@ export default function withFilters(WrappedComponent) {
 											<Label
 												className="min-w-0 mr-1"
 												_text={{
-													className: UiGlobals.styles.FILTER_LABEL_FONTSIZE,
+													className: UiGlobals.styles.FILTER_LABEL_CLASSNAME,
 												}}
 											>{title}</Label>
 											{filterElement}

package/src/Components/Layout/Footer.js

@@ -13,7 +13,7 @@ export default function Footer(props) {
 		self-end
 		p-2
 		border-t-2
-		${styles.PANEL_FOOTER_BORDER_TOP_COLOR}
+		${styles.PANEL_FOOTER_CLASSNAME}
 	`;
 	if (props.className) {
 		className += ' ' + props.className

package/src/Components/Panel/Header.js

@@ -55,7 +55,7 @@ export default function Header(props) {
 						icon={Xmark}
 						_icon={{
 							// size: styles.PANEL_HEADER_ICON_SIZE,
-							className: styles.PANEL_HEADER_ICON_COLOR,
+							className: styles.PANEL_HEADER_ICON_CLASSNAME,
 						}}
 						className={closeClassName}
 					/>;
@@ -76,7 +76,7 @@ export default function Header(props) {
 						icon={isCollapsed ? Plus : Minus}
 						_icon={{
 							size: styles.PANEL_HEADER_ICON_SIZE,
-							className: styles.PANEL_HEADER_ICON_COLOR,
+							className: styles.PANEL_HEADER_ICON_CLASSNAME,
 						}}
 						className={collapseClassName}
 					/>;
@@ -131,8 +131,7 @@ export default function Header(props) {
 											Header-TextNative1
 											flex-1
 											font-bold
-											${styles.PANEL_HEADER_TEXT_COLOR}
-											${styles.PANEL_HEADER_TEXT_FONTSIZE}
+											${styles.PANEL_HEADER_TEXT_CLASSNAME}
 										`}>{title}</TextNative>
 								</div>
 							</VStack>
@@ -169,8 +168,7 @@ export default function Header(props) {
 								Header-TextNative2
 								flex-1
 								font-bold
-								${styles.PANEL_HEADER_TEXT_COLOR}
-								${styles.PANEL_HEADER_TEXT_FONTSIZE}
+								${styles.PANEL_HEADER_TEXT_CLASSNAME}
 							`}
 						>{title}</TextNative>
 						{collapseBtn}
@@ -211,8 +209,7 @@ export default function Header(props) {
 											font-bold
 											w-[200px]
 											text-right
-											${styles.PANEL_HEADER_TEXT_COLOR}
-											${styles.PANEL_HEADER_TEXT_FONTSIZE}
+											${styles.PANEL_HEADER_TEXT_CLASSNAME}
 										`}
 									>{title}</TextNative>
 								</VStack>
@@ -246,8 +243,7 @@ export default function Header(props) {
 								Header-TextNative4
 								font-bold
 								flex-1
-								${styles.PANEL_HEADER_TEXT_COLOR}
-								${styles.PANEL_HEADER_TEXT_FONTSIZE}
+								${styles.PANEL_HEADER_TEXT_CLASSNAME}
 							`}>{title}</TextNative>
 						{collapseBtn}
 					</HStack>

package/src/Components/Tab/TabBar.js

@@ -155,10 +155,10 @@ function TabBar(props) {
 				buttonProps = {
 					className: `
 						${styles.TAB_BG}
+						${isCollapsed ? 'justify-center' : 'justify-start'}
 						${styles.TAB_BG_HOVER}
 						${styles.TAB_BG_ACTIVE}
 						${styles.TAB_BG_DISABLED}
-						${isCollapsed ? 'justify-center' : 'justify-start'}
 					`,
 				},
 				textProps = {
@@ -496,10 +496,10 @@ function TabBar(props) {
 					className={`
 						${isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]'}
 						${isCollapsed ? 'pl-1' : 'pl-4'}
-						${styles.TAB_BAR_BG}
 						items-center
 						justify-start
 						py-2
+						${styles.TAB_BAR_CLASSNAME}
 					`}
 				>
 					{renderedTabs}
@@ -521,11 +521,11 @@ function TabBar(props) {
 					{...testProps('TabBar')}
 					className={`
 						${isCollapsed ? 'h-[38px]' : 'h-[' + tabHeight + 'px]'}
-						${styles.TAB_BAR_BG}
 						items-center
 						justify-start
 						p-1
 						pb-0
+						${styles.TAB_BAR_CLASSNAME}
 					`}
 				>
 					<ScrollView

package/src/Components/Toolbar/Toolbar.js

@@ -20,7 +20,7 @@ export default function Toolbar(props) {
 		border-b
 		border-solid
 		border-b-grey-400
-		${styles.TOOLBAR_BG}
+		${styles.TOOLBAR_CLASSNAME}
 	`;
 	if (props.className) {
 		className += ' ' + props.className

package/src/Components/Tree/TreeNode.js

@@ -65,7 +65,7 @@ export default function TreeNode(props) {
 		}
 
 		let className = `
-			treenode
+			TreeNode
 			items-center
 			flex
 			flex-1
@@ -101,15 +101,13 @@ export default function TreeNode(props) {
 						ellipsizeMode="head"
 						// {...propsToPass}
 						className={`
-							treenode-text
+							TreeNode-TextNative
 							self-center
 							overflow-hidden
 							flex
 							flex-1
 							text-ellipsis
-							${styles.TREE_NODE_PY}
-							${styles.TREE_NODE_PX}
-							${styles.TREE_NODE_FONTSIZE}
+							${styles.TREE_NODE_CLASSNAME}
 						`}
 						style={{ userSelect: 'none', }}
 					>{text}</TextNative>

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 && <>