@onehat/ui 0.4.70 → 0.4.72

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

@@ -3,6 +3,7 @@ import {
 	HStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../../Constants/Editor.js';
@@ -79,10 +80,10 @@ function TagComponent(props) {
 							isEditorViewOnly={true}
 							selection={[record]}
 							onEditorClose={hideModal}
-							className={`
-								w-full
-								p-0
-							`}
+							className={clsx(
+								'w-full',
+								'p-0',
+							)}
 						/>,
 				onCancel: hideModal,
 			});
@@ -244,11 +245,11 @@ function TagComponent(props) {
 		_combo.selectorSelectedField = propsToPass.selectorSelectedField;
 	}
 
-	let className = `
-		Tag
-		w-full
-		p-0
-	`;
+	let className = clsx(
+		'Tag',
+		'w-full',
+		'p-0',
+	);
 	if (isInFilter) {
 		className += ' max-w-[250px]';
 	}
@@ -269,21 +270,21 @@ function TagComponent(props) {
 			style.flex = props.flex;
 		}
 	}
-	let valueBoxesClassName = `
-		Tag-valueBoxes-container
-		w-full
-		min-h-[40px]
-		max-h-[200px]
-		mb-1
-		p-1
-		flex-wrap
-		overflow-auto
-		border
-		border-grey-300
-		rounded-md
-		bg-grey-100
-		${styles.FORM_TAG_CLASSNAME}
-	`,
+	let valueBoxesClassName = clsx(
+		'Tag-valueBoxes-container',
+		'w-full',
+		'min-h-[40px]',
+		'max-h-[200px]',
+		'mb-1',
+		'p-1',
+		'flex-wrap',
+		'overflow-auto',
+		'border',
+		'border-grey-300',
+		'rounded-md',
+		'bg-grey-100',
+		styles.FORM_TAG_CLASSNAME,
+	),
 	comboClassName = '';
 	if (_combo.className) {
 		comboClassName = _combo.className;

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

@@ -2,6 +2,7 @@ import {
 	HStackNative,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import testProps from '../../../../Functions/testProps.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';
@@ -20,17 +21,17 @@ export default function ValueBox(props) {
 		styles = UiGlobals.styles;
 	return <HStackNative
 				{...testProps('valueBox-' + text)}
-				className={`
-					ValueBox-HStackNative
-					max-w-full
-					items-center
-					mr-1
-					bg-grey-100
-					border
-					border-grey-400
-					rounded-md
-					${!onDelete && 'pr-4'}
-				`}
+				className={clsx(
+					'ValueBox-HStackNative',
+					'max-w-full',
+					'items-center',
+					'mr-1',
+					'bg-grey-100',
+					'border',
+					'border-grey-400',
+					'rounded-md',
+					!onDelete ? 'pr-4' : '',
+				)}
 			>
 				{showEye &&
 					<IconButton
@@ -41,22 +42,22 @@ export default function ValueBox(props) {
 							className: 'text-grey-600',
 						}}
 						onPress={onView}
-						className={`
-							ValueBox-eyeBtn
-							h-full
-							${minimizeForRow ? 'py-0' : ''}
-							${styles.FORM_TAG_BTN_CLASSNAME}
-						`}
+						className={clsx(
+							'ValueBox-eyeBtn',
+							'h-full',
+							minimizeForRow ? 'py-0' : '',
+							styles.FORM_TAG_BTN_CLASSNAME,
+						)}
 					/>}
 				<Text
-					className={`
-						ValueBox-Text
-						text-grey-600
-						${styles.FORM_TAG_VALUEBOX_CLASSNAME}
-						${showEye ? 'ml-0' : 'ml-1'}
-						${onDelete ? 'mr-0' : 'mr-1'}
-						${minimizeForRow ? 'py-0' : ''}
-					`}
+					className={clsx(
+						'ValueBox-Text',
+						'text-grey-600',
+						styles.FORM_TAG_VALUEBOX_CLASSNAME,
+						showEye ? 'ml-0' : 'ml-1',
+						onDelete ? 'mr-0' : 'mr-1',
+						minimizeForRow ? 'py-0' : '',
+					)}
 				>{text}</Text>
 				{onDelete &&
 					<IconButton
@@ -67,12 +68,12 @@ export default function ValueBox(props) {
 							className: 'text-grey-600',
 						}}
 						onPress={onDelete}
-						className={`
-							ValueBox-xBtn
-							h-full
-							${minimizeForRow ? 'py-0' : ''}
-							${styles.FORM_TAG_BTN_CLASSNAME}
-						`}
+						className={clsx(
+							'ValueBox-xBtn',
+							'h-full',
+							minimizeForRow ? 'py-0' : '',
+							styles.FORM_TAG_BTN_CLASSNAME,
+						)}
 					/>}
 			</HStackNative>;
 }

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

@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import {
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -10,14 +11,14 @@ const
 	TextElement = (props) => {
 		const styles = UiGlobals.styles;
 
-		let className = `
-			Text
-			flex-1
-			min-h-[40px]
-			px-3
-			py-2
-			${styles.FORM_TEXT_CLASSNAME}
-		`;
+		let className = clsx(
+			'Text',
+			'flex-1',
+			'min-h-[40px]',
+			'px-3',
+			'py-2',
+			styles.FORM_TEXT_CLASSNAME,
+		);
 		if (props.className) {
 			className += ' ' + props.className;
 		}

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

@@ -2,6 +2,7 @@ import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Textarea, TextareaInput,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -79,14 +80,14 @@ const TextAreaElement = forwardRef((props, ref) => {
 	if (localValue === null || typeof localValue === 'undefined') {
 		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
 	}
-	let textareaClassName = `
-			Textarea
-		`,
-		inputClassName = `
-			TextAreaInput
-			flex-1
-			${styles.FORM_TEXTAREA_CLASSNAME}
-		`;
+	let textareaClassName = clsx(
+			'Textarea',
+		),
+		inputClassName = clsx(
+			'TextAreaInput',
+			'flex-1',
+			styles.FORM_TEXTAREA_CLASSNAME,
+		);
 	if (className) {
 		inputClassName += ' ' + className;
 	}

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

@@ -6,6 +6,7 @@ import {
 	Switch,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Na from '../../Icons/Na.js';
@@ -44,12 +45,12 @@ const
 				}
 			};
 
-		let className = `
-			Toggle
-			h-full
-			items-center
-			py-[2px]
-		`;
+		let className = clsx(
+			'Toggle',
+			'h-full',
+			'items-center',
+			'py-[2px]',
+		);
 		if (props.className) {
 			className += ' ' + props.className;
 		}
@@ -64,10 +65,10 @@ const
 								className: 'text-grey-400',
 							}}
 							onPress={onToggle}
-							className={`
-								border
-								border-grey-700
-							`}
+							className={clsx(
+								'border',
+								'border-grey-700',
+							)}
 						/>
 					</HStack>;
 		}
@@ -98,11 +99,11 @@ const
 					>
 						<TextNative
 							{...testProps('readout')}
-							className={`
-								ml-1
-								mr-2
-								${styles.FORM_TOGGLE_READOUT_CLASSNAME}
-							`}
+							className={clsx(
+								'ml-1',
+								'mr-2',
+								styles.FORM_TOGGLE_READOUT_CLASSNAME,
+							)}
 						>{_.isNil(value) ? 'N/A' : (!!value ? onText : offText)}</TextNative>
 					</Pressable>
 				</HStack>;

package/src/Components/Form/FieldSet.js

@@ -5,6 +5,7 @@ import {
 	Text,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import FieldSetContext from '../../Contexts/FieldSetContext.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';
@@ -76,17 +77,17 @@ export default function FieldSet(props) {
 			}
 		};
 
-	let className = `
-		FieldSet-Box
-		mb-4
-		mx-0
-		p-1
-		pb-2
-		gap-2
-		border
-		border-grey-400
-		${styles.FORM_FIELDSET_BG}
-	`;
+	let className = clsx(
+		'FieldSet-Box',
+		'mb-4',
+		'mx-0',
+		'p-1',
+		'pb-2',
+		'gap-2',
+		'border',
+		'border-grey-400',
+		styles.FORM_FIELDSET_BG,
+	);
 	if (props.className) {
 		className += props.className;
 	}
@@ -99,25 +100,25 @@ export default function FieldSet(props) {
 				{title &&
 					<HStack
 						style={{ userSelect: 'none', }}
-						className={`
-							FieldSet-title-HStack
-							w-full
-							mb-1
-							border
-							border-b-grey-200
-						`}
+						className={clsx(
+							'FieldSet-title-HStack',
+							'w-full',
+							'mb-1',
+							'border',
+							'border-b-grey-200',
+						)}
 					>
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								FieldSet-title-TextNative
-								flex-1
-								py-1
-								px-3
-								font-bold
-								${styles.FORM_FIELDSET_FONTSIZE}
-							`}
+							className={clsx(
+								'FieldSet-title-TextNative',
+								'flex-1',
+								'py-1',
+								'px-3',
+								'font-bold',
+								styles.FORM_FIELDSET_FONTSIZE,
+							)}
 						>{title}</TextNative>
 
 						{showToggleAllCheckbox && 

package/src/Components/Form/Form.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Animated, {
 	useSharedValue,
 	useAnimatedStyle,
@@ -222,16 +223,16 @@ function Form(props) {
 			// Build the fields that match the current columnsConfig in the grid
 			const
 				elements = [],
-				columnClassName = `
-					Form-column
-					justify-center
-					items-center
-					h-[60px]
-					border-r-1
-					border-r-grey-200
-					px-1
-					${styles.INLINE_EDITOR_MIN_WIDTH}
-				`;
+				columnClassName = clsx(
+					'Form-column',
+					'justify-center',
+					'items-center',
+					'h-[60px]',
+					'border-r-1',
+					'border-r-grey-200',
+					'px-1',
+					styles.INLINE_EDITOR_MIN_WIDTH,
+				);
 			_.each(columnsConfig, (config, ix) => {
 				let {
 						fieldName,
@@ -459,21 +460,21 @@ function Form(props) {
 															<Icon
 																as={Pencil}
 																size="2xs"
-																className={`
-																	absolute
-																	top-[2px]
-																	left-[2px]
-																	text-grey-300
-																`}
+																className={clsx(
+																	'absolute',
+																	'top-[2px]',
+																	'left-[2px]',
+																	'text-grey-300',
+																)}
 															/> : null;
 										return <HStack
 													key={fieldName + '-HStack-' + ix}
-													className={`
-														Form-HStack1
-														flex-${flex}
-														${error ? "bg-[#fdd]" : "bg-white"}
-														${columnClassName}
-													`}
+													className={clsx(
+														'Form-HStack1',
+														`flex-${flex}`,
+														error ? 'bg-[#fdd]' : 'bg-white',
+														columnClassName,
+													)}
 													style={{ 
 														width: w,
 													}}
@@ -851,13 +852,13 @@ function Form(props) {
 								}
 								if (isRequired) {
 									requiredIndicator = <Text
-															className={`
-																Form-requiredIndicator
-																self-center
-																text-[#f00]
-																text-[30px]
-																pr-1
-															`}
+															className={clsx(
+																'Form-requiredIndicator',
+																'self-center',
+																'text-[#f00]',
+																'text-[30px]',
+																'pr-1',
+															)}
 														>*</Text>;
 								}
 							}
@@ -900,22 +901,22 @@ function Form(props) {
 												<Icon
 													as={Pencil}
 													size="2xs"
-													className={`
-														absolute
-														top-[2px]
-														left-[2px]
-														text-grey-300
-													`}
+													className={clsx(
+														'absolute',
+														'top-[2px]',
+														'left-[2px]',
+														'text-grey-300',
+													)}
 												/> : null;
 							return <HStack
 										key={'Controller-HStack-' + ix}
-										className={`
-											Form-HStack11
-											min-h-[50px]
-											w-full
-											flex-none
-											${error ? 'bg-[#fdd]' : ''}
-										`}
+										className={clsx(
+											'Form-HStack11',
+											'min-h-[50px]',
+											'w-full',
+											'flex-none',
+											error ? 'bg-[#fdd]' : '',
+										)}
 									>
 										{dirtyIcon}
 										{element}
@@ -981,11 +982,11 @@ function Form(props) {
 							title += ' for ' + record.displayValue;
 						}
 						titleElement = <Text
-											className={`
-												Form-Ancillary-Title
-												font-bold
-												${styles.FORM_ANCILLARY_TITLE_CLASSNAME}
-											`}
+											className={clsx(
+												'Form-Ancillary-Title',
+												'font-bold',
+												styles.FORM_ANCILLARY_TITLE_CLASSNAME
+											)}
 										>{title}</Text>;
 						if (icon) {
 							titleElement = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{titleElement}</HStack>
@@ -993,21 +994,21 @@ function Form(props) {
 					}
 					if (description) {
 						description = <Text
-										className={`
-											Form-Ancillary-Description
-											italic
-											${styles.FORM_ANCILLARY_DESCRIPTION_CLASSNAME}
-										`}
+										className={clsx(
+											'Form-Ancillary-Description',
+											'italic',
+											styles.FORM_ANCILLARY_DESCRIPTION_CLASSNAME
+										)}
 									>{description}</Text>;
 					}
 					components.push(<VStack
 										ref={(el) => (ancillaryItemsRef.current[ix +1 /* offset for "scroll to top" */] = el)}
 										key={'ancillary-' + ix}
-										className={`
-											Form-VStack12
-											mx-1
-											my-3
-										`}
+										className={clsx(
+											'Form-VStack12',
+											'mx-1',
+											'my-3'
+										)}
 									>
 										{titleElement}
 										{description}
@@ -1213,9 +1214,9 @@ function Form(props) {
 												size: 'sm',
 												className: 'text-white',
 											}}
-											className={`
-												mr-4
-											`}
+											className={clsx(
+												'mr-4'
+											)}
 											text="Back"
 										/>}
 									<Text className="text-[20px] ml-1 text-grey-500">Edit Mode</Text>
@@ -1310,11 +1311,11 @@ function Form(props) {
 							key="deleteBtn"
 							onPress={onDelete}
 							icon={Trash}
-							className={`
-								bg-warning-500
-								hover:bg-warning-700
-								text-white
-							`}
+							className={clsx(
+								'bg-warning-500',
+								'hover:bg-warning-700',
+								'text-white',
+							)}
 							text="Delete"
 						/>
 					</HStack>}
@@ -1393,44 +1394,44 @@ function Form(props) {
 		if (editorType === EDITOR_TYPE__INLINE) {
 			footer =
 				<Box
-					className={`
-						Form-inlineFooter-container
-						relative
-						w-full
-					`}
+					className={clsx(
+						'Form-inlineFooter-container',
+						'relative',
+						'w-full',
+					)}
 				>
 					<HStack
-						className={`
-							Form-inlineFooter
-							absolute
-							top-[5px]
-							left-[40px]
-							w-[100px]
-							min-w-[300px]
-							py-2
-							gap-2
-							justify-center
-							items-center
-							rounded-b-lg
-							bg-primary-700
-						`}
+						className={clsx(
+							'Form-inlineFooter',
+							'absolute',
+							'top-[5px]',
+							'left-[40px]',
+							'w-[100px]',
+							'min-w-[300px]',
+							'py-2',
+							'gap-2',
+							'justify-center',
+							'items-center',
+							'rounded-b-lg',
+							'bg-primary-700',
+						)}
 					>{footerButtons}</HStack>
 				</Box>;
 		} else {
 			if (!disableFooter) {
-				let footerClassName = `
-					Form-Footer
-					justify-end
-					gap-2
-				`;
+				let footerClassName = clsx(
+					'Form-Footer',
+					'justify-end',
+					'gap-2',
+				);
 				if (editorType === EDITOR_TYPE__INLINE) {
-					footerClassName += `
-						sticky
-						self-start
-						justify-center
-						bg-primary-100
-						rounded-b-lg
-					`;
+					footerClassName += clsx(
+						'sticky',
+						'self-start',
+						'justify-center',
+						'bg-primary-100',
+						'rounded-b-lg',
+					);
 				}
 				if (isSaving) {
 					footerClassName += ' border-t-2 border-t-[#f00]'
@@ -1458,13 +1459,13 @@ function Form(props) {
 						editor}
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView
-							className={`
-								Form-ScrollView
-								w-full
-								flex-1
-								pb-1
-								web:min-h-[${minHeight}px]
-							`}
+							className={clsx(
+								'Form-ScrollView',
+								'w-full',
+								'flex-1',
+								'pb-1',
+								`web:min-h-[${minHeight}px]`,
+							)}
 							onScroll={onScroll}
 							scrollEventThrottle={16 /* ms */}
 							contentContainerStyle={{