@onehat/ui 0.3.380 → 0.4.0

package/src/Components/Hoc/withInlineEditor.js

@@ -1,4 +1,4 @@
-import { useState, } from 'react';
+import { forwardRef, useState, } from 'react';
 import {
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
@@ -9,20 +9,21 @@ import _ from 'lodash';
 
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		// provide the editorType to withEditor
 		return <WrappedComponent
 					editorType={EDITOR_TYPE__INLINE}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 // NOTE: Effectivtly, the HOC composition is:
 // withAdditionalProps(withEditor(withInlineEditor))
 
 export default function withInlineEditor(WrappedComponent, skipWrappers = false) {
-	const Editor = (props) => {
+	const Editor = forwardRef((props, ref) => {
 		const {
 				isEditorShown = false,
 				setIsEditorShown,
@@ -57,8 +58,9 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 								/>}
 
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 	if (skipWrappers) {
 		return Editor; // this is for InlineSideEditor, not yet implemented
 	}

package/src/Components/Hoc/withModal.js

@@ -1,69 +1,44 @@
-import React, { useState, useRef } from 'react';
+import { forwardRef, useState, useRef } from 'react';
 import {
 	Box,
-	Button,
-	Column,
 	Icon,
-	Modal,
-	Row,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from 'native-base';
-import Form from '../Form/Form.js';
+} from '../Gluestack';
+import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
-import IconButton from '../Buttons/IconButton.js';
-import Rotate from '../Icons/Rotate.js';
-import TriangleExclamation from '../Icons/TriangleExclamation.js';
+import Footer from '../Layout/Footer.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.
+// This HOC enables usage of more complex dialogs in the wrapped component.
+// Use withAlert for simple alerts, confirmations, and info dialogs.
 
 export default function withModal(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.disableWithModal || props.showModal) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		const
 			[title, setTitle] = useState(''),
-			[message, setMessage] = useState(''),
 			[canClose, setCanClose] = useState(true),
 			[includeCancel, setIncludeCancel] = useState(false),
-			[includeReset, setIncludeReset] = useState(false),
 			[isModalShown, setIsModalShown] = useState(false),
-			[isValid, setIsValid] = useState(false),
-			[isDirty, setIsDirty] = useState(false),
 			[h, setHeight] = useState(),
 			[w, setWidth] = useState(),
 			[onOk, setOnOk] = useState(),
 			[okBtnLabel, setOkBtnLabel] = useState(),
 			[onYes, setOnYes] = useState(),
 			[onNo, setOnNo] = useState(),
-			[onSubmit, setOnSubmit] = useState(),
-			[submitBtnLabel, setSubmitBtnLabel] = useState(),
 			[customButtons, setCustomButtons] = useState(),
-			[formProps, setFormProps] = useState(),
-			[self, setSelf] = useState(),
-			[color, setColor] = useState(),
-			[body, setBody]	= useState(), 
-			useForm = !!formProps, // convenience flag
+			[body, setBody] = useState(),
+			[whichModal, setWhichModal] = useState(),
 			autoFocusRef = useRef(null),
 			cancelRef = useRef(null),
-			[width, height] = useAdjustedWindowSize(w, h),
-			onValidityChange = (isValid) => {
-				setIsValid(isValid);
-			},
-			onDirtyChange = (isDirty) => {
-				setIsDirty(isDirty);
-			},
-			onReset = () => {
-				self?.children?.ModalForm?.reset();
-			},
+			[windowWidth, windowHeight] = useAdjustedWindowSize(w, h),
 			onCancel = () => {
 				hideModal();
 			},
@@ -73,34 +48,29 @@ export default function withModal(WrappedComponent) {
 			showModal = (args) => {
 				let {
 					title = null,
-					message = null,
 					body = null,
-					canClose = true,
+					canClose = false,
 					includeCancel = false,
 					onOk = null,
 					okBtnLabel = null,
 					onYes = null,
 					onNo = null,
-					onSubmit = null,
-					submitBtnLabel = null,
 					customButtons = null,
-					includeReset = false,
-					formProps = null,
-					self = null,
-					color = null,
 					h = null,
 					w = null,
+					whichModal = null,
+					formProps = null, // deprecated
 				} = args;
-
-				if (!message && !body && !formProps) {
-					throw new Error('Either message, body, or formProps is required for showModal');
+				
+				if (formProps) {
+					// deprecated formProps bc we were getting circular dependencies
+					throw new Error('withModal: formProps is deprecated. Instead, insert the <Form> in "body" directly from the component that called showModal.');
 				}
-				if (includeReset && !self) {
-					throw new Error('self is required when using includeReset');
+				if (!body) {
+					throw new Error('withModal: body is required for showModal');
 				}
 
 				setTitle(title);
-				setMessage(message);
 				setBody(body);
 				setCanClose(canClose);
 				setIncludeCancel(includeCancel);
@@ -108,54 +78,41 @@ export default function withModal(WrappedComponent) {
 				setOkBtnLabel(okBtnLabel || 'OK');
 				setOnYes(onYes ? () => onYes : null);
 				setOnNo(onNo ? () => onNo : null);
-				setOnSubmit(onSubmit ? () => onSubmit : null);
-				setSubmitBtnLabel(submitBtnLabel);
 				setCustomButtons(customButtons);
-				setIncludeReset(includeReset);
-				setFormProps(formProps);
-				setSelf(self);
-				setColor(color || '#000');
-				setHeight(h || 250);
-				setWidth(w || 400);
-
+				setHeight(h); // || 250
+				setWidth(w); // || 400
+				setWhichModal(whichModal);
 				setIsModalShown(true);
+			},
+			updateModalBody = (newBody) => {
+				setBody(newBody);
 			};
 
-		let buttons = [];
+		let modalBody,
+			buttons = [];
 		if (isModalShown) {
 			// assemble buttons
-			if (includeReset) {
-				buttons.push(<IconButton
-								{...testProps('resetBtn')}
-								key="resetBtn"
-								onPress={onReset}
-								icon={Rotate}
-								_icon={{
-									color: !isDirty ? 'trueGray.400' : '#000',
-								}}
-								isDisabled={!isDirty}
-								mr={2}
-							/>);
-			}
 			if (includeCancel) {
 				buttons.push(<Button
 									{...testProps('cancelBtn')}
 									key="cancelBtn"
 									onPress={onCancel}
 									colorScheme="coolGray"
-									variant="ghost" // or unstyled
 									ref={cancelRef}
-								>Cancel</Button>);
+									className="mr-2"
+									text="Cancel"
+									variant="outline" // or unstyled
+								/>);
 			}
 			if (onNo) {
 				buttons.push(<Button
 								{...testProps('noBtn')}
 								key="noBtn"
 								onPress={onNo}
-								color="trueGray.800"
-								variant="ghost"
-								mr={2}
-							>No</Button>);
+								className="text-grey-800 mr-2"
+								text="No"
+								variant="outline"
+							/>);
 			}
 			if (onOk) {
 				buttons.push(<Button
@@ -163,7 +120,9 @@ export default function withModal(WrappedComponent) {
 								key="okBtn"
 								ref={autoFocusRef}
 								onPress={onOk}
-							>{okBtnLabel}</Button>);
+								text={okBtnLabel}
+								className="text-white"
+							/>);
 			}
 			if (onYes) {
 				buttons.push(<Button
@@ -171,83 +130,66 @@ export default function withModal(WrappedComponent) {
 								key="yesBtn"
 								ref={autoFocusRef}
 								onPress={onYes}
-							>Yes</Button>);
-			}
-			if (useForm && onSubmit) {
-				buttons.push(<Button
-								{...testProps('submitBtn')}
-								key="submitBtn"
-								onPress={onSubmit}
-								isDisabled={!isValid}
-								color="#fff"
-							>{submitBtnLabel || 'Submit'}</Button>);
+								text="Yes"
+								className="text-white"
+							/>);
 			}
 			if (customButtons) {
 				_.each(customButtons, (button) => {
 					buttons.push(button);
 				});
 			}
-		}
-
-		let modalBody = null;
-		if (useForm) {
-			modalBody = <Form
-							{...formProps}
-							parent={self}
-							reference="ModalForm"
-							onValidityChange={onValidityChange} 
-							onDirtyChange={onDirtyChange}
-						/>;
-		} else if (body) {
+			
+			// assemble body
 			modalBody = body;
-		} else {
-			modalBody = <>
-							<Box w="50px" mx={2}>
-								<Icon as={TriangleExclamation} color={color} size="10" />
-							</Box>
-							<Text flex={1} color={color} fontSize="18px">{message}</Text>
-						</>;
+			if (h || w || title) {
+				let footer = null;
+				if (buttons && buttons.length > 0) {
+					footer = <Footer
+								className={`
+									justify-end
+									py-2
+									pr-4
+									bg-grey-100
+								`}
+							>{buttons}</Footer>;
+				}
+				modalBody =
+					<Panel
+						title={title}
+						isCollapsible={false}
+						className="bg-white overflow-auto"
+						h={h > windowHeight ? windowHeight : h}
+						w={w > windowWidth ? windowWidth : w}
+						isWindow={true}
+						disableAutoFlex={true}
+						onClose={canClose ? hideModal : null}
+						footer={footer}
+					>{modalBody}</Panel>
+			}
 		}
-
+		
 		return <>
 					<WrappedComponent
 						{...props}
 						disableWithModal={false}
 						showModal={showModal}
 						hideModal={onCancel}
+						updateModalBody={updateModalBody}
+						isModalShown={isModalShown}
+						whichModal={whichModal}
+						ref={ref}
 					/>
 					{isModalShown && 
 						<Modal
 							isOpen={true}
 							onClose={onCancel}
+							className="Modal"
 						>
-							<Panel
-								reference="modal"
-								isCollapsible={false}
-								bg="#fff"
-								w={width}
-								h={height}
-								flex={null}
-							>
-								{canClose && <Modal.CloseButton />}
-								{title && <Modal.Header>{title}</Modal.Header>}
-								<Modal.Body
-									borderTopWidth={0}
-									bg="#fff"
-									p={3}
-									justifyContent=" center"
-									alignItems="center"
-									borderRadius={5}
-									flexDirection="row"
-								>
-									{modalBody}
-								</Modal.Body>
-								<Modal.Footer py={2} pr={4} justifyContent="flex-end">
-									{buttons}
-								</Modal.Footer>
-							</Panel>
+							<ModalBackdrop />
+							{modalBody}
 						</Modal>}
 					
 				</>;
-	};
+	});
 }

package/src/Components/Hoc/withMultiSelection.js

@@ -1,9 +1,10 @@
+import { forwardRef } from 'react';
 import {
 	SELECTION_MODE_MULTI,
 } from '../../Constants/Selection.js';
 
 export default function withMultiSelection(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		const
 			{
 				selectionMode = SELECTION_MODE_MULTI,
@@ -11,6 +12,7 @@ export default function withMultiSelection(WrappedComponent) {
 		return <WrappedComponent
 					selectionMode={selectionMode}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/withPdfButtons.js

@@ -1,19 +1,20 @@
+import { forwardRef } from 'react';
 import {
 	VIEW,
 } from '../../Constants/Commands.js';
+import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor.js';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import Inflector from 'inflector-js';
 import qs from 'qs';
-import inArray from '../../Functions/inArray.js';
-import Pdf from '../Icons/Pdf.js';
 import withModal from './withModal.js';
-import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor.js';
+import Form from '../Form/Form.js';
+import Pdf from '../Icons/Pdf.js';
 import UiGlobals from '../../UiGlobals.js';
+import inArray from '../../Functions/inArray.js';
 import _ from 'lodash';
 
 export default function withPdfButtons(WrappedComponent) {
-	return withModal((props) => {
-
+	return withModal(forwardRef((props, ref) => {
 		let showButtons = true;
 		if (!props.showPdfBtns) {
 			showButtons = false;
@@ -25,7 +26,7 @@ export default function withPdfButtons(WrappedComponent) {
 			// bypass everything.
 			// If we don't do this, we get an infinite recursion with Form
 			// because this HOC wraps Form and uses Form itself.
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		const {
@@ -54,6 +55,7 @@ export default function withPdfButtons(WrappedComponent) {
 				hideModal,
 
 			} = props,
+			styles = UiGlobals.styles,
 			propertyNames = [],
 			buildModalItems = () => {
 				const modalItems = _.map(_.cloneDeep(items), (item, ix) => buildNextLayer(item, ix, columnDefaults)); // clone, as we don't want to alter the item by reference
@@ -81,8 +83,9 @@ export default function withPdfButtons(WrappedComponent) {
 
 				if (!_.isEmpty(ancillaryItems)) {
 					const
+						ancillaryItemsClone = _.cloneDeep(ancillaryItems),
 						items = [];
-					_.each(ancillaryItems, (ancillaryItem) => { // clone, as we don't want to alter the item by reference
+					_.each(ancillaryItemsClone, (ancillaryItem) => { // clone, as we don't want to alter the item by reference
 						let name;
 						if (ancillaryItem.pdfModel) {
 							name = ancillaryItem.pdfModel;
@@ -109,7 +112,6 @@ export default function withPdfButtons(WrappedComponent) {
 						items,
 						showToggleAllCheckbox: true,
 						isCollapsible: false,
-						ml: 3, // since it's not in a column, which normally adds pl: 3
 					});
 				}
 	
@@ -195,117 +197,110 @@ export default function withPdfButtons(WrappedComponent) {
 					title: 'PDF Fields to Show',
 					includeReset: true,
 					includeCancel: true,
-					onSubmit: () => {
-						hideModal();
-
-						const
-							form = self.children.ModalForm,
-							data = form.formGetValues();
-
-						if (userWantsToEmail) {
-							onChooseEmailAddress(data);
-						} else {
-							getPdf(data);
-						}
-					},
-					submitBtnLabel: userWantsToEmail ? 'Choose Email' : 'Get PDF',
-					w: 530, // 510 so it's over the stack threshold
 					h: 800,
-					self,
-					formProps: {
-						editorType: EDITOR_TYPE__PLAIN,
-						disableFooter: true,
-						columnDefaults: {
-							labelWidth: '100%',
-						},
-						items: [
-							{
-								name: 'instructions',
-								type: 'DisplayField',
-								text: 'Please select which fields to show in the PDF.',
-								mb: 10,
-							},
-							...modalItems,
-						],
-						Repository,
-						startingValues,
-						validator,
-					},
+					w: styles.FORM_STACK_ROW_THRESHOLD + 10,
+					body: <Form
+								editorType={EDITOR_TYPE__PLAIN}
+								alert={alert}
+								columnDefaults={{
+									labelWidth: '100px',
+								}}
+								items={[
+									{
+										name: 'instructions',
+										type: 'DisplayField',
+										text: 'Please select which fields to show in the PDF.',
+										className: 'mb-3',
+									},
+									...modalItems,
+								]}
+								Repository={Repository}
+								startingValues={startingValues}
+								validator={validator}
+								submitBtnLabel={userWantsToEmail ? 'Choose Email' : 'Get PDF'}
+								onSubmit={(values)=> {
+									hideModal();
+
+									if (userWantsToEmail) {
+										onChooseEmailAddress(values);
+									} else {
+										getPdf(values);
+									}
+								}}
+							/>,
 				});
 			},
 			onChooseEmailAddress = (data) => {
+
 				showModal({
 					title: 'Email To',
-					includeReset: true,
 					includeCancel: true,
-					onSubmit: () => {
-						hideModal();
-
-						const
-							fv = self.children.ModalForm.formGetValues(),
-							email = fv.email,
-							message = fv.message;
-
-						sendEmail({
-							...data,
-							email,
-							message,
-						});
-					},
-					submitBtnLabel: 'Email PDF',
 					w: 510, // 510 so it's over the stack threshold
 					h: 500,
-					self,
-					formProps: {
-						editorType: EDITOR_TYPE__PLAIN,
-						disableFooter: true,
-						columnDefaults: {
-							labelWidth: '100%',
-						},
-						items: [
-							{
-								name: 'instructions',
-								type: 'DisplayField',
-								text: 'Please enter one or more email addresses, separated by a comma.',
-							},
-							{
-								name: 'email',
-								label: 'Email Address',
-								type: 'Input',
-								tooltip: 'Separate multiple email addresses with a comma.',
-							},
-							{
-								name: 'message',
-								label: 'Message',
-								placeholder: 'Please see attached PDF.',
-								type: 'TextArea',
-								totalLines: 6,
-							},
-						],
-						validator: yup.object({
-							email: yup.string().required('Email is required').test({
-								name: 'csvEmails',
-								test: function(value) {
-									if (!value) {
-										return this.createError({
-											message: 'Email is required',
-										});
-									}
-									const firstInvalidEmail = value.split(",")
-																	.map(email => email.trim())
-																	.filter(v => !_.isEmpty(v))
-																	.find(v => !yup.string().email().isValidSync(v));
-									if (firstInvalidEmail) {
-										return this.createError({
-											message: `The email address '${firstInvalidEmail}' is invalid.`
-										});
-									}
-									return true;
-								},
-							}),
-							message: yup.string().notRequired(),
-						}),
-					},
+					body: <Form
+								submitBtnLabel='Email PDF'
+								onSubmit={(values)=> {
+									hideModal();
+			
+									const
+										email = values.email,
+										message = values.message;
+			
+									sendEmail({
+										...data,
+										email,
+										message,
+									});
+								}}
+								editorType={EDITOR_TYPE__PLAIN}
+								alert={alert}
+								columnDefaults={{
+									labelWidth: '100px',
+								}}
+								items={[
+									{
+										name: 'instructions',
+										type: 'DisplayField',
+										text: 'Please enter one or more email addresses, separated by a comma.',
+									},
+									{
+										name: 'email',
+										label: 'Email Address',
+										type: 'Input',
+										tooltip: 'Separate multiple email addresses with a comma.',
+									},
+									{
+										name: 'message',
+										label: 'Message',
+										placeholder: 'Please see attached PDF.',
+										type: 'TextArea',
+										totalLines: 6,
+									},
+								]}
+								validator={yup.object({
+									email: yup.string().required('Email is required').test({
+										name: 'csvEmails',
+										test: function(value) {
+											if (!value) {
+												return this.createError({
+													message: 'Email is required',
+												});
+											}
+											const firstInvalidEmail = value.split(",")
+																			.map(email => email.trim())
+																			.filter(v => !_.isEmpty(v))
+																			.find(v => !yup.string().email().isValidSync(v));
+											if (firstInvalidEmail) {
+												return this.createError({
+													message: `The email address '${firstInvalidEmail}' is invalid.`
+												});
+											}
+											return true;
+										},
+									}),
+									message: yup.string().notRequired(),
+								})}
+							/>,
 				});
 			},
 			getPdf = (data) => {
@@ -351,6 +346,7 @@ export default function withPdfButtons(WrappedComponent) {
 				icon: Pdf,
 				isDisabled: selection.length !== 1,
 				handler: () => onChooseFields(true),
+				tooltip: 'Email the selected item as a PDF.',
 			},
 			{
 				key: 'viewPdfBtn',
@@ -358,6 +354,7 @@ export default function withPdfButtons(WrappedComponent) {
 				icon: Pdf,
 				isDisabled: selection.length !== 1,
 				handler: () => onChooseFields(),
+				tooltip: 'View the selected item as a PDF.',
 			},
 		];
 		_.each(buttons, (button) => {
@@ -373,6 +370,7 @@ export default function withPdfButtons(WrappedComponent) {
 					{...props}
 					additionalEditButtons={additionalEditButtons}
 					additionalViewButtons={additionalViewButtons}
+					ref={ref}
 				/>;
-	});
+	}));
 }