@onehat/ui 0.4.10 → 0.4.12

package/package.json

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

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

@@ -545,7 +545,8 @@ export function ComboComponent(props) {
 	}
 	const triggerClassName = `
 		Combo-trigger
-		h-full
+		self-stretch
+		h-auto
 		border
 		border-l-0
 		border-gray-400
@@ -575,7 +576,8 @@ export function ComboComponent(props) {
 						onPress={toggleMenu}
 						className={`
 							toggleMenuBtn
-							h-full
+							h-auto
+							self-stretch
 							flex-1
 							flex-row
 							justify-center
@@ -595,7 +597,8 @@ export function ComboComponent(props) {
 							ellipsizeMode="head"
 							className={`
 								Text
-								h-full
+								h-auto
+								self-stretch
 								flex-1
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
 								${styles.FORM_COMBO_INPUT_FONTSIZE}
@@ -619,9 +622,8 @@ export function ComboComponent(props) {
 						className={`
 							ComboInput
 							grow
-							h-full
-							min-h-0
-							max-h-[40px]
+							h-auto
+							self-stretch
 							flex-1
 							m-0
 							rounded-tr-none
@@ -1015,8 +1017,9 @@ export function ComboComponent(props) {
 	let className = `
 		Combo-HStack
 		flex-1
-		h-[40px]
-		min-h-[40px]
+		items-stretch
+		h-auto
+		self-stretch
 		justify-center
 		items-stretch
 	`;

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

@@ -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}

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

@@ -30,6 +30,7 @@ const InputElement = forwardRef((props, ref) => {
 			rightIcon,
 			rightIconHandler,
 			placeholder,
+			textAlignIsCenter = true,
 			className,
 			...propsToPass
 		} = props,
@@ -118,11 +119,11 @@ const InputElement = forwardRef((props, ref) => {
 		`,
 		inputFieldClassName = `
 			InputField
-			min-h-[40px]
+			self-stretch
 			h-auto
 			w-full
 			p-2
-			text-center
+			${textAlignIsCenter ? 'text-center' : 'text-left'}
 			${styles.FORM_INPUT_FONTSIZE}
 			${styles.FORM_INPUT_BG}
 			${styles.FORM_INPUT_BG_FOCUS}

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

@@ -1,5 +1,5 @@
 import {
-	HStack,
+	HStackNative,
 	Text,
 } from '@project-components/Gluestack';
 import testProps from '../../../../Functions/testProps.js';
@@ -16,7 +16,7 @@ export default function ValueBox(props) {
 			onDelete,
 		} = props,
 		styles = UiGlobals.styles;
-	return <HStack
+	return <HStackNative
 				{...testProps('valueBox-' + text)}
 				className={`
 					max-w-full
@@ -57,5 +57,5 @@ export default function ValueBox(props) {
 						onPress={onDelete}
 						className="h-full"
 					/>}
-			</HStack>;
+			</HStackNative>;
 }

package/src/Components/Form/Form.js

@@ -1205,7 +1205,6 @@ function Form(props) {
 						key="resetBtn"
 						onPress={() => doReset()}
 						icon={Rotate}
-						className="mr-2"
 						isDisabled={!formState.isDirty}
 					/>}
 
@@ -1215,7 +1214,7 @@ function Form(props) {
 						key="cancelBtn"
 						variant={editorType === EDITOR_TYPE__INLINE ? 'solid' : 'outline'}
 						onPress={onCancel}
-						className="text-white mr-2"
+						className="text-white"
 						text="Cancel"
 					/>}
 					
@@ -1225,7 +1224,7 @@ function Form(props) {
 						key="closeBtn"
 						variant={editorType === EDITOR_TYPE__INLINE ? 'solid' : 'outline'}
 						onPress={onClose}
-						className="text-white mr-2"
+						className="text-white"
 						text="Close"
 					/>}
 
@@ -1277,6 +1276,7 @@ function Form(props) {
 							w-[100px]
 							min-w-[300px]
 							py-2
+							gap-2
 							justify-center
 							items-center
 							rounded-b-lg
@@ -1287,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/Hoc/withFilters.js

@@ -303,6 +303,7 @@ export default function withFilters(WrappedComponent) {
 											value={getFilterValue(field)}
 											onChangeValue={(value) => onFilterChangeValue(field, value)}
 											isFilter={true}
+											minimizeForRow={true}
 											{...filterProps}
 											{...elementProps}
 											className={filterClassName}

package/src/Components/Hoc/withWindowedEditor.js

@@ -58,7 +58,8 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				selectorSelected,
 				selectorSelectedField,
 				h,
-
+				style,
+				
 				...propsToPass
 			} = props,
 			onEditorCancel = props.onEditorCancel;

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

package/src/PlatformImports/Web/Attachments.js

@@ -282,7 +282,11 @@ function AttachmentsElement(props) {
 	if (canCrud) {
 		_fileMosaic.onDelete = onFileDelete;
 	}
-	let content = <VStack background={styles.ATTACHMENTS_BG} className="w-[100%] p-1">
+	let className = 'w-full p-1 bg-white rounded-[5px]';
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	let content = <VStack className={className}>
 						<HStack className="flex-wrap">
 							{files.map((file) => {
 								return <Box