@onehat/ui 0.3.29 → 0.3.31

package/package.json

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

package/src/Components/Buttons/SquareButton.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+	Icon,
+	Pressable,
+	Text,
+} from 'native-base';
+import UiGlobals from '../../UiGlobals.js';
+
+export default function SquareButton(props) {
+	const {
+			text,
+			isActive = false,
+			disableInteractions = false,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		color = isActive ? '#fff' : '#000';
+	const propsIcon = props._icon || {};
+	let icon = props.icon;
+	if (!icon) {
+		throw Error('icon missing');
+	}
+	if (!text) {
+		throw Error('text missing');
+	}
+	
+	if (React.isValidElement(icon)) {
+		if (!_.isEmpty(propsIcon)) {
+			icon = React.cloneElement(icon, {...propsIcon});
+		}
+	} else {
+		icon = <Icon as={icon} {...propsIcon} />;
+	}
+
+	const
+		hoverProps = {},
+		pressedProps = {};
+	if (!disableInteractions) {
+		hoverProps.bg = styles.ICON_BUTTON_BG_HOVER;
+		pressedProps.bg = styles.ICON_BUTTON_BG_PRESSED;
+	}
+	
+	return <Pressable
+				borderRadius="md"
+				flexDirection="column"
+				justifyContent="center"
+				alignItems="center"
+				p={2}
+				{...propsToPass}
+				bg={isActive ? '#56a6f8' : '#fff'}
+				_hover={hoverProps}
+				_pressed={pressedProps}
+			>
+				<Icon as={icon} color={color} size="xl" />
+				<Text fontSize={20} color={color}>{text}</Text>
+			</Pressable>;
+}
+

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);
@@ -42,27 +46,36 @@ export default function withPdfButton(WrappedComponent) {
 				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)) {
+					const
+						ancillaryItemsClone = _.cloneDeep(ancillaryItems),
+						items = [];
+					_.each(ancillaryItemsClone, (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;
+						}
+						if (!inArray(name, ['Photos', 'Videos', 'Files'])) {
+							return;
+						}
+						name = 'ancillary___' + name;
+						items.push({
+							title: ancillaryItem.title,
+							label: ancillaryItem.title,
+							name,
+							type: 'Checkbox',
+						});
+					});
 					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',
-							};
-						}),
+						items,
+						showToggleAllCheckbox: true,
+						isCollapsible: false,
 					});
 				}
 	
@@ -78,6 +91,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 +114,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 +140,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 +168,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 +183,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/withPresetButtons.js

@@ -35,6 +35,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				contextMenuItems,
 				additionalToolbarButtons,
 				onChangeColumnsConfig,
+				verifyCanEdit,
+				verifyCanDelete,
+				verifyCanDuplicate,
 				...propsToPass
 			} = props,
 			{
@@ -146,6 +149,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
+						if (verifyCanEdit && !verifyCanEdit(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'delete':
 						text = 'Delete';
@@ -157,6 +163,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
+						if (verifyCanDelete && !verifyCanDelete(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'view':
 						text = 'View';
@@ -193,6 +202,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (_.isEmpty(selection) || selection.length > 1) {
 							isDisabled = true;
 						}
+						if (verifyCanDuplicate && !verifyCanDuplicate(selection)) {
+							isDisabled = true;
+						}
 						break;
 					// case 'print':
 					// 	text = 'Print';

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/Components/Viewer/Viewer.js

@@ -109,6 +109,7 @@ function Viewer(props) {
 			
 			let element = <Element
 								value={value}
+								isEditable={false}
 								{...propsToPass}
 							/>;
 			if (label) {

package/src/Components/index.js

@@ -37,6 +37,7 @@ import Panel from './Panel/Panel.js';
 // import Picker from '../Components/Panel/Picker.js';
 import PlusMinusButton from './Buttons/PlusMinusButton.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
+import SquareButton from './Buttons/SquareButton.js';
 import TabPanel from './Panel/TabPanel.js';
 import Tag from './Form/Field/Combo/Tag.js';
 import TagViewer from './Viewer/TagViewer.js';
@@ -88,6 +89,7 @@ const components = {
 	// Picker,
 	PlusMinusButton,
 	RadioGroup,
+	SquareButton,
 	TabPanel,
 	Tag,
 	TagViewer,

package/src/Contexts/FieldSetContext.js

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