@onehat/ui 0.4.70 → 0.4.72

package/src/Components/Viewer/MeterTypeText.js

@@ -1,23 +1,44 @@
 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) {
 	const styles = UiGlobals.styles;
 
-	let className = `
-		Text
-		flex-1
-		px-3
-		py-2
-		${styles.FORM_TEXT_CLASSNAME}
-	`;
+	let className = clsx(
+		'Text',
+		'flex-1',
+		'px-3',
+		'py-2',
+		styles.FORM_TEXT_CLASSNAME,
+	);
 	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

@@ -6,6 +6,7 @@ import {
 	Text,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
@@ -48,11 +49,11 @@ function TextWithLinksElement(props) {
 			});
 
 			const
-				textClassName = `
-					TextWithLinks-Text
-					text-base
-					overflow-hidden
-				`,
+				textClassName = clsx(
+					'TextWithLinks-Text',
+					'text-base',
+					'overflow-hidden',
+				),
 				textSegments = modifiedText.split(/(link_\d+)/);
 			if (textSegments.length === 1) {
 				return <Text className={textClassName}>{modifiedText}</Text>;
@@ -65,10 +66,10 @@ function TextWithLinksElement(props) {
 				if (foundLink) {
 					ret = <TextNative
 								key={foundLink.key}
-								className={`
-									text-blue-600
-									${textClassName}
-								`}
+								className={clsx(
+									'text-blue-600',
+									textClassName,
+								)}
 								onPress={() => openLink(foundLink.link)}
 							>{foundLink.link}</TextNative>;
 				}
@@ -80,12 +81,12 @@ function TextWithLinksElement(props) {
 	if (UiGlobals.mode === UI_MODE_WEB) {
 		elementProps.textOverflow = 'ellipsis';
 	}
-	let className = `
-		overflow-auto
-		min-h-[40px]
-		px-3
-		py-2
-	`;
+	let className = clsx(
+		'overflow-auto',
+		'min-h-[40px]',
+		'px-3',
+		'py-2',
+	);
 	if (props.className) {
 		className += ` ${props.className}`;
 	}

package/src/Components/Viewer/Viewer.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Animated, {
 	useSharedValue,
 	useAnimatedStyle,
@@ -264,12 +265,12 @@ function Viewer(props) {
 				}
 			}
 
-			let elementClassName = `
-				Viewer-field
-				basis-auto
-				grow
-				shrink
-			`;
+			let elementClassName = clsx(
+				'Viewer-field',
+				'basis-auto',
+				'grow',
+				'shrink',
+			);
 			const defaultsClassName = defaults.className;
 			if (defaultsClassName) {
 				elementClassName += ' ' + defaultsClassName;
@@ -474,11 +475,11 @@ function Viewer(props) {
 	if (!hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
-	let className = `
-		Viewer-VStackNative
-		h-full
-		bg-white
-	`;
+	let className = clsx(
+		'Viewer-VStackNative',
+		'h-full',
+		'bg-white',
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}
@@ -491,11 +492,11 @@ function Viewer(props) {
 							{...testProps('deleteBtn')}
 							key="deleteBtn"
 							onPress={onDelete}
-							className={`
-								text-white
-								bg-warning-500
-								hover:bg-warning-600
-							`}
+							className={clsx(
+								'text-white',
+								'bg-warning-500',
+								'hover:bg-warning-600',
+							)}
 							text="Delete"
 						/>
 					</HStack>}
@@ -523,12 +524,12 @@ function Viewer(props) {
 						ref={scrollViewRef}
 						onScroll={onScroll}
 						scrollEventThrottle={16 /* ms */}
-						className={`
-							Viewer-ScrollView
-							w-full
-							pb-1
-							flex-1
-						`}
+						className={clsx(
+							'Viewer-ScrollView',
+							'w-full',
+							'pb-1',
+							'flex-1',
+						)}
 					>
 						{scrollToTopAnchor}
 						{canEdit && onEditMode &&

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -5,6 +5,7 @@
  * "LICENSE.txt" file, which is part of this source code package.
  */
 import { useState, } from 'react';
+import clsx from 'clsx';
 import Excel from '../Icons/Excel';
 import Panel from '../Panel/Panel.js';
 import Form from '../Form/Form.js';
@@ -187,11 +188,11 @@ function UploadsDownloadsWindow(props) {
 				reference="UploadsDownloadsWindow"
 				isCollapsible={false}
 				title="Uploads & Downloads"
-				className={`
-					flex-none
-					bg-white
-					shadow-lg
-				`}
+				className={clsx(
+					'flex-none',
+					'bg-white',
+					'shadow-lg',
+				)}
 				style={{
 					height,
 					width,

package/src/Components/index.js

@@ -2,6 +2,7 @@ import {
 	HStackNative,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import AddressBook from './Icons/AddressBook.js';
 import Alt from './Icons/Alt.js';
 import AngleLeft from './Icons/AngleLeft.js';

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,
+	};
+}

package/src/Functions/testProps.js

@@ -22,7 +22,7 @@ export default function testProps(id, suffix) {
 	if (suffix) {
 		id += suffix; // this is used in conjunction with 'self' object
 	}
-	if (!window && Platform.OS === 'android') {
+	if (typeof window === 'undefined' && Platform.OS === 'android') {
 		return {
 			accessibilityLabel: id,
 			accessible: true,

package/src/Hooks/useWhyDidYouUpdate.js

@@ -0,0 +1,33 @@
+import { useRef, useEffect } from 'react';
+
+// This custom hook logs changes in props for debugging purposes.
+// It can be used to track why a component re-renders by comparing current props with previous props
+
+// Usage in your component:
+// useWhyDidYouUpdate('withMhTree', { enterpriseId, getEquipment, showInactiveEquipment });
+
+export default function useWhyDidYouUpdate(name, props) {
+	const previous = useRef();
+	
+	useEffect(() => {
+		if (previous.current) {
+			const allKeys = Object.keys({ ...previous.current, ...props });
+			const changedProps = {};
+			
+			allKeys.forEach(key => {
+				if (previous.current[key] !== props[key]) {
+				changedProps[key] = {
+					from: previous.current[key],
+					to: props[key]
+				};
+				}
+			});
+			
+			if (Object.keys(changedProps).length) {
+				console.log('[why-did-you-update]', name, changedProps);
+			}
+		}
+		
+		previous.current = props;
+	});
+}

package/src/PlatformImports/Web/Attachments.js

@@ -37,7 +37,7 @@ import _ from 'lodash';
 const
 	EXPANDED_MAX = 100,
 	COLLAPSED_MAX = 4,
-	isPwa = !!window?.navigator?.standalone;
+	isPwa = typeof window !== 'undefined' && !!window?.navigator?.standalone;
 
 function FileCardCustom(props) {
 	const {

package/src/Components/Hoc/withBlank.js

@@ -1,10 +0,0 @@
-import { forwardRef } from 'react';
-
-export default function withBlank(WrappedComponent) {
-	return forwardRef((props, ref) => {
-		const {
-
-			} = props;
-		return <WrappedComponent {...props} ref={ref} />;
-	});
-}