@onehat/ui 0.3.337 → 0.3.338

package/package.json

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

package/src/Components/Hoc/withModal.js

@@ -38,10 +38,10 @@ export default function withModal(WrappedComponent) {
 			[isModalShown, setIsModalShown] = useState(false),
 			[isValid, setIsValid] = useState(false),
 			[isDirty, setIsDirty] = useState(false),
-			[h, setHeight] = useState(250),
-			[w, setWidth] = useState(400),
+			[h, setHeight] = useState(),
+			[w, setWidth] = useState(),
 			[onOk, setOnOk] = useState(),
-			[okBtnLabel, setOkBtnLabel] = useState('OK'),
+			[okBtnLabel, setOkBtnLabel] = useState(),
 			[onYes, setOnYes] = useState(),
 			[onNo, setOnNo] = useState(),
 			[onSubmit, setOnSubmit] = useState(),
@@ -49,7 +49,7 @@ export default function withModal(WrappedComponent) {
 			[customButtons, setCustomButtons] = useState(),
 			[formProps, setFormProps] = useState(),
 			[self, setSelf] = useState(),
-			[color, setColor] = useState('#000'),
+			[color, setColor] = useState(),
 			[body, setBody]	= useState(), 
 			useForm = !!formProps, // convenience flag
 			autoFocusRef = useRef(null),
@@ -65,28 +65,31 @@ export default function withModal(WrappedComponent) {
 				self?.children?.ModalForm?.reset();
 			},
 			onCancel = () => {
+				hideModal();
+			},
+			hideModal = () => {
 				setIsModalShown(false);
 			},
 			showModal = (args) => {
-				const {
-					title = '',
-					message = '',
-					body,
+				let {
+					title = null,
+					message = null,
+					body = null,
 					canClose = true,
 					includeCancel = false,
-					onOk,
-					okBtnLabel,
-					onYes,
-					onNo,
-					onSubmit,
-					submitBtnLabel,
-					customButtons,
+					onOk = null,
+					okBtnLabel = null,
+					onYes = null,
+					onNo = null,
+					onSubmit = null,
+					submitBtnLabel = null,
+					customButtons = null,
 					includeReset = false,
-					formProps,
-					self,
-					color,
-					h,
-					w,
+					formProps = null,
+					self = null,
+					color = null,
+					h = null,
+					w = null,
 				} = args;
 
 				if (!message && !body && !formProps) {
@@ -95,54 +98,25 @@ export default function withModal(WrappedComponent) {
 				if (includeReset && !self) {
 					throw new Error('self is required when using includeReset');
 				}
-				if (title) {
-					setTitle(title);
-				}
-				if (message) {
-					setMessage(message);
-				}
-				if (body) {
-					setBody(body);
-				}
+
+				setTitle(title);
+				setMessage(message);
+				setBody(body);
 				setCanClose(canClose);
 				setIncludeCancel(includeCancel);
-				if (onOk) {
-					setOnOk(() => onOk);
-				}
-				if (okBtnLabel) {
-					setOkBtnLabel(okBtnLabel);
-				}
-				if (onYes) {
-					setOnYes(() => onYes);
-				}
-				if (onNo) {
-					setOnNo(() => onNo);
-				}
-				if (onSubmit) {
-					setOnSubmit(() => onSubmit);
-				}
-				if (submitBtnLabel) {
-					setSubmitBtnLabel(submitBtnLabel);
-				}
-				if (customButtons) {
-					setCustomButtons(customButtons);
-				}
+				setOnOk(onOk ? () => onOk : null);
+				setOkBtnLabel(okBtnLabel || 'OK');
+				setOnYes(onYes ? () => onYes : null);
+				setOnNo(onNo ? () => onNo : null);
+				setOnSubmit(onSubmit ? () => onSubmit : null);
+				setSubmitBtnLabel(submitBtnLabel);
+				setCustomButtons(customButtons);
 				setIncludeReset(includeReset);
-				if (formProps) {
-					setFormProps(formProps);
-				}
-				if (self) {
-					setSelf(self);
-				}
-				if (color) {
-					setColor(color);
-				}
-				if (h) {
-					setHeight(h);
-				}
-				if (w) {
-					setWidth(w);
-				}
+				setFormProps(formProps);
+				setSelf(self);
+				setColor(color || '#000');
+				setHeight(h || 250);
+				setWidth(w || 400);
 
 				setIsModalShown(true);
 			};
@@ -218,7 +192,8 @@ export default function withModal(WrappedComponent) {
 		let modalBody = null;
 		if (useForm) {
 			modalBody = <Form
-							{...formProps} 
+							{...formProps}
+							parent={self}
 							reference="ModalForm"
 							onValidityChange={onValidityChange} 
 							onDirtyChange={onDirtyChange}

package/src/Components/Hoc/withPdfButtons.js

@@ -181,9 +181,9 @@ export default function withPdfButtons(WrappedComponent) {
 
 				showModal({
 					title: 'PDF Fields to Show',
-					message: 'Please select which fields to show in the PDF. (1)',
+					includeReset: true,
 					includeCancel: true,
-					onOk: () => {
+					onSubmit: () => {
 						hideModal();
 
 						const
@@ -196,97 +196,104 @@ export default function withPdfButtons(WrappedComponent) {
 							getPdf(data);
 						}
 					},
-					okBtnLabel: userWantsToEmail ? 'Choose Email' : 'Get PDF',
+					submitBtnLabel: userWantsToEmail ? 'Choose Email' : 'Get PDF',
 					w: 530, // 510 so it's over the stack threshold
 					h: 800,
-					body: <Column w="100%">
-							<Row px={10}>
-								<Column w="40px" mr={5} justifyContent="flex-start">
-									<Icon as={TriangleExclamation} size={10} color="#000" />
-								</Column>
-								<Text flex={1}>Please select which fields to show in the PDF. (2)</Text>
-							</Row>
-							<Form
-								parent={self}
-								reference="ModalForm"
-								editorType={EDITOR_TYPE__PLAIN}
-								useAdditionalEditButtons={false}
-								flex={1}
-								Repository={Repository}
-								items={modalItems}
-								startingValues={startingValues}
-								validator={validator}
-								checkIsEditingDisabled={false}
-								disableFooter={true}
-								columnDefaults={{
-									labelWidth: '100%',
-								}}
-							/>
-						</Column>,
+					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,
+					},
 				});
 			},
 			onChooseEmailAddress = (data) => {
 				showModal({
 					title: 'Email To',
+					includeReset: true,
 					includeCancel: true,
-					onOk: () => {
+					onSubmit: () => {
 						hideModal();
 
 						const
 							fv = self.children.ModalForm.formGetValues(),
-							email = fv.email;
+							email = fv.email,
+							message = fv.message;
 
 						sendEmail({
 							...data,
 							email,
+							message,
 						});
 					},
-					okBtnLabel: 'Email PDF',
+					submitBtnLabel: 'Email PDF',
 					w: 510, // 510 so it's over the stack threshold
-					h: 300,
-					body: <Column w="100%">
-							<Row>
-								<Column w="40px" mr={5} justifyContent="flex-start">
-									<Icon as={TriangleExclamation} size={10} color="#000" />
-								</Column>
-								<Text flex={1}>Please enter one more more email addresses{"\n"}
-									(separated by a comma) to send the PDF to.</Text>
-							</Row>
-							<Form
-								parent={self}
-								reference="ModalForm"
-								editorType={EDITOR_TYPE__PLAIN}
-								disableFooter={true}
-								columnDefaults={{
-									labelWidth: '100%',
-								}}
-								items={[
-									{
-										name: 'email',
-										label: 'Email Address',
-										type: 'Input',
-										required: true,
-									},
-								]}
-								validator={yup.object({
-									email: yup.string().required().test({
-										name: 'csvEmails',
-										test: function(value) {
-											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;
-										},
-									}),
-								})}
-							/>
-						</Column>,
+					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(),
+						}),
+					},
 				});
 			},
 			getPdf = (data) => {