@onehat/ui 0.3.57 → 0.3.59

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

@@ -1,9 +1,8 @@
-import { useState, } from 'react';
+import { useState, useRef, } from 'react';
 import {
 	Column,
 	Modal,
 	Row,
-	Text,
 } from 'native-base';
 import {
 	EDITOR_TYPE__WINDOWED,
@@ -12,50 +11,11 @@ import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
-import IconButton from '../../../Buttons/IconButton.js';
-import Eye from '../../../Icons/Eye.js';
-import Xmark from '../../../Icons/Xmark.js';
+import ValueBox from './ValueBox.js';
 import Combo, { ComboEditor } from '../Combo/Combo.js';
 import _ from 'lodash';
 
 
-function ValueBox(props) {
-	const {
-			text,
-			onView,
-			onDelete,
-		} = props;
-
-	return <Row
-				borderWidth={1}
-				borderColor="trueGray.400"
-				borderRadius="md"
-				mr={1}
-				bg="trueGray.200"
-				alignItems="center"
-			>
-				<IconButton
-					_icon={{
-						as: Eye,
-						color: 'trueGray.600',
-						size: 'sm',
-					}}
-					onPress={onView}
-					h="100%"
-				/>
-				<Text color="trueGray.600">{text}</Text>
-				{onDelete &&
-					<IconButton
-						_icon={{
-							as: Xmark,
-							color: 'trueGray.600',
-							size: 'sm',
-						}}
-						onPress={onDelete}
-						h="100%"
-					/>}
-			</Row>;
-}
 
 function TagComponent(props) {
 
@@ -68,6 +28,9 @@ function TagComponent(props) {
 			// parent Form
 			onChangeValue,
 
+			// withAlert
+			alert,
+
 			// withComponent
 			self,
 
@@ -76,16 +39,29 @@ function TagComponent(props) {
 			setValue,
 			...propsToPass // break connection between Tag and Combo props
 		} = props,
+		ignoreNextComboValueChangeRef = useRef(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
 		[viewerSelection, setViewerSelection] = useState(false),
+		getIgnoreNextComboValueChange = () => {
+			return ignoreNextComboValueChangeRef.current;
+		},
+		setIgnoreNextComboValueChange = (bool) => {
+			ignoreNextComboValueChangeRef.current = bool;
+		},
 		onViewerClose = () => setIsViewerShown(false),
 		onView = async (item, e) => {
 			const
 				id = item.id,
 				repository = propsToPass.Repository;
+			if (!repository.isLoaded) {
+				await repository.load();
+			}
+			if (repository.isLoading) {
+				await repository.waitUntilDoneLoading();
+			}
 			let record = repository.getById(id); // first try to get from entities in memory
 			if (!record && repository.getSingleEntityFromServer) {
-				record = await repository.getSingleEntityFromServer(id); // TODO: Build this
+				record = await repository.getSingleEntityFromServer(id);
 			}
 
 			if (!record) {
@@ -96,27 +72,63 @@ function TagComponent(props) {
 			setViewerSelection([record]);
 			setIsViewerShown(true);
 		},
-		onAdd = (item, e) => {
+		clearComboValue = () => {
+			setIgnoreNextComboValueChange(true); // we're clearing out the value of the underlying Combo, so ignore it when this combo submits the new value change
+			self.children.combo.clear();
+		},
+		onChangeComboValue = (comboValue) => {
+			if (getIgnoreNextComboValueChange()) {
+				setIgnoreNextComboValueChange(false);
+				return;
+			}
+
 			// make sure value doesn't already exist
 			let exists = false;
 			_.each(value, (val) => {
-				if (val.id === item.getId()) {
+				if (val.id === comboValue) {
 					exists = true;
 					return false; // break
 				}
 			});
 			if (exists) {
+				clearComboValue();
 				alert('Value already exists!');
 				return;
 			}
 
+			// The value we get from combo is a simple int
+			// Convert this to id and displayValue from either Repository or data array.
+			const
+				Repository = props.Repository,
+				data = props.data,
+				idIx = props.idIx,
+				displayIx = props.displayIx,
+				id = comboValue;
+			let item,
+				displayValue;
+			if (Repository) {
+				item = Repository.getById(id);
+				if (!item) {
+					throw Error('item not found');
+				}
+				displayValue = item.displayValue;
+			} else {
+				item = _.find(data, (datum) => datum[idIx] === id);
+				if (!item) {
+					throw Error('item not found');
+				}
+				displayValue = item[displayIx];
+			}
+
+
 			// add new value
 			const newValue = _.clone(value); // so we trigger a re-render
 			newValue.push({
-				id: item.getId(),
-				text: item.getDisplayValue(),
+				id,
+				text: displayValue,
 			})
 			setValue(newValue);
+			clearComboValue();
 		},
 		onDelete = (val) => {
 			// Remove from value array
@@ -135,24 +147,44 @@ function TagComponent(props) {
 		}),
 		WhichCombo = isEditor ? ComboEditor : Combo;
 
+	const sizeProps = {};
+	if (!props.flex && !props.w) {
+		sizeProps.flex = 1;
+	} else {
+		if (props.w) {
+			sizeProps.w = props.w;
+		}
+		if (props.flex) {
+			sizeProps.flex = props.flex;
+		}
+	}
+
 	return <>
-				<Column w="100%" flex={1}>
-					{!_.isEmpty(valueBoxes) && 
-						<Row
-							w="100%"
-							borderWidth={1}
-							borderColor="trueGray.300"
-							borderRadius="md"
-							bg="trueGray.100"
-							p={1}
-							mb={1}
-							flexWrap="wrap"
-						>{valueBoxes}</Row>}
-					<WhichCombo
-						Repository={props.Repository}
-						Editor={props.Editor}
-						onRowPress={onAdd}
-					/>
+				<Column
+					{...props}
+					{...sizeProps}
+					px={0}
+					py={0}
+				>
+					<Row
+						w="100%"
+						borderWidth={1}
+						borderColor="trueGray.300"
+						borderRadius="md"
+						bg="trueGray.100"
+						p={1}
+						mb={1}
+						minHeight={10}
+						flexWrap="wrap"
+					>{valueBoxes}</Row>
+					{isEditor && 
+						<WhichCombo
+							Repository={props.Repository}
+							Editor={props.Editor}
+							onChangeValue={onChangeComboValue}
+							parent={self}
+							reference="combo"
+						/>}
 				</Column>
 				{isViewerShown && 
 					<Modal
@@ -162,6 +194,9 @@ function TagComponent(props) {
 						<Editor
 							editorType={EDITOR_TYPE__WINDOWED}
 							{...propsToPass}
+							px={0}
+							py={0}
+							w="100%"
 							parent={self}
 							reference="viewer"
 

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -0,0 +1,45 @@
+import {
+	Row,
+	Text,
+} from 'native-base';
+import IconButton from '../../../Buttons/IconButton.js';
+import Eye from '../../../Icons/Eye.js';
+import Xmark from '../../../Icons/Xmark.js';
+import _ from 'lodash';
+
+export default function ValueBox(props) {
+	const {
+			text,
+			onView,
+			onDelete,
+		} = props;
+	return <Row
+				borderWidth={1}
+				borderColor="trueGray.400"
+				borderRadius="md"
+				mr={1}
+				bg="trueGray.200"
+				alignItems="center"
+			>
+				<IconButton
+					_icon={{
+						as: Eye,
+						color: 'trueGray.600',
+						size: 'sm',
+					}}
+					onPress={onView}
+					h="100%"
+				/>
+				<Text color="trueGray.600" mr={onDelete ? 0 : 2}>{text}</Text>
+				{onDelete &&
+					<IconButton
+						_icon={{
+							as: Xmark,
+							color: 'trueGray.600',
+							size: 'sm',
+						}}
+						onPress={onDelete}
+						h="100%"
+					/>}
+			</Row>;
+}

package/src/Components/Form/FieldSet.js

@@ -29,7 +29,7 @@ export default function FieldSet(props) {
 		forceUpdate = useForceUpdate(),
 		childRefs = useRef([]),
 		isAllCheckedRef = useRef(false),
-		[localIsCollapsed, setLocalIsCollapsed] = useState(isCollapsed),
+		[isLocalCollapsed, setIsLocalCollapsed] = useState(isCollapsed),
 		getIsAllChecked = () => {
 			return isAllCheckedRef.current;
 		},
@@ -38,7 +38,7 @@ export default function FieldSet(props) {
 			forceUpdate();
 		},
 		onToggleCollapse = () => {
-			setLocalIsCollapsed(!localIsCollapsed);
+			setIsLocalCollapsed(!isLocalCollapsed);
 		},
 		onToggleAllChecked = () => {
 			const bool = !getIsAllChecked();
@@ -82,6 +82,7 @@ export default function FieldSet(props) {
 				bg={styles.FORM_FIELDSET_BG}
 				mb={4}
 				pb={1}
+				pr={4}
 				{...propsToPass}
 			>
 				{title &&
@@ -119,7 +120,7 @@ export default function FieldSet(props) {
 													</Row>}
 						{isCollapsible && <IconButton
 												_icon={{
-													as: localIsCollapsed ? <CaretDown /> : <CaretUp />,
+													as: isLocalCollapsed ? <CaretDown /> : <CaretUp />,
 													size: 'sm',
 													color: 'trueGray.300',
 												}}
@@ -127,7 +128,7 @@ export default function FieldSet(props) {
 											/>}
 					</Row>}
 				{helpText && <Text>{helpText}</Text>}
-				{!localIsCollapsed && <FieldSetContext.Provider value={{ registerChild, onChangeValue, }}>
+				{!isLocalCollapsed && <FieldSetContext.Provider value={{ registerChild, onChangeValue, }}>
 											{children}
 										</FieldSetContext.Provider>}
 			</Box>;

package/src/Components/Form/Form.js

@@ -322,13 +322,17 @@ function Form(props) {
 					type = 'Text';
 				}
 			}
+			const isCombo = type?.match && type.match(/Combo/);
 			if (item.hasOwnProperty('autoLoad')) {
 				editorTypeProps.autoLoad = item.autoLoad;
 			} else {
-				if (type?.match && type.match(/Combo$/) && Repository?.isRemote && !Repository?.isLoaded) {
+				if (isCombo && Repository?.isRemote && !Repository?.isLoaded) {
 					editorTypeProps.autoLoad = true;
 				}
 			}
+			if (isCombo) {
+				editorTypeProps.showXButton = true;
+			}
 			const Element = getComponentFromType(type);
 			let children;
 
@@ -439,6 +443,9 @@ function Form(props) {
 												name={name}
 												value={value}
 												onChangeValue={(newValue) => {
+													if (newValue === undefined) {
+														newValue = null; // React Hook Form doesn't respond well when setting value to undefined
+													}
 													onChange(newValue);
 													if (onEditorChange) {
 														onEditorChange(newValue, formSetValue, formGetValues, formState);
@@ -452,21 +459,21 @@ function Form(props) {
 												{...propsToPass}
 												{...editorTypeProps}
 											/>;
-							if (error) {
-								if (editorType !== EDITOR_TYPE__INLINE) {
-									let message = error.message;
+							if (editorType !== EDITOR_TYPE__INLINE) {
+								let message = null;
+								if (error) {
+									message = error.message;
 									if (label) {
 										message = message.replace(error.ref.name, label);
 									}
-									element = <Column pt={1} flex={1}>
-												{element}
-												<Text color="#f00">{message}</Text>
-											</Column>;
-								} else {
-									debugger;
-
-
 								}
+								if (message) {
+									message = <Text color="#f00">{message}</Text>;
+								}
+								element = <Column pt={1} flex={1}>
+											{element}
+											{message}
+										</Column>;
 							}
 
 							if (item.additionalEditButtons) {
@@ -573,17 +580,24 @@ function Form(props) {
 
 	useEffect(() => {
 		if (!Repository) {
-			return () => {};
+			return () => {
+				if (!_.isNil(editorStateRef)) {
+					editorStateRef.current = null; // clean up the editorStateRef on unmount
+				}
+			};
 		}
 
 		Repository.ons(['changeData', 'change'], forceUpdate);
 
 		return () => {
 			Repository.offs(['changeData', 'change'], forceUpdate);
+			if (!_.isNil(editorStateRef)) {
+				editorStateRef.current = null; // clean up the editorStateRef on unmount
+			}
 		};
 	}, [Repository]);
 
-	// if (Repository && (!record || _.isEmpty(record))) {
+	// if (Repository && (!record || _.isEmpty(record) || record.isDestroyed)) {
 	// 	return null;
 	// }
 
@@ -622,7 +636,14 @@ function Form(props) {
 		additionalButtons,
 		isSaveDisabled = false,
 		isSubmitDisabled = false,
-		savingProps = {};
+		savingProps = {},
+
+		showDeleteBtn = false,
+		showResetBtn = false,
+		showCloseBtn = false,
+		showCancelBtn = false,
+		showSaveBtn = false,
+		showSubmitBtn = false;
 
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 		
@@ -678,7 +699,7 @@ function Form(props) {
 			isSaveDisabled = true;
 			isSubmitDisabled = true;
 		}
-		if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
+		if (_.isEmpty(formState.dirtyFields) && !record?.isPhantom) {
 			isSaveDisabled = true;
 		}
 
@@ -688,6 +709,34 @@ function Form(props) {
 			footerProps.alignItems = 'flex-start';
 		}
 
+		if (onDelete && editorMode === EDITOR_MODE__EDIT && isSingle) {
+			showDeleteBtn = true;
+		}
+		if (!isEditorViewOnly) {
+			showResetBtn = true;
+		}
+		if (editorType !== EDITOR_TYPE__SIDE) { // side editor won't show either close or cancel buttons!
+			// determine whether we should show the close or cancel button
+			if (isEditorViewOnly) {
+				showCloseBtn = true;
+			} else {
+				if (formState.isDirty || record?.isPhantom) {
+					if (isSingle && onCancel) {
+						showCancelBtn = true;
+					}
+				} else {
+					if (onClose) {
+						showCloseBtn = true;
+					}
+				}
+			}
+		}
+		if (!isEditorViewOnly && onSave) {
+			showSaveBtn = true;
+		}
+		if (!!onSubmit) {
+			showSubmitBtn = true;
+		}
 	}
 	
 	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
@@ -712,6 +761,7 @@ function Form(props) {
 					
 					<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
 						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
+
 							<Row flex={1} justifyContent="flex-start">
 								<Button
 									key="deleteBtn"
@@ -724,7 +774,7 @@ function Form(props) {
 								>Delete</Button>
 							</Row>}
 
-						{!isEditorViewOnly && 
+						{showResetBtn && 
 							<IconButton
 								key="resetBtn"
 								onPress={() => {
@@ -733,36 +783,45 @@ function Form(props) {
 									}
 									reset();
 								}}
-								icon={<Rotate color="#fff" />}
+								icon={Rotate}
+								_icon={{
+									color: !formState.isDirty ? 'trueGray.400' : '#000',
+								}}
+								isDisabled={!formState.isDirty}
+								mr={2}
 							/>}
-						{!isEditorViewOnly && isSingle && onCancel &&
+
+						{showCancelBtn &&
 							<Button
 								key="cancelBtn"
 								variant="ghost"
 								onPress={onCancel}
 								color="#fff"
 							>Cancel</Button>}
-						{!isEditorViewOnly && onSave && 
+							
+						{showCloseBtn && 
+							<Button
+								key="closeBtn"
+								variant="ghost"
+								onPress={onClose}
+								color="#fff"
+							>Close</Button>}
+
+						{showSaveBtn && 
 							<Button
 								key="saveBtn"
 								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 								isDisabled={isSaveDisabled}
 								color="#fff"
 							>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
-						{onSubmit && 
+						
+						{showSubmitBtn && 
 							<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}
-								color="#fff"
-							>Close</Button>}
 					
 						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
 							return <Button

package/src/Components/Hoc/withAlert.js

@@ -27,6 +27,7 @@ export default function withAlert(WrappedComponent) {
 			[isAlertShown, setIsAlertShown] = useState(false),
 			[title, setTitle] = useState(''),
 			[message, setMessage] = useState(''),
+			[canClose, setCanClose] = useState(true),
 			[includeCancel, setIncludeCancel] = useState(false),
 			[okCallback, setOkCallback] = useState(),
 			[yesCallback, setYesCallback] = useState(),
@@ -35,7 +36,7 @@ export default function withAlert(WrappedComponent) {
 			[mode, setMode] = useState(ALERT_MODE_OK),
 			autoFocusRef = useRef(null),
 			cancelRef = useRef(null),
-			onAlert = (arg1, okCallback, includeCancel = false) => {
+			onAlert = (arg1, okCallback, includeCancel = false, canClose = true) => {
 				clearAll();
 				if (_.isString(arg1)) {
 					setMode(ALERT_MODE_OK);
@@ -43,6 +44,7 @@ export default function withAlert(WrappedComponent) {
 					setMessage(arg1);
 					setOkCallback(() => okCallback);
 					setIncludeCancel(includeCancel);
+					setCanClose(canClose);
 				} else if (_.isPlainObject(arg1)) {
 					// custom
 					const {
@@ -50,12 +52,14 @@ export default function withAlert(WrappedComponent) {
 							message,
 							buttons,
 							includeCancel,
+							canClose,
 						} = arg1;
 					setMode(ALERT_MODE_CUSTOM);
 					setTitle(title);
 					setMessage(message);
 					setCustomButtons(buttons);
 					setIncludeCancel(includeCancel);
+					setCanClose(canClose);
 				}
 				showAlert();
 			},
@@ -161,7 +165,7 @@ export default function withAlert(WrappedComponent) {
 						onClose={() => setIsAlertShown(false)}
 					>
 						<AlertDialog.Content>
-							<AlertDialog.CloseButton />
+							{canClose && <AlertDialog.CloseButton />}
 							<AlertDialog.Header>{title}</AlertDialog.Header>
 							<AlertDialog.Body>
 								<Row>