@onehat/ui 0.4.71 → 0.4.73

package/src/Components/Hoc/withTooltip.js

@@ -7,6 +7,11 @@ import _ from 'lodash';
 
 export default function withTooltip(WrappedComponent) {
 	return forwardRef((props, ref) => {
+
+		if (props.alreadyHasWithTooltip) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
 		const {
 				tooltip,
 				tooltipPlacement = 'bottom',
@@ -16,7 +21,11 @@ export default function withTooltip(WrappedComponent) {
 				...propsToPass
 			} = props;
 		
-		let component = <WrappedComponent {...propsToPass} ref={ref} />;
+		let component = <WrappedComponent
+							{...propsToPass}
+							alreadyHasWithTooltip={true}
+							ref={ref}
+						/>;
 
 		if (tooltip || !_.isEmpty(_tooltip)) {
 			component = <Tooltip

package/src/Components/Hoc/withValue.js

@@ -9,14 +9,7 @@ import _ from 'lodash';
 export default function withValue(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithValue) {
-			return <WrappedComponent {...props} ref={ref} />;
-		}
-
-		if (props.setValue) {
-			// bypass everything, since we're already using withValue() in hierarchy.
-			// For example, Combo has withValue(), and intenally it uses Input which also has withValue(),
-			// but we only need it defined once for the whole thing.
+		if (props.disableWithValue || props.alreadyHasWithValue) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -143,8 +136,9 @@ export default function withValue(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					disableWithValue={false}
+					alreadyHasWithValue={true}
+					ref={ref}
 					value={convertedValue}
 					setValue={setValueRef.current}
 					onChangeSelection={onChangeSelection}

package/src/Components/Messages/GlobalModals.js

@@ -0,0 +1,70 @@
+
+import { useSelector, useDispatch, } from 'react-redux';
+import {
+	selectIsWaitModalShown,
+	selectAlertMessage,
+	selectDebugMessage,
+	selectInfoMessage,
+	selectWaitMessage,
+	setAlertMessage,
+	setDebugMessage,
+	setInfoMessage,
+	selectProgressMessage,
+	selectProgressPercentage,
+} from '@src/models/Slices/DebugSlice';
+import WaitMessage from './WaitMessage';
+import ErrorMessage from './ErrorMessage';
+import ProgressModal from './ProgressModal';
+
+
+
+export default function GlobalModals(props) {
+	const {
+			progressColor = '#666',
+		} = props,
+		dispatch = useDispatch(),
+		isWaitModalShown = useSelector(selectIsWaitModalShown),
+		alertMessage = useSelector(selectAlertMessage),
+		debugMessage = useSelector(selectDebugMessage),
+		infoMessage = useSelector(selectInfoMessage),
+		waitMessage = useSelector(selectWaitMessage),
+		progressMessage = useSelector(selectProgressMessage),
+		progressPercentage = useSelector(selectProgressPercentage);
+
+	let moduleToShow = null;
+
+	if (debugMessage) {
+		moduleToShow =
+			<ErrorMessage
+				text={debugMessage}
+				onOk={() => dispatch(setDebugMessage(null))}
+				color="green"
+			/>;
+	} else if (alertMessage) {
+		moduleToShow = 
+			<ErrorMessage
+				text={alertMessage}
+				onOk={() => dispatch(setAlertMessage(null))}
+			/>;
+	} else if (infoMessage) {
+		moduleToShow =
+			<ErrorMessage
+				text={infoMessage}
+				onOk={() => dispatch(setInfoMessage(null))}
+				color="#000"
+			/>;
+	}
+	if (isWaitModalShown) {
+		moduleToShow = <WaitMessage text={waitMessage} />;
+	}
+	if (progressMessage && progressPercentage < 100) {
+		moduleToShow = <ProgressModal
+							progressMessage={progressMessage}
+							progressPercentage={progressPercentage}
+							color={progressColor}
+						/>;
+	}
+	
+	return moduleToShow;
+}
+

package/src/Components/Messages/Loading.js

@@ -10,14 +10,14 @@ import ScreenContainer from '../Container/ScreenContainer.js';
 export default function Loading(props) {
 
 	if (props.isScreen) {
-		return <ScreenContainer {...props}>
+		return <ScreenContainer className="h-full w-full" {...props}>
 					<HStack className="flex-1 justify-center items-center">
 						<Spinner className="text-primary-500 mr-1" />
 						<Text>Loading</Text>
 					</HStack>
 				</ScreenContainer>;
 	}
-	return <HStackNative {...props} className="justify-center min-h-[100px]">
+	return <HStackNative {...props} className="justify-center min-h-[100px] h-full w-full">
 				<Spinner className="flex-1 text-primary-500" />
 			</HStackNative>;
 }

package/src/Components/Messages/ProgressModal.js

@@ -0,0 +1,63 @@
+import { useState, useEffect, } from 'react';import {
+	HStack,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Spinner,
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+import clsx from 'clsx';
+import { useSelector } from 'react-redux';
+import * as Progress from 'react-native-progress';
+import testProps from '../../Functions/testProps';
+
+let progressTimeout = null;
+
+export default function ProgressModal(props) {
+	const {
+			progressMessage,
+			progressPercentage,
+			color = '#666',
+		} = props,
+		[progressBarWidth, setProgressBarWidth] = useState(175),
+		[isInited, setIsInited] = useState(false);
+
+	return <Modal
+				{...testProps('ProgressModal')}
+				isOpen={true}
+				className="Modal"
+				aria-disabled={true}
+			>
+				<ModalBackdrop />
+				<ModalContent
+					className={clsx(
+						'ModalContent',
+						'max-w-[400px]',
+						'shadow-lg',
+					)}
+				>
+					<VStack
+						className={clsx(
+							'VStack',
+							'w-[90%]',
+							'items-center',
+							'justify-center',
+							'self-center',
+						)}
+						onLayout={(e) => {
+							setProgressBarWidth(e.nativeEvent.layout.width);
+							setIsInited(true);
+						}}
+					>
+						<Text className="text-black mb-2">{progressMessage}</Text>
+						{isInited && 
+							<Progress.Bar
+								animated={false}
+								progress={progressPercentage / 100}
+								width={progressBarWidth}
+								height={20}
+								color={color}
+							/>}
+					</VStack>
+				</ModalContent>
+			</Modal>;
+}

package/src/Components/Messages/WaitMessage.js

@@ -5,6 +5,11 @@ import {
 	Text,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import testProps from '../../Functions/testProps.js';
 
 export default function WaitMessage(props) {
@@ -19,14 +24,14 @@ export default function WaitMessage(props) {
 				{...testProps('WaitMessage')}
 				isOpen={true}
 				className="Modal"
-				aria-disabled="true"
+				aria-disabled={true}
 			>
 				<ModalBackdrop />
 				<ModalContent
 					className={clsx(
 						'ModalContent',
 						'w-[200px]',
-						'h-[50px]',
+						CURRENT_MODE === UI_MODE_WEB ? 'h-[50px]' : '',
 						'shadow-lg',
 					)}
 				>

package/src/Components/Report/Report.js

@@ -41,6 +41,7 @@ function Report(props) {
 			disableExcel = false,
 			showReportHeaders = true,
 			isQuickReport = false,
+			additionalData = {},
 			quickReportData = {},
 			alert,
 		} = props,
@@ -50,7 +51,10 @@ function Report(props) {
 				reportId,
 				reportType: REPORT_TYPES__EXCEL,
 				showReportHeaders,
-				data: quickReportData,
+				data: {
+					...additionalData,
+					...quickReportData,
+				},
 			});
 		},
 		downloadReport = (args) => {
@@ -74,8 +78,8 @@ function Report(props) {
 
 	if (isQuickReport) {
 		let className = clsx(
-			'Report',
-			'max-w-[100px]',
+			'QuickReport',
+			'flex-1',
 			'm-2',
 		);
 		if (props.className) {
@@ -122,7 +126,10 @@ function Report(props) {
 			icon: Excel,
 			onPress: (data) => downloadReport({
 				reportId,
-				data,
+				data: {
+					...data,
+					...additionalData,
+				},
 				reportType: REPORT_TYPES__EXCEL,
 				showReportHeaders,
 			}),
@@ -137,7 +144,10 @@ function Report(props) {
 			icon: Pdf,
 			onPress: (data) => downloadReport({
 				reportId,
-				data,
+				data: {
+					...data,
+					...additionalData,
+				},
 				reportType: REPORT_TYPES__PDF,
 				showReportHeaders,
 			}),

package/src/Components/Toolbar/Pagination.js

@@ -212,7 +212,7 @@ export default function Pagination(props) {
 						'Pagination',
 						'items-center',
 						'shrink-0',
-						'gap-2',
+						'gap-1',
 					)}
 				>
 					{items}

package/src/Components/Toolbar/Toolbar.js

@@ -1,7 +1,12 @@
 import {
 	HStackNative,
+	ScrollView,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {
@@ -20,13 +25,28 @@ export default function Toolbar(props) {
 		'border-b-grey-400',
 		styles.TOOLBAR_CLASSNAME,
 	);
+	if (CURRENT_MODE === UI_MODE_NATIVE) {
+		className += ' min-w-[100%]';
+	}
 	if (props.className) {
 		className += ' ' + props.className
 	}
-	return <HStackNative
-				className={className}
-				style={props.style || {}}
-			>
-				{props.children}
-			</HStackNative>;
+	let toolbar = <HStackNative
+						className={className}
+						style={props.style || {}}
+					>
+						{props.children}
+					</HStackNative>;	
+
+	if (CURRENT_MODE === UI_MODE_NATIVE) {
+		toolbar = <ScrollView
+						horizontal={true}
+						className={clsx(
+							'min-w-[100%]',
+							'max-h-[50px]',
+						)}
+					>{toolbar}</ScrollView>;
+	}
+
+	return toolbar;
 };

package/src/Components/Tree/Tree.js

@@ -1088,17 +1088,26 @@ function TreeComponent(props) {
 											id: item.id,
 											item,
 											getSelection,
+											isInSelection,
 											type: nodeDragSourceType,
+											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]);
+												}
+											},
 										};
 
 										// Prevent root nodes from being dragged, and use custom logic if provided
 										nodeDragProps.canDrag = (monitor) => {
 											const currentSelection = getSelection();
 											
-											// Check if any selected node is a root node (can't drag root nodes)
-											const hasRootNode = currentSelection.some(node => node.isRoot);
-											if (hasRootNode) {
-												return false;
+											if (isInSelection(item)) {
+												// make sure root node is not selected (can't drag root nodes)
+												const hasRootNode = currentSelection.some(node => node.isRoot);
+												if (hasRootNode) {
+													return false;
+												}
 											}
 											
 											// Use custom drag validation if provided
@@ -1118,7 +1127,7 @@ function TreeComponent(props) {
 										// Add drag preview rendering
 										nodeDragProps.getDragProxy = getCustomDragProxy ? 
 											(dragItem) => getCustomDragProxy(item, getSelection()) :
-											null; // Let GlobalDragProxy handle the default case
+											null; // let GlobalDragProxy handle the default case
 
 										const dropTargetAccept = 'internal';
 										nodeDragProps.isDropTarget = true;
@@ -1178,15 +1187,22 @@ function TreeComponent(props) {
 											nodeDragProps.isDragSource = !item.isRoot; // Root nodes cannot be dragged
 											nodeDragProps.dragSourceType = nodeDragSourceType;
 											if (getNodeDragSourceItem) {
-												nodeDragProps.dragSourceItem = getNodeDragSourceItem(item, getSelection, nodeDragSourceType);
+												nodeDragProps.dragSourceItem = getNodeDragSourceItem(item, getSelection, isInSelection, nodeDragSourceType);
 											} else {
 												nodeDragProps.dragSourceItem = {
 													id: item.id,
 													item,
 													getSelection,
+													isInSelection,
 													type: nodeDragSourceType,
 												};
 											}
+											nodeDragProps.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 (canNodeMoveExternally) {
 												nodeDragProps.canDrag = canNodeMoveExternally;
 											}

package/src/Components/Tree/TreeNode.js

@@ -16,7 +16,7 @@ import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
-import TreeNodeDragHandle from './TreeNodeDragHandle.js';
+import RowHandle from '../Grid/RowHandle.js';
 import testProps from '../../Functions/testProps.js';
 import ChevronRight from '../Icons/ChevronRight.js';
 import ChevronDown from '../Icons/ChevronDown.js';
@@ -40,11 +40,13 @@ export default function TreeNode(props) {
 			nodeProps = {},
 			onToggle,
 			bg,
+			isDraggable,
 			isDragSource,
 			isHovered,
 			isHighlighted,
 			isOver,
 			isSelected,
+			showSelectHandle,
 			canDrop,
 			draggedItem,
 			validateDrop, // same as canDrop (for visual feedback)
@@ -144,19 +146,21 @@ export default function TreeNode(props) {
 						backgroundColor: bg,
 					}}
 					ref={(element) => {
-						// Attach both drag and drop refs to the same element
-						if (dragSourceRef && typeof dragSourceRef === 'function') {
-							dragSourceRef(element);
-						}
 						if (dropTargetRef && dropTargetRef.current !== undefined) {
 							// dropTargetRef is a ref object, not a callback
 							dropTargetRef.current = element;
 						}
 					}}
 				>
-					{isPhantom && <Box t={0} l={0} className="absolute bg-[#f00] h-[2px] w-[2px]" />}
+					{isPhantom && <Box className="absolute t-0 l-0 bg-[#f00] h-[2px] w-[2px]" />}
 					
-					{isDragSource && <TreeNodeDragHandle />}
+					{(isDragSource || showSelectHandle) &&
+						<RowHandle
+							ref={dragSourceRef}
+							isDragSource={isDragSource}
+							isDraggable={isDraggable}
+							showSelectHandle={showSelectHandle}
+						/>}
 
 					{hasChildren && <IconButton
 										{...testProps('expandBtn')}
@@ -180,12 +184,8 @@ export default function TreeNode(props) {
 									'flex',
 									'flex-1',
 									'text-ellipsis',
-									'select-none',
 									styles.TREE_NODE_CLASSNAME,
 								)}
-								style={{
-									userSelect: 'none',
-								}}
 							>{text}</TextNative>}
 
 					{content}

package/src/Components/Tree/TreeNodeDragHandle.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	Icon,
 	VStack,
@@ -6,11 +7,11 @@ import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
-function TreeNodeDragHandle(props) {
+const TreeNodeDragHandle = forwardRef(function(props, ref) {
 	let className = clsx(
 		'TreeNodeDragHandle',
 		'h-full',
-		'w-[14px]',
+		'w-[17px]',
 		'px-[2px]',
 		'border-l-2',
 		'items-center',
@@ -21,14 +22,17 @@ function TreeNodeDragHandle(props) {
 		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]" />
+					className="handle w-full h-full text-[#ccc]"
+				/>
 			</VStack>;
-}
+});
 
 export default TreeNodeDragHandle;

package/src/Components/Viewer/MeterTypeText.js

@@ -2,6 +2,13 @@ import {
 	TextNative,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	METER_TYPES__HOURS,
+	METER_TYPES__MILES,
+	METER_TYPES__HOURS_TEXT,
+	METER_TYPES__MILES_TEXT,
+} from '../../Constants/MeterTypes';
+
 import UiGlobals from '../../UiGlobals';
 
 export default function MeterTypeText(props) {
@@ -17,8 +24,21 @@ export default function MeterTypeText(props) {
 	if (props.className) {
 		className += ' ' + props.className;
 	}
+	let meterType = '';
+	switch(props.value) {
+		case METER_TYPES__HOURS:
+			meterType = METER_TYPES__HOURS_TEXT;
+			break;
+		case METER_TYPES__MILES:
+			meterType = METER_TYPES__MILES_TEXT;
+			break;
+		default:
+			meterType = 'unknown';
+			break;
+	}
+	
 	return <TextNative
 				{...props}
 				className={className}
-			>{props.value ? 'Time (hrs)' : 'Distance (mi/km)'}</TextNative>;
+			>{meterType}</TextNative>;
 };

package/src/Components/Viewer/TextWithLinks.js

@@ -8,6 +8,7 @@ import {
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -78,7 +79,7 @@ function TextWithLinksElement(props) {
 		};
   
 	const elementProps = {};
-	if (UiGlobals.mode === UI_MODE_WEB) {
+	if (CURRENT_MODE === UI_MODE_WEB) {
 		elementProps.textOverflow = 'ellipsis';
 	}
 	let className = clsx(

package/src/Constants/Dates.js

@@ -10,8 +10,11 @@ export const ONE_MONTH_AGO = moment().add(-1, 'months');
 export const TWO_MONTHS_AGO = moment().add(-2, 'months');
 export const SIX_MONTHS_AGO = moment().add(-6, 'months');
 export const ONE_MONTH_FROM_NOW = moment().add(1, 'months');
+export const START_OF_THIS_MONTH = moment().startOf('months');
+export const END_OF_LAST_MONTH = moment().subtract(1, 'months').endOf('month');
 export const ONE_YEAR_AGO = moment().add(-1, 'years');
 export const MOMENT_DATE_FORMAT_1 = 'YYYY-MM-DD HH:mm:ss';
-export const MOMENT_DATE_FORMAT_2 = 'MMMM Do YYYY, h:mm:ss a';
-export const MOMENT_DATE_FORMAT_3 = 'h:mm A';
+export const MOMENT_DATE_FORMAT_2 = 'MMMM Do YYYY, h:mm:ss a'; // pretty datetime
+export const MOMENT_DATE_FORMAT_3 = 'h:mm A'; // pretty time
 export const MOMENT_DATE_FORMAT_4 = 'YYYY-MM-DD';
+export const MOMENT_DATE_FORMAT_5 = 'HH:mm:ss';

package/src/Constants/MeterTypes.js

@@ -1,2 +1,4 @@
 export const METER_TYPES__HOURS = 1;
 export const METER_TYPES__MILES = 2;
+export const METER_TYPES__HOURS_TEXT = 'Time (hrs)';
+export const METER_TYPES__MILES_TEXT = 'Distance (mi/km)';

package/src/Functions/addIconProps.js

@@ -0,0 +1,46 @@
+
+import clsx from 'clsx';
+import {
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+	CURRENT_MODE,
+} from '../Constants/UiModes.js';
+import _ from 'lodash';
+
+export default function addIconProps(iconProps = {}) {
+
+	iconProps = _.cloneDeep(iconProps); // avoid mutating the original props, as they may be submitted to multiple components
+
+	iconProps.className = clsx(
+		'Icon',
+		iconProps.className,
+	);
+
+	if (CURRENT_MODE === UI_MODE_WEB) {
+		return iconProps;
+	}
+
+	// native only
+
+	// marginx
+	iconProps.style = {
+		marginHorizontal: 8,
+		...iconProps.style,
+	};
+
+	// On native, react-native-svg ignores className and will only size the icon based on 
+	// explicit width / height props (or size if the wrapper supports it).
+	// If no size set, it falls back to the full intrinsic viewBox size, so we need to ensure we set a default size.
+	// If you want to override the size, pass width and height props to the icon.
+	if (iconProps.width || iconProps.height) {
+		return iconProps;
+	}
+	const nativeDefaults = {
+		width: 24,
+		height: 24,
+	};
+	return {
+		...nativeDefaults,
+		...iconProps,
+	};
+}