@onehat/ui 0.3.44 → 0.3.47

package/package.json

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

package/src/Components/Form/Form.js

@@ -601,6 +601,7 @@ function Form(props) {
 		sizeProps.maxHeight = maxHeight;
 	}
 
+	const formButtons = [];
 	let formComponents,
 		editor,
 		additionalButtons,
@@ -616,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();
@@ -637,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)) {
@@ -671,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

@@ -144,7 +144,7 @@ export default function withPdfButton(WrappedComponent) {
 				data.id = selection[0].id;
 
 				const
-					url = UiGlobals.baseURL + model + '/viewPdf?',
+					url = UiGlobals.baseURL + model + '/viewModelPdf?',
 					queryString = qs.stringify(data);
 
 				window.open(url + queryString, '_blank');

package/src/Components/Screens/Manager.js

@@ -72,7 +72,7 @@ function ManagerScreen(props) {
 					<IconButton
 						icon={FullWidth}
 						_icon={{
-							size: '30px',
+							size: '25px',
 							color: mode === MODE_FULL ? 'primary.100' : '#000',
 						}}
 						disabled={mode === MODE_FULL}
@@ -82,7 +82,7 @@ function ManagerScreen(props) {
 					<IconButton
 						icon={SideBySide}
 						_icon={{
-							size: '30px',
+							size: '25px',
 							color: mode === MODE_SIDE ? 'primary.100' : '#000',
 						}}
 						disabled={mode === MODE_SIDE}

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}

package/src/PlatformImports/Web/Attachments.js

@@ -16,6 +16,7 @@ import {
 	FILE_MODE_FILE,
 } from '../../Constants/File.js';
 import { Avatar, Dropzone, FileMosaic, FileCard, FileInputButton, } from "@files-ui/react";
+import withAlert from '../../Components/Hoc/withAlert.js';
 import withData from '../../Components/Hoc/withData.js';
 import _ from 'lodash';
 
@@ -40,6 +41,7 @@ function AttachmentsElement(props) {
 			maxFiles = null,
 			disabled = false,
 			clickable = true,
+			confirmBeforeDelete = false,
 
 			// parentContainer
 			selectorSelected,
@@ -47,6 +49,9 @@ function AttachmentsElement(props) {
 			// withData
 			Repository,
 
+			// withAlert
+			confirm,
+
 		} = props,
 		styles = UiGlobals.styles,
 		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
@@ -113,6 +118,13 @@ function AttachmentsElement(props) {
 			}
 		},
 		onFileDelete = (id) => {
+			if (confirmBeforeDelete) {
+				confirm('Are you sure you want to delete?', () => doDelete(id));
+			} else {
+				doDelete(id);
+			}
+		},
+		doDelete = (id) => {
 			Repository.deleteById(id);
 		};
 
@@ -263,4 +275,4 @@ function withAdditionalProps(WrappedComponent) {
 	};
 }
 
-export default withAdditionalProps(withData(AttachmentsElement));
+export default withAdditionalProps(withAlert(withData(AttachmentsElement)));