@onehat/ui 0.4.70 → 0.4.72

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

@@ -8,6 +8,7 @@ import {
 	Pressable,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	DATE,
 	TIME,
@@ -296,11 +297,11 @@ export const DateElement = forwardRef((props, ref) => {
 						}}
 						isDisabled={isDisabled}
 						onPress={onClearBtn}
-						className={`
-							Date-xBtn
-							h-full
-							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
-						`}
+						className={clsx(
+							'Date-xBtn',
+							'h-full',
+							styles.FORM_COMBO_TRIGGER_CLASSNAME,
+						)}
 					/>;
 	}
 	trigger = <IconButton
@@ -314,16 +315,16 @@ export const DateElement = forwardRef((props, ref) => {
 				onPress={onTriggerPress}
 				onBlur={onTriggerBlur}
 				isDisabled={isDisabled}
-				className={`
-					Date-trigger
-					h-10
-					w-10
-					border
-					border-grey-400
-					rounded-l-md
-					rounded-r-none
-					${styles.FORM_DATE_TRIGGER_CLASSNAME}
-				`}
+				className={clsx(
+					'Date-trigger',
+					'h-10',
+					'w-10',
+					'border',
+					'border-grey-400',
+					'rounded-l-md',
+					'rounded-r-none',
+					styles.FORM_DATE_TRIGGER_CLASSNAME,
+				)}
 			/>;
 
 	if (UiGlobals.mode === UI_MODE_WEB) {
@@ -337,20 +338,20 @@ export const DateElement = forwardRef((props, ref) => {
 					ref={inputRef}
 					numberOfLines={1}
 					ellipsizeMode="head"
-					className={`
-						Date-TextNative
-						flex-1
-						h-full
-						m-0
-						p-2
-						border
-						border-grey-400
-						border-l-[0px]
-						rounded-l-none
-						rounded-r-md
-						${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-						${styles.FORM_DATE_INPUT_CLASSNAME}
-					`}
+					className={clsx(
+						'Date-TextNative',
+						'flex-1',
+						'h-full',
+						'm-0',
+						'p-2',
+						'border',
+						'border-grey-400',
+						'border-l-[0px]',
+						'rounded-l-none',
+						'rounded-r-md',
+						_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black',
+						styles.FORM_DATE_INPUT_CLASSNAME,
+					)}
 				>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 			</Pressable> :
 			<Input
@@ -366,10 +367,10 @@ export const DateElement = forwardRef((props, ref) => {
 				isDisabled={isDisabled}
 				tooltip={tooltip}
 				tooltipPlacement={tooltipPlacement}
-				tooltipTriggerClassName={`
-					flex-1
-					h-full
-				`}
+				tooltipTriggerClassName={clsx(
+					'flex-1',
+					'h-full',
+				)}
 				// onLayout={(e) => {
 				// 	const {
 				// 			height,
@@ -378,15 +379,15 @@ export const DateElement = forwardRef((props, ref) => {
 				// 	setWidth(Math.round(width));
 				// 	setTop(Math.round(height));
 				// }}
-				className={`
-					Date-Input
-					flex-1
-					h-full
-					m-0
-					rounded-r-lg
-					${styles.FORM_DATE_INPUT_CLASSNAME}
-					${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
-				`}
+				className={clsx(
+					'Date-Input',
+					'flex-1',
+					'h-full',
+					'm-0',
+					'rounded-r-lg',
+					styles.FORM_DATE_INPUT_CLASSNAME,
+					_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black',
+				)}
 				autoSubmitDelay={1000}
 				placeholder={placeholder}
 				textAlignIsCenter={true}
@@ -405,21 +406,21 @@ export const DateElement = forwardRef((props, ref) => {
 					<TextNative
 						numberOfLines={1}
 						ellipsizeMode="head"
-						className={`
-							flex-1
-							h-full
-							m-0
-							p-2
-							border
-							border-grey-400
-							border-l-[0px]
-							rounded-l-none
-							rounded-r-md
-							${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"} 
-							${styles.FORM_DATE_READOUT_FONTSIZE} 
-							${styles.FORM_DATE_INPUT_CLASSNAME}
-							${styles.FORM_DATE_INPUT_CLASSNAME_FOCUS}
-						`}
+						className={clsx(
+							'flex-1',
+							'h-full',
+							'm-0',
+							'p-2',
+							'border',
+							'border-grey-400',
+							'border-l-[0px]',
+							'rounded-l-none',
+							'rounded-r-md',
+							_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black',
+							styles.FORM_DATE_READOUT_FONTSIZE,
+							styles.FORM_DATE_INPUT_CLASSNAME,
+							styles.FORM_DATE_INPUT_CLASSNAME_FOCUS,
+						)}
 					>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 				</Pressable>;
 	}
@@ -437,9 +438,9 @@ export const DateElement = forwardRef((props, ref) => {
 								<PopoverBackdrop className="PopoverBackdrop bg-[#000]" />
 								<PopoverContent
 									ref={pickerRef}
-									className={`
-										Date-PopoverContent
-									`}
+									className={clsx(
+										'Date-PopoverContent',
+									)}
 									style={{
 										top,
 										left,
@@ -449,10 +450,10 @@ export const DateElement = forwardRef((props, ref) => {
 									}}
 								>
 									<PopoverBody
-										className={`
-											Date-PopoverBody
-											overflow-hidden
-										`}
+										className={clsx(
+											'Date-PopoverBody',
+											'overflow-hidden',
+										)}
 									>
 										<Datetime
 											{...testProps('picker')}
@@ -468,9 +469,9 @@ export const DateElement = forwardRef((props, ref) => {
 											{...testProps('todayBtn')}
 											key="todayBtn"
 											onPress={onToday}
-											className={`
-												mt-2
-											`}
+											className={clsx(
+												'mt-2',
+											)}
 											text="Today"
 										/>
 									</PopoverBody>
@@ -489,34 +490,34 @@ export const DateElement = forwardRef((props, ref) => {
 						}}
 						isDisabled={isDisabled}
 						onPress={() => hidePicker()}
-						className={`
-							h-full
-							w-10
-							border
-							border-grey-400
-							rounded-l-md
-							rounded-r-none
-							${styles.FORM_DATE_TRIGGER_CLASSNAME}
-						`}
+						className={clsx(
+							'h-full',
+							'w-10',
+							'border',
+							'border-grey-400',
+							'rounded-l-md',
+							'rounded-r-none',
+							styles.FORM_DATE_TRIGGER_CLASSNAME,
+						)}
 					/>
 					{disableDirectEntry ?
 						<TextNative
 							ref={inputRef}
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								flex-1
-								h-full
-								m-0
-								p-2
-								border
-								border-grey-400
-								border-l-0
-								rounded-l-none
-								rounded-r-md
-								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-								${styles.FORM_DATE_INPUT_CLASSNAME}
-							`}
+							className={clsx(
+								'flex-1',
+								'h-full',
+								'm-0',
+								'p-2',
+								'border',
+								'border-grey-400',
+								'border-l-0',
+								'rounded-l-none',
+								'rounded-r-md',
+								_.isEmpty(textInputValue) ? "text-grey-400" : "text-black",
+								styles.FORM_DATE_INPUT_CLASSNAME,
+							)}
 						>{textInputValue}</TextNative> :
 						<Input
 							{...testProps('input')}
@@ -532,19 +533,19 @@ export const DateElement = forwardRef((props, ref) => {
 							placeholder={placeholder}
 							tooltip={tooltip}
 							tooltipPlacement={tooltipPlacement}
-							tooltipClassName={`
-								flex-1
-								h-full
-							`}
-							className={`
-								flex-1
-								h-full
-								m-0
-								rounded-tr-none
-								rounded-br-none
-								${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
-								${styles.FORM_DATE_INPUT_CLASSNAME}
-							`}
+							tooltipClassName={clsx(
+								'flex-1',
+								'h-full',
+							)}
+							className={clsx(
+								'flex-1',
+								'h-full',
+								'm-0',
+								'rounded-tr-none',
+								'rounded-br-none',
+								_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black',
+								styles.FORM_DATE_INPUT_CLASSNAME,
+							)}
 							{..._input}
 						/>}
 				</HStack>;
@@ -552,13 +553,13 @@ export const DateElement = forwardRef((props, ref) => {
 								isOpen={true}
 								safeAreaTop={true}
 								onClose={() => setIsPickerShown(false)}
-								className={`
-									Date-Modal
-									my-auto
-									w-full
-									h-[400px]
-									p-3
-								`}
+								className={clsx(
+									'Date-Modal',
+									'my-auto',
+									'w-full',
+									'h-[400px]',
+									'p-3',
+								)}
 							>
 								<ModalBackdrop />
 								<ModalContent>
@@ -591,13 +592,13 @@ export const DateElement = forwardRef((props, ref) => {
 		}
 	}
 
-	let className = `
-		Date-HStackNative
-		flex-1
-		justify-center
-		items-center
-		${styles.FORM_DATE_CLASSNAME}
-	`;
+	let className = clsx(
+		'Date-HStackNative',
+		'flex-1',
+		'justify-center',
+		'items-center',
+		styles.FORM_DATE_CLASSNAME,
+	);
 	if (props.className) {
 		className += props.className;
 	}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import {
 	Text,
 } 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';
@@ -14,11 +15,11 @@ const
 				text = value,
 			} = props,
 			styles = UiGlobals.styles;
-		let className = `
-			DisplayField
-			flex-1
-			${styles.TEXT_FONTSIZE}
-		`;
+		let className = clsx(
+			'DisplayField',
+			'flex-1',
+			styles.TEXT_FONTSIZE,
+		);
 		if (props.className) {
 			className += ' ' + props.className;
 		}

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

@@ -6,6 +6,7 @@ import {
 	Text,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

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

@@ -9,6 +9,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import { View, } from 'react-native';
 import {
 	EDITOR_TYPE__INLINE,

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

@@ -2,11 +2,13 @@ import { cloneElement, forwardRef, isValidElement, useState, useEffect, useRef,
 import {
 	Input, InputField, InputIcon, InputSlot,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	hasWidth,
 	hasFlex,
 } from '../../../Functions/tailwindFunctions.js';
 import UiGlobals from '../../../UiGlobals.js';
+import addIconProps from '../../../Functions/addIconProps.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
@@ -112,20 +114,20 @@ const InputElement = forwardRef((props, ref) => {
 	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
-	let inputClassName = `
-			Input
-			${styles.FORM_INPUT_CLASSNAME}
-		`,
-		inputFieldClassName = `
-			InputField
-			self-stretch
-			h-auto
-			w-full
-			p-2
-			${textAlignIsCenter ? 'text-center' : 'text-left'}
-			${styles.FORM_INPUT_CLASSNAME}
-			${styles.FORM_INPUT_FIELD_CLASSNAME}
-		`;
+	let inputClassName = clsx(
+			'Input',
+			styles.FORM_INPUT_CLASSNAME,
+		),
+		inputFieldClassName = clsx(
+			'InputField',
+			'self-stretch',
+			'h-auto',
+			'w-full',
+			'p-2',
+			textAlignIsCenter ? 'text-center' : 'text-left',
+			styles.FORM_INPUT_CLASSNAME,
+			styles.FORM_INPUT_FIELD_CLASSNAME,
+		);
 	if (className) {
 		inputClassName += className;
 	}
@@ -144,10 +146,10 @@ const InputElement = forwardRef((props, ref) => {
 		_leftIcon.className = 'leftInputIcon mr-2 ' + _leftIcon.className; // prepend the margin, so it can potentially be overridden
 		if (isValidElement(leftIcon)) {
 			if (_leftIcon) {
-				leftIcon = cloneElement(leftIcon, {..._leftIcon});
+				leftIcon = cloneElement(leftIcon, addIconProps(_leftIcon || {}));
 			}
 		} else {
-			leftIcon = <InputIcon as={leftIcon} {..._leftIcon} />;
+			leftIcon = <InputIcon as={leftIcon} {...addIconProps(_leftIcon || {})} />;
 		}
 		if (leftIconHandler) {
 			leftIcon = <InputSlot onPress={leftIconHandler} className="LeftInputSlot">
@@ -168,10 +170,10 @@ const InputElement = forwardRef((props, ref) => {
 		_rightIcon.className = 'rightInputIcon ml-2 ' + _rightIcon.className; // prepend the margin, so it can potentially be overridden
 		if (isValidElement(rightIcon)) {
 			if (_rightIcon) {
-				rightIcon = cloneElement(rightIcon, {..._rightIcon});
+				rightIcon = cloneElement(rightIcon, addIconProps(_rightIcon || {}));
 			}
 		} else {
-			rightIcon = <InputIcon as={rightIcon} {..._rightIcon} />;
+			rightIcon = <InputIcon as={rightIcon} {...addIconProps(_rightIcon || {})} />;
 		}
 		if (rightIconHandler) {
 			rightIcon = <InputSlot onPress={rightIconHandler} className="RightInputSlot">

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

@@ -2,6 +2,7 @@ import {
 	HStack,
 	Tooltip,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,
@@ -39,12 +40,12 @@ export function JsonElement(props) {
 		throw new Error('JsonElement not yet implemented for React Native');
 	}
 
-	let className = `
-		Json
-		flex-1
-		justify-start
-		${testID}
-	`;
+	let className = clsx(
+		'Json',
+		'flex-1',
+		'justify-start',
+		testID,
+	);
 	if (props.className) {
 		className += ' ' + propsToPass.className;
 	}

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

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Decimal from 'decimal.js';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
@@ -121,17 +122,17 @@ function NumberElement(props) {
 		isIncrementDisabled = typeof maxValue !== 'undefined' && value === maxValue,
 		isDecrementDisabled = typeof minValue !== 'undefined' && (value === minValue || (!value && minValue === 0));
 
-	let className = `
-		Number
-		flex
-		h-full
-		items-center
-		max-h-[40px]
-		p-0
-		border
-		border-grey-400
-		rounded-[6px]
-	`;
+	let className = clsx(
+		'Number',
+		'flex',
+		'h-full',
+		'items-center',
+		'max-h-[40px]',
+		'p-0',
+		'border',
+		'border-grey-400',
+		'rounded-[6px]',
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}
@@ -147,11 +148,11 @@ function NumberElement(props) {
 					}}
 					onPress={onDecrement}
 					isDisabled={isDecrementDisabled || isDisabled}
-					className={`
-						decrementBtn
-						h-full
-						rounded-r-none
-					`}
+					className={clsx(
+						'decrementBtn',
+						'h-full',
+						'rounded-r-none',
+					)}
 					style={{
 						width: 40,
 					}}
@@ -164,15 +165,15 @@ function NumberElement(props) {
 					isDisabled={isDisabled}
 					tooltip={tooltip}
 					tooltipPlacement={tooltipPlacement}
-					tooltipTriggerClassName={`
-						flex-1
-						h-full
-					`}
-					className={`
-						h-full
-						text-center
-						rounded-none
-					`}
+					tooltipTriggerClassName={clsx(
+						'flex-1',
+						'h-full',
+					)}
+					className={clsx(
+						'h-full',
+						'text-center',
+						'rounded-none',
+					)}
 					textAlignIsCenter={true}
 					style={{
 						flex: 3
@@ -187,11 +188,11 @@ function NumberElement(props) {
 					}}
 					onPress={onIncrement}
 					isDisabled={isIncrementDisabled || isDisabled}
-					className={`
-						incrementBtn
-						h-full
-						rounded-l-none
-					`}
+					className={clsx(
+						'incrementBtn',
+						'h-full',
+						'rounded-l-none',
+					)}
 					style={{
 						width: 40,
 					}}

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, } from 'react';
 import {
 	Radio, RadioGroup,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import testProps from '../../../../Functions/testProps.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';

package/src/Components/Form/Field/Select/PageSizeSelect.js

@@ -2,6 +2,7 @@ import { useMemo, } from 'react';
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Select from './Select.js';
 
 export default function PageSizeSelect(props) {

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

@@ -2,6 +2,7 @@ import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectIcon,  SelectItem,  SelectPortal, SelectTrigger,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	hasWidth,
 	hasFlex,
@@ -66,14 +67,14 @@ const SelectElement = forwardRef((props, ref) => {
 	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
-	let className = `
-		Select
-		min-h-[40px]
-		w-full
-		text-left
-		rounded-lg
-		${styles.FORM_SELECT_CLASSNAME}
-	`;
+	let className = clsx(
+		'Select',
+		'min-h-[40px]',
+		'w-full',
+		'text-left',
+		'rounded-lg',
+		styles.FORM_SELECT_CLASSNAME,
+	);
 	if (props.className) {
 		className += props.className;
 	}

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

@@ -3,6 +3,7 @@ import {
 	HStack,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	hasWidth,
 	hasFlex,
@@ -147,20 +148,20 @@ function SliderElement(props) {
 		sliderValue = FAKE_ZERO; // Slider doesn't like zero
 	}
 
-	let className = `
-			Slider
-			w-full
-			items-center
-		`,
-		inputClassName = `
-			Input
-			h-full
-			w-[60px]
-			mr-4
-			text-center
-			rounded-md
-			${styles.SLIDER_READOUT_FONTSIZE}
-		`;
+	let className = clsx(
+			'Slider',
+			'w-full',
+			'items-center',
+		),
+		inputClassName = clsx(
+			'Input',
+			'h-full',
+			'w-[60px]',
+			'mr-4',
+			'text-center',
+			'rounded-md',
+			styles.SLIDER_READOUT_FONTSIZE,
+		);
 	if (props.className) {
 		className += ' ' + props.className;
 	}