@onehat/ui 0.4.100 → 0.4.102

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.100",
+	"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,
@@ -201,6 +202,7 @@ function GridComponent(props) {
 			},
 			dragPreviewOptions, // optional object for drag preview positioning options
 			areRowsDragSource = false,
+			areRowsDragFromHandleOnly,
 			rowDragSourceType,
 			getRowDragSourceItem,
 			areRowsDropTarget = false,
@@ -641,10 +643,23 @@ function GridComponent(props) {
 
 							const userHasPermissionToDrag = (!canUser || canUser(EDIT));
 							if (userHasPermissionToDrag) {
+
+								// Determine whether dragging should only be allowed from a handle, based on global default and grid prop override
+								let dragFromRowHandleOnly = true;
+								if (!_.isNil(UiGlobals.gridAreRowsDragFromHandleOnly)) {
+									// allow global default
+									dragFromRowHandleOnly = UiGlobals.gridAreRowsDragFromHandleOnly;
+								}
+								if (!_.isNil(areRowsDragFromHandleOnly)) {
+									// allow grid props override
+									dragFromRowHandleOnly = areRowsDragFromHandleOnly;
+								}
+								
 								// assign event handlers
 								if (canRowsReorder && isReorderMode) {
 									WhichRow = DragSourceGridRow;
 									rowReorderProps.isDragSource = true;
+									rowReorderProps.isDragFromHandleOnly = dragFromRowHandleOnly;
 									rowReorderProps.dragSourceType = 'row';
 									const dragIx = showHeaders ? index - 1 : index;
 									rowReorderProps.dragSourceItem = {
@@ -656,6 +671,14 @@ function GridComponent(props) {
 											onRowReorderDrag(dragState, dragIx);
 										},
 									};
+									// Add custom drag preview options
+									if (dragPreviewOptions) {
+										rowReorderProps.dragPreviewOptions = dragPreviewOptions;
+									}
+									// Add drag preview rendering
+									rowReorderProps.getDragProxy = getCustomDragProxy ?
+										(dragItem) => getCustomDragProxy(item, getSelection()) :
+										null; // Let GlobalDragProxy handle the default case
 									rowReorderProps.onDragEnd = onRowReorderEnd;
 									rowCanDrag = true;
 								} else {
@@ -664,6 +687,7 @@ function GridComponent(props) {
 										WhichRow = DragSourceGridRow;
 										rowDragProps.isDragSource = true;
 										rowDragProps.dragSourceType = rowDragSourceType;
+										rowDragProps.isDragFromHandleOnly = dragFromRowHandleOnly;
 										if (getRowDragSourceItem) {
 											rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, isInSelection, rowDragSourceType);
 											// Ensure all drag items have a component reference
@@ -766,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,
@@ -53,6 +54,7 @@ const GridRow = forwardRef((props, ref) => {
 			isInlineEditorShown,
 			isDraggable = false, // withDraggable
 			isDragSource = false, // withDnd
+			isDragFromHandleOnly = true,
 			isOver = false, // drop target
 			canDrop,
 			draggedItem,
@@ -124,7 +126,24 @@ const GridRow = forwardRef((props, ref) => {
 		}
 		const
 			visibleColumns = _.filter(columnsConfig, (config) => !config.isHidden),
-			isOnlyOneVisibleColumn = visibleColumns.length === 1;
+			isOnlyOneVisibleColumn = visibleColumns.length === 1,
+			canSelectTextOnRow = isRowTextSelectable === false ? false : isDragFromHandleOnly,
+			shouldUseTextCursor = showRowHandle && canSelectTextOnRow,
+			rowShouldHaveDragRef = !isDragFromHandleOnly && (isDragSource || isDraggable) && !!dragSourceRef;
+		const setRowRef = (node) => {
+			if (typeof ref === 'function') {
+				ref(node);
+			} else if (ref) {
+				ref.current = node;
+			}
+			if (rowShouldHaveDragRef) {
+				if (typeof dragSourceRef === 'function') {
+					dragSourceRef(node);
+				} else if (dragSourceRef) {
+					dragSourceRef.current = node;
+				}
+			}
+		};
 
 		const renderColumns = (item) => {
 			if (_.isArray(columnsConfig)) {
@@ -136,7 +155,7 @@ const GridRow = forwardRef((props, ref) => {
 					const
 						propsToPass = columnProps[key] || {},
 						colStyle = {},
-						whichCursor = showRowHandle ? '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',
@@ -144,6 +163,7 @@ const GridRow = forwardRef((props, ref) => {
 						'border-r-black-100',
 						'block',
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
+						canSelectTextOnRow ? null : 'select-none',
 						whichCursor,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
@@ -395,7 +415,7 @@ const GridRow = forwardRef((props, ref) => {
 		let rowContents = <>
 							{showRowHandle &&
 								<RowHandle
-									ref={dragSourceRef}
+									ref={isDragFromHandleOnly ? dragSourceRef : undefined}
 									isDragSource={isDragSource}
 									isDraggable={isDraggable}
 									canSelect={rowCanSelect}
@@ -448,6 +468,7 @@ const GridRow = forwardRef((props, ref) => {
 		let rowClassName = clsx(
 			'GridRow-HStackNative',
 			'items-center',
+			canSelectTextOnRow ? null : 'select-none',
 		);
 		if (isOnlyOneVisibleColumn) {
 			rowClassName += ' w-full';
@@ -459,7 +480,7 @@ const GridRow = forwardRef((props, ref) => {
 			rowClassName += ' border-4 border-[#0ff]';
 		}
 		let row = <HStackNative
-						ref={ref}
+						ref={rowShouldHaveDragRef ? setRowRef : ref}
 						{...testProps('Row ' + (isSelected ? 'row-selected' : ''))}
 						{...rowProps}
 						key={hash}
@@ -496,8 +517,13 @@ const GridRow = forwardRef((props, ref) => {
 		dragPreviewRef,
 		dropTargetRef,
 		showRowHandle,
+		isRowTextSelectable,
 		rowCanSelect,
 		rowCanDrag,
+		isDragFromHandleOnly,
+		isDragSource,
+		isDraggable,
+		dragSourceRef,
 	]);
 });
 

package/src/Components/Hoc/withDnd.js

@@ -222,15 +222,18 @@ export function GlobalDragProxy() {
 	const {
 		isDragging,
 		item,
-		currentOffset,
+		clientOffset,
+		sourceClientOffset,
 	} = useDragLayer((monitor) => {
 		return {
 			isDragging: monitor.isDragging(),
 			item: monitor.getItem(),
-			currentOffset: monitor.getSourceClientOffset(),
+			clientOffset: monitor.getClientOffset(),
+			sourceClientOffset: monitor.getSourceClientOffset(),
 		};
 	});
 
+	const currentOffset = clientOffset || sourceClientOffset;
 	if (!isDragging || !currentOffset || CURRENT_MODE !== UI_MODE_WEB) { // Native uses a native drag layer, so we don't need to render a custom proxy
 		return null;
 	}

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

package/src/UiGlobals.js

@@ -13,6 +13,7 @@ const Globals = {
 	doubleClickingGridRowOpensEditorInViewMode: false,
 	disableSavedColumnsConfig: true,
 	autoSubmitDelay: 500,
+	// gridAreRowsDragFromHandleOnly: true,
 	// stayInEditModeOnSelectionChange: true,
 	// isSideEditorAlwaysEditMode: true,