@onehat/ui 0.3.37 → 0.3.39

package/package.json

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

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

@@ -516,7 +516,7 @@ export function ComboComponent(props) {
 													};
 												}}
 												allowToggleSelection={true}
-												disableAdjustingPageSizeToHeight={true}
+												autoAdjustPageSizeToHeight={false}
 												{...props}
 												h={styles.FORM_COMBO_MENU_HEIGHT + 'px'}
 												disablePresetButtons={!isEditor}

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

@@ -20,7 +20,7 @@ export default function PageSizeCombo(props) {
 							// [ 1, '1/pg', ],
 							[ 5, '5/pg', ],
 							[ 10, '10/pg', ],
-							[ 20, '20pg', ],
+							[ 20, '20/pg', ],
 							[ 50, '50/pg', ],
 							[ 100, '100/pg', ],
 						]}

package/src/Components/Grid/Grid.js

@@ -77,7 +77,7 @@ function GridComponent(props) {
 			pullToRefresh = true,
 			hideNavColumn = true,
 			noneFoundText,
-			disableAdjustingPageSizeToHeight = false,
+			autoAdjustPageSizeToHeight = true,
 			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
 			showRowExpander = false,
@@ -150,7 +150,7 @@ function GridComponent(props) {
 		gridRef = useRef(),
 		gridContainerRef = useRef(),
 		isAddingRef = useRef(),
-		[isRendered, setIsRendered] = useState(false),
+		isRenderedRef = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
@@ -622,50 +622,49 @@ function GridComponent(props) {
 			}
 			setDragRowSlot(null);
 		},
-		onLayout = (e) => {
-
+		adjustPageSizeToHeight = (e) => {
 			let doLoad = false;
-			if (!isRendered) {
-				setIsRendered(true);
+			if (!isRenderedRef.current) {
+				isRenderedRef.current = true;
 				if (loadOnRender && Repository && !Repository.isLoaded && !Repository.isLoading && !Repository.isAutoLoad) {
 					doLoad = true; // first time in onLayout only!
 				}
 			}
 
-			const adjustPageSizeToHeight = !!(disableAdjustingPageSizeToHeight || !Repository || CURRENT_MODE !== UI_MODE_WEB || !gridRef.current || isAddingRef.current);
+			let adjustPageSizeToHeight = true;
+			if (!autoAdjustPageSizeToHeight || !Repository || !UiGlobals.autoAdjustPageSizeToHeight) {
+				adjustPageSizeToHeight = false;
+			}
 			if (adjustPageSizeToHeight) {
-				// this currently only works on web
 				const
-					gr = gridContainerRef.current,
-					// scrollableNode = gr.getScrollableNode(),
-					// scrollableNodeBoundingBox = scrollableNode.getBoundingClientRect(),
-					// scrollableNodeHeight = scrollableNodeBoundingBox.height,
-					// firstRow = scrollableNode.children[0].children[showHeaders ? 1: 0];
-					height = gr.getBoundingClientRect().height;
-// IDEALLY, we want the grid to load right away with appropriate limits.
-// Currently, it's been loading once, then doing layout then loading again with correct limit.
-// How do we get the right limit before it renders??
-// Estimate based on (container height -header -footer) / avg height? This won't work for rows that exceed the avg height.
-// Maybe we do that avg at first, and if it exceeds, then we do another query to lose the later ones, which are hidden anyway.
-// It'll only do that once. Better to hide the offscreen ones, than to show gap at first, and later fill it
-				// if (firstRow) { // TODO: this assumes there is a row there already, which is wrong!
-				// 	const
-				// 		rowHeight = firstRow.getBoundingClientRect().height,
-				// 		rowsPerContainer = Math.floor(scrollableNodeHeight / rowHeight);
-				// 	let pageSize = rowsPerContainer;
-				// 	if (showHeaders) {
-				// 		pageSize--;
-				// 	}
-				// 	if (pageSize !== Repository.pageSize) {
-				// 		Repository.setPageSize(pageSize);
-				// 	}
-				// }
+					containerHeight = e.nativeEvent.layout.height,
+					headerHeight = showHeaders ? 50 : 0,
+					footerHeight = !disablePagination ? 50 : 0,
+					height = containerHeight - headerHeight - footerHeight,
+					rowHeight = 48,
+					rowsPerContainer = Math.floor(height / rowHeight);
+				let pageSize = rowsPerContainer;
+				if (showHeaders) {
+					pageSize--;
+				}
+				if (pageSize !== Repository.pageSize) {
+					Repository.setPageSize(pageSize);
+				}
 			}
 			if (doLoad) {
 				Repository.load();
 			}
 		},
-		debouncedOnLayout = useCallback(_.debounce(onLayout, 500), []);
+		debouncedAdjustPageSizeToHeight = useCallback(_.debounce(adjustPageSizeToHeight, 200), []),
+		onLayout = (e) => {
+			if (!isRenderedRef.current) {
+				// first time, call this immediately
+				adjustPageSizeToHeight(e);
+			} else {
+				// debounce all subsequent calls
+				debouncedAdjustPageSizeToHeight(e);
+			}
+		};
 
 	useEffect(() => {
 
@@ -821,7 +820,21 @@ function GridComponent(props) {
 	let listFooterComponent = null;
 	if (!disableBottomToolbar) {
 		if (Repository && bottomToolbar === 'pagination' && !disablePagination && Repository.isPaginated) {
-			listFooterComponent = <PaginationToolbar Repository={Repository} self={self} toolbarItems={footerToolbarItemComponents} disablePageSize={!disableAdjustingPageSizeToHeight} />;
+			let disablePageSize = autoAdjustPageSizeToHeight; // component setting
+			if (!_.isNil(UiGlobals.autoAdjustPageSizeToHeight) && !UiGlobals.autoAdjustPageSizeToHeight) { // global setting
+				disablePageSize = false;
+			}
+			let showMoreOnly = false;
+			if (UiGlobals.paginationIsShowMoreOnly) { // global setting
+				showMoreOnly = true;
+			}
+			listFooterComponent = <PaginationToolbar
+										Repository={Repository}
+										self={self}
+										toolbarItems={footerToolbarItemComponents}
+										disablePageSize={disablePageSize}
+										showMoreOnly={showMoreOnly}
+									/>;
 		} else if (footerToolbarItemComponents.length) {
 			listFooterComponent = <Toolbar>{footerToolbarItemComponents}</Toolbar>;
 		}
@@ -841,7 +854,7 @@ function GridComponent(props) {
 				bg={bg}
 				borderWidth={styles.GRID_BORDER_WIDTH}
 				borderColor={styles.GRID_BORDER_COLOR}
-				onLayout={debouncedOnLayout}
+				onLayout={onLayout}
 				{...sizeProps}
 			>
 				{topToolbar}

package/src/Components/Hoc/withFilters.js

@@ -253,7 +253,7 @@ export default function withFilters(WrappedComponent) {
 					const
 						filterProps = {
 							mx: 1,
-							disableAdjustingPageSizeToHeight: true,
+							autoAdjustPageSizeToHeight: false,
 							pageSize: 20,
 							uniqueRepository: true,
 						},
@@ -528,7 +528,6 @@ export default function withFilters(WrappedComponent) {
 									editorType={EDITOR_TYPE__PLAIN}
 									flex={1}
 									startingValues={formStartingValues}
-									minHeight={minHeight}
 									items={[
 										{
 											type: 'Column',

package/src/Components/Report/Report.js

@@ -16,6 +16,7 @@ import ChartLine from '../Icons/ChartLine.js';
 import Pdf from '../Icons/Pdf.js';
 import Excel from '../Icons/Excel.js';
 import UiGlobals from '../../UiGlobals.js';
+import qs from 'qs';
 import _ from 'lodash';
 
 const
@@ -40,6 +41,14 @@ function Report(props) {
 		styles = UiGlobals.styles,
 		url = UiGlobals.baseURL + 'Reports/getReport',
 		buttons = [],
+		downloadInBackground = (data) => {
+			const a = document.createElement('A');
+			a.href = url + '?' + qs.stringify(data);
+			a.download = true;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+		},
 		downloadWithFetch = (data) => {
 			const options = {
 				method: 'POST',
@@ -66,10 +75,14 @@ function Report(props) {
 					showReportHeaders,
 					// download_token, // not sure this is needed
 					...data,
-				},
-				closeWindow = reportType === EXCEL;
+				};
 
-			downloadWithFetch(params, closeWindow);
+			if (reportType === EXCEL) {
+				downloadInBackground(params);
+			} else {
+				// opens a new window
+				downloadWithFetch(params);
+			}
 		};
 
 	const propsIcon = props._icon || {};

package/src/Components/Toolbar/Pagination.js

@@ -5,6 +5,7 @@ import {
 	Text,
 } from 'native-base';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import AnglesLeft from '../Icons/AnglesLeft.js';
@@ -18,6 +19,7 @@ export default function Pagination(props) {
 	const {
 			minimize = false,
 			disablePageSize = false,
+			showMoreOnly = false,
 
 			// withComponent
 			self,
@@ -56,90 +58,104 @@ export default function Pagination(props) {
 				w: 20,
 			};
 		let items = [],
+			isDisabled = false;
+		if (showMoreOnly) {
+			isDisabled = (pageEnd === total);
+			items.push(<Button
+							key="showMore"
+							parent={self}
+							reference="showMoreBtn"
+							onPress={() => Repository.showMore()}
+							isDisabled={isDisabled}
+							tooltip="Show More"
+						>Show More</Button>);
+		} else {
 			isDisabled = page === 1;
-		items.push(<IconButton
-						key="first"
-						parent={self}
-						reference="firstPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AnglesLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.setPage(1)}
-						tooltip="First Page"
-					/>);
-		items.push(<IconButton
-						key="prev"
-						parent={self}
-						reference="prevPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AngleLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.prevPage()}
-						tooltip="Previous Page"
-					/>);
-		if (!minimize) {
-			items.push(<Row
-							key="pageSelector"
-							mx={3}
-							justifyContent="center"
-							alignItems="center"
-						>
-							<Text mr={2}>Page</Text>
-							<Input
-								parent={self}
-								reference="pageInput"
-								keyboardType="numeric"
-								value={page?.toString()}
-								onChangeValue={(value) => Repository.setPage(value)}
-								maxValue={totalPages}
-								isDisabled={totalPages === 1}
-								w={10}
-								tooltip="Set Page"
-							/>
-							<Text ml={2}>of {totalPages}</Text>
-						</Row>);
-		}
-
-		isDisabled = page === totalPages || totalPages <= 1;
-		items.push(<IconButton
-						key="next"
-						parent={self}
-						reference="nextPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AngleRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.nextPage()}
-						tooltip="Next Page"
-					/>);
-		items.push(<IconButton
-						key="last"
-						parent={self}
-						reference="lastPageBtn"
-						{...iconButtonProps}
-						isDisabled={isDisabled}
-						icon={<Icon as={AnglesRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
-						onPress={() => Repository.setPage(totalPages)}
-						tooltip="Last Page"
-					/>);
-		if (!Repository.isLocal) {
 			items.push(<IconButton
-							key="reload"
+							key="first"
 							parent={self}
-							reference="reloadPageBtn"
+							reference="firstPageBtn"
 							{...iconButtonProps}
-							icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
-							onPress={() => Repository.reload()}
-							tooltip="Reload"
+							isDisabled={isDisabled}
+							icon={<Icon as={AnglesLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.setPage(1)}
+							tooltip="First Page"
 						/>);
-		}
-
-		if (!minimize && !disablePageSize) {
-			items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
-		}
-
-		let pageSpan = `${pageStart} – ${pageEnd}`;
-		if (pageStart === pageEnd) {
-			pageSpan = pageStart;
+			items.push(<IconButton
+							key="prev"
+							parent={self}
+							reference="prevPageBtn"
+							{...iconButtonProps}
+							isDisabled={isDisabled}
+							icon={<Icon as={AngleLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.prevPage()}
+							tooltip="Previous Page"
+						/>);
+			if (!minimize) {
+				items.push(<Row
+								key="pageSelector"
+								mx={3}
+								justifyContent="center"
+								alignItems="center"
+							>
+								<Text mr={2}>Page</Text>
+								<Input
+									parent={self}
+									reference="pageInput"
+									keyboardType="numeric"
+									value={page?.toString()}
+									onChangeValue={(value) => Repository.setPage(value)}
+									maxValue={totalPages}
+									isDisabled={totalPages === 1}
+									w={10}
+									tooltip="Set Page"
+								/>
+								<Text ml={2}>of {totalPages}</Text>
+							</Row>);
+			}
+	
+			isDisabled = page === totalPages || totalPages <= 1;
+			items.push(<IconButton
+							key="next"
+							parent={self}
+							reference="nextPageBtn"
+							{...iconButtonProps}
+							isDisabled={isDisabled}
+							icon={<Icon as={AngleRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.nextPage()}
+							tooltip="Next Page"
+						/>);
+			items.push(<IconButton
+							key="last"
+							parent={self}
+							reference="lastPageBtn"
+							{...iconButtonProps}
+							isDisabled={isDisabled}
+							icon={<Icon as={AnglesRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+							onPress={() => Repository.setPage(totalPages)}
+							tooltip="Last Page"
+						/>);
+			if (!Repository.isLocal) {
+				items.push(<IconButton
+								key="reload"
+								parent={self}
+								reference="reloadPageBtn"
+								{...iconButtonProps}
+								icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
+								onPress={() => Repository.reload()}
+								tooltip="Reload"
+							/>);
+			}
+			if (!minimize && !disablePageSize) {
+				items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
+			}
+			if (!minimize) {
+				let pageSpan = `${pageStart} – ${pageEnd}`;
+				if (pageStart === pageEnd) {
+					pageSpan = pageStart;
+				}
+				items.push(<Text key="pageDisplay" ml={3}>Displaying {pageSpan} of {total}</Text>);
+			}
 		}
 		
 		return <Row
@@ -150,7 +166,6 @@ export default function Pagination(props) {
 					{...props}
 				>
 					{items}
-					{!minimize && <Text ml={3}>Displaying {pageSpan} of {total}</Text>}
 				</Row>;
 	}, [
 		// Repository,
@@ -162,6 +177,4 @@ export default function Pagination(props) {
 		pageEnd,
 		minimize,
 	])
-
-
 };