@onehat/ui 0.3.43 → 0.3.45

package/package.json

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

package/src/Components/Buttons/SquareButton.js

@@ -13,6 +13,7 @@ export default function SquareButton(props) {
 			activeColor,
 			invertColorWhenActive = false,
 			disableInteractions = false,
+			fontSize = '20px',
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -54,7 +55,7 @@ export default function SquareButton(props) {
 				// _pressed={pressedProps}
 			>
 				<Icon as={icon} color={color} size="xl" />
-				<Text fontSize={20} color={color}>{text}</Text>
+				<Text fontSize={fontSize} color={color}>{text}</Text>
 			</Pressable>;
 }
 

package/src/Components/Form/Form.js

@@ -77,6 +77,7 @@ function Form(props) {
 			submitBtnLabel,
 			onSubmit,
 			additionalEditButtons,
+			useAdditionalEditButtons = true,
 			additionalFooterButtons,
 			
 			// sizing of outer container
@@ -290,6 +291,9 @@ function Form(props) {
 				editorTypeProps = {};
 
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
+			if (!useAdditionalEditButtons) {
+				item = _.omit(item, 'additionalEditButtons');
+			}
 			if (propertyDef?.isEditingDisabled && checkIsEditingDisabled) {
 				isEditable = false;
 			}
@@ -597,6 +601,7 @@ function Form(props) {
 		sizeProps.maxHeight = maxHeight;
 	}
 
+	const formButtons = [];
 	let formComponents,
 		editor,
 		additionalButtons,
@@ -612,17 +617,7 @@ function Form(props) {
 		}
 
 		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>;
+			editor = buildFromColumnsConfig();
 		// } else if (editorType === EDITOR_TYPE__PLAIN) {
 		// 	formComponents = buildFromItems();
 		// 	const formAncillaryComponents = buildAncillary();
@@ -633,24 +628,35 @@ function Form(props) {
 		} else {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
-			editor = <ScrollView _web={{ minHeight, }} width="100%" pb={1}>
+			editor = <>
 						{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;
+					</>;
+
+			additionalButtons = buildAdditionalButtons(additionalEditButtons);
+
+			formButtons.push(<Row key="buttonsRow" 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>);
+			if (editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
+				formButtons.push(<Row key="additionalButtonsRow" p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+									{additionalButtons}
+								</Row>)
+			}
 		}
 
 		if (!_.isEmpty(formState.errors)) {
@@ -667,33 +673,27 @@ function Form(props) {
 			footerProps.alignItems = 'flex-start';
 		}
 
-		additionalButtons = buildAdditionalButtons(additionalEditButtons);
 	}
 	
 	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="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" flexWrap="wrap">
-							{additionalButtons}
-						</Row>}
-					
-					{editor}
+
+					{editorType === EDITOR_TYPE__INLINE &&
+						<ScrollView
+							horizontal={true}
+							flex={1}
+							bg="#fff"
+							py={1}
+							borderTopWidth={3}
+							borderBottomWidth={5}
+							borderTopColor="primary.100"
+							borderBottomColor="primary.100"
+						>{editor}</ScrollView>}
+					{editorType !== EDITOR_TYPE__INLINE &&
+						<ScrollView _web={{ minHeight, }} width="100%" pb={1}>
+							{formButtons}
+							{editor}
+						</ScrollView>}
 					
 					<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
 						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&

package/src/Components/Hoc/withPdfButton.js

@@ -42,7 +42,7 @@ export default function withPdfButton(WrappedComponent) {
 
 			} = props,
 			[isModalShown, setIsModalShown] = useState(false),
-			[width, height] = useAdjustedWindowSize(500, 800);
+			[width, height] = useAdjustedWindowSize(500, 800),
 			buildModalItems = () => {
 				const modalItems = _.map(_.cloneDeep(items), (item, ix) => buildNextLayer(item, ix, columnDefaults)); // clone, as we don't want to alter the item by reference
 
@@ -195,6 +195,7 @@ export default function withPdfButton(WrappedComponent) {
 									setIsModalShown(false);
 								}}
 								submitBtnLabel="View PDF"
+								useAdditionalEditButtons={false}
 							/>
 						</Column>
 					</Modal>;

package/src/Components/Viewer/Viewer.js

@@ -222,20 +222,20 @@ function Viewer(props) {
 
 	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>}
 
 					<ScrollView _web={{ height: 1 }} width="100%" pb={1} ref={scrollViewRef}>
+						{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>}
 						<Column>
 							{containerWidth >= CONTAINER_THRESHOLD ? <Row p={4} pl={0}>{viewerComponents}</Row> : null}
 							{containerWidth < CONTAINER_THRESHOLD ? <Column p={4}>{viewerComponents}</Column> : null}