@onehat/ui 0.3.36 → 0.3.37

package/package.json

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

package/src/Components/Form/Form.js

@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef, isValidElement, } from 'react';
+import { View, } from 'react-native';
 import {
 	Box,
 	Column,
@@ -28,6 +29,7 @@ import withEditor from '../Hoc/withEditor.js';
 import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
+import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
 import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
@@ -38,6 +40,8 @@ import Footer from '../Layout/Footer.js';
 import Label from '../Form/Label.js';
 import _ from 'lodash';
 
+const CONTAINER_THRESHOLD = 900;
+
 // TODO: memoize field Components
 
 // Modes:
@@ -73,6 +77,7 @@ function Form(props) {
 			submitBtnLabel,
 			onSubmit,
 			additionalEditButtons,
+			additionalFooterButtons,
 			
 			// sizing of outer container
 			h,
@@ -113,6 +118,7 @@ function Form(props) {
 		isSingle = !isMultiple, // for convenience
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
+		[containerWidth, setContainerWidth] = useState(),
 		initialValues =  _.merge(startingValues, (record && !record.isDestroyed ? record.submitValues : {})),
 		defaultValues = isMultiple ? getNullFieldValues(initialValues, Repository) : initialValues, // when multiple entities, set all default values to null
 		{
@@ -267,9 +273,9 @@ function Form(props) {
 			return <Row>{elements}</Row>;
 		},
 		buildFromItems = () => {
-			return _.map(items, (item, ix) => buildNextLayer(item, ix, columnDefaults));
+			return _.map(items, (item, ix) => buildFromItem(item, ix, columnDefaults));
 		},
-		buildNextLayer = (item, ix, defaults) => {
+		buildFromItem = (item, ix, defaults) => {
 			let {
 					type,
 					title,
@@ -321,9 +327,26 @@ function Form(props) {
 				if (_.isEmpty(items)) {
 					return null;
 				}
+				if (type === 'Column') {
+					if (containerWidth < CONTAINER_THRESHOLD) {
+						// everything is in one column
+						if (propsToPass.hasOwnProperty('flex')) {
+							delete propsToPass.flex;
+						}
+						if (propsToPass.hasOwnProperty('width')) {
+							delete propsToPass.width;
+						}
+						if (propsToPass.hasOwnProperty('w')) {
+							delete propsToPass.w;
+						}
+						propsToPass.w = '100%';
+						propsToPass.mb = 1;
+					}
+					propsToPass.pl = 3;
+				}
 				const itemDefaults = item.defaults;
 				children = _.map(items, (item, ix) => {
-					return buildNextLayer(item, ix, itemDefaults);
+					return buildFromItem(item, ix, itemDefaults);
 				});
 				return <Element key={ix} title={title} {...itemDefaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
@@ -432,6 +455,14 @@ function Form(props) {
 
 								}
 							}
+
+							if (item.additionalEditButtons) {
+								element = <Row flex={1} flexWrap="wrap">
+												{element}
+												{buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState })}
+											</Row>;
+							}
+
 							if (label && editorType !== EDITOR_TYPE__INLINE) {
 								const labelProps = {};
 								if (defaults?.labelWidth) {
@@ -485,43 +516,6 @@ function Form(props) {
 			}
 			return components;
 		},
-		buildAdditionalButtons = (configs) => {
-			const additionalButtons = [];
-			_.each(additionalEditButtons, (config) => {
-				const {
-						key,
-						text,
-						handler,
-						icon,
-						isDisabled,
-						color = '#fff',
-					} = config,
-					buttonProps = {};
-				if (key) {
-					buttonProps.key = key;
-					buttonProps.reference = key;
-				}
-				if (handler) {
-					buttonProps.onPress = handler;
-				}
-				if (icon) {
-					buttonProps.leftIcon = <Icon as={icon} color="#fff" size="sm" />;
-				}
-				if (isDisabled) {
-					buttonProps.isDisabled = isDisabled;
-				}
-				
-				const button = <Button
-									color={color}
-									ml={2}
-									parent={self}
-									reference={key}
-									{...buttonProps}
-								>{text}</Button>;
-				additionalButtons.push(button);
-			});
-			return additionalButtons;
-		},
 		onSubmitError = (errors, e) => {
 			debugger;
 			if (editorType === EDITOR_TYPE__INLINE) {
@@ -542,6 +536,13 @@ function Form(props) {
 				const values = record.submitValues;
 				reset(values);
 			}
+		},
+		onLayoutDecorated = (e) => {
+			if (onLayout) {
+				onLayout(e);
+			}
+
+			setContainerWidth(e.nativeEvent.layout.width);
 		};
 
 	useEffect(() => {
@@ -596,148 +597,166 @@ function Form(props) {
 		sizeProps.maxHeight = maxHeight;
 	}
 
-	const savingProps = {};
-	if (isSaving) {
-		savingProps.borderTopWidth = 2;
-		savingProps.borderTopColor = '#f00';
-	}
+	let formComponents,
+		editor,
+		additionalButtons,
+		isSaveDisabled = false,
+		isSubmitDisabled = false,
+		savingProps = {};
 
+	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
+		
+		if (isSaving) {
+			savingProps.borderTopWidth = 2;
+			savingProps.borderTopColor = '#f00';
+		}
 
-	let formComponents,
-		editor;
-	if (editorType === EDITOR_TYPE__INLINE) {
-		formComponents = buildFromColumnsConfig();
-		editor = <ScrollView
-					horizontal={true}
-					flex={1}
-					bg="#fff"
-					py={1}
-					borderTopWidth={3}
-					borderBottomWidth={5}
-					borderTopColor="primary.100"
-					borderBottomColor="primary.100"
-				>{formComponents}</ScrollView>;
-	// } else if (editorType === EDITOR_TYPE__PLAIN) {
-	// 	formComponents = buildFromItems();
-	// 	const formAncillaryComponents = buildAncillary();
-	// 	editor = <>
-	// 				<Column p={4}>{formComponents}</Column>
-	// 				<Column pt={4}>{formAncillaryComponents}</Column>
-	// 			</>;
-	} else {
-		formComponents = buildFromItems();
-		const formAncillaryComponents = buildAncillary();
-		editor = <ScrollView _web={{ minHeight, }} width="100%" pb={1}>
-					<Column p={4}>{formComponents}</Column>
-					<Column m={2} pt={4}>{formAncillaryComponents}</Column>
-				</ScrollView>;
-	}
+		if (editorType === EDITOR_TYPE__INLINE) {
+			formComponents = buildFromColumnsConfig();
+			editor = <ScrollView
+						horizontal={true}
+						flex={1}
+						bg="#fff"
+						py={1}
+						borderTopWidth={3}
+						borderBottomWidth={5}
+						borderTopColor="primary.100"
+						borderBottomColor="primary.100"
+					>{formComponents}</ScrollView>;
+		// } else if (editorType === EDITOR_TYPE__PLAIN) {
+		// 	formComponents = buildFromItems();
+		// 	const formAncillaryComponents = buildAncillary();
+		// 	editor = <>
+		// 				<Column p={4}>{formComponents}</Column>
+		// 				<Column pt={4}>{formAncillaryComponents}</Column>
+		// 			</>;
+		} else {
+			formComponents = buildFromItems();
+			const formAncillaryComponents = buildAncillary();
+			editor = <ScrollView _web={{ minHeight, }} width="100%" pb={1}>
+						{containerWidth >= CONTAINER_THRESHOLD ? <Row p={4} pl={0}>{formComponents}</Row> : null}
+						{containerWidth < CONTAINER_THRESHOLD ? <Column p={4}>{formComponents}</Column> : null}
+						<Column m={2} pt={4}>{formAncillaryComponents}</Column>
+					</ScrollView>;
+		}
 
-	let editorModeF;
-	switch(editorMode) {
-		case EDITOR_MODE__VIEW:
-			editorModeF = 'View';
-			break;
-		case EDITOR_MODE__ADD:
-			editorModeF = 'Add';
-			break;
-		case EDITOR_MODE__EDIT:
-			editorModeF = isMultiple ? 'Edit Multiple' : 'Edit';
-			break;
-	}
+		let editorModeF;
+		switch(editorMode) {
+			case EDITOR_MODE__VIEW:
+				editorModeF = 'View';
+				break;
+			case EDITOR_MODE__ADD:
+				editorModeF = 'Add';
+				break;
+			case EDITOR_MODE__EDIT:
+				editorModeF = isMultiple ? 'Edit Multiple' : 'Edit';
+				break;
+		}
 
-	let isSaveDisabled = false,
-		isSubmitDisabled = false;
-	if (!_.isEmpty(formState.errors)) {
-		isSaveDisabled = true;
-		isSubmitDisabled = true;
-	}
-	if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
-		isSaveDisabled = true;
-	}
+		if (!_.isEmpty(formState.errors)) {
+			isSaveDisabled = true;
+			isSubmitDisabled = true;
+		}
+		if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
+			isSaveDisabled = true;
+		}
 
-	if (editorType === EDITOR_TYPE__INLINE) {
-		buttonGroupProps.position = 'fixed';
-		buttonGroupProps.left = 10; // TODO: I would prefer to have this be centered, but it's a lot more complex than just making it stick to the left
-		footerProps.alignItems = 'flex-start';
-	}
+		if (editorType === EDITOR_TYPE__INLINE) {
+			buttonGroupProps.position = 'fixed';
+			buttonGroupProps.left = 10; // TODO: I would prefer to have this be centered, but it's a lot more complex than just making it stick to the left
+			footerProps.alignItems = 'flex-start';
+		}
 
-	const additionalButtons = buildAdditionalButtons(additionalEditButtons);
+		additionalButtons = buildAdditionalButtons(additionalEditButtons);
+	}
 	
-	return <Column {...sizeProps} onLayout={onLayout} ref={formRef}>
-
-				<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
-					{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
-						<Button
-							key="backBtn"
-							onPress={onBack}
-							leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
-							color="#fff"
-						>Back</Button>}
-					{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && 
-						<Button
-							key="viewBtn"
-							onPress={onViewMode}
-							leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
-							color="#fff"
-						>To View</Button>}
-				</Row>
-				{editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons) && 
-					<Row p={4} alignItems="center" justifyContent="flex-end">
-						{additionalButtons}
-					</Row>}
-				
-				{editor}
-				
-				<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
-					{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
-						<Row flex={1} justifyContent="flex-start">
+	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
+				{containerWidth && <>
+					<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
+						{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
 							<Button
-								key="deleteBtn"
-								onPress={onDelete}
-								bg="warning"
-								_hover={{
-									bg: 'warningHover',
-								}}
+								key="backBtn"
+								onPress={onBack}
+								leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
 								color="#fff"
-							>Delete</Button>
+							>Back</Button>}
+						{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && 
+							<Button
+								key="viewBtn"
+								onPress={onViewMode}
+								leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
+								color="#fff"
+							>To View</Button>}
+					</Row>
+					{editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons) && 
+						<Row p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+							{additionalButtons}
 						</Row>}
-				
-					{!isEditorViewOnly && <IconButton
-										key="resetBtn"
-										onPress={() => {
-											if (onReset) {
-												onReset();
-											}
-											reset();
-										}}
-										icon={<Rotate color="#fff" />}
-									/>}
-					{!isEditorViewOnly && isSingle && onCancel && <Button
-													key="cancelBtn"
-													variant="ghost"
-													onPress={onCancel}
-													color="#fff"
-												>Cancel</Button>}
-					{!isEditorViewOnly && onSave && <Button
-													key="saveBtn"
-													onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
-													isDisabled={isSaveDisabled}
-													color="#fff"
-												>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
-					{onSubmit && <Button
-									key="submitBtn"
-									onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
-									isDisabled={isSubmitDisabled}
+					
+					{editor}
+					
+					<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
+						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
+							<Row flex={1} justifyContent="flex-start">
+								<Button
+									key="deleteBtn"
+									onPress={onDelete}
+									bg="warning"
+									_hover={{
+										bg: 'warningHover',
+									}}
 									color="#fff"
-								>{submitBtnLabel || 'Submit'}</Button>}
-		
-					{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && <Button
-													key="closeBtn"
-													onPress={onClose}
-													color="#fff"
-												>Close</Button>}
-				</Footer>
+								>Delete</Button>
+							</Row>}
+
+						{!isEditorViewOnly && 
+							<IconButton
+								key="resetBtn"
+								onPress={() => {
+									if (onReset) {
+										onReset();
+									}
+									reset();
+								}}
+								icon={<Rotate color="#fff" />}
+							/>}
+						{!isEditorViewOnly && isSingle && onCancel &&
+							<Button
+								key="cancelBtn"
+								variant="ghost"
+								onPress={onCancel}
+								color="#fff"
+							>Cancel</Button>}
+						{!isEditorViewOnly && onSave && 
+							<Button
+								key="saveBtn"
+								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
+								isDisabled={isSaveDisabled}
+								color="#fff"
+							>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
+						{onSubmit && 
+							<Button
+								key="submitBtn"
+								onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
+								isDisabled={isSubmitDisabled}
+								color="#fff"
+							>{submitBtnLabel || 'Submit'}</Button>}
+			
+						{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && 
+							<Button
+								key="closeBtn"
+								onPress={onClose}
+								color="#fff"
+							>Close</Button>}
+					
+						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
+							return <Button
+										{...props}
+										onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
+									>{props.text}</Button>;
+						})}
+					</Footer>
+				</>}
 			</Column>;
 }
 

package/src/Components/Grid/Grid.js

@@ -73,6 +73,7 @@ function GridComponent(props) {
 			},
 			flatListProps = {},
 			// enableEditors = false,
+			loadOnRender = true,
 			pullToRefresh = true,
 			hideNavColumn = true,
 			noneFoundText,
@@ -147,7 +148,9 @@ function GridComponent(props) {
 		forceUpdate = useForceUpdate(),
 		containerRef = useRef(),
 		gridRef = useRef(),
+		gridContainerRef = useRef(),
 		isAddingRef = useRef(),
+		[isRendered, setIsRendered] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
@@ -620,30 +623,46 @@ function GridComponent(props) {
 			setDragRowSlot(null);
 		},
 		onLayout = (e) => {
-			if (disableAdjustingPageSizeToHeight || !Repository || CURRENT_MODE !== UI_MODE_WEB || !gridRef.current || isAddingRef.current) {
-				return;
-			}
-
-			const
-				gr = gridRef.current,
-				scrollableNode = gr.getScrollableNode(),
-				scrollableNodeBoundingBox = scrollableNode.getBoundingClientRect(),
-				scrollableNodeHeight = scrollableNodeBoundingBox.height,
-				firstRow = scrollableNode.children[0].children[showHeaders ? 1: 0];
 
-			if (!firstRow) {
-				return;
+			let doLoad = false;
+			if (!isRendered) {
+				setIsRendered(true);
+				if (loadOnRender && Repository && !Repository.isLoaded && !Repository.isLoading && !Repository.isAutoLoad) {
+					doLoad = true; // first time in onLayout only!
+				}
 			}
 
-			const
-				rowHeight = firstRow.getBoundingClientRect().height,
-				rowsPerContainer = Math.floor(scrollableNodeHeight / rowHeight);
-			let pageSize = rowsPerContainer;
-			if (showHeaders) {
-				pageSize--;
+			const adjustPageSizeToHeight = !!(disableAdjustingPageSizeToHeight || !Repository || CURRENT_MODE !== UI_MODE_WEB || !gridRef.current || isAddingRef.current);
+			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);
+				// 	}
+				// }
 			}
-			if (pageSize !== Repository.pageSize) {
-				Repository.setPageSize(pageSize);
+			if (doLoad) {
+				Repository.load();
 			}
 		},
 		debouncedOnLayout = useCallback(_.debounce(onLayout, 500), []);
@@ -827,7 +846,7 @@ function GridComponent(props) {
 			>
 				{topToolbar}
 
-				<Column w="100%" flex={1} minHeight={40} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
+				<Column ref={gridContainerRef} w="100%" flex={1} minHeight={40} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
 					if (!isDragMode && !isInlineEditorShown) {
 						deselectAll();
 					}

package/src/Components/Hoc/withEditor.js

@@ -138,7 +138,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			onDelete = async (cb) => {
+			onDelete = async (args) => {
+				let cb = null;
+				if (_.isFunction(args)) {
+					cb = args;
+				}
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}

package/src/Components/Hoc/withSideEditor.js

@@ -16,6 +16,10 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				// withComponent
 				self,
 				
+				// pull these out, as we don't want them going to the Editor
+				selectorId,
+				selectorSelected,
+				
 				...propsToPass
 			} = props;
 

package/src/Components/Hoc/withWindowedEditor.js

@@ -36,6 +36,10 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				// withComponent
 				self,
 				
+				// pull these out, as we don't want them going to the Editor
+				selectorId,
+				selectorSelected,
+
 				...propsToPass
 			} = props;
 

package/src/Components/Icons/Excel.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" {...props}>
+      <Path d="M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zm192 0v128h128L256 0zM155.7 250.2l36.3 51.9 36.3-51.9c7.6-10.9 22.6-13.5 33.4-5.9s13.5 22.6 5.9 33.4L221.3 344l46.4 66.2c7.6 10.9 5 25.8-5.9 33.4s-25.8 5-33.4-5.9L192 385.8l-36.3 51.9c-7.6 10.9-22.6 13.5-33.4 5.9s-13.5-22.6-5.9-33.4l46.3-66.2-46.4-66.2c-7.6-10.9-5-25.8 5.9-33.4s25.8-5 33.4 5.9z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Report/Report.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+	Column,
+	Icon,
+	Row,
+	Text,
+} from 'native-base';
+import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
+import {
+	UI_MODE_WEB,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
+import Form from '../Form/Form.js';
+import withComponent from '../Hoc/withComponent.js';
+import ChartLine from '../Icons/ChartLine.js';
+import Pdf from '../Icons/Pdf.js';
+import Excel from '../Icons/Excel.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+const
+	PDF = 'PDF',
+	EXCEL = 'PhpOffice';
+
+function Report(props) {
+	if (CURRENT_MODE !== UI_MODE_WEB) {
+		return <Text>Reports are web only!</Text>;
+	}
+	const {
+			title,
+			description,
+			reportId,
+			// icon,
+			disablePdf = false,
+			disableExcel = false,
+			includePresets = false,
+			showReportHeaders = true,
+			h = '300px',
+		} = props,
+		styles = UiGlobals.styles,
+		url = UiGlobals.baseURL + 'Reports/getReport',
+		buttons = [],
+		downloadWithFetch = (data) => {
+			const options = {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify(data),
+			};
+			fetch(url, options)
+				.then( res => res.blob() )
+				.then( blob => {
+					const
+						winName = 'ReportWindow',
+						opts = 'resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1',
+						externalWindow = window.open('', winName, opts),
+						file = externalWindow.URL.createObjectURL(blob);
+					externalWindow.location.assign(file);
+				});
+		},
+		getReport = (reportType, data) => {
+			const params = {
+					report_id: reportId,
+					outputFileType: reportType,
+					showReportHeaders,
+					// download_token, // not sure this is needed
+					...data,
+				},
+				closeWindow = reportType === EXCEL;
+
+			downloadWithFetch(params, closeWindow);
+		};
+
+	const propsIcon = props._icon || {};
+	propsIcon.size = 60;
+	propsIcon.px = 5;
+	let icon = props.icon;
+	if (_.isEmpty(icon)) {
+		icon = ChartLine;
+	}
+	if (React.isValidElement(icon)) {
+		if (!_.isEmpty(propsIcon)) {
+			icon = React.cloneElement(icon, {...propsIcon});
+		}
+	} else {
+		icon = <Icon as={icon} {...propsIcon} />;
+	}
+
+	if (!disableExcel) {
+		buttons.push({
+			key: 'ExcelBtn',
+			text: 'Download Excel',
+			leftIcon: <Icon as={Excel} size="md" color="#fff" />,
+			onPress: (data) => getReport(EXCEL, data),
+			ml: 1,
+		});
+	}
+	if (!disablePdf) {
+		buttons.push({
+			key: 'pdfBtn',
+			text: 'Download PDF',
+			leftIcon: <Icon as={Pdf} size="md" color="#fff" />,
+			onPress: (data) => getReport(PDF, data),
+			ml: 1,
+		});
+	}
+	return <Column w="100%" borderWidth={1} borderColor="primary.300" pt={4} mb={3}>
+				<Row>
+					{icon && <Column>{icon}</Column>}
+					<Column>
+						<Text fontSize="2xl">{title}</Text>
+						<Text fontSize="sm">{description}</Text>
+					</Column>
+				</Row>
+				<Form
+					type={EDITOR_TYPE__PLAIN}
+					additionalFooterButtons={buttons}
+					{...props._form}
+				/>
+			</Column>;
+}
+
+export default withComponent(Report);

package/src/Components/Viewer/Viewer.js

@@ -1,4 +1,4 @@
-import { useRef, } from 'react';
+import { useRef, useState, } from 'react';
 import {
 	Column,
 	Icon,
@@ -14,12 +14,15 @@ import withComponent from '../Hoc/withComponent.js';
 import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
+import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
 import Button from '../Buttons/Button.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
 import _ from 'lodash';
 
+const CONTAINER_THRESHOLD = 900;
+
 function Viewer(props) {
 	const {
 			viewerCanDelete = false,
@@ -48,13 +51,14 @@ function Viewer(props) {
 		} = props,
 		scrollViewRef = useRef(),
 		isMultiple = _.isArray(record),
+		[containerWidth, setContainerWidth] = useState(),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		styles = UiGlobals.styles,
 		flex = props.flex || 1,
 		buildFromItems = () => {
-			return _.map(items, (item, ix) => buildNextLayer(item, ix, columnDefaults));
+			return _.map(items, (item, ix) => buildFromItem(item, ix, columnDefaults));
 		},
-		buildNextLayer = (item, ix, defaults) => {
+		buildFromItem = (item, ix, defaults) => {
 			let {
 					type,
 					title,
@@ -90,9 +94,26 @@ function Viewer(props) {
 				if (_.isEmpty(items)) {
 					return null;
 				}
+				if (type === 'Column') {
+					if (containerWidth < CONTAINER_THRESHOLD) {
+						// everything is in one column
+						if (propsToPass.hasOwnProperty('flex')) {
+							delete propsToPass.flex;
+						}
+						if (propsToPass.hasOwnProperty('width')) {
+							delete propsToPass.width;
+						}
+						if (propsToPass.hasOwnProperty('w')) {
+							delete propsToPass.w;
+						}
+						propsToPass.w = '100%';
+						propsToPass.mb = 1;
+					}
+					propsToPass.pl = 3;
+				}
 				const defaults = item.defaults;
 				children = _.map(items, (item, ix) => {
-					return buildNextLayer(item, ix, defaults);
+					return buildFromItem(item, ix, defaults);
 				});
 				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
@@ -121,6 +142,14 @@ function Viewer(props) {
 								{...propsToPass}
 								{...editorTypeProps}
 							/>;
+
+			if (item.additionalViewButtons) {
+				element = <Row flexWrap="wrap">
+								{element}
+								{buildAdditionalButtons(item.additionalViewButtons, self)}
+							</Row>;
+			}
+
 			if (label) {
 				const labelProps = {};
 				if (defaults?.labelWidth) {
@@ -169,42 +198,8 @@ function Viewer(props) {
 			}
 			return components;
 		},
-		buildAdditionalButtons = (configs) => {
-			const additionalButtons = [];
-			_.each(additionalViewButtons, (config) => {
-				const {
-						key,
-						text,
-						handler,
-						icon,
-						isDisabled,
-						color = '#fff',
-					} = config,
-					buttonProps = {};
-				if (key) {
-					buttonProps.key = key;
-					buttonProps.reference = key;
-				}
-				if (handler) {
-					buttonProps.onPress = handler;
-				}
-				if (icon) {
-					buttonProps.leftIcon = <Icon as={icon} color="#fff" size="sm" />;
-				}
-				if (isDisabled) {
-					buttonProps.isDisabled = isDisabled;
-				}
-				
-				const button = <Button
-									color={color}
-									ml={2}
-									parent={self}
-									reference={key}
-									{...buttonProps}
-								>{text}</Button>;
-				additionalButtons.push(button);
-			});
-			return additionalButtons;
+		onLayout = (e) => {
+			setContainerWidth(e.nativeEvent.layout.width);
 		};
 
 	if (self) {
@@ -213,52 +208,62 @@ function Viewer(props) {
 
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
-		showCloseBtn = !isSideEditor,
-		additionalButtons = buildAdditionalButtons();
-
-	return <Column flex={flex} {...props}>
-				<ScrollView width="100%" _web={{ height: 1 }} ref={scrollViewRef}>
-					<Column p={4}>
-						{onEditMode && <Row mb={4} justifyContent="flex-end">
-											<Button
-												key="editBtn"
-												onPress={onEditMode}
-												leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
-												color="#fff"
-											>To Edit</Button>
-										</Row>}
-						
-						{!_.isEmpty(additionalButtons) && 
-							<Row p={2} alignItems="center" justifyContent="flex-end">
-								{additionalButtons}
-							</Row>}
+		showCloseBtn = !isSideEditor;
+	let additionalButtons = null,
+		viewerComponents = null,
+		ancillaryComponents = null;
+	
+	
+	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
+		additionalButtons = buildAdditionalButtons(additionalViewButtons);
+		viewerComponents = buildFromItems();
+		ancillaryComponents = buildAncillary();
+	}
 
-						{buildFromItems()}
+	return <Column flex={flex} {...props} onLayout={onLayout}>
+				{containerWidth && <>
+					{onEditMode && <Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
+										<Button
+											key="editBtn"
+											onPress={onEditMode}
+											leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
+											color="#fff"
+										>To Edit</Button>
+									</Row>}
+					{!_.isEmpty(additionalButtons) && 
+						<Row p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+							{additionalButtons}
+						</Row>}
 
-						{buildAncillary()}
+					<ScrollView _web={{ height: 1 }} width="100%" pb={1} ref={scrollViewRef}>
+						<Column>
+							{containerWidth >= CONTAINER_THRESHOLD ? <Row p={4} pl={0}>{viewerComponents}</Row> : null}
+							{containerWidth < CONTAINER_THRESHOLD ? <Column p={4}>{viewerComponents}</Column> : null}
+							<Column m={2} pt={4}>{ancillaryComponents}</Column>
+						</Column>
+					</ScrollView>
+					{(showDeleteBtn || showCloseBtn) && 
+						<Footer justifyContent="flex-end">
+							{showDeleteBtn && 
+								<Row flex={1} justifyContent="flex-start">
+									<Button
+										key="deleteBtn"
+										onPress={onDelete}
+										bg="warning"
+										_hover={{
+											bg: 'warningHover',
+										}}
+										color="#fff"
+									>Delete</Button>
+								</Row>}
+							{showCloseBtn && <Button
+												key="closeBtn"
+												onPress={onClose}
+												color="#fff"
+											>Close</Button>}
+						</Footer>}
 
-					</Column>
-				</ScrollView>
-				{(showDeleteBtn || showCloseBtn) && 
-					<Footer justifyContent="flex-end">
-						{showDeleteBtn && 
-							<Row flex={1} justifyContent="flex-start">
-								<Button
-									key="deleteBtn"
-									onPress={onDelete}
-									bg="warning"
-									_hover={{
-										bg: 'warningHover',
-									}}
-									color="#fff"
-								>Delete</Button>
-							</Row>}
-						{showCloseBtn && <Button
-											key="closeBtn"
-											onPress={onClose}
-											color="#fff"
-										>Close</Button>}
-					</Footer>}
+				</>}
 			</Column>;
 }
 

package/src/Functions/buildAdditionalButtons.js

@@ -0,0 +1,43 @@
+import {
+	Icon,
+} from 'native-base';
+import Button from '../Components/Buttons/Button.js';
+import _ from 'lodash';
+
+export default function buildAdditionalButtons(configs, self, handlerArgs = {}) {
+	const additionalButtons = [];
+	_.each(configs, (config) => {
+		const {
+				key,
+				text,
+				handler,
+				icon,
+				isDisabled,
+				color = '#fff',
+			} = config,
+			buttonProps = {
+				key,
+				reference: key,
+			};
+		if (handler) {
+			buttonProps.onPress = () => handler(handlerArgs);
+		}
+		if (icon) {
+			buttonProps.leftIcon = <Icon as={icon} color="#fff" size="sm" />;
+		}
+		if (isDisabled) {
+			buttonProps.isDisabled = isDisabled;
+		}
+		
+		const button = <Button
+							color={color}
+							ml={2}
+							mb={2}
+							parent={self}
+							reference={key}
+							{...buttonProps}
+						>{text}</Button>;
+		additionalButtons.push(button);
+	});
+	return additionalButtons;
+}