@onehat/ui 0.3.58 → 0.3.59

package/package.json

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

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

@@ -20,6 +20,7 @@ import emptyFn from '../../../../Functions/emptyFn.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
+import Xmark from '../../../Icons/Xmark.js';
 import _ from 'lodash';
 
 export function ComboComponent(props) {
@@ -31,6 +32,7 @@ export function ComboComponent(props) {
 			menuMinWidth = 150,
 			disableDirectEntry = false,
 			hideMenuOnSelection = true,
+			showXButton = false,
 			_input = {},
 			isEditor = false,
 			isDisabled = false,
@@ -231,6 +233,10 @@ export function ComboComponent(props) {
 			resetInputTextValue();
 			hideMenu();
 		},
+		onClearBtn = () => {
+			setTextInputValue('');
+			setValue(null);
+		}
 		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
@@ -276,7 +282,7 @@ export function ComboComponent(props) {
 				setSavedSearch(null);
 			
 			} else {
-				throw Error('Not yet implemented');
+				// throw Error('Not yet implemented');
 			}
 		},
 		searchForMatches = async (value) => {
@@ -329,7 +335,8 @@ export function ComboComponent(props) {
 				setNewEntityDisplayValue(value); // capture the search query so we can tell Grid what to use for a new entity's displayValue
 			
 			} else {
-				throw Error('Not yet implemented');
+
+				throw Error('Not yet implemented'); // NOTE: When implementing this, also implement clearGridFilters
 
 				// Search through data
 				found = _.find(data, (item) => {
@@ -390,7 +397,7 @@ export function ComboComponent(props) {
 					}
 					displayValue = entity?.displayValue || '';
 				} else {
-					const item = _.find(data, (datum) => datum[idIx] === id);
+					const item = _.find(data, (datum) => datum[idIx] === value);
 					displayValue = (item && item[displayIx]) || '';
 				}
 			}
@@ -424,6 +431,10 @@ export function ComboComponent(props) {
 		return null;
 	}
 
+	if (self) {
+		self.clear = onClearBtn;
+	}
+
 	const refProps = {};
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
@@ -446,6 +457,21 @@ export function ComboComponent(props) {
 	const WhichGrid = isEditor ? WindowedGridEditor : Grid;
 	
 	let comboComponent = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
+								{showXButton && !_.isNil(value) && 
+									<IconButton
+										_icon={{
+											as: Xmark,
+											color: 'trueGray.600',
+											size: 'sm',
+										}}
+										isDisabled={isDisabled}
+										onPress={onClearBtn}
+										h="100%"
+										bg={styles.FORM_COMBO_TRIGGER_BG}
+										_hover={{
+											bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+										}}
+									/>}
 								{disableDirectEntry ?
 									<Pressable
 										onPress={toggleMenu}
@@ -590,29 +616,53 @@ export function ComboComponent(props) {
 												newEntityDisplayValue={newEntityDisplayValue}
 												disablePresetButtons={!isEditor}
 												onChangeSelection={(selection) => {
-													if (selection[0]?.isPhantom) {
+
+													if (Repository && selection[0]?.isPhantom) {
 														// do nothing
 														return;
 													}
 
 													setGridSelection(selection);
 
-													// When we first open the menu, we try to match the selection to the value, ignore this
-													if (selection[0]?.displayValue === getDisplayValue()) {
-														return;
-													}
+													if (Repository) {
 
-													// when user selected the record matching the current value, kill search mode
-													if (selection[0]?.id === value) {
-														setIsSearchMode(false);
-														resetInputTextValue();
-														if (hideMenuOnSelection) {
-															hideMenu();
+														// When we first open the menu, we try to match the selection to the value, ignore this
+														if (selection[0]?.displayValue === getDisplayValue()) {
+															return;
 														}
-														return;
-													}
 
-													setValue(selection[0]?.id);
+														// when user selected the record matching the current value, kill search mode
+														if (selection[0]?.id === value) {
+															setIsSearchMode(false);
+															resetInputTextValue();
+															if (hideMenuOnSelection) {
+																hideMenu();
+															}
+															return;
+														}
+
+														setValue(selection[0] ? selection[0].id : null);
+
+													} else {
+
+														// When we first open the menu, we try to match the selection to the value, ignore this
+														if (selection[0] && selection[0][displayIx] === getDisplayValue()) {
+															return;
+														}
+
+														// when user selected the record matching the current value, kill search mode
+														if (selection[0] && selection[0][idIx] === value) {
+															setIsSearchMode(false);
+															resetInputTextValue();
+															if (hideMenuOnSelection) {
+																hideMenu();
+															}
+															return;
+														}
+
+														setValue(selection[0] ? selection[0][idIx] : null);
+
+													}
 
 													if (_.isEmpty(selection)) {
 														return;

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,49 +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" mr={onDelete ? 0 : 2}>{text}</Text>
-				{onDelete &&
-					<IconButton
-						_icon={{
-							as: Xmark,
-							color: 'trueGray.600',
-							size: 'sm',
-						}}
-						onPress={onDelete}
-						h="100%"
-					/>}
-			</Row>;
-}
 
 function TagComponent(props) {
 
@@ -67,6 +28,9 @@ function TagComponent(props) {
 			// parent Form
 			onChangeValue,
 
+			// withAlert
+			alert,
+
 			// withComponent
 			self,
 
@@ -75,8 +39,15 @@ 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
@@ -101,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
@@ -174,7 +181,9 @@ function TagComponent(props) {
 						<WhichCombo
 							Repository={props.Repository}
 							Editor={props.Editor}
-							onRowPress={onAdd}
+							onChangeValue={onChangeComboValue}
+							parent={self}
+							reference="combo"
 						/>}
 				</Column>
 				{isViewerShown && 

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/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;
 
@@ -779,7 +783,12 @@ function Form(props) {
 									}
 									reset();
 								}}
-								icon={<Rotate color="#fff" />}
+								icon={Rotate}
+								_icon={{
+									color: !formState.isDirty ? 'trueGray.400' : '#000',
+								}}
+								isDisabled={!formState.isDirty}
+								mr={2}
 							/>}
 
 						{showCancelBtn &&

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>

package/src/Components/Hoc/withFilters.js

@@ -536,7 +536,9 @@ export default function withFilters(WrappedComponent) {
 										},
 									]}
 									onCancel={(e) => {
-										// Just close the modal
+										setIsFilterSelectorShown(false);
+									}}
+									onClose={(e) => {
 										setIsFilterSelectorShown(false);
 									}}
 									onSave={(data, e) => {

package/src/Components/Hoc/withValue.js

@@ -28,6 +28,9 @@ export default function withValue(WrappedComponent) {
 				isValueAlwaysArray = false,
 				isValueAsStringifiedJson = false,
 
+				// withComponent
+				self,
+
 				// withData
 				Repository,
 				idIx,
@@ -120,6 +123,11 @@ export default function withValue(WrappedComponent) {
 			}, []);
 		}
 
+		if (self) {
+			self.setValue = setValue;
+			self.value = getLocalValue();
+		}
+
 		
 		// Convert localValue to normal JS primitives for field components
 		let convertedValue = getLocalValue();

package/src/Components/Icons/Images.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+	return (
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props}>
+		<Path d="M512 32H160c-35.35 0-64 28.65-64 64v224c0 35.35 28.65 64 64 64h352c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm16 288c0 8.822-7.178 16-16 16h-16L386.7 175.1c-3-4.4-8-7.1-13.4-7.1a15.978 15.978 0 00-13.31 7.125l-62.74 94.11L274.9 238.6c-3-4.2-7.8-6.6-12.9-6.6a16.007 16.007 0 00-12.93 6.574L176 336h-16c-8.822 0-16-7.178-16-16V96c0-8.822 7.178-16 16-16h352c8.822 0 16 7.178 16 16v224zM224 112c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.68 0 32-14.33 32-32s-14.3-32-32-32zm232 368H120C53.83 480 0 426.2 0 360V120c0-13.2 10.75-24 24-24s24 10.8 24 24v240c0 39.7 32.3 72 72 72h336c13.25 0 24 10.75 24 24s-10.7 24-24 24z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Functions/delay.js

@@ -0,0 +1,3 @@
+export default function delay(ms = 1000) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}

package/src/Functions/isVideo.js

@@ -0,0 +1,18 @@
+export default function isVideo(mimetype) {
+	switch(mimetype) {
+		case 'video/quicktime':
+		case 'video/mp4':
+		case 'video/mpeg':
+		case 'video/ogg':
+		case 'video/webm':
+		case 'video/mp2t':
+		case 'video/3gpp':
+		case 'video/3gpp2':
+		case 'video/x-msvideo':
+		case 'video/x-ms-wmv':
+		case 'video/x-flv':
+		case 'application/x-mpegURL':
+			return true;
+	}
+	return false;
+}