@onehat/ui 0.4.70 → 0.4.72

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';
@@ -34,7 +35,6 @@ import {
 	hasFlex,
 } from '../../Functions/tailwindFunctions.js';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
-import Inflector from 'inflector-js';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
@@ -113,10 +113,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 = {},
@@ -170,6 +170,7 @@ function GridComponent(props) {
 
 			// DND
 			canRowsReorder = false,
+			canRowDrag, // optional fn to customize whether each row can be dragged
 			canRowAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
 			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
 			dragPreviewOptions, // optional object for drag preview positioning options
@@ -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,
@@ -539,6 +540,7 @@ function GridComponent(props) {
 									rowReorderProps.dragSourceItem = {
 										id: item.id,
 										getSelection,
+										isInSelection,
 										onDrag: (dragState) => {
 											onRowReorderDrag(dragState, dragIx);
 										},
@@ -546,20 +548,30 @@ function GridComponent(props) {
 									rowReorderProps.onDragEnd = onRowReorderEnd;
 								} else {
 									// Don't allow drag/drop from withDnd while reordering
-									if (areRowsDragSource) {
+									if (areRowsDragSource && (!canRowDrag || canRowDrag(item))) {
 										WhichRow = DragSourceGridRow;
 										rowDragProps.isDragSource = true;
 										rowDragProps.dragSourceType = rowDragSourceType;
 										if (getRowDragSourceItem) {
-											rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, rowDragSourceType);
+											rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, isInSelection, rowDragSourceType);
 										} else {
 											rowDragProps.dragSourceItem = {
 												id: item.id,
 												item,
 												getSelection,
+												isInSelection,
 												type: rowDragSourceType,
 											};
 										}
+										rowDragProps.dragSourceItem.onDragStart = () => {
+											if (!isInSelection(item)) { // get updated isSelected (will be stale if using one in closure)
+												// reset the selection to just this one node if it's not already selected
+												setSelection([item]);
+											}
+										};
+										if (canRowDrag) {
+											rowDragProps.canDrag = () => canRowDrag(item, rowDragProps.dragSourceItem);
+										}
 										
 										// Add custom drag preview options
 										if (dragPreviewOptions) {
@@ -623,21 +635,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 +658,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}
@@ -696,8 +708,7 @@ function GridComponent(props) {
 			};
 		},
 		buildCachedDragElements = (dragState) => {
-			const
-				{
+			const {
 					canDrag,
 					isDragging,
 					clientOffset,
@@ -746,8 +757,7 @@ function GridComponent(props) {
 				cachedDragElements.current = buildCachedDragElements(dragState);
 			}
 
-			const
-				{
+			const {
 					canDrag,
 					isDragging,
 					clientOffset,
@@ -1276,12 +1286,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 +1314,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 +1334,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,
@@ -19,9 +20,8 @@ import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import testProps from '../../Functions/testProps.js';
 import Loading from '../Messages/Loading.js';
 import AngleRight from '../Icons/AngleRight.js';
-import RowDragHandle from './RowDragHandle.js';
-import RowSelectHandle from './RowSelectHandle.js';
-import useAsyncRenderers from '../../Hooks/useAsyncRenderers.js';
+import RowHandle from './RowHandle.js';
+import useAsyncRenderers from './useAsyncRenderers.js';
 import _ from 'lodash';
 
 // Conditional import for web only
@@ -44,7 +44,6 @@ function GridRow(props) {
 			rowProps,
 			hideNavColumn,
 			showSelectHandle,
-			isRowSelectable,
 			isRowHoverable,
 			isSelected,
 			isHovered,
@@ -101,7 +100,7 @@ function GridRow(props) {
 			actualCanDrop = validateDrop(draggedItem);
 		}
 
-		if (isRowSelectable && isSelected) {
+		if (showSelectHandle && isSelected) {
 			if (showHovers && isHovered) {
 				mixWith = styles.GRID_ROW_SELECTED_BG_HOVER;
 			} else {
@@ -133,16 +132,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 {
@@ -197,13 +196,33 @@ function GridRow(props) {
 							};
 
 							let content = null;
+							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;
+							}
+							const rendererProps = {
+								...testProps('rendererCol-' + config.fieldName),
+								className: textClassName,
+								...propsToPass,
+								...extraProps,
+								style: colStyle,
+							};
 							if (config.isAsync) {
+								// TODO: Figure out how to pass the rendererProps to the async renderer function
+								throw Error('Not yet working correctly!');
 								// Async renderer
 								if (isLoading) {
 									content = <Loading />;
 								} else if (asyncResult) {
 									if (asyncResult.error) {
-										content = <Text>Render Error: {asyncResult.error.message || String(asyncResult.error)}</Text>;
+										content = <Text key={key}>Render Error: {asyncResult.error.message || String(asyncResult.error)}</Text>;
 									} else {
 										content = asyncResult.result;
 									}
@@ -211,24 +230,17 @@ function GridRow(props) {
 							} else {
 								// Synchronous renderer
 								try {
-									const result = config.renderer(item);
+									const result = config.renderer(item, config.fieldName, rendererProps, key);
 									if (result && typeof result.then === 'function') {
-										content = <Text>Error: Async renderer not properly configured</Text>;
+										content = <Text key={key}>Error: Async renderer not properly configured</Text>;
 									} else {
 										content = result;
 									}
 								} catch (error) {
-									content = <Text>Render Error: {error}</Text>;
+									content = <Text key={key}>Render Error: {error}</Text>;
 								}
 							}
-							return <HStackNative
-										key={key}
-										{...testProps('rendererCol-' + key)}
-										className={colClassName}
-										{...propsToPass}
-										{...extraProps}
-										style={colStyle}
-									>{content}</HStackNative>;
+							return content;
 						}
 						if (config.fieldName) {
 
@@ -248,18 +260,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 +321,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;
 					}
@@ -341,20 +353,25 @@ function GridRow(props) {
 		};
 
 		let rowContents = <>
-							{(isDragSource || isDraggable) && <RowDragHandle />}
-							{showSelectHandle && <RowSelectHandle />}
+							{(isDragSource || isDraggable || showSelectHandle) &&
+								<RowHandle
+									ref={dragSourceRef}
+									isDragSource={isDragSource}
+									isDraggable={isDraggable}
+									showSelectHandle={showSelectHandle}
+								/>}
 							
 							{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,49 +380,34 @@ 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
-								`}
-								style={{
-									backgroundColor: bg,
-								}}
-							>{rowContents}</HStack>;
-		}
 		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';
 		}