@onehat/ui 0.4.9 → 0.4.11

package/package.json

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

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

@@ -55,6 +55,7 @@ export function ComboComponent(props) {
 			isEditor = false,
 			isDisabled = false,
 			isInTag = false,
+			minimizeForRow = false,
 			tooltipPlacement = 'bottom',
 			placeholder,
 			onRowPress,
@@ -542,28 +543,29 @@ export function ComboComponent(props) {
 						`}
 					/>;
 	}
+	const triggerClassName = `
+		Combo-trigger
+		h-full
+		border
+		border-l-0
+		border-gray-400
+		rounded-l-none
+		rounded-r-md
+		${styles.FORM_COMBO_TRIGGER_BG}
+		${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+	`;
 	trigger = <IconButton
 				{...testProps('trigger')}
 				ref={triggerRef}
 				icon={CaretDown}
 				_icon={{
-					size: 'sm',
+					size: 'md',
 					className: 'text-grey-500',
 				}}
 				isDisabled={isDisabled}
 				onPress={onTriggerPress}
 				onBlur={onTriggerBlur}
-				className={`
-					trigger
-					h-full
-					border
-					border-l-0
-					border-gray-400
-					rounded-l-none
-					rounded-r-md
-					${styles.FORM_COMBO_TRIGGER_BG}
-					${styles.FORM_COMBO_TRIGGER_BG_HOVER}
-				`}
+				className={triggerClassName}
 			/>;
 
 	if (UiGlobals.mode === UI_MODE_WEB) {
@@ -619,6 +621,7 @@ export function ComboComponent(props) {
 							grow
 							h-full
 							min-h-0
+							max-h-[40px]
 							flex-1
 							m-0
 							rounded-tr-none
@@ -1009,16 +1012,19 @@ export function ComboComponent(props) {
 		refProps.ref = tooltipRef;
 	}
 
-	const className = `
+	let className = `
 		Combo-HStack
 		flex-1
 		h-[40px]
 		min-h-[40px]
 		justify-center
-		items-center
+		items-stretch
 	`;
 	if (props.className) {
-		props.className += ' ' + className;
+		className += ' ' + props.className;
+	}
+	if (minimizeForRow) {
+		className += ' h-auto min-h-0 max-h-[40px]';
 	}
 	
 	if (isRendered && additionalButtons?.length && containerWidth < 500) {

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

@@ -48,6 +48,7 @@ export const DateElement = forwardRef((props, ref) => {
 			_input = {},
 			isDisabled = false,
 			limitWidth = false,
+			minimizeForRow = false,
 			minValue,
 			maxValue,
 			testID,
@@ -219,7 +220,6 @@ export const DateElement = forwardRef((props, ref) => {
 			}
 		};
 
-
 	useEffect(() => {
 
 		// When value changes from outside, adjust text value
@@ -372,8 +372,7 @@ export const DateElement = forwardRef((props, ref) => {
 					flex-1
 					h-full
 					m-0
-					rounded-tr-none
-					rounded-br-none
+					rounded-r-lg
 					${styles.FORM_DATE_INPUT_BG}
 					${styles.FORM_DATE_INPUT_BG_FOCUS}
 					${styles.FORM_DATE_READOUT_FONTSIZE}
@@ -576,6 +575,9 @@ export const DateElement = forwardRef((props, ref) => {
 	if (props.className) {
 		className += props.className;
 	}
+	if (minimizeForRow) {
+		className += ' h-auto min-h-0 max-h-[50px]';
+	}
 	const style = props.style || {};
 	if (!_.isNil(height)) {
 		style.height = height;

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

@@ -30,6 +30,7 @@ const InputElement = forwardRef((props, ref) => {
 			rightIcon,
 			rightIconHandler,
 			placeholder,
+			className,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -109,10 +110,6 @@ const InputElement = forwardRef((props, ref) => {
 	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
-	// flex-1
-	// block
-	// h-auto
-	// h-[10px]
 	let inputClassName = `
 			Input
 			${styles.FORM_INPUT_BG}
@@ -125,15 +122,14 @@ const InputElement = forwardRef((props, ref) => {
 			h-auto
 			w-full
 			p-2
-			text-left
+			text-center
 			${styles.FORM_INPUT_FONTSIZE}
 			${styles.FORM_INPUT_BG}
 			${styles.FORM_INPUT_BG_FOCUS}
 			${styles.FORM_INPUT_BG_HOVER}
 		`;
-	if (props.className) {
-		inputClassName += props.className;
-		inputFieldClassName += props.className;
+	if (className) {
+		inputClassName += className;
 	}
 	
 	return <Input

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

@@ -30,6 +30,7 @@ const
 				maxValue = 100,
 				step = 10,
 				autoSubmitDelay = UiGlobals.autoSubmitDelay,
+				minimizeForRow = false,
 				tooltip = null,
 				isDisabled = false,
 				testID,
@@ -150,12 +151,24 @@ const
 		}
 
 		let className = `
-			w-full
-			items-center
-		`;
+				w-full
+				items-center
+			`,
+			inputClassName = `
+				InputWithTooltip
+				h-full
+				w-[60px]
+				mr-4
+				text-center
+				rounded-md
+				${styles.SLIDER_READOUT_FONTSIZE}
+			`;
 		if (props.className) {
 			className += ' ' + props.className;
 		}
+		if (minimizeForRow) {
+			inputClassName += ' h-auto min-h-0 max-h-[50px] mr-1';
+		}
 		
 		return <HStack
 					className={className}
@@ -168,16 +181,7 @@ const
 						onKeyPress={onInputKeyPress}
 						isDisabled={isDisabled}
 						disableAutoFlex={true}
-						className={`
-							InputWithTooltip
-							h-full
-							w-[50px]
-							p-2
-							mr-4
-							text-center
-							rounded-md
-							${styles.SLIDER_READOUT_FONTSIZE}
-						`}
+						className={inputClassName}
 						{...props._input}
 					/>
 					<HStack className="flex-1">

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

@@ -22,7 +22,6 @@ function TagComponent(props) {
 			isViewOnly = false,
 			isValueAlwaysArray,
 			isValueAsStringifiedJson,
-			isFilter = false,
 			minimizeForRow = false,
 			Editor,
 			_combo = {},
@@ -286,12 +285,20 @@ function TagComponent(props) {
 		${styles.FORM_TAG_PADDING}
 	`,
 	comboClassName = '';
+	if (_combo.className) {
+		comboClassName = _combo.className;
+	}
 	if (minimizeForRow) {
-		valueBoxesClassName += ' h-auto min-h-0 flex-1 max-h-[50px] overflow-auto';
-		comboClassName += ' h-auto min-h-0 flex-1';
+		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';
+		} else {
+			// shrink both down
+			valueBoxesClassName += ' h-auto min-h-[25px] max-h-[25px] overflow-auto flex-1';
+			comboClassName += ' h-auto min-h-0 max-h-[25px] flex-1';
+		}
 	}
 	
-	
 	return <VStack
 				className={className}
 				style={style}
@@ -311,6 +318,7 @@ function TagComponent(props) {
 									tooltip={tooltip}
 									usePermissions={props.usePermissions}
 									{..._combo}
+									className={comboClassName}
 								/>}
 			</VStack>;
 	

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

@@ -91,7 +91,8 @@ const
 			inputClassName += ' ' + props.className;
 		}
 		if (minimizeForRow) {
-			textareaClassName += ' max-h-[50px] overflow-auto';
+			textareaClassName += ' h-auto min-h-0 max-h-[40px] overflow-auto';
+			inputClassName += ' py-0';
 		}
 
 		return <Textarea className={textareaClassName}>

package/src/Components/Form/FieldSet.js

@@ -76,7 +76,7 @@ export default function FieldSet(props) {
 			}
 		};
 
-	const className = `
+	let className = `
 		FieldSet-Box
 		mb-4
 		mx-0
@@ -86,7 +86,7 @@ export default function FieldSet(props) {
 		${styles.FORM_FIELDSET_BG}
 	`;
 	if (props.className) {
-		props.className += className;
+		className += props.className;
 	}
 
 	

package/src/Components/Form/Form.js

@@ -315,6 +315,7 @@ function Form(props) {
 					let element = <Element
 										{...testProps('field-' + fieldName)}
 										value={value}
+										minimizeForRow={true}
 										parent={self}
 										reference={fieldName}
 										{...configPropsToPass}
@@ -1150,16 +1151,15 @@ function Form(props) {
 		if (!isEditorViewOnly && !hideResetButton) {
 			showResetBtn = true;
 		}
-		if (editorType !== EDITOR_TYPE__SIDE) { // side editor won't show either close or cancel buttons!
-			// determine whether we should show the close or cancel button
+		// determine whether we should show the close or cancel button
+		if (editorType !== EDITOR_TYPE__SIDE) {
 			if (isEditorViewOnly) {
 				showCloseBtn = true;
 			} else {
-				const formIsDirty = formState.isDirty;
 				// if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
 				// 	showCancelBtn = true;
 				// }
-				if (formIsDirty || isPhantom) {
+				if (formState.isDirty || isPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;
 					}
@@ -1169,6 +1169,11 @@ function Form(props) {
 					}
 				}
 			}
+		} else {
+			// side editor only
+			if (isPhantom && isSingle && onCancel) {
+				showCancelBtn = true;
+			}
 		}
 		if (!isEditorViewOnly && onSave) {
 			showSaveBtn = true;
@@ -1200,7 +1205,6 @@ function Form(props) {
 						key="resetBtn"
 						onPress={() => doReset()}
 						icon={Rotate}
-						className="mr-2"
 						isDisabled={!formState.isDirty}
 					/>}
 
@@ -1208,9 +1212,9 @@ function Form(props) {
 					<Button
 						{...testProps('cancelBtn')}
 						key="cancelBtn"
-						variant="outline"
+						variant={editorType === EDITOR_TYPE__INLINE ? 'solid' : 'outline'}
 						onPress={onCancel}
-						className="text-white mr-2"
+						className="text-white"
 						text="Cancel"
 					/>}
 					
@@ -1218,9 +1222,9 @@ function Form(props) {
 					<Button
 						{...testProps('closeBtn')}
 						key="closeBtn"
-						variant="outline"
+						variant={editorType === EDITOR_TYPE__INLINE ? 'solid' : 'outline'}
 						onPress={onClose}
-						className="text-white mr-2"
+						className="text-white"
 						text="Close"
 					/>}
 
@@ -1272,6 +1276,7 @@ function Form(props) {
 							w-[100px]
 							min-w-[300px]
 							py-2
+							gap-2
 							justify-center
 							items-center
 							rounded-b-lg
@@ -1282,8 +1287,11 @@ function Form(props) {
 				</Box>;
 		} else {
 			if (!disableFooter) {
-				let footerClassName = '';
-				footerClassName += ' justify-end';
+				let footerClassName = `
+					Form-Footer
+					justify-end
+					gap-2
+				`;
 				if (editorType === EDITOR_TYPE__INLINE) {
 					footerClassName += `
 						sticky

package/src/Components/Grid/Grid.js

@@ -107,6 +107,7 @@ const
 
 function GridComponent(props) {
 	const {
+
 			columnsConfig = [], // json configurations for each column
 			columnProps = {},
 			defaultHiddenColumns = [],
@@ -1177,13 +1178,14 @@ function GridComponent(props) {
 				/>;
 	
 	if (CURRENT_MODE === UI_MODE_WEB) {
+		// fix scrolling bug on nested FlatLists (inner one would not scroll without this)
 		grid = <ScrollView
 					horizontal={false}
-					className="ScrollView"
+					className="ScrollView overflow-auto"
 					contentContainerStyle={{
 						height: '100%',
 					}}
-				>{grid}</ScrollView>; // fix scrolling bug on nested FlatLists
+				>{grid}</ScrollView>;
 	} else
 	if (CURRENT_MODE === UI_MODE_NATIVE) {
 		grid = <ScrollView className="flex-1 w-full">{grid}</ScrollView>

package/src/Components/Grid/GridRow.js

@@ -250,8 +250,8 @@ function GridRow(props) {
 									className={`
 										GridRow-phantom
 										absolute
-										h-[2px]
-										w-[2px]
+										h-2
+										w-2
 										top-0
 										left-0
 										bg-[#f00]
@@ -310,14 +310,12 @@ function GridRow(props) {
 		if (isOnlyOneVisibleColumn) {
 			rowClassName += ' w-full';
 		}
-		if (isOver) {
-			rowClassName += ' border-4 border-[#0ff]';
-		} else {
-			rowClassName += ' border-b border-b-grey-100';
-		}
 		if (rowProps?.className) {
 			rowClassName += ' ' + rowProps.className;
 		}
+		if (isOver) {
+			rowClassName += ' border-4 border-[#0ff]';
+		}
 		return <HStackNative
 					{...testProps('row' + (isSelected ? '-selected' : ''))}
 					{...rowProps}

package/src/Components/Hoc/withAlert.js

@@ -105,7 +105,9 @@ function withAlert(WrappedComponent) {
 					}),
 					onOk: () => {
 						hideModal();
-						onOk();
+						if (onOk) {
+							onOk();
+						}
 					},
 					includeCancel,
 					canClose,

package/src/Components/Hoc/withPresetButtons.js

@@ -188,7 +188,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case ADD:
 						key = 'addBtn';
 						text = 'Add';
-						handler = onAdd;
+						handler = (parent, e) => onAdd();
 						icon = Plus;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
@@ -200,7 +200,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case EDIT:
 						key = 'editBtn';
 						text = 'Edit';
-						handler = onEdit;
+						handler = (parent, e) => onEdit();
 						icon = Edit;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
@@ -216,6 +216,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'deleteBtn';
 						text = 'Delete';
 						handler = onDelete;
+						handler = (parent, e) => onDelete();
 						icon = Trash;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
@@ -236,7 +237,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case VIEW:
 						key = 'viewBtn';
 						text = 'View';
-						handler = onView;
+						handler = (parent, e) => onView();
 						icon = Eye;
 						isDisabled = !selection.length || selection.length !== 1;
 						if (selectorId && !selectorSelected) {
@@ -249,7 +250,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case COPY:
 						key = 'copyBtn';
 						text = 'Copy to Clipboard';
-						handler = onCopyToClipboard;
+						handler = (parent, e) => onCopyToClipboard();
 						icon = Clipboard;
 						isDisabled = !selection.length;
 						if (selectorId && !selectorSelected) {
@@ -262,7 +263,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case DUPLICATE:
 						key = 'duplicateBtn';
 						text = 'Duplicate';
-						handler = onDuplicate;
+						handler = (parent, e) => onDuplicate();
 						icon = Duplicate;
 						isDisabled = !selection.length || selection.length !== 1;
 						if (selectorId && !selectorSelected) {
@@ -283,7 +284,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case UPLOAD_DOWNLOAD:
 						key = 'uploadDownloadBtn';
 						text = 'Upload/Download';
-						handler = onUploadDownload;
+						handler = (parent, e) => onUploadDownload();
 						icon = UploadDownload;
 						break;
 					default:

package/src/Components/Panel/Panel.js

@@ -137,13 +137,12 @@ function Panel(props) {
 						className={`
 							Panel-VSstack
 							flex-1
-							flex
 							w-full
 							overflow-hidden
 						`}
 					>
 						{isScrollable ? 
-							<ScrollView className="ScrollView">
+							<ScrollView className="Panel-ScrollView">
 								{children}
 							</ScrollView> : 
 							children}

package/src/Components/Report/Report.js

@@ -1,9 +1,11 @@
-import React from 'react';
+import { cloneElement, isValidElement } from 'react';
 import {
+	Box,
 	HStack,
 	Icon,
 	Text,
 	VStack,
+	VStackNative,
 } from '@project-components/Gluestack';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
@@ -41,15 +43,14 @@ function Report(props) {
 		buttons = [];
 
 	const propsIcon = props._icon || {};
-	propsIcon.size = 60;
-	propsIcon.px = 5;
+	propsIcon.className = 'w-full h-full text-primary-500';
 	let icon = props.icon;
 	if (_.isEmpty(icon)) {
 		icon = ChartLine;
 	}
-	if (React.isValidElement(icon)) {
+	if (isValidElement(icon)) {
 		if (!_.isEmpty(propsIcon)) {
-			icon = React.cloneElement(icon, {...propsIcon});
+			icon = cloneElement(icon, {...propsIcon});
 		}
 	} else {
 		icon = <Icon as={icon} {...propsIcon} />;
@@ -60,14 +61,13 @@ function Report(props) {
 			...testProps('excelBtn'),
 			key: 'excelBtn',
 			text: 'Download Excel',
-			leftIcon: <Icon as={Excel} size="md" className="text-white" />,
+			icon: Excel,
 			onPress: (data) => getReport({
 				reportId,
 				data,
 				reportType: REPORT_TYPES__EXCEL,
 				showReportHeaders,
 			}),
-			ml: 1,
 		});
 	}
 	if (!disablePdf) {
@@ -75,22 +75,30 @@ function Report(props) {
 			...testProps('pdfBtn'),
 			key: 'pdfBtn',
 			text: 'Download PDF',
-			leftIcon: <Icon as={Pdf} size="md" className="text-white" />,
+			icon: Pdf,
 			onPress: (data) => getReport({
 				reportId,
 				data,
 				reportType: REPORT_TYPES__PDF,
 				showReportHeaders,
 			}),
-			ml: 1,
 		});
 	}
-	return <VStack
+	return <VStackNative
 				{...testProps('Report-' + reportId)}
-				className="w-full border border-primary-300 pt-4 mb-3"
+				className={`
+					w-full
+					border
+					border-primary-300
+					p-4
+					mb-3
+					rounded-lg
+				`}
 			>
 				<HStack>
-					{icon && <VStack>{icon}</VStack>}
+					<Box className="w-[50px] mr-4">
+						{icon}
+					</Box>
 					<VStack className="flex-1">
 						<Text className="text-2xl max-w-full">{title}</Text>
 						<Text className="text-sm">{description}</Text>
@@ -101,7 +109,7 @@ function Report(props) {
 					additionalFooterButtons={buttons}
 					{...props._form}
 				/>
-			</VStack>;
+			</VStackNative>;
 }
 
 export default withComponent(Report);

package/src/Components/Viewer/Viewer.js

@@ -362,14 +362,17 @@ function Viewer(props) {
 		canEdit = false;
 	}
 
-	let className = 'Viewer-VStackNative';
+	let className = `
+		Viewer-VStackNative
+		h-full
+		bg-white
+	`;
 	if (props.className) {
 		className += ' ' + props.className;
 	}
 
 	return <VStackNative
 				{...testProps(self)}
-				{...props}
 				className={className}
 				onLayout={onLayout}
 			>
@@ -379,9 +382,10 @@ function Viewer(props) {
 						_web={{ height: 1 }}
 						ref={scrollViewRef}
 						className={`
-							ScrollView
+							Viewer-ScrollView
 							w-full
 							pb-1
+							flex-1
 						`}
 					>
 						{canEdit && onEditMode &&