@onehat/ui 0.4.71 → 0.4.72

package/package.json

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

package/src/Components/Buttons/Button.js

@@ -6,6 +6,7 @@ import {
 	ButtonIcon,
 	ButtonGroup,
 } from '@project-components/Gluestack';
+import addIconProps from '../../Functions/addIconProps.js';
 import clsx from 'clsx';
 import withComponent from '../Hoc/withComponent.js';
 import withTooltip from '../Hoc/withTooltip.js';
@@ -24,23 +25,23 @@ const ButtonComponent = forwardRef((props, ref) => {
 			_text = {}, // props for ButtonText
 			...propsToPass
 		} = props;
-	
+
 	if (icon) {
 		if (isValidElement(icon)) {
 			if (_icon) {
-				icon = cloneElement(icon, {..._icon});
+				icon = cloneElement(icon, addIconProps(_icon || {}));
 			}
 		} else {
-			icon = <ButtonIcon className="ButtonIcon" as={icon} {..._icon} />;
+			icon = <ButtonIcon as={icon} {...addIconProps(_icon || {})} />;
 		}
 	}
 	if (rightIcon) {
 		if (isValidElement(rightIcon)) {
 			if (_rightIcon) {
-				rightIcon = cloneElement(rightIcon, {..._rightIcon});
+				rightIcon = cloneElement(rightIcon, addIconProps(_rightIcon || {}));
 			}
 		} else {
-			rightIcon = <ButtonIcon className="ButtonIcon" as={rightIcon} {..._rightIcon} />;
+			rightIcon = <ButtonIcon as={rightIcon} {...addIconProps(_rightIcon || {})} />;
 		}
 	}
 	
@@ -55,12 +56,18 @@ const ButtonComponent = forwardRef((props, ref) => {
 	let className = clsx(
 		'Button',
 		'flex',
+		'flex-row',
+		'items-center',
 	);
 	if (propsToPass.className) {
 		className += ' ' + propsToPass.className;
 	}
 	
-	return <Button {...propsToPass} className={className} ref={ref}>
+	return <Button
+				{...propsToPass}
+				className={className}
+				ref={ref}
+			>
 				{isLoading && <ButtonSpinner className="ButtonSpinner" {..._spinner} />}
 				{icon}
 				{text && <ButtonText className="ButtonText" {..._text}>{text}</ButtonText>}

package/src/Components/Container/ScreenContainer.js

@@ -50,6 +50,7 @@ function ScreenContainer(props) {
 						onLayout={onLayout}
 						{...safeAreaProps}
 						className={className}
+						style={{ minHeight: height - headerHeight }}
 					>
 						{props.children}
 					</VStackNative>;

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

@@ -9,11 +9,13 @@ import ArrayCombo from './ArrayCombo.js';
 import {
 	METER_TYPES__HOURS,
 	METER_TYPES__MILES,
+	METER_TYPES__HOURS_TEXT,
+	METER_TYPES__MILES_TEXT,
 } from '../../../../Constants/MeterTypes.js';
 
 const data = [
-	[METER_TYPES__HOURS, 'Time (hrs)'],
-	[METER_TYPES__MILES, 'Distance (mi/km)'],
+	[METER_TYPES__HOURS, METER_TYPES__HOURS_TEXT],
+	[METER_TYPES__MILES, METER_TYPES__MILES_TEXT],
 ];
 function MeterTypesCombo(props) {
 	return <ArrayCombo

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

@@ -8,6 +8,7 @@ import {
 	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';
@@ -145,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">
@@ -169,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/Grid/Grid.js

@@ -35,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';
@@ -171,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
@@ -540,6 +540,7 @@ function GridComponent(props) {
 									rowReorderProps.dragSourceItem = {
 										id: item.id,
 										getSelection,
+										isInSelection,
 										onDrag: (dragState) => {
 											onRowReorderDrag(dragState, dragIx);
 										},
@@ -547,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) {
@@ -697,8 +708,7 @@ function GridComponent(props) {
 			};
 		},
 		buildCachedDragElements = (dragState) => {
-			const
-				{
+			const {
 					canDrag,
 					isDragging,
 					clientOffset,
@@ -747,8 +757,7 @@ function GridComponent(props) {
 				cachedDragElements.current = buildCachedDragElements(dragState);
 			}
 
-			const
-				{
+			const {
 					canDrag,
 					isDragging,
 					clientOffset,

package/src/Components/Grid/GridHeaderRow.js

@@ -407,7 +407,7 @@ export default function GridHeaderRow(props) {
 										'overflow-hidden',
 										'text-ellipsis',
 										'px-2',
-										py-3,
+										'py-3',
 										styles.GRID_HEADER_CLASSNAME,
 									)}
 								>{header}</TextNative>

package/src/Components/Grid/GridRow.js

@@ -20,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
@@ -45,7 +44,6 @@ function GridRow(props) {
 			rowProps,
 			hideNavColumn,
 			showSelectHandle,
-			isRowSelectable,
 			isRowHoverable,
 			isSelected,
 			isHovered,
@@ -102,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 {
@@ -198,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;
 									}
@@ -212,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) {
 
@@ -342,8 +353,13 @@ function GridRow(props) {
 		};
 
 		let rowContents = <>
-							{(isDragSource || isDraggable) && <RowDragHandle />}
-							{showSelectHandle && <RowSelectHandle />}
+							{(isDragSource || isDraggable || showSelectHandle) &&
+								<RowHandle
+									ref={dragSourceRef}
+									isDragSource={isDragSource}
+									isDraggable={isDraggable}
+									showSelectHandle={showSelectHandle}
+								/>}
 							
 							{isPhantom && 
 								<Box
@@ -373,21 +389,6 @@ function GridRow(props) {
 									)}
 								/>}
 						</>;
-
-		if (dragSourceRef) {
-			rowContents = <HStack
-								ref={dragSourceRef}
-								className={clsx(
-									'GridRow-dragSourceRef',
-									'w-full',
-									'flex-1',
-									'grow-1',
-								)}
-								style={{
-									backgroundColor: bg,
-								}}
-							>{rowContents}</HStack>;
-		}
 		if (dropTargetRef) {
 			rowContents = <HStack
 								ref={dropTargetRef}

package/src/Components/Grid/RowDragHandle.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	Icon,
 	VStack,
@@ -6,15 +7,29 @@ import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
-function RowDragHandle(props) {	return <VStack
-			style={styles.ewResize}
-			className="RowDragHandle bg-grey-100 w-[7px] items-center justify-center select-none"
-		>
-				<Icon
-					as={GripVertical}
-					size="xs"
-					className="handle w-full h-full text-[#ccc]" />
-			</VStack>;
-}
+const RowDragHandle = forwardRef(function(props, ref) {
+	let className = clsx(
+		'RowDragHandle',
+		'bg-grey-100',
+		'w-[17px]',
+		'items-center',
+		'justify-center',
+		'select-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <VStack
+				{...props}
+				ref={ref}
+				style={styles.ewResize}
+				className={className}
+			>
+					<Icon
+						as={GripVertical}
+						size="xs"
+						className="handle w-full h-full text-[#ccc]" />
+				</VStack>;
+});
 
 export default RowDragHandle;

package/src/Components/Grid/RowHandle.js

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import {
+	Icon,
+	VStack,
+} from '@project-components/Gluestack';
+import withTooltip from '@onehat/ui/src/Components/Hoc/withTooltip';
+import clsx from 'clsx';
+import Arcs from '../Icons/Arcs.js';
+
+const RowHandle = forwardRef(function RowHandle(props, ref) {
+	const {
+			isDragSource,
+			isDraggable
+		} = props;
+	let className = clsx(
+		'RowHandle',
+		'h-full',
+		'w-[40px]',
+		'px-2',
+		'items-center',
+		'justify-center',
+		'select-none',
+		'cursor-pointer'
+	);
+	return <VStack
+				ref={isDragSource || isDraggable ? ref : undefined}
+				className={className}
+			>
+				<Icon as={Arcs} size="xs" className="w-full h-full text-[#ddd]" />
+			</VStack>;
+});
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		const {
+				showSelectHandle,
+				isDragSource,
+				isDraggable
+			} = props;
+		let tooltipParts = [];
+		if (showSelectHandle) {
+			tooltipParts.push('Select');
+		}
+		if (isDragSource || isDraggable) {
+			tooltipParts.push('Drag');
+		}
+		const tooltip = tooltipParts.length === 2 ? tooltipParts.join(' or ') : tooltipParts[0];
+		return <WrappedComponent
+					tooltip={tooltip}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withTooltip(RowHandle));

package/src/{Hooks → Components/Grid}/useAsyncRenderers.js

@@ -7,7 +7,7 @@ export default function useAsyncRenderers(columnsConfig, item) {
 
 	useEffect(() => {
 		const asyncConfigs = columnsConfig.filter(config => 
-			config.renderer && typeof config.renderer === 'function'
+			config.isAsync && config.renderer && typeof config.renderer === 'function'
 		);
 
 		if (asyncConfigs.length === 0) {

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

@@ -8,7 +8,7 @@ import _ from 'lodash';
 export default function withSecondaryData(WrappedComponent) {
 	return (props) => {
 
-		if (props.secondaryDisableWithData) {
+		if (props.secondaryDisableWithData || props.secondaryAlreadyHasWithData) {
 			return <WrappedComponent {...props} />;
 		}
 		
@@ -104,6 +104,7 @@ export default function withSecondaryData(WrappedComponent) {
 		return <WrappedComponent
 					{...propsToPass}
 					secondaryDisableWithData={false}
+					secondaryAlreadyHasWithData={true}
 					SecondaryRepository={LocalSecondaryRepository}
 					secondaryModel={secondaryModel}
 					secondaryData={secondaryData}

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

@@ -24,7 +24,7 @@ import _ from 'lodash';
 export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 	return forwardRef((props, ref) => {
 
-		if (props.secondaryDisableWithEditor) {
+		if (props.secondaryDisableWithEditor || props.secondaryAlreadyHasWithEditor) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
@@ -643,8 +643,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					secondaryDisableWithEditor={false}
+					secondaryAlreadyHasWithEditor={true}
+					ref={ref}
 					secondaryCurrentRecord={secondaryCurrentRecord}
 					secondarySetCurrentRecord={secondarySetCurrentRecord}
 					secondaryIsEditorShown={secondaryIsEditorShown}

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

@@ -14,7 +14,7 @@ import _ from 'lodash';
 export default function withSelection(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.secondaryDisableWithSelection) {
+		if (props.secondaryDisableWithSelection || props.secondaryAlreadyHasWithSelection) {
 			return <WrappedComponent {...props} />;
 		}
 
@@ -414,8 +414,9 @@ export default function withSelection(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					secondaryDisableWithSelection={false}
+					secondaryAlreadyHasWithSelection={true}
+					ref={ref}
 					secondarySelection={secondaryGetSelection()}
 					secondaryGetSelection={secondaryGetSelection}
 					secondarySetSelection={secondarySetSelection}

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

@@ -10,7 +10,7 @@ import _ from 'lodash';
 export default function withSecondaryValue(WrappedComponent) {
 	return (props) => {
 
-		if (props.secondaryDisableWithValue) {
+		if (props.secondaryDisableWithValue || props.secondaryAlreadyHasWithValue) {
 			return <WrappedComponent {...props} />;
 		}
 
@@ -146,6 +146,7 @@ export default function withSecondaryValue(WrappedComponent) {
 		return <WrappedComponent
 					{...props}
 					secondaryDisableWithValue={false}
+					secondaryAlreadyHasWithValue={true}
 					secondaryValue={convertedValue}
 					secondarySetValue={secondarySetValue}
 					secondaryOnChangeSelection={secondaryOnChangeSelection}

package/src/Components/Hoc/withAlert.js

@@ -19,7 +19,7 @@ import _ from 'lodash';
 function withAlert(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithAlert || props.alert) {
+		if (props.disableWithAlert || props.alreadyHasWithAlert) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -170,6 +170,8 @@ function withAlert(WrappedComponent) {
 		return <WrappedComponent
 					{...props}
 					ref={ref}
+					disableWithAlert={false}
+					alreadyHasWithAlert={true}
 					alert={onAlert}
 					confirm={onConfirm}
 					hideAlert={hideModal}

package/src/Components/Hoc/withCollapsible.js

@@ -2,8 +2,12 @@ import { forwardRef, useState } from 'react';
 
 export default function withCollapsible(WrappedComponent) {
 	return forwardRef((props, ref) => {
-		const
-			{
+
+		if (props.alreadyHasWithCollapsible) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
+		const {
 				isCollapsed = false,
 				startsCollapsed = false,
 				setIsCollapsed,
@@ -12,10 +16,11 @@ export default function withCollapsible(WrappedComponent) {
 			[localIsCollapsed, setLocalIsCollapsed] = useState(startsCollapsed);
 
 		return <WrappedComponent
-					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
-					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
 					{...props}
+					alreadyHasWithCollapsible={true}
 					ref={ref}
+					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
+					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
 				/>;
 	});
 }

package/src/Components/Hoc/withComponent.js

@@ -14,6 +14,10 @@ import _ from 'lodash';
 export default function withComponent(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
+		// if (props.disableWithComponent || props.alreadyHasWithComponent) {
+		// 	return <WrappedComponent {...props} ref={ref} />;
+		// }
+
 		props = _.clone(props); // without cloning, I couldn't write to props
 
 		// translate h, w, and flex tokens to styles
@@ -90,6 +94,8 @@ export default function withComponent(WrappedComponent) {
 					self={selfRef.current}
 					{...propsToPass}
 					ref={ref}
+					disableWithComponent={false}
+					// alreadyHasWithComponent={true}
 				/>;
 	});
 }

package/src/Components/Hoc/withContextMenu.js

@@ -11,6 +11,11 @@ import _ from 'lodash';
 
 export default function withContextMenu(WrappedComponent) {
 	return forwardRef((props, ref) => {
+
+		if (props.alreadyHasWithContextMenu) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
 		const {
 				// extract and pass
 				disableContextMenu = false,
@@ -161,6 +166,7 @@ export default function withContextMenu(WrappedComponent) {
 
 		return <WrappedComponent
 					{...propsToPass}
+					alreadyHasWithContextMenu={true}
 					ref={ref}
 					onContextMenu={onContextMenu}
 				/>;

package/src/Components/Hoc/withData.js

@@ -12,7 +12,7 @@ import _ from 'lodash';
 export default function withData(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithData) {
+		if (props.disableWithData || props.alreadyHasWithData) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 		
@@ -121,8 +121,9 @@ export default function withData(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					disableWithData={false}
+					alreadyHasWithData={true}
+					ref={ref}
 					Repository={LocalRepository}
 					fields={fields}
 					idField={idField}