@onehat/ui 0.3.294 → 0.3.296

package/package.json

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

package/src/Components/Form/Form.js

@@ -88,6 +88,7 @@ function Form(props) {
 			additionalEditButtons,
 			useAdditionalEditButtons = true,
 			additionalFooterButtons,
+			disableFooter = false,
 			
 			// sizing of outer container
 			h,
@@ -949,18 +950,6 @@ function Form(props) {
 				const formIsDirty = formState.isDirty;
 				// console.log('formIsDirty', formIsDirty);
 				// console.log('isPhantom', isPhantom);
-
-
-
-				
-				// LEFT OFF HERE
-				// The code I wrote below was supposed to be for the Tree search but messed up the standard
-				// windowed editors. Need to figure out how to make it work for both.
-				// Also, when crudding two records on the same tree in succession, the second record throws an error.
-
-
-
-
 				if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
 					showCancelBtn = true;
 				}
@@ -1003,79 +992,80 @@ function Form(props) {
 							{editor}
 						</ScrollView>}
 					
-					<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
-						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
+					{!disableFooter && 
+						<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
+							{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 
-							<Row flex={1} justifyContent="flex-start">
-								<Button
-									{...testProps('deleteBtn')}
-									key="deleteBtn"
-									onPress={onDelete}
-									bg="warning"
-									_hover={{
-										bg: 'warningHover',
+								<Row flex={1} justifyContent="flex-start">
+									<Button
+										{...testProps('deleteBtn')}
+										key="deleteBtn"
+										onPress={onDelete}
+										bg="warning"
+										_hover={{
+											bg: 'warningHover',
+										}}
+										color="#fff"
+									>Delete</Button>
+								</Row>}
+
+							{showResetBtn && 
+								<IconButton
+									{...testProps('resetBtn')}
+									key="resetBtn"
+									onPress={() => doReset()}
+									icon={Rotate}
+									_icon={{
+										color: !formState.isDirty ? 'trueGray.400' : '#000',
 									}}
-									color="#fff"
-								>Delete</Button>
-							</Row>}
+									isDisabled={!formState.isDirty}
+									mr={2}
+								/>}
 
-						{showResetBtn && 
-							<IconButton
-								{...testProps('resetBtn')}
-								key="resetBtn"
-								onPress={() => doReset()}
-								icon={Rotate}
-								_icon={{
-									color: !formState.isDirty ? 'trueGray.400' : '#000',
-								}}
-								isDisabled={!formState.isDirty}
-								mr={2}
-							/>}
+							{showCancelBtn &&
+								<Button
+									{...testProps('cancelBtn')}
+									key="cancelBtn"
+									variant="ghost"
+									onPress={onCancel}
+									color="#fff"
+								>Cancel</Button>}
+								
+							{showCloseBtn && 
+								<Button
+									{...testProps('closeBtn')}
+									key="closeBtn"
+									variant="ghost"
+									onPress={onClose}
+									color="#fff"
+								>Close</Button>}
 
-						{showCancelBtn &&
-							<Button
-								{...testProps('cancelBtn')}
-								key="cancelBtn"
-								variant="ghost"
-								onPress={onCancel}
-								color="#fff"
-							>Cancel</Button>}
+							{showSaveBtn && 
+								<Button
+									{...testProps('saveBtn')}
+									key="saveBtn"
+									onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
+									isDisabled={isSaveDisabled}
+									color="#fff"
+								>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
 							
-						{showCloseBtn && 
-							<Button
-								{...testProps('closeBtn')}
-								key="closeBtn"
-								variant="ghost"
-								onPress={onClose}
-								color="#fff"
-							>Close</Button>}
-
-						{showSaveBtn && 
-							<Button
-								{...testProps('saveBtn')}
-								key="saveBtn"
-								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
-								isDisabled={isSaveDisabled}
-								color="#fff"
-							>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
+							{showSubmitBtn && 
+								<Button
+									{...testProps('submitBtn')}
+									key="submitBtn"
+									onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
+									isDisabled={isSubmitDisabled}
+									color="#fff"
+								>{submitBtnLabel || 'Submit'}</Button>}
 						
-						{showSubmitBtn && 
-							<Button
-								{...testProps('submitBtn')}
-								key="submitBtn"
-								onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
-								isDisabled={isSubmitDisabled}
-								color="#fff"
-							>{submitBtnLabel || 'Submit'}</Button>}
-					
-						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
-							return <Button
-										{...testProps('additionalFooterBtn-' + props.key)}
-										{...props}
-										onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
-									>{props.text}</Button>;
-						})}
-					</Footer>
+							{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
+								return <Button
+											{...testProps('additionalFooterBtn-' + props.key)}
+											{...props}
+											onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
+										>{props.text}</Button>;
+							})}
+						</Footer>}
 				</>}
 			</Column>;
 }

package/src/Components/Hoc/withAlert.js

@@ -20,6 +20,9 @@ import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import CircleInfo from '../Icons/CircleInfo.js';
 import _ from 'lodash';
 
+// This HOC enables easy usage of alert dialogs in the wrapped component.
+// It can be used for simple alerts, confirmations, and custom dialogs. 
+
 export default function withAlert(WrappedComponent) {
 	return (props) => {
 

package/src/Components/Hoc/withModal.js

@@ -0,0 +1,196 @@
+import React, { useState, useRef, useEffect, } from 'react';
+import {
+	Box,
+	Button,
+	Column,
+	Icon,
+	Modal,
+	Row,
+	Text,
+} from 'native-base';
+import Panel from '../Panel/Panel.js';
+import TriangleExclamation from '../Icons/TriangleExclamation.js';
+import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import testProps from '../../Functions/testProps.js';
+import _ from 'lodash';
+
+// This HOC enables easy usage of more complex dialogs in the wrapped component.
+// Add en embedded Form, 
+
+// Use withAlert for simple alerts, confirmations, and custom dialogs.
+
+export default function withModal(WrappedComponent) {
+	return (props) => {
+
+		if (props.disableWithModal || props.showModal) {
+			return <WrappedComponent {...props} />;
+		}
+
+		const
+			[title, setTitle] = useState(''),
+			[message, setMessage] = useState(''),
+			[canClose, setCanClose] = useState(true),
+			[includeCancel, setIncludeCancel] = useState(false),
+			[isModalShown, setIsModalShown] = useState(false),
+			[h, setHeight] = useState(250),
+			[w, setWidth] = useState(400),
+			[onOk, setOnOk] = useState(),
+			[onYes, setOnYes] = useState(),
+			[onNo, setOnNo] = useState(),
+			[customButtons, setCustomButtons] = useState(),
+			[color, setColor] = useState('#000'),
+			[body, setBody]	= useState(), 
+			autoFocusRef = useRef(null),
+			cancelRef = useRef(null),
+			[width, height] = useAdjustedWindowSize(w, h),
+			onCancel = () => {
+				setIsModalShown(false);
+			},
+			showModal = (args) => {
+				const {
+					title = '',
+					message = '',
+					canClose = true,
+					includeCancel = false,
+					onOk,
+					onYes,
+					onNo,
+					customButtons,
+					color,
+					// formItems = {},
+					body,
+					h,
+					w,
+				} = args;
+
+				if (title) {
+					setTitle(title);
+				}
+				if (!message) {
+					throw new Error('Message is required for showModal');
+				}
+				setMessage(message);
+				setCanClose(canClose);
+				setIncludeCancel(includeCancel);
+				if (onNo) {
+					setOnNo(() => onNo);
+				}
+				if (onOk) {
+					setOnOk(() => onOk);
+				}
+				if (onYes) {
+					setOnYes(() => onYes);
+				}
+				if (customButtons) {
+					setCustomButtons(customButtons);
+				}
+				if (color) {
+					setColor(color);
+				}
+				if (body) {
+					setBody(body);
+				}
+				if (h) {
+					setHeight(h);
+				}
+				if (w) {
+					setWidth(w);
+				}
+
+				setIsModalShown(true);
+			};
+
+		let buttons = [];
+		if (isModalShown) {
+			// assemble buttons
+			if (includeCancel) {
+				buttons.push(<Button
+									{...testProps('cancelBtn')}
+									key="cancelBtn"
+									onPress={onCancel}
+									colorScheme="coolGray"
+									variant="ghost" // or unstyled
+									ref={cancelRef}
+								>Cancel</Button>);
+			}
+			if (onNo) {
+				buttons.push(<Button
+								{...testProps('noBtn')}
+								key="noBtn"
+								onPress={onNo}
+								color="trueGray.800"
+								variant="ghost"
+								mr={2}
+							>No</Button>);
+			}
+			if (onOk) {
+				buttons.push(<Button
+								{...testProps('okBtn')}
+								key="okBtn"
+								ref={autoFocusRef}
+								onPress={onOk}
+							>OK</Button>);
+			}
+			if (onYes) {
+				buttons.push(<Button
+								{...testProps('yesBtn')}
+								key="yesBtn"
+								ref={autoFocusRef}
+								onPress={onYes}
+							>Yes</Button>);
+			}
+			if (customButtons) {
+				_.each(customButtons, (button) => {
+					buttons.push(button);
+				});
+			}
+		}
+
+		return <>
+					<WrappedComponent
+						{...props}
+						disableWithModal={false}
+						showModal={showModal}
+						hideModal={onCancel}
+					/>
+					{isModalShown && 
+						<Modal
+							isOpen={true}
+							onClose={onCancel}
+						>
+							<Panel
+								{...props}
+								reference="modal"
+								isCollapsible={false}
+								bg="#fff"
+								w={width}
+								h={height}
+								flex={null}
+							>
+								{title && <Modal.Header>{title}</Modal.Header>}
+								<Modal.Body
+									borderTopWidth={0}
+									bg="#fff"
+									p={3}
+									justifyContent=" center"
+									alignItems="center"
+									borderRadius={5}
+									flexDirection="row"
+								>
+									{body || 
+										<>
+											<Box w="50px" mx={2}>
+												<Icon as={TriangleExclamation} color={color} size="10" />
+											</Box>
+											<Text flex={1} color={color} fontSize="18px">{message}</Text>
+										</>}
+								</Modal.Body>
+								<Modal.Footer py={2} pr={4} justifyContent="flex-end">
+									{buttons}
+								</Modal.Footer>
+							</Panel>
+						</Modal>}
+					
+				</>;
+	};
+}