@onehat/ui 0.4.101 → 0.4.102

package/package.json

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

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

@@ -100,6 +100,8 @@ export const ComboComponent = forwardRef((props, ref) => {
 			onGridSave, // to hook into when menu saves (ComboEditor only)
 			onGridDelete, // to hook into when menu deletes (ComboEditor only)
 			onSubmit, // when Combo is used in a Tag, call this when the user submits the Combo value (i.e. presses Enter or clicks a row)
+			displayProperty, // override for Repository.schema.model.displayProperty
+			valueProperty, // override for Repository.schema.model.idProperty
 			newEntityDisplayProperty,
 			testID,
 
@@ -242,7 +244,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 						displayValue = _.each(value, (id) => {
 							const entity = Repository.getById(id);
 							if (entity) {
-								displayValue.push(entity.displayValue);
+								displayValue.push((displayProperty ? entity?.[displayProperty] : entity?.displayValue) || '');
 							}
 						});
 					}
@@ -272,7 +274,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 								}
 							}
 						}
-						displayValue = entity?.displayValue || '';
+						displayValue = (displayProperty ? entity?.[displayProperty] : entity?.displayValue) || '';
 					}
 				} else {
 					const item = _.find(data, (datum) => datum[idIx] === value);
@@ -318,7 +320,11 @@ export const ComboComponent = forwardRef((props, ref) => {
 
 					let id = null;
 					if (gridSelection.length) {
-						id = Repository ? gridSelection[0].id : gridSelection[0][idIx];
+						if (Repository) {
+							id = valueProperty ? gridSelection[0][valueProperty] : gridSelection[0].id;
+						} else {
+							id = gridSelection[0][idIx];
+						}
 					}
 					if (id !== value) {
 						setValue(id);
@@ -863,7 +869,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 								return;
 							}
 
-							setValue(selection[0] ? selection[0].id : null);
+							setValue(selection[0] ? (valueProperty ? selection[0][valueProperty] : selection[0].id) : null);
 
 						} else {
 

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

@@ -545,10 +545,16 @@ function TagComponent(props) {
 
 function withAdditionalProps(WrappedComponent) {
 	return (props) => {
+		const tooltipTriggerClassName = clsx(
+			'w-full',
+			'flex-1',
+			props.tooltipTriggerClassName,
+		);
 		return <WrappedComponent
 					isValueAlwaysArray={true}
 					isValueAsStringifiedJson={true}
 					{...props}
+					tooltipTriggerClassName={tooltipTriggerClassName}
 				/>;
 	};
 }

package/src/Components/Grid/Grid.js

@@ -147,6 +147,7 @@ function GridComponent(props) {
 			showHeaders = true,
 			showHovers = true,
 			showSelectHandle = true,
+			isRowTextSelectable, // if false, user can't select text in rows (e.g. to copy/paste)
 			isRowSelectable = true,
 			isRowHoverable = true,
 			isDisabled = false,
@@ -789,6 +790,7 @@ function GridComponent(props) {
 									areCellsScrollable={areCellsScrollable}
 									showHovers={showHovers}
 									showRowHandle={showRowHandle}
+									isRowTextSelectable={isRowTextSelectable}
 									rowCanSelect={rowCanSelect}
 									rowCanDrag={rowCanDrag}
 									index={index}

package/src/Components/Grid/GridRow.js

@@ -38,6 +38,7 @@ const GridRow = forwardRef((props, ref) => {
 			rowProps,
 			hideNavColumn,
 			showRowHandle,
+			isRowTextSelectable,
 			areCellsScrollable,
 			rowCanSelect,
 			rowCanDrag,
@@ -126,6 +127,8 @@ const GridRow = forwardRef((props, ref) => {
 		const
 			visibleColumns = _.filter(columnsConfig, (config) => !config.isHidden),
 			isOnlyOneVisibleColumn = visibleColumns.length === 1,
+			canSelectTextOnRow = isRowTextSelectable === false ? false : isDragFromHandleOnly,
+			shouldUseTextCursor = showRowHandle && canSelectTextOnRow,
 			rowShouldHaveDragRef = !isDragFromHandleOnly && (isDragSource || isDraggable) && !!dragSourceRef;
 		const setRowRef = (node) => {
 			if (typeof ref === 'function') {
@@ -152,7 +155,7 @@ const GridRow = forwardRef((props, ref) => {
 					const
 						propsToPass = columnProps[key] || {},
 						colStyle = {},
-						whichCursor = showRowHandle && isDragFromHandleOnly ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
+						whichCursor = shouldUseTextCursor ? 'cursor-text' : 'cursor-pointer';
 					let colClassName = clsx(
 						'GridRow-column',
 						'p-1',
@@ -160,7 +163,7 @@ const GridRow = forwardRef((props, ref) => {
 						'border-r-black-100',
 						'block',
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
-						isDragFromHandleOnly ? null : 'select-none',
+						canSelectTextOnRow ? null : 'select-none',
 						whichCursor,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
@@ -465,7 +468,7 @@ const GridRow = forwardRef((props, ref) => {
 		let rowClassName = clsx(
 			'GridRow-HStackNative',
 			'items-center',
-			isDragFromHandleOnly ? null : 'select-none',
+			canSelectTextOnRow ? null : 'select-none',
 		);
 		if (isOnlyOneVisibleColumn) {
 			rowClassName += ' w-full';
@@ -514,6 +517,7 @@ const GridRow = forwardRef((props, ref) => {
 		dragPreviewRef,
 		dropTargetRef,
 		showRowHandle,
+		isRowTextSelectable,
 		rowCanSelect,
 		rowCanDrag,
 		isDragFromHandleOnly,

package/src/Components/Icons/Lock.js

@@ -0,0 +1,11 @@
+import { createIcon } from "../Gluestack/icon";
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import { Path, Svg } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 640 640',
+	path: <Path d="M256 160v64h128v-64c0-35.3-28.7-64-64-64s-64 28.7-64 64zm-64 64v-64c0-70.7 57.3-128 128-128s128 57.3 128 128v64c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V288c0-35.3 28.7-64 64-64z" />,
+});
+
+export default SvgComponent

package/src/Components/Screens/ReportsManager.js

@@ -8,44 +8,63 @@ import {
 import clsx from 'clsx';
 import ChartPie from '../Icons/ChartPie.js';
 import ScreenHeader from '../Layout/ScreenHeader.js';
+import TabBar from '../Tab/TabBar.js';
+import _ from 'lodash';
 
 const CONTAINER_THRESHOLD = 1100;
 
 export default function ReportsManager(props) {
 	const {
 			reports = [],
+			reportTabs,
+			initialReportTabIx = 0,
+			id,
+			self,
 			isActive = false,
 		} = props,
 		[containerWidth, setContainerWidth] = useState(),
 		onLayout = (e) => {
 			setContainerWidth(e.nativeEvent.layout.width);
+		},
+		renderReportLayout = (reportsToRender = []) => {
+			if (!containerWidth) {
+				return null;
+			}
+
+			if (containerWidth >= CONTAINER_THRESHOLD) {
+				const
+					reportsPerColumn = Math.ceil(reportsToRender.length / 2),
+					col1Reports = reportsToRender.slice(0, reportsPerColumn),
+					col2Reports = reportsToRender.slice(reportsPerColumn);
+				return <HStack className="gap-3">
+							<VStack className="flex-1">
+								{col1Reports}
+							</VStack>
+							<VStack className="flex-1">
+								{col2Reports}
+							</VStack>
+						</HStack>;
+			}
+
+			return reportsToRender;
 		};
 
 	if (!isActive) {
 		return null;
 	}
 
-	let reportElements = [];
-	if (containerWidth) {
-		if (containerWidth >= CONTAINER_THRESHOLD) {
-			// two column layout
-			const
-				reportsPerColumn = Math.ceil(reports.length / 2),
-				col1Reports = reports.slice(0, reportsPerColumn),
-				col2Reports = reports.slice(reportsPerColumn);
-			reportElements = <HStack className="gap-3">
-								<VStack className="flex-1">
-									{col1Reports}
-								</VStack>
-								<VStack className="flex-1">
-									{col2Reports}
-								</VStack>
-							</HStack>;
-		} else {
-			// one column layout
-			reportElements = reports;
-		}
-	}
+	const
+		hasReportTabs = _.isArray(reportTabs) && reportTabs.length > 0,
+		tabBarId = `${id || self?.path || 'ReportsManager'}-reportTabs`,
+		reportElements = renderReportLayout(reports),
+		tabBarTabs = hasReportTabs ? _.map(reportTabs, (tab, ix) => ({
+			...tab,
+			content: <ScrollView className="flex-1 w-full" key={`reportTabContent-${ix}`}>
+							<VStackNative className="w-full p-4" onLayout={onLayout}>
+								{renderReportLayout(tab.reports || [])}
+							</VStackNative>
+						</ScrollView>,
+		})) : [];
 	
 	return <VStack
 				className="overflow-hidden flex-1 w-full"
@@ -54,10 +73,16 @@ export default function ReportsManager(props) {
 					title="Reports"
 					icon={ChartPie}
 				/>
-				<ScrollView className="flex-1 w-full">
-					<VStackNative className="w-full p-4" onLayout={onLayout}>
-						{containerWidth && reportElements}
-					</VStackNative>
-				</ScrollView>
+				{hasReportTabs ?
+					<TabBar
+						id={tabBarId}
+						initialTabIx={initialReportTabIx}
+						tabs={tabBarTabs}
+					/> :
+					<ScrollView className="flex-1 w-full">
+						<VStackNative className="w-full p-4" onLayout={onLayout}>
+							{containerWidth && reportElements}
+						</VStackNative>
+					</ScrollView>}
 			</VStack>;
 }