@onehat/ui 0.3.27 → 0.3.29

package/package.json

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

package/src/Components/Form/Field/Checkbox/Checkbox.js

@@ -0,0 +1,26 @@
+import CheckboxButton from '../../../Buttons/CheckboxButton.js';
+import withValue from '../../../Hoc/withValue.js';
+import _ from 'lodash';
+
+const
+	CheckboxElement = (props) => {
+		const {
+				value,
+				setValue,
+			} = props,
+			onToggle = () => {
+				setValue(!value);
+			};
+
+		return <CheckboxButton
+					isChecked={value}
+					onPress={onToggle}
+					_icon={{
+						size: 'lg',
+					}}
+				/>;
+	
+	},
+	CheckboxEField = withValue(CheckboxElement);
+
+export default CheckboxEField;

package/src/Components/Form/Form.js

@@ -25,6 +25,7 @@ import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import UiGlobals from '../../UiGlobals.js';
 import withAlert from '../Hoc/withAlert.js';
 import withEditor from '../Hoc/withEditor.js';
+import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -67,6 +68,7 @@ function Form(props) {
 			onBack,
 			onReset,
 			onViewMode,
+			saveBtnLabel,
 			additionalEditButtons = [],
 			
 			// sizing of outer container
@@ -305,14 +307,14 @@ function Form(props) {
 				if (_.isEmpty(items)) {
 					return null;
 				}
-				const defaults = item.defaults;
+				const itemDefaults = item.defaults;
 				children = _.map(items, (item, ix) => {
-					return buildNextLayer(item, ix, defaults);
+					return buildNextLayer(item, ix, itemDefaults);
 				});
-				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
+				return <Element key={ix} title={title} {...itemDefaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
 
-			if (!label && Repository && propertyDef.title) {
+			if (!label && Repository && propertyDef?.title) {
 				label = propertyDef.title;
 			}
 
@@ -548,13 +550,13 @@ function Form(props) {
 					borderTopColor="primary.100"
 					borderBottomColor="primary.100"
 				>{formComponents}</ScrollView>;
-	} else if (editorType === EDITOR_TYPE__PLAIN) {
-		formComponents = buildFromItems();
-		const formAncillaryComponents = buildAncillary();
-		editor = <>
-					<Column p={4}>{formComponents}</Column>
-					<Column pt={4}>{formAncillaryComponents}</Column>
-				</>;
+	// } else if (editorType === EDITOR_TYPE__PLAIN) {
+	// 	formComponents = buildFromItems();
+	// 	const formAncillaryComponents = buildAncillary();
+	// 	editor = <>
+	// 				<Column p={4}>{formComponents}</Column>
+	// 				<Column pt={4}>{formAncillaryComponents}</Column>
+	// 			</>;
 	} else {
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
@@ -653,7 +655,7 @@ function Form(props) {
 														onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 														isDisabled={isSaveDisabled}
 														color="#fff"
-													>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
+													>{saveBtnLabel || (editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save')}</Button>}
 						{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && <Button
 														key="closeBtn"
 														onPress={onClose}
@@ -708,6 +710,6 @@ function getNullFieldValues(initialValues, Repository) {
 	return ret;
 }
 
-export const FormEditor = withAlert(withEditor(Form));
+export const FormEditor = withAlert(withEditor(withPdfButton(Form)));
 
-export default withAlert(Form);
+export default withAlert(withPdfButton(Form));

package/src/Components/Form/Label.js

@@ -11,7 +11,7 @@ export default function Label(props) {
 	return <Row
 				w={w}
 				minWidth="120px"
-				maxWidth="50%"
+				// maxWidth="50%"
 				alignItems="center"
 				pl={2}
 				{...props}

package/src/Components/Hoc/withPdfButton.js

@@ -0,0 +1,180 @@
+import { useState, } from 'react';
+import {
+	Column,
+	Button,
+	Modal,
+	Row,
+} from 'native-base';
+import Inflector from 'inflector-js';
+import qs from 'qs';
+import FormPanel from '../Panel/FormPanel.js';
+import inArray from '../../Functions/inArray.js';
+import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import { EDITOR_TYPE__PLAIN } from '@onehat/ui/src/Constants/Editor.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+export default function withPdfButton(WrappedComponent) {
+	return (props) => {
+
+		if (!props.showViewPdfBtn) {
+			// 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} />;
+		}
+
+		const
+			{
+				additionalEditButtons = [],
+				additionalViewButtons = [],
+				items = [],
+				ancillaryItems = [],
+				columnDefaults = {},
+
+				// withData
+				Repository,
+				model,
+			} = props,
+			[isModalShown, setIsModalShown] = useState(false),
+			[width, height] = useAdjustedWindowSize(500, 800);
+			buildModalItems = () => {
+				const modalItems = _.map(_.cloneDeep(items), (item, ix) => buildNextLayer(item, ix, columnDefaults)); // clone, as we don't want to alter the item by reference
+
+				if (!_.isEmpty(ancillaryItems)) {
+					modalItems.push({
+						type: 'FieldSet',
+						title: 'Ancillary Items',
+						defaults: {
+							labelWidth: '90%',
+						},
+						items: _.map(_.cloneDeep(ancillaryItems), (ancillaryItem) => { // clone, as we don't want to alter the item by reference
+							let name;
+							if (ancillaryItem.model) {
+								name = Inflector.underscore(ancillaryItem.model);
+							} else {
+								name = ancillaryItem.title;
+							}
+							name = 'ancillary___' + name;
+							return {
+								title: ancillaryItem.title,
+								label: ancillaryItem.title,
+								name,
+								type: 'Checkbox',
+							};
+						}),
+					});
+				}
+	
+				return modalItems;
+			},
+			buildNextLayer = (item, ix, defaults) => {
+				let {
+						type,
+						name,
+						items,
+					} = item;
+				if (inArray(type, ['Column', 'FieldSet'])) {
+					if (!item.defaults) {
+						item.defaults = {};
+					}
+					item.defaults.labelWidth = '90%';
+					if (!_.isEmpty(items)) {
+						const defaults = item.defaults;
+						item.children = _.map(items, (item, ix) => {
+							return buildNextLayer(item, ix, defaults);
+						});
+					}
+					return item;
+				}
+
+				if (!item.title) {
+					const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
+					if (propertyDef.title) {
+						item.title = propertyDef.title;
+					}
+				}
+				item.type = 'Checkbox';
+				return item;
+			},
+			getStartingValues = (modalItems) => {
+				const startingValues = {};
+				function walkTree(item) {
+					let {
+							name,
+							items,
+						} = item;
+					if (!_.isEmpty(items)) {
+						_.each(items, (item) => {
+							walkTree(item);
+						});
+					}
+					if (name) {
+						startingValues[name] = true;
+					}
+				}
+				_.each(modalItems, walkTree);
+				return startingValues;
+			},
+			getPdf = (data) => {
+				const
+					url = UiGlobals.baseURL + model + '/viewPdf?',
+					queryString = qs.stringify(data);
+				window.open(url + queryString, '_blank');
+			};
+
+		const button = <Button
+							key="viewPdfBtn"
+							borderRadius="md"
+							colorScheme="primary"
+							flexDirection="row"
+							justifyContent="center"
+							alignItems="center"
+							px={4}
+							onPress={(e) => setIsModalShown(true)}
+						>View PDF</Button>;
+		additionalEditButtons.unshift(button);
+		if (additionalEditButtons !== additionalViewButtons) { // Ensure they're NOT the same object, otherwise this would be adding it twice!
+			additionalViewButtons.unshift(button);
+		}
+	
+		let modal = null;
+		if (isModalShown) {
+			const
+				modalItems = buildModalItems(),
+				startingValues = getStartingValues(modalItems);
+			modal = <Modal
+						isOpen={true}
+						onClose={() => setIsModalShown(false)}
+					>
+						<Column bg="#fff" w={width} h={height}>
+							<FormPanel
+								title="PDF Fields to Show"
+								instructions="Please select which fields to show in the PDF."
+								editorType={EDITOR_TYPE__PLAIN}
+								flex={1}
+								Repository={Repository}
+								items={modalItems}
+								startingValues={startingValues}
+								onCancel={(e) => {
+									setIsModalShown(false);
+								}}
+								onSave={(data, e) => {
+									getPdf(data);
+									setIsModalShown(false);
+								}}
+								saveBtnLabel="View PDF"
+							/>
+						</Column>
+					</Modal>;
+		}
+		return <>
+				<WrappedComponent
+					{...props}
+					additionalEditButtons={additionalEditButtons}
+					additionalViewButtons={additionalViewButtons}
+				/>;
+				{modal}
+			</>;
+	};
+}

package/src/Components/Viewer/Viewer.js

@@ -10,6 +10,7 @@ import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
+import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import Label from '../Form/Label.js';
@@ -17,7 +18,7 @@ import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
 import _ from 'lodash';
 
-export default function Viewer(props) {
+function Viewer(props) {
 	const {
 			viewerCanDelete = false,
 			items = [], // Columns, FieldSets, Fields, etc to define the form
@@ -210,3 +211,5 @@ export default function Viewer(props) {
 					</Footer>}
 			</Column>;
 }
+
+export default withPdfButton(Viewer);

package/src/Components/index.js

@@ -2,7 +2,7 @@ import {
 	Column,
 } from 'native-base';
 // import AccordionGridPanel from '../Components/Panel/AccordionGridPanel.js';
-import ArrayCheckboxGroup from './Form/Field/CheckboxGroup/ArrayCheckboxGroup.js';
+import ArrayCheckboxGroup from './Form/Field/Checkbox/ArrayCheckboxGroup.js';
 import ArrayCombo from './Form/Field/Combo/ArrayCombo.js';
 import ArrayRadioGroup from './Form/Field/RadioGroup/ArrayRadioGroup.js';
 // import BackButton from '../Components/Buttons/BackButton.js';
@@ -10,7 +10,8 @@ import Blank from './Blank.js';
 import BooleanCombo from './Form/Field/Combo/BooleanCombo.js';
 // import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge.js';
 // import CKEditor from './Form/Field/CKEditor/CKEditor.js'; // web only
-import CheckboxGroup from './Form/Field/CheckboxGroup/CheckboxGroup.js';
+import Checkbox from './Form/Field/Checkbox/Checkbox.js';
+import CheckboxGroup from './Form/Field/Checkbox/CheckboxGroup.js';
 import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
 // import { ComboEditor } from '../Components/Form/Field/Combo/Combo.js';
@@ -58,6 +59,7 @@ const components = {
 	Blank,
 	BooleanCombo,
 	// CartButtonWithBadge,
+	Checkbox,
 	CheckboxGroup,
 	// CKEditor,
 	Color,