@onehat/ui 0.4.37 → 0.4.39

package/package.json

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

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

@@ -0,0 +1,27 @@
+/**
+ * COPYRIGHT NOTICE
+ * This file is categorized as "Custom Source Code"
+ * and is subject to the terms and conditions defined in the
+ * "LICENSE.txt" file, which is part of this source code package.
+ */
+
+import ArrayCombo from './ArrayCombo.js';
+import {
+	METER_TYPES__HOURS,
+	METER_TYPES__MILES,
+} from '../../../../Constants/MeterTypes.js';
+
+const data = [
+	[METER_TYPES__HOURS, 'Hours'],
+	[METER_TYPES__MILES, 'Miles'],
+];
+function MeterTypesCombo(props) {
+	return <ArrayCombo
+				reference="MeterTypeCombo"
+				data={data}
+				disableDirectEntry={true}
+				{...props}
+			/>;
+}
+
+export default MeterTypesCombo;

package/src/Components/Grid/Grid.js

@@ -763,8 +763,18 @@ function GridComponent(props) {
 			const
 				headerHeight = showHeaders ? 50 : 0,
 				footerHeight = !disablePagination ? 50 : 0,
-				height = containerHeight - headerHeight - footerHeight,
-				rowsPerContainer = Math.floor(height / defaultRowHeight);
+				height = containerHeight - headerHeight - footerHeight;
+
+			const rowsPerContainer = Math.floor(height / defaultRowHeight);
+
+			// // Get the total height of all rows
+			// const rows = gridRef.current._listRef._scrollRef.childNodes[0].childNodes;
+			// let totalRowHeight = 0;
+			// rows.forEach((row) => {
+			// 	totalRowHeight += row.getBoundingClientRect().height;
+			// });
+			// const rowsPerContainer = Math.floor(height / (totalRowHeight / rows.length));
+
 			let pageSize = rowsPerContainer;
 			if (showHeaders) {
 				pageSize--;

package/src/Components/Grid/GridRow.js

@@ -83,13 +83,17 @@ function GridRow(props) {
 					if (config.isHidden) {
 						return null;
 					}
-					const propsToPass = columnProps[key] || {};
-					const colStyle = {};
+					const
+						propsToPass = columnProps[key] || {},
+						colStyle = {};
 					let colClassName = `
 						GridRow-column
 						p-1
 						justify-center
 						border-r-black-100
+						block
+						max-h-[40px]
+						overflow-scroll
 					`;
 					if (isOnlyOneVisibleColumn) {
 						colClassName = ' w-full';
@@ -152,9 +156,10 @@ function GridRow(props) {
 						if (config.fieldName) {
 
 							if (item?.properties && item.properties[config.fieldName]) {
-								const property = item.properties[config.fieldName];
+								const
+									property = item.properties[config.fieldName],
+									type = property?.viewerType?.type;
 								value = property.displayValue;
-								const type = property?.viewerType?.type;
 
 								if (type) {
 									const Element = getComponentFromType(type);
@@ -165,6 +170,24 @@ function GridRow(props) {
 									if (config.getCellProps) {
 										_.assign(elementProps, config.getCellProps(item));
 									}
+									let elementClassName = `
+										GridRow-Element
+										self-center
+										text-ellipsis
+										px-2
+										py-3
+										block
+										max-h-[40px]
+										overflow-scroll
+										${colClassName}
+										${styles.GRID_CELL_CLASSNAME}
+									`;
+									if (config.className) {
+										elementClassName += ' ' + config.className;
+									}
+									if (type.match(/(Tag|TagEditor)$/)) {
+										elementClassName += ' max-h-[80px]';
+									}
 									return <Element
 												{...testProps('cell-' + config.fieldName)}
 												value={value}
@@ -175,15 +198,7 @@ function GridRow(props) {
 													...colStyle,
 												}}
 												minimizeForRow={true}
-												className={`
-													GridRow-Element
-													self-center
-													text-ellipsis
-													px-2
-													py-3
-													${colClassName}
-													${styles.GRID_CELL_CLASSNAME}
-												`}
+												className={elementClassName}
 												numberOfLines={1}
 												ellipsizeMode="head"
 												{...propsToPass}
@@ -213,6 +228,22 @@ function GridRow(props) {
 					if (config.getCellProps) {
 						_.assign(elementProps, config.getCellProps(item));
 					}
+					let textClassName = `
+						GridRow-TextNative
+						self-center
+						overflow-hidden
+						text-ellipsis
+						truncate
+						whitespace-nowrap
+						overflow-hidden
+						${colClassName}
+						${styles.GRID_CELL_CLASSNAME} 
+						${styles.GRID_CELL_PX} 
+						${styles.GRID_CELL_PY} 
+					`;
+					if (config.className) {
+						textClassName += ' ' + config.className;
+					}
 					return <TextNative
 								{...testProps('cell-' + config.fieldName)}
 								key={key}
@@ -222,19 +253,7 @@ function GridRow(props) {
 								}}
 								numberOfLines={1}
 								ellipsizeMode="head"
-								className={`
-									GridRow-TextNative
-									self-center
-									overflow-hidden
-									text-ellipsis
-									truncate
-									whitespace-nowrap
-									overflow-hidden
-									${colClassName}
-									${styles.GRID_CELL_CLASSNAME} 
-									${styles.GRID_CELL_PX} 
-									${styles.GRID_CELL_PY} 
-								`}
+								className={textClassName}
 								{...elementProps}
 								{...propsToPass}
 							>{value}</TextNative>;

package/src/Components/Viewer/MeterTypeText.js

@@ -0,0 +1,23 @@
+import {
+	Text,
+} from '@project-components/Gluestack';
+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}
+	`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <Text
+				{...props}
+				className={className}
+			>{props.value ? 'Hours' : 'Miles'}</Text>;
+};

package/src/Components/Viewer/TextWithLinks.js

@@ -0,0 +1,98 @@
+import {
+	Linking,
+} from 'react-native';
+import {
+	BoxNative,
+	Text,
+	TextNative,
+} from '@project-components/Gluestack';
+import {
+	UI_MODE_WEB,
+} from '../../Constants/UiModes.js';
+import UiGlobals from '../../UiGlobals.js';
+import withComponent from '../Hoc/withComponent.js';
+import _ from 'lodash';
+
+function TextWithLinksElement(props) {
+	const {
+			value: text,
+		} = props,
+		styles = UiGlobals.styles,
+		openLink = (url) => {
+			Linking.openURL(url);
+		},
+		extractLinks = (text) => {
+
+			if (_.isNil(text) || _.isEmpty(text)) {
+				return [];
+			}
+			const
+				regex = /\b(?:https?|ftp):\/\/\S+/g,
+				links = text.match(regex) || [];
+		
+			return links.map((link, ix) => ({
+				link,
+				key: `link_${ix}`,
+			}));
+		},
+		renderTextWithLinks = () => {
+			const links = extractLinks(text);
+			let modifiedText = text;
+
+			if (_.isNil(modifiedText) || _.isEmpty(modifiedText)) {
+				return null;
+			}
+	
+			links.forEach(({ link, key }) => {
+				modifiedText = modifiedText.replace(link, key);
+			});
+
+			const
+				textClassName = `
+					TextWithLinks-Text
+					text-base
+					overflow-hidden
+				`,
+				textSegments = modifiedText.split(/(link_\d+)/);
+			if (textSegments.length === 1) {
+				return <Text className={textClassName}>{modifiedText}</Text>;
+			}
+
+			return textSegments.map((segment, ix) => {
+				const foundLink = links.find(({ key }) => segment === key);
+				let ret = <Text key={ix} className={textClassName}>{segment}</Text>;
+		
+				if (foundLink) {
+					ret = <TextNative
+								key={foundLink.key}
+								className={`
+									text-blue-600
+									${textClassName}
+								`}
+								onPress={() => openLink(foundLink.link)}
+							>{foundLink.link}</TextNative>;
+				}
+				return ret;
+			});
+		};
+  
+	const elementProps = {};
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		elementProps.textOverflow = 'ellipsis';
+	}
+	let className = `
+		overflow-auto
+		min-h-[40px]
+		px-3
+		py-2
+	`;
+	if (props.className) {
+		className += ` ${props.className}`;
+	}
+	return <BoxNative
+				className={className}
+				{...props}
+			>{renderTextWithLinks()}</BoxNative>;
+};
+
+export default withComponent(TextWithLinksElement);

package/src/Components/index.js

@@ -218,6 +218,8 @@ import Input from './Form/Field/Input.js';
 import IntervalsCombo from './Form/Field/Combo/IntervalsCombo.js';
 import Json from './Form/Field/Json.js';
 import Label from './Form/Label.js';
+import MeterTypesCombo from './Form/Field/Combo/MeterTypesCombo.js';
+import MeterTypeText from './Viewer/MeterTypeText.js';
 import MonthsCombo from './Form/Field/Combo/MonthsCombo.js';
 import Number from './Form/Field/Number.js';
 import NumberRange from './Filter/NumberRange.js';
@@ -231,6 +233,7 @@ import TabPanel from './Panel/TabPanel.js';
 import Tag from './Form/Field/Tag/Tag.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
+import TextWithLinks from './Viewer/TextWithLinks.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
 import Toggle from './Form/Field/Toggle.js';
 import Toolbar from './Toolbar/Toolbar.js';
@@ -458,6 +461,8 @@ const components = {
 	IntervalsCombo,
 	Json,
 	Label,
+	MeterTypesCombo,
+	MeterTypeText,
 	MonthsCombo,
 	Number,
 	NumberRange,
@@ -471,6 +476,7 @@ const components = {
 	Tag,
 	Text,
 	TextArea,
+	TextWithLinks,
 	TimezonesCombo,
 	Toggle,
 	Toolbar,

package/src/Constants/MeterTypes.js

@@ -0,0 +1,2 @@
+export const METER_TYPES__HOURS = 1;
+export const METER_TYPES__MILES = 2;