@onehat/ui 0.3.29 → 0.3.30

package/package.json

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

package/src/Components/Form/FieldSet.js

@@ -1,28 +1,79 @@
-import { useState, } from 'react';
+import { useState, useRef, } from 'react';
 import {
 	Box,
 	Column,
 	Row,
 	Text,
 } from 'native-base';
+import FieldSetContext from '../../Contexts/FieldSetContext.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import UiGlobals from '../../UiGlobals.js';
 import IconButton from '../Buttons/IconButton.js';
+import CheckboxButton from '../Buttons/CheckboxButton.js';
 import CaretUp from '../Icons/CaretUp.js';
 import CaretDown from '../Icons/CaretDown.js';
+import _ from 'lodash';
 
 export default function FieldSet(props) {
 	const {
 			title,
 			helpText,
 			children,
+			isCollapsible = true,
 			isCollapsed,
 			hasErrors,
+			showToggleAllCheckbox = false,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
+		forceUpdate = useForceUpdate(),
+		childRefs = useRef([]),
+		isAllCheckedRef = useRef(false),
 		[localIsCollapsed, setLocalIsCollapsed] = useState(isCollapsed),
+		getIsAllChecked = () => {
+			return isAllCheckedRef.current;
+		},
+		setIsAllChecked = (bool) => {
+			isAllCheckedRef.current = bool;
+			forceUpdate();
+		},
 		onToggleCollapse = () => {
 			setLocalIsCollapsed(!localIsCollapsed);
+		},
+		onToggleAllChecked = () => {
+			const bool = !getIsAllChecked();
+			setIsAllChecked(bool);
+
+			_.each(childRefs.current, (child) => {
+				if (child.value !== bool) {
+					child.value = bool;
+					child.setValue(bool);
+				}
+			});
+		},
+		registerChild = (child) => {
+			childRefs.current.push(child);
+			checkChildren();
+		},
+		onChangeValue = (value, childRef) => {
+			const child = _.find(childRefs.current, child => child.childRef === childRef);
+			if (child.value !== value) {
+				child.value = value;
+				checkChildren();
+			}
+		},
+		checkChildren = () => {
+			let isAllChecked = true;
+			_.each(childRefs.current, (child) => {
+				if (!child.value) {
+					isAllChecked = false;
+					return false; // break
+				}
+			});
+
+			if (isAllChecked !== getIsAllChecked()) {
+				setIsAllChecked(isAllChecked);
+			}
 		};
 		
 	return <Box
@@ -50,16 +101,34 @@ export default function FieldSet(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 						>{title}</Text>
-						<IconButton
-							_icon={{
-								as: localIsCollapsed ? <CaretDown /> : <CaretUp />,
-								size: 'sm',
-								color: 'trueGray.300',
-							}}
-							onPress={onToggleCollapse}
-						/>
+						{showToggleAllCheckbox && <Row alignSelf="right">
+														<Text
+															fontSize={styles.FORM_FIELDSET_FONTSIZE}
+															py={1}
+															px={3}
+															flex={1}
+															numberOfLines={1}
+														>Toggle All?</Text>
+														<CheckboxButton
+															isChecked={getIsAllChecked()}
+															onPress={onToggleAllChecked}
+															_icon={{
+																size: 'lg',
+															}}
+														/>
+													</Row>}
+						{isCollapsible && <IconButton
+												_icon={{
+													as: localIsCollapsed ? <CaretDown /> : <CaretUp />,
+													size: 'sm',
+													color: 'trueGray.300',
+												}}
+												onPress={onToggleCollapse}
+											/>}
 					</Row>}
 				{helpText && <Text>{helpText}</Text>}
-				{!localIsCollapsed && children}
+				{!localIsCollapsed && <FieldSetContext.Provider value={{ registerChild, onChangeValue, }}>
+											{children}
+										</FieldSetContext.Provider>}
 			</Box>;
 }

package/src/Components/Form/Form.js

@@ -65,10 +65,12 @@ function Form(props) {
 			validator, // custom validator, mainly for EDITOR_TYPE__PLAIN
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
+			checkIsEditingDisabled = true,
 			onBack,
 			onReset,
 			onViewMode,
-			saveBtnLabel,
+			submitBtnLabel,
+			onSubmit,
 			additionalEditButtons = [],
 			
 			// sizing of outer container
@@ -274,7 +276,7 @@ function Form(props) {
 				editorTypeProps = {};
 
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
-			if (propertyDef?.isEditingDisabled) {
+			if (propertyDef?.isEditingDisabled && checkIsEditingDisabled) {
 				isEditable = false;
 			}
 			if (!type) {
@@ -479,6 +481,13 @@ function Form(props) {
 				const values = record.submitValues;
 				reset(values);
 			}
+		},
+		onSubmitDecorated = async (data, e) => {
+			const result = await onSubmit(data, e);
+			if (result) {
+				const values = record.submitValues;
+				reset(values);
+			}
 		};
 
 	useEffect(() => {
@@ -579,9 +588,11 @@ function Form(props) {
 			break;
 	}
 
-	let isSaveDisabled = false;
+	let isSaveDisabled = false,
+		isSubmitDisabled = false;
 	if (!_.isEmpty(formState.errors)) {
 		isSaveDisabled = true;
+		isSubmitDisabled = true;
 	}
 	if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
 		isSaveDisabled = true;
@@ -655,7 +666,14 @@ function Form(props) {
 														onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 														isDisabled={isSaveDisabled}
 														color="#fff"
-													>{saveBtnLabel || (editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save')}</Button>}
+													>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
+						{onSubmit && <Button
+										key="submitBtn"
+										onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
+										isDisabled={isSubmitDisabled}
+										color="#fff"
+									>{submitBtnLabel || 'Submit'}</Button>}
+			
 						{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && <Button
 														key="closeBtn"
 														onPress={onClose}

package/src/Components/Hoc/withPdfButton.js

@@ -3,8 +3,8 @@ import {
 	Column,
 	Button,
 	Modal,
-	Row,
 } from 'native-base';
+import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import Inflector from 'inflector-js';
 import qs from 'qs';
 import FormPanel from '../Panel/FormPanel.js';
@@ -35,6 +35,10 @@ export default function withPdfButton(WrappedComponent) {
 				// withData
 				Repository,
 				model,
+
+				// withSelection
+				selection,
+
 			} = props,
 			[isModalShown, setIsModalShown] = useState(false),
 			[width, height] = useAdjustedWindowSize(500, 800);
@@ -63,6 +67,8 @@ export default function withPdfButton(WrappedComponent) {
 								type: 'Checkbox',
 							};
 						}),
+						showToggleAllCheckbox: true,
+						isCollapsible: false,
 					});
 				}
 	
@@ -78,6 +84,10 @@ export default function withPdfButton(WrappedComponent) {
 					if (!item.defaults) {
 						item.defaults = {};
 					}
+					if (type === 'FieldSet') {
+						item.showToggleAllCheckbox = true;
+						item.isCollapsible = false;
+					}
 					item.defaults.labelWidth = '90%';
 					if (!_.isEmpty(items)) {
 						const defaults = item.defaults;
@@ -97,6 +107,12 @@ export default function withPdfButton(WrappedComponent) {
 				item.type = 'Checkbox';
 				return item;
 			},
+			buildValidator = (modalItems) => {
+
+				// TODO: Build a real validator that checks all modalItems as booleans
+
+				return yup.object();
+			},
 			getStartingValues = (modalItems) => {
 				const startingValues = {};
 				function walkTree(item) {
@@ -117,9 +133,12 @@ export default function withPdfButton(WrappedComponent) {
 				return startingValues;
 			},
 			getPdf = (data) => {
+				data.id = selection[0].id;
+
 				const
 					url = UiGlobals.baseURL + model + '/viewPdf?',
 					queryString = qs.stringify(data);
+
 				window.open(url + queryString, '_blank');
 			};
 
@@ -142,7 +161,8 @@ export default function withPdfButton(WrappedComponent) {
 		if (isModalShown) {
 			const
 				modalItems = buildModalItems(),
-				startingValues = getStartingValues(modalItems);
+				startingValues = getStartingValues(modalItems),
+				validator = buildValidator(modalItems);
 			modal = <Modal
 						isOpen={true}
 						onClose={() => setIsModalShown(false)}
@@ -156,14 +176,16 @@ export default function withPdfButton(WrappedComponent) {
 								Repository={Repository}
 								items={modalItems}
 								startingValues={startingValues}
+								validator={validator}
+								checkIsEditingDisabled={false}
 								onCancel={(e) => {
 									setIsModalShown(false);
 								}}
-								onSave={(data, e) => {
+								onSubmit={(data, e) => {
 									getPdf(data);
 									setIsModalShown(false);
 								}}
-								saveBtnLabel="View PDF"
+								submitBtnLabel="View PDF"
 							/>
 						</Column>
 					</Modal>;

package/src/Components/Hoc/withValue.js

@@ -1,5 +1,7 @@
-import { useState, useEffect, } from 'react';
+import { useState, useEffect, useRef, useContext, useCallback, } from 'react';
 import natsort from 'natsort';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import FieldSetContext from '../../Contexts/FieldSetContext.js';
 import _ from 'lodash';
 
 // This HOC gives the component value props, primarily for a Form Field.
@@ -27,8 +29,23 @@ export default function withValue(WrappedComponent) {
 				Repository,
 				idIx,
 			} = props,
-			[localValue, setLocalValue] = useState(startingValue || value),
-			setValue = (newValue) => {
+			forceUpdate = useForceUpdate(),
+			childRef = useRef({}),
+			onChangeValueRef = useRef(),
+			localValueRef = useRef(startingValue || value),
+			fieldSetOnChangeValueRef = useRef(),
+			fieldSetContext = useContext(FieldSetContext),
+			fieldSetRegisterChild = fieldSetContext?.registerChild,
+			fieldSetOnChangeValue = fieldSetContext?.onChangeValue,
+			getLocalValue = () => {
+				return localValueRef.current;
+			},
+			setLocalValue = (value) => {
+				localValueRef.current = value;
+				forceUpdate();
+			},
+			setValueRef = useRef((newValue) => {
+				// NOTE: We useRef so that this function stays current after renders
 				if (valueIsAlwaysArray && !_.isArray(newValue)) {
 					newValue = _.isNil(newValue) ? [] : [newValue];
 				}
@@ -62,15 +79,21 @@ export default function withValue(WrappedComponent) {
 					newValue = JSON.stringify(newValue);
 				}
 
-				if (newValue === localValue) {
+				if (newValue === getLocalValue()) {
 					return;
 				}
 
 				setLocalValue(newValue);
 				
-				if (onChangeValue) {
-					onChangeValue(newValue);
+				if (onChangeValueRef.current) {
+					onChangeValueRef.current(newValue, childRef.current);
 				}
+				if (fieldSetOnChangeValueRef.current) {
+					fieldSetOnChangeValueRef.current(newValue, childRef.current);
+				}
+			}),
+			setValue = (args) => {
+				setValueRef.current(args);
 			},
 			onChangeSelection = (selection) => {
 				let value = null,
@@ -96,15 +119,29 @@ export default function withValue(WrappedComponent) {
 				setValue(value);
 			};
 
+		// Ensure these passed functions stay current after render
+		onChangeValueRef.current = onChangeValue;
+		fieldSetOnChangeValueRef.current = fieldSetOnChangeValue;
+
 		useEffect(() => {
-			if (!_.isEqual(value, localValue)) {
+			if (!_.isEqual(value, getLocalValue())) {
 				setLocalValue(value);
 			}
 		}, [value]);
 
+		if (fieldSetRegisterChild) {
+			useEffect(() => {
+				fieldSetRegisterChild({
+					childRef: childRef.current,
+					value,
+					setValue: setValueRef.current,
+				});
+			}, []);
+		}
+
 		
 		// Convert localValue to normal JS primitives for field components
-		let convertedValue = localValue;
+		let convertedValue = getLocalValue();
 		if (_.isString(convertedValue) && valueAsStringifiedJson && !_.isNil(convertedValue)) {
 			convertedValue = JSON.parse(convertedValue);
 		}

package/src/Contexts/FieldSetContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+const FieldSetContext = createContext();
+export default FieldSetContext;