@onehat/ui 0.3.295 → 0.3.296

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.295",
+	"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

@@ -14,6 +14,11 @@ 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) => {
 
@@ -27,14 +32,17 @@ export default function withModal(WrappedComponent) {
 			[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(400, 250),
+			[width, height] = useAdjustedWindowSize(w, h),
 			onCancel = () => {
 				setIsModalShown(false);
 			},
@@ -49,6 +57,10 @@ export default function withModal(WrappedComponent) {
 					onNo,
 					customButtons,
 					color,
+					// formItems = {},
+					body,
+					h,
+					w,
 				} = args;
 
 				if (title) {
@@ -60,47 +72,47 @@ export default function withModal(WrappedComponent) {
 				setMessage(message);
 				setCanClose(canClose);
 				setIncludeCancel(includeCancel);
+				if (onNo) {
+					setOnNo(() => onNo);
+				}
 				if (onOk) {
 					setOnOk(() => onOk);
 				}
 				if (onYes) {
 					setOnYes(() => onYes);
 				}
-				if (onNo) {
-					setOnNo(() => onNo);
-				}
 				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}
-									color="#fff"
 									colorScheme="coolGray"
 									variant="ghost" // or unstyled
 									ref={cancelRef}
 								>Cancel</Button>);
 			}
-			if (onOk) {
-				buttons.push(<Button
-								{...testProps('okBtn')}
-								key="okBtn"
-								ref={autoFocusRef}
-								onPress={onOk}
-								color="#fff"
-							>OK</Button>);
-			}
 			if (onNo) {
 				buttons.push(<Button
 								{...testProps('noBtn')}
@@ -108,18 +120,23 @@ export default function withModal(WrappedComponent) {
 								onPress={onNo}
 								color="trueGray.800"
 								variant="ghost"
-								// colorScheme="neutral"
 								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}
-								color="#fff"
-								// colorScheme="danger"
 							>Yes</Button>);
 			}
 			if (customButtons) {
@@ -150,21 +167,23 @@ export default function withModal(WrappedComponent) {
 								h={height}
 								flex={null}
 							>
-
 								{title && <Modal.Header>{title}</Modal.Header>}
 								<Modal.Body
 									borderTopWidth={0}
 									bg="#fff"
 									p={3}
-									justifyContent="center"
+									justifyContent=" center"
 									alignItems="center"
 									borderRadius={5}
 									flexDirection="row"
 								>
-									<Box w="50px" mx={2}>
-										<Icon as={TriangleExclamation} color={color} size="10" />
-									</Box>
-									<Text flex={1} color={color} fontSize="18px">{message}</Text>
+									{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}