@onehat/ui 0.3.3 → 0.3.4

package/package.json

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

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

@@ -505,6 +505,8 @@ export function ComboComponent(props) {
 											<WhichGrid
 												showHeaders={false}
 												showHovers={true}
+												pageSize={100}
+												disableAdjustingPageSizeToHeight={true}
 												shadow={1}
 												getRowProps={() => {
 													return {

package/src/Components/Grid/Grid.js

@@ -21,6 +21,11 @@ import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
 } from '../../Constants/Grid.js';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
 import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
@@ -70,6 +75,7 @@ function GridComponent(props) {
 			pullToRefresh = true,
 			hideNavColumn = true,
 			noneFoundText,
+			disableAdjustingPageSizeToHeight = false,
 			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
 			showRowExpander = false,
@@ -608,6 +614,41 @@ function GridComponent(props) {
 				dragRowSlot.marker.remove();
 			}
 			setDragRowSlot(null);
+		},
+		onLayout = (e) => {
+			if (disableAdjustingPageSizeToHeight || !Repository) {
+				return;
+			}
+			const {
+					nativeEvent: {
+						layout,
+						target,
+					},
+				} = e;
+			let pageSize;
+			if (CURRENT_MODE === UI_MODE_WEB) {
+				const
+					targetBoundingBox = target.getBoundingClientRect(),
+					targetHeight = targetBoundingBox.height,
+					firstRow = target.children[0]?.children[0]?.children[0]?.children[0]?.children[0];
+				if (firstRow) {
+					const
+						rowBoundingBox = firstRow.getBoundingClientRect(),
+						rowHeight = rowBoundingBox.height,
+						rowsPerTarget = Math.floor(targetHeight / rowHeight);
+					pageSize = rowsPerTarget;
+					if (showHeaders) {
+						pageSize--;
+					}
+					if (bottomToolbar) {
+						pageSize--;
+					}
+				}
+			}
+			
+			if (pageSize) {
+				Repository.setPageSize(pageSize);
+			}
 		};
 		
 	useEffect(() => {
@@ -752,7 +793,7 @@ function GridComponent(props) {
 	if (inlineEditor) {
 		rowData.push({ id: 'inlineEditor' }); // make editor the last row so it can scroll with all other rows
 	}
-	const initialNumToRender = rowData.length || 10;
+	const initialNumToRender = rowData?.length || 10;
 
 	// headers & footers
 	let listFooterComponent = null;
@@ -776,6 +817,7 @@ function GridComponent(props) {
 				bg={bg}
 				borderWidth={styles.GRID_BORDER_WIDTH}
 				borderColor={styles.GRID_BORDER_COLOR}
+				onLayout={onLayout}
 				{...sizeProps}
 			>
 				{topToolbar}

package/src/Components/Hoc/withData.js

@@ -19,6 +19,7 @@ export default function withData(WrappedComponent) {
 				uniqueRepository = false,
 				model,
 				autoLoad = false,
+				pageSize,
 
 				// For plain JS data
 				data,
@@ -51,6 +52,10 @@ export default function withData(WrappedComponent) {
 					Repository = oneHatData.getRepository(model);
 				}
 
+				if (pageSize) {
+					Repository.setPageSize(pageSize);
+				}
+
 				if (Repository && (autoLoad || Repository.autoLoad) && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
 					await Repository.load();
 				}