@onehat/ui 0.4.70 → 0.4.71

package/src/Components/Form/Label.js

@@ -2,26 +2,27 @@ import {
 	HStack,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Constants/Styles.js';
 
 export default function Label(props) {
-	let className = `
-		Label
-		items-center
-		min-w-[120px]
-		pl-2
-	`;
+	let className = clsx(
+		'Label',
+		'items-center',
+		'min-w-[120px]',
+		'pl-2',
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}
-	let textClassName = `
-		Label-TextNative
-		inline-block
-		text-ellipsis
-		text-base
-		w-full
-		${styles.FORM_LABEL_CLASSNAME}
-	`;
+	let textClassName = clsx(
+		'Label-TextNative',
+		'inline-block',
+		'text-ellipsis',
+		'text-base',
+		'w-full',
+		styles.FORM_LABEL_CLASSNAME,
+	);
 	if (props._text?.className) {
 		textClassName += ' ' + props._text.className;
 	}

package/src/Components/Grid/Grid.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	ScrollView,
 } from 'react-native';
@@ -113,10 +114,10 @@ function GridComponent(props) {
 			defaultHiddenColumns = [],
 			getRowProps = (item) => {
 				return {
-					className: `
-						border-bottom-1
-						border-bottom-grey-500
-					`,
+					className: clsx(
+						'border-bottom-1',
+						'border-bottom-grey-500',
+					),
 				};
 			},
 			flatListProps = {},
@@ -481,12 +482,12 @@ function GridComponent(props) {
 							onContextMenu(item, e, newSelection);
 						}
 					}}
-					className={`
-						Pressable
-						Row
-						flex-row
-						grow
-					`}
+					className={clsx(
+						'Pressable',
+						'Row',
+						'flex-row',
+						'grow',
+					)}
 				>
 					{({
 						hovered,
@@ -623,21 +624,21 @@ function GridComponent(props) {
 
 			if (showRowExpander && !isHeaderRow) {
 				const isExpanded = getIsExpanded(index);
-				let className = `
-					Grid-rowExpander
-					w-full
-					flex-none
-				`;
+				let className = clsx(
+					'Grid-rowExpander',
+					'w-full',
+					'flex-none',
+				);
 				if (rowProps?.className) {
 					className += ' ' + rowProps.className;
 				}
 				rowComponent = <VStack className={className}>
 									<HStack
-										className={`
-											Grid-rowExpander-HStack
-											w-full
-											grow
-										`}
+										className={clsx(
+											'Grid-rowExpander-HStack',
+											'w-full',
+											'grow',
+										)}
 									>
 										<ExpandButton
 											{...testProps((Repository ? Repository.schema.name : 'GridRow') + '-expandBtn-' + item?.id)}
@@ -646,10 +647,10 @@ function GridComponent(props) {
 											_icon={{
 												size: 'sm',
 											}}
-											className={`
-												Grid-rowExpander-expandBtn
-												${styles.GRID_EXPAND_BTN_CLASSNAME}
-											`}
+											className={clsx(
+												'Grid-rowExpander-expandBtn',
+												styles.GRID_EXPAND_BTN_CLASSNAME,
+											)}
 											tooltip="Expand/Contract Row"
 										/>
 										{rowComponent}
@@ -1276,12 +1277,12 @@ function GridComponent(props) {
 	if (!hasHeight(props) && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
-	let className = `
-		Grid-VStackNative
-		w-full
-		border
-		border-grey-300
-	`;
+	let className = clsx(
+		'Grid-VStackNative',
+		'w-full',
+		'border',
+		'border-grey-300',
+	);
 	if (props.className) {
 		className += props.className;
 	}
@@ -1304,14 +1305,14 @@ function GridComponent(props) {
 							deselectAll();
 						}
 					}}
-					className={`
-						gridContainer
-						w-full
-						h-full
-						flex-1
-						min-h-[40px]
-						${gridContainerBorderClassName}
-					`}
+					className={clsx(
+						'gridContainer',
+						'w-full',
+						'h-full',
+						'flex-1',
+						'min-h-[40px]',
+						gridContainerBorderClassName,
+					)}
 				>
 					{grid}
 				</VStack>
@@ -1324,13 +1325,13 @@ function GridComponent(props) {
 		grid = <VStackNative
 					{...testProps(self, '-dropTarget')}
 					ref={dropTargetRef}
-					className={`
-						Grid-dropTarget
-						h-full
-						w-full
-						border-[#0ff]
-						${canDrop && isOver ? "border-[4px]" : "border-[0px]"}
-					`}
+					className={clsx(
+						'Grid-dropTarget',
+						'h-full',
+						'w-full',
+						'border-[#0ff]',
+						canDrop && isOver ? 'border-[4px]' : 'border-[0px]',
+					)}
 				>{grid}</VStackNative>
 	}
 	return grid;

package/src/Components/Grid/GridHeaderRow.js

@@ -6,6 +6,7 @@ import {
 	Pressable,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	SORT_ASCENDING,
 	SORT_DESCENDING,
@@ -309,10 +310,10 @@ export default function GridHeaderRow(props) {
 						isSorter = isSortable && canColumnsSort && sortField === fieldName,
 						isReorderable = canColumnsReorder && configIsReorderable,
 						isResizable = canColumnsResize && configIsResizable,
-						rowClassName = `
-							border-r-2
-							border-r-white
-						`;
+						rowClassName = clsx(
+							'border-r-2',
+							'border-r-white',
+						);
 					if (isHidden) {
 						return null;
 					}
@@ -357,16 +358,16 @@ export default function GridHeaderRow(props) {
 								}}
 								onMouseEnter={(e) => onHeaderMouseEnter(e, ix)}
 								onMouseLeave={(e) => onHeaderMouseLeave(e, ix)}
-								className={`
-									GridHeaderRow-Pressable
-									h-full
-									flex-row
-									p-0
-									items-center
-									justify-center
-									${rowClassName}
-									${styles.GRID_HEADER_PRESSABLE_CLASSNAME}
-								`}
+								className={clsx(
+									'GridHeaderRow-Pressable',
+									'h-full',
+									'flex-row',
+									'p-0',
+									'items-center',
+									'justify-center',
+									rowClassName,
+									styles.GRID_HEADER_PRESSABLE_CLASSNAME,
+								)}
 								style={rowStyle}
 							>
 								{isReorderable && isOver && 
@@ -395,20 +396,20 @@ export default function GridHeaderRow(props) {
 								<TextNative
 									key="Text"
 									numberOfLines={1}
-									className={`
-										GridHeaderRow-TextNative
-										h-auto
-										flex-1
-										items-center
-										justify-center
-										leading-tight
-										text-center
-										overflow-hidden
-										text-ellipsis
-										px-2
-										py-3
-										${styles.GRID_HEADER_CLASSNAME}
-									`}
+									className={clsx(
+										'GridHeaderRow-TextNative',
+										'h-auto',
+										'flex-1',
+										'items-center',
+										'justify-center',
+										'leading-tight',
+										'text-center',
+										'overflow-hidden',
+										'text-ellipsis',
+										'px-2',
+										py-3,
+										styles.GRID_HEADER_CLASSNAME,
+									)}
 								>{header}</TextNative>
 								
 								{isSorter && 
@@ -416,12 +417,13 @@ export default function GridHeaderRow(props) {
 										key="Icon"
 										as={isSortDirectionAsc ? SortUp : SortDown}
 										size={styles.GRID_HEADER_ICON_SIZE}
-										className={`
-											GridHeaderRow-Icon
-											text-center
-											text-grey-500
-											${styles.GRID_HEADER_ICON_CLASSNAME}
-										`} />}
+										className={clsx(
+											'GridHeaderRow-Icon',
+											'text-center',
+											'text-grey-500',
+											styles.GRID_HEADER_ICON_CLASSNAME,
+										)}
+									/>}
 								
 								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 
 										<HeaderColumnSelectorHandle
@@ -488,12 +490,12 @@ export default function GridHeaderRow(props) {
 					style={{
 						scrollbarWidth: 'none',
 					}}
-					className={`
-						GridHeaderRow-HStack
-						w-full
-						h-[40px]
-						bg-grey-200
-					`}
+					className={clsx(
+						'GridHeaderRow-HStack',
+						'w-full',
+						'h-[40px]',
+						'bg-grey-200',
+					)}
 				> 
 					{renderHeaders()}
 				</HStack>;

package/src/Components/Grid/GridRow.js

@@ -7,6 +7,7 @@ import {
 	Text,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	UI_MODE_WEB,
 	UI_MODE_NATIVE,
@@ -133,16 +134,16 @@ function GridRow(props) {
 						propsToPass = columnProps[key] || {},
 						colStyle = {},
 						whichCursor = showSelectHandle ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
-					let colClassName = `
-						GridRow-column
-						p-1
-						justify-center
-						border-r-black-100
-						block
-						overflow-auto
-						${whichCursor}
-						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
-					`;
+					let colClassName = clsx(
+						'GridRow-column',
+						'p-1',
+						'justify-center',
+						'border-r-black-100',
+						'block',
+						'overflow-auto',
+						whichCursor,
+						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
+					);
 					if (isOnlyOneVisibleColumn) {
 						colClassName = ' w-full';
 					} else {
@@ -248,18 +249,18 @@ function GridRow(props) {
 									if (config.getCellProps) {
 										_.assign(cellProps, config.getCellProps(item));
 									}
-									let elementClassName = `
-										GridRow-Element
-										self-center
-										text-ellipsis
-										px-2
-										py-3
-										block
-										overflow-scroll
-										${colClassName}
-										${styles.GRID_CELL_CLASSNAME}
-										${styles.GRID_ROW_MAX_HEIGHT_NORMAL}
-									`;
+									let elementClassName = clsx(
+										'GridRow-Element',
+										'self-center',
+										'text-ellipsis',
+										'px-2',
+										'py-3',
+										'block',
+										'overflow-scroll',
+										colClassName,
+										styles.GRID_CELL_CLASSNAME,
+										styles.GRID_ROW_MAX_HEIGHT_NORMAL,
+									);
 									if (config.className) {
 										elementClassName += ' ' + config.className;
 									}
@@ -309,14 +310,14 @@ function GridRow(props) {
 					if (config.getCellProps) {
 						_.assign(elementProps, config.getCellProps(item));
 					}
-					let textClassName = `
-						GridRow-TextNative
-						self-center
-						overflow-hidden
-						${colClassName}
-						${styles.GRID_CELL_CLASSNAME}
-						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
-					`;
+					let textClassName = clsx(
+						'GridRow-TextNative',
+						'self-center',
+						'overflow-hidden',
+						colClassName,
+						styles.GRID_CELL_CLASSNAME,
+						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
+					);
 					if (config.className) {
 						textClassName += ' ' + config.className;
 					}
@@ -346,15 +347,15 @@ function GridRow(props) {
 							
 							{isPhantom && 
 								<Box
-									className={`
-										GridRow-phantom
-										absolute
-										h-2
-										w-2
-										top-0
-										left-0
-										bg-[#f00]
-									`}
+									className={clsx(
+										'GridRow-phantom',
+										'absolute',
+										'h-2',
+										'w-2',
+										'top-0',
+										'left-0',
+										'bg-[#f00]',
+									)}
 								/>}
 							
 							{renderColumns(item)}
@@ -363,25 +364,25 @@ function GridRow(props) {
 								<Icon
 									as={AngleRight}
 									variant="outline"
-									className={`
-										GridRow-Icon
-										w-30
-										self-center
-										mx-3
-										${styles.GRID_NAV_COLUMN_COLOR}
-									`}
+									className={clsx(
+										'GridRow-Icon',
+										'w-30',
+										'self-center',
+										'mx-3',
+										styles.GRID_NAV_COLUMN_COLOR,
+									)}
 								/>}
 						</>;
 
 		if (dragSourceRef) {
 			rowContents = <HStack
 								ref={dragSourceRef}
-								className={`
-									GridRow-dragSourceRef
-									w-full
-									flex-1
-									grow-1
-								`}
+								className={clsx(
+									'GridRow-dragSourceRef',
+									'w-full',
+									'flex-1',
+									'grow-1',
+								)}
 								style={{
 									backgroundColor: bg,
 								}}
@@ -390,22 +391,22 @@ function GridRow(props) {
 		if (dropTargetRef) {
 			rowContents = <HStack
 								ref={dropTargetRef}
-								className={`
-									GridRow-dropTargetRef
-									w-full
-									flex-1
-									grow-1
-								`}
+								className={clsx(
+									'GridRow-dropTargetRef',
+									'w-full',
+									'flex-1',
+									'grow-1',
+								)}
 								style={{
 									backgroundColor: bg,
 								}}
 							>{rowContents}</HStack>;
 		}
 
-		let rowClassName = `
-			GridRow-HStackNative
-			items-center
-		`;
+		let rowClassName = clsx(
+			'GridRow-HStackNative',
+			'items-center',
+		);
 		if (isOnlyOneVisibleColumn) {
 			rowClassName += ' w-full';
 		}

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	Pressable,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Gear from '../Icons/Gear.js';
 import _ from 'lodash';
 
@@ -13,14 +14,14 @@ export default function HeaderColumnSelectorHandle(props) {
 				_hover={{ bg: 'grey-200' }}
 				_pressed={{ bg: 'grey-300' }}
 				onPress={showColumnsSelector}
-				className={`
-					HeaderColumnSelectorHandle
-					bg-grey-100
-					h-full
-					w-3
-					items-center
-					justify-center
-				`}
+				className={clsx(
+					'HeaderColumnSelectorHandle',
+					'bg-grey-100',
+					'h-full',
+					'w-3',
+					'items-center',
+					'justify-center',
+				)}
 			>
 				<Icon
 					as={Gear}

package/src/Components/Grid/HeaderReorderHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripVertical from '../Icons/GripVertical.js';
@@ -13,14 +14,14 @@ function HeaderReorderHandle(props) {
 
 	return <VStack
 				style={styles.ewResize}
-				className={`
-					HeaderReorderHandle
-					h-full
-					w-3
-					items-center
-					justify-center
-					${isDragging ? 'bg-grey-300' : 'bg-grey-100'}
-				`}
+				className={clsx(
+					'HeaderReorderHandle',
+					'h-full',
+					'w-3',
+					'items-center',
+					'justify-center',
+					isDragging ? 'bg-grey-300' : 'bg-grey-100',
+				)}
 			>
 				<Icon
 					as={GripVertical}

package/src/Components/Grid/HeaderResizeHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripLinesVertical from '../Icons/GripLinesVertical.js';
@@ -13,14 +14,14 @@ function HeaderResizeHandle(props) {
 
 	return <VStack
 				style={styles.ewResize}
-				className={`
-					HeaderResizeHandle
-					h-full
-					w-3
-					items-center
-					justify-center
-					${isDragging ? 'bg-grey-300' : 'bg-grey-100'}
-				`}
+				className={clsx(
+					'HeaderResizeHandle',
+					'h-full',
+					'w-3',
+					'items-center',
+					'justify-center',
+					isDragging ? 'bg-grey-300' : 'bg-grey-100',
+				)}
 			>
 				<Icon
 					as={GripLinesVertical}

package/src/Components/Grid/NoRecordsFound.js

@@ -3,6 +3,7 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import IconButton from '../Buttons/IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 
@@ -23,9 +24,9 @@ export default function NoRecordsFound(props) {
 							icon={Rotate}
 							_icon={{
 								size: 'md',
-								className: `
-									text-grey-400
-								`,
+								className: clsx(
+									'text-grey-400',
+								),
 							}}
 							onPress={onRefresh}
 							variant="outline"

package/src/Components/Grid/RowDragHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 

package/src/Components/Grid/RowSelectHandle.js

@@ -2,6 +2,7 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Arcs from '../Icons/Arcs.js';
 
 function RowSelectHandle(props) {

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -169,7 +169,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (secondaryDefaultValues) {
 						_.merge(defaultValuesToUse, secondaryDefaultValues);
 					}
-					addValues = [...defaultValuesToUse];
+					addValues = {...defaultValuesToUse};
 				}
 
 				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.js

@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../Constants/Editor.js';
@@ -82,11 +83,11 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 								{...secondaryEditorProps}
 								parent={self}
 								reference="secondaryEditor"
-								className={`
-									bg-white
-									shadow-lg
-									rounded-lg
-								`}
+								className={clsx(
+									'bg-white',
+									'shadow-lg',
+									'rounded-lg',
+								)}
 							/>
 						</Modal>}
 				</>;