@onehat/ui 0.3.58 → 0.3.60

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

@@ -71,6 +71,7 @@ function Form(props) {
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
 			checkIsEditingDisabled = true,
+			disableLabels = false,
 			onBack,
 			onReset,
 			onViewMode,
@@ -295,6 +296,9 @@ function Form(props) {
 			if (isHidden) {
 				return null;
 			}
+			if (type === 'DisplayField') {
+				isEditable = false;
+			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!useAdditionalEditButtons) {
 				item = _.omit(item, 'additionalEditButtons');
@@ -322,17 +326,21 @@ 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 && _.isNil(propsToPass.showXButton)) {
+				editorTypeProps.showXButton = true;
+			}
 			const Element = getComponentFromType(type);
 			let children;
-
-			if (inArray(type, ['Column', 'FieldSet'])) {
+			
+			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
 				if (_.isEmpty(items)) {
 					return null;
 				}
@@ -353,6 +361,9 @@ function Form(props) {
 					}
 					propsToPass.pl = 3;
 				}
+				if (type === 'Row') {
+					propsToPass.w = '100%';
+				}
 				const itemDefaults = item.defaults;
 				children = _.map(items, (item, ix) => {
 					return buildFromItem(item, ix, itemDefaults);
@@ -372,7 +383,7 @@ function Form(props) {
 									reference={name}
 									{...propsToPass}
 								/>;
-				if (label) {
+				if (!disableLabels && label) {
 					const labelProps = {};
 					if (defaults?.labelWidth) {
 						labelProps.w = defaults.labelWidth;
@@ -479,19 +490,24 @@ function Form(props) {
 											</Row>;
 							}
 								
-							if (label && editorType !== EDITOR_TYPE__INLINE) {
+							let requiredIndicator = null;
+							if (propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) {
+								requiredIndicator = <Text color="#f00" fontSize="30px" pr={1}>*</Text>;
+							}
+							if (!disableLabels && label && editorType !== EDITOR_TYPE__INLINE) {
 								const labelProps = {};
 								if (defaults?.labelWidth) {
 									labelProps.w = defaults.labelWidth;
 								}
-								let requiredIndicator = null;
-								if (propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) {
-									requiredIndicator = <Text color="#f00" pr={1}>*</Text>;
-								}
 								element = <Row w="100%" py={1}>
 												<Label {...labelProps}>{requiredIndicator}{label}</Label>
 												{element}
 											</Row>;
+							} else if (disableLabels && requiredIndicator) {
+								element = <Row w="100%" py={1}>
+												{requiredIndicator}
+												{element}
+											</Row>;
 							}
 
 							const dirtyIcon = isDirty ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
@@ -736,8 +752,7 @@ function Form(props) {
 	}
 	
 	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
-				{containerWidth && <>
-
+				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
 						<ScrollView
 							horizontal={true}
@@ -779,7 +794,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/Grid/Grid.js

@@ -5,6 +5,7 @@ import {
 	Pressable,
 	Icon,
 	Row,
+	ScrollView,
 	Text,
 } from 'native-base';
 import {
@@ -97,7 +98,7 @@ function GridComponent(props) {
 			additionalToolbarButtons = [],
 			h,
 			flex,
-			bg,
+			bg = '#fff',
 
 			// withComponent
 			self,
@@ -177,8 +178,8 @@ function GridComponent(props) {
 			}
 			const
 				{
-					shiftKey,
-					metaKey,
+					shiftKey = false,
+					metaKey = false,
 				 } = e;
 			let allowToggle = allowToggleSelection;
 			if (metaKey) {
@@ -277,24 +278,31 @@ function GridComponent(props) {
 							if (isHeaderRow || isDragMode) {
 								return
 							}
-							switch (e.detail) {
-								case 1: // single click
-									onRowClick(item, e); // sets selection
-									if (onEditorRowClick) {
-										onEditorRowClick(item, index, e);
-									}
-									break;
-								case 2: // double click
-									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onRowClick(item, e); // so reselect it
-									}
-									if (onEdit) {
-										onEdit();
-									}
-									break;
-								case 3: // triple click
-									break;
-								default:
+							if (CURRENT_MODE === UI_MODE_WEB) {
+								switch (e.detail) {
+									case 1: // single click
+										onRowClick(item, e); // sets selection
+										if (onEditorRowClick) {
+											onEditorRowClick(item, index, e);
+										}
+										break;
+									case 2: // double click
+										if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
+											onRowClick(item, e); // so reselect it
+										}
+										if (onEdit) {
+											onEdit();
+										}
+										break;
+									case 3: // triple click
+										break;
+									default:
+								}
+							} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+								onRowClick(item, e); // sets selection
+								if (onEditorRowClick) {
+									onEditorRowClick(item, index, e);
+								}
 							}
 						}}
 						onLongPress={(e) => {
@@ -877,43 +885,40 @@ function GridComponent(props) {
 						deselectAll();
 					}
 				}}>
-					{!entities?.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
-						<FlatList
-							ref={gridRef}
-							// ListHeaderComponent={listHeaderComponent}
-							// ListFooterComponent={listFooterComponent}
-							scrollEnabled={true}
-							nestedScrollEnabled={true}
-							contentContainerStyle={{
-								overflow: 'auto',
-								borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
-								borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
-								borderStyle: styles.REORDER_BORDER_STYLE,
-								flex: 1,
-							}}
-							refreshing={isLoading}
-							onRefresh={pullToRefresh ? onRefresh : null}
-							progressViewOffset={100}
-							data={rowData}
-							keyExtractor={(item) => {
-								let id;
-								if (item.id) {
-									id = item.id;
-								} else if (fields) {
-									id = item[idIx];
-								}
-								return String(id);
-							}}
-							// getItemLayout={(data, index) => ( // an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. getItemLayout is efficient if you have fixed size items
-							// 	{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-							// )}
-							// numColumns={1}
-							initialNumToRender={initialNumToRender}
-							initialScrollIndex={0}
-							renderItem={renderRow}
-							bg="trueGray.100"
-							{...flatListProps}
-						/>}
+					{!entities?.length ? 
+						<NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
+						<ScrollView flex={1} w="100%">
+							<FlatList
+								ref={gridRef}
+								scrollEnabled={false}
+								nestedScrollEnabled={true}
+								contentContainerStyle={{
+									overflow: 'auto',
+									borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
+									borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
+									borderStyle: styles.REORDER_BORDER_STYLE,
+									flex: 1,
+								}}
+								refreshing={isLoading}
+								onRefresh={pullToRefresh ? onRefresh : null}
+								progressViewOffset={100}
+								data={rowData}
+								keyExtractor={(item) => {
+									let id;
+									if (item.id) {
+										id = item.id;
+									} else if (fields) {
+										id = item[idIx];
+									}
+									return String(id);
+								}}
+								initialNumToRender={initialNumToRender}
+								initialScrollIndex={0}
+								renderItem={renderRow}
+								bg="trueGray.100"
+								{...flatListProps}
+							/>
+						</ScrollView>}
 				</Column>
 
 				{listFooterComponent}

package/src/Components/Grid/GridRow.js

@@ -146,11 +146,13 @@ export default function GridRow(props) {
 						if (_.isFunction(value)) {
 							return value(key);
 						}
-						
+						const elementProps = {};
+						if (UiGlobals.mode === UI_MODE_WEB) {
+							elementProps.textOverflow = 'ellipsis';
+						}
 						return <Text
 									key={key}
 									overflow="hidden"
-									textOverflow="ellipsis"
 									alignSelf="center"
 									style={{
 										userSelect: 'none',
@@ -160,6 +162,7 @@ export default function GridRow(props) {
 									py={styles.GRID_CELL_PY}
 									numberOfLines={1}
 									ellipsizeMode="head"
+									{...elementProps}
 									{...propsToPass}
 								>{value}</Text>;
 					});

package/src/Components/Grid/NoRecordsFound.js

@@ -26,6 +26,8 @@ export default function NoRecordsFound(props) {
 								style: {
 									fontSize: 16,
 								},
+								color: 'trueGray.400',
+								mr: 1,
 							}}
 							onPress={onRefresh}
 							variant="ghost"

package/src/Components/Hoc/withAlert.js

@@ -10,6 +10,7 @@ import {
 } from 'native-base';
 import {
 	ALERT_MODE_OK,
+	ALERT_MODE_YES,
 	ALERT_MODE_YES_NO,
 	ALERT_MODE_CUSTOM,
 } from '../../Constants/Alert.js';
@@ -27,6 +28,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 +37,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 +45,7 @@ export default function withAlert(WrappedComponent) {
 					setMessage(arg1);
 					setOkCallback(() => okCallback);
 					setIncludeCancel(includeCancel);
+					setCanClose(canClose);
 				} else if (_.isPlainObject(arg1)) {
 					// custom
 					const {
@@ -50,12 +53,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();
 			},
@@ -66,6 +71,7 @@ export default function withAlert(WrappedComponent) {
 				setMessage(message);
 				setIncludeCancel(includeCancel);
 				setYesCallback(() => callback);
+				setNoCallback(null);
 				showAlert();
 			},
 			onCancel = () => {
@@ -123,6 +129,15 @@ export default function withAlert(WrappedComponent) {
 								color="#fff"
 							>OK</Button>);
 				break;
+			case ALERT_MODE_YES:
+				buttons.push(<Button
+								key="yesBtn"
+								ref={autoFocusRef}
+								onPress={onYes}
+								color="#fff"
+								colorScheme="danger"
+							>Yes</Button>);
+				break;
 			case ALERT_MODE_YES_NO:
 				buttons.push(<Button
 								key="noBtn"
@@ -161,7 +176,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/Constants/Alert.js

@@ -1,3 +1,4 @@
 export const ALERT_MODE_OK = 'ALERT_MODE_OK';
+export const ALERT_MODE_YES = 'ALERT_MODE_YES';
 export const ALERT_MODE_YES_NO = 'ALERT_MODE_YES_NO';
 export const ALERT_MODE_CUSTOM = 'ALERT_MODE_CUSTOM';

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;
+}