@onehat/ui 0.3.67 → 0.3.69

package/package.json

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

package/src/Components/Filter/DateRange.js

@@ -24,6 +24,7 @@ const
 			} = props,
 			[low, setLow] = useState(''),
 			[high, setHigh] = useState(''),
+			[isReady, setIsReady] = useState(false),
 			onChangeLow = (value) => {
 				setLow(value);
 				const newValue = {
@@ -59,9 +60,16 @@ const
 			if (value.high !== high) {
 				setHigh(value.high);
 			}
+			if (!isReady) {
+				setIsReady(true);
+			}
 
 		}, [value]);
 
+		if (!isReady) {
+			return null;
+		}
+		
 		return <Row
 					justifyContent="center"
 					alignItems="center"
@@ -72,7 +80,6 @@ const
 						value={low}
 						onChangeValue={onChangeLow}
 						mode={mode}
-						startingValue={null}
 						// minValue={minValue}
 						// maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
@@ -82,7 +89,6 @@ const
 						value={high}
 						onChangeValue={onChangeHigh}
 						mode={mode}
-						startingValue={null}
 						// minValue={minValue}
 						// maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}

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

@@ -70,6 +70,7 @@ export function ComboComponent(props) {
 		[gridSelection, setGridSelection] = useState(null),
 		[textInputValue, setTextInputValue] = useState(''),
 		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
+		[filteredData, setFilteredData] = useState(data),
 		[width, setWidth] = useState(0),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
@@ -129,6 +130,7 @@ export function ComboComponent(props) {
 				displayValue = [];
 				if (Repository) {
 					if (!Repository.isLoaded) {
+						debugger;
 						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
 					}
 					if (Repository.isLoading) {
@@ -168,9 +170,9 @@ export function ComboComponent(props) {
 			}
 
 			displayValueRef.current = displayValue;
-			resetInputTextValue();
+			resetTextInputValue();
 		},
-		resetInputTextValue = () => {
+		resetTextInputValue = () => {
 			setTextInputValue(getDisplayValue());
 		},
 		onInputKeyPress = (e, inputValue) => {
@@ -180,7 +182,7 @@ export function ComboComponent(props) {
 			switch(e.key) {
 				case 'Escape':
 					setIsSearchMode(false);
-					resetInputTextValue();
+					resetTextInputValue();
 					hideMenu();
 					break;
 				case 'Enter':
@@ -245,8 +247,8 @@ export function ComboComponent(props) {
 			}, 300);
 		},
 		onInputFocus = (e) => {
-			if (inputRef.current.select) {
-				inputRef.current.select();
+			if (inputRef.current?.select) {
+				inputRef.current?.select();
 			}
 		},
 		onInputBlur = (e) => {
@@ -256,7 +258,7 @@ export function ComboComponent(props) {
 			}
 
 			setIsSearchMode(false);
-			resetInputTextValue();
+			resetTextInputValue();
 			hideMenu();
 		},
 		onTriggerPress = (e) => {
@@ -277,7 +279,7 @@ export function ComboComponent(props) {
 			}
 
 			setIsSearchMode(false);
-			resetInputTextValue();
+			resetTextInputValue();
 			hideMenu();
 		},
 		onClearBtn = () => {
@@ -303,7 +305,7 @@ export function ComboComponent(props) {
 				}
 				
 				// clear filter
-				if (Repository.isRemote) {
+				if (Repository.isRemote || Repository.remote) {
 					let searchField = 'q';
 					const searchValue = null;
 
@@ -316,10 +318,12 @@ export function ComboComponent(props) {
 						searchField = displayFieldName + ' LIKE';
 					}
 
-					Repository.clear();
-					await Repository.filter(searchField, searchValue);
-					if (!this.isAutoLoad) {
-						await Repository.reload();
+					if (Repository.hasFilter(searchField)) {
+						Repository.clear();
+						await Repository.filter(searchField, searchValue);
+						if (!this.isAutoLoad) {
+							await Repository.reload();
+						}
 					}
 
 				} else {
@@ -327,7 +331,7 @@ export function ComboComponent(props) {
 				}
 			
 			} else {
-				// throw Error('Not yet implemented');
+				setFilteredData(data);
 			}
 		},
 		searchForMatches = async (value) => {
@@ -339,21 +343,26 @@ export function ComboComponent(props) {
 
 			let found;
 			if (Repository) {
+
+				if (_.isEmpty(value) && Repository.hasFilters) {
+					Repository.clearFilters();
+					return;
+				}
+
 				if (Repository.isLoading) {
 					await Repository.waitUntilDoneLoading();
 				}
 				
 				// Set filter
-				let filter = {};
 				if (Repository.isRemote) {
-					let searchField = 'q';
-					const searchValue = _.isEmpty(value) ? null : value + '%';
-
-					// Check to see if displayField is a real field
 					const
 						schema = Repository.getSchema(),
 						displayFieldName = schema.model.displayProperty,
-						displayFieldDef = schema.getPropertyDefinition(displayFieldName);
+						displayFieldDef = schema.getPropertyDefinition(displayFieldName),
+						searchValue = _.isEmpty(value) ? null : value + '%';
+					let searchField = 'q';
+
+					// Verify displayField is a real field
 					if (!displayFieldDef.isVirtual) {
 						searchField = displayFieldName + ' LIKE';
 					}
@@ -362,39 +371,28 @@ export function ComboComponent(props) {
 					if (!this.isAutoLoad) {
 						await Repository.reload();
 					}
-
 				} else {
-					throw Error('Not yet implemented');
-
-					// Fuzzy search with getBy filter function
-					filter = (entity) => {
+					// local filter
+					Repository.filter((entity) => {
 						const
 							displayValue = entity.displayValue,
 							regex = new RegExp('^' + value);
 						return displayValue.match(regex);
-					};
-					Repository.filter(filter);
+					});
 				}
 
 				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'); // NOTE: When implementing this, also implement clearGridFilters
-
 				// Search through data
-				found = _.find(data, (item) => {
+				const regex = new RegExp('^' + value);
+				found = _.filter(data, (item) => {
 					if (_.isString(item[displayIx]) && _.isString(value)) {
-						return item[displayIx].toLowerCase() === value.toLowerCase();
+						return item[displayIx].match(regex);
 					}
-					return item[displayIx] === value;
+					return item[displayIx] == value; // equality, not identity
 				});
-				// if (found) {
-				// 	const
-				// 		newSelection = [found];
-
-				// 	setTextInputValue(newTextValue);
-				// }
+				setFilteredData(found);
 			}
 		};
 
@@ -588,7 +586,7 @@ export function ComboComponent(props) {
 			'Editor',
 			'model',
 			'Repository',
-			'data',
+			// 'data',
 			'idIx',
 			'displayIx',
 			'value',
@@ -614,6 +612,7 @@ export function ComboComponent(props) {
 					}}
 					autoAdjustPageSizeToHeight={false}
 					{...gridProps}
+					data={filteredData}
 					reference="dropdownGrid"
 					parent={self}
 					h={UiGlobals.mode === UI_MODE_WEB ? styles.FORM_COMBO_MENU_HEIGHT + 'px' : null}
@@ -638,7 +637,7 @@ export function ComboComponent(props) {
 							// when user selected the record matching the current value, kill search mode
 							if (selection[0]?.id === value) {
 								setIsSearchMode(false);
-								resetInputTextValue();
+								resetTextInputValue();
 								if (hideMenuOnSelection) {
 									hideMenu();
 								}
@@ -657,7 +656,7 @@ export function ComboComponent(props) {
 							// when user selected the record matching the current value, kill search mode
 							if (selection[0] && selection[0][idIx] === value) {
 								setIsSearchMode(false);
-								resetInputTextValue();
+								resetTextInputValue();
 								if (hideMenuOnSelection) {
 									hideMenu();
 								}

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

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
+	Box,
 	Icon,
+	Modal,
 	Popover,
 	Pressable,
 	Row,
@@ -13,6 +15,7 @@ import {
 	DATETIME,
 } from '../../../Constants/Date.js';
 import {
+	UI_MODE_REACT_NATIVE,
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
 import UiGlobals from '../../../UiGlobals.js';
@@ -20,24 +23,36 @@ import Formatters from '@onehat/data/src/Util/Formatters.js';
 import Parsers from '@onehat/data/src/Util/Parsers.js';
 import Input from '../Field/Input.js';
 import IconButton from '../../Buttons/IconButton.js';
+import Xmark from '../../Icons/Xmark.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
 import Calendar from '../../Icons/Calendar.js';
 import getComponentFromType from '../../../Functions/getComponentFromType.js';
+import moment from 'moment';
 import _ from 'lodash';
 
 
 export function DateElement(props) {
 	const {
-			placeholderText,
-			value,
-			setValue,
 			format,
 			mode = DATE,
-			tooltip = 'Choose a date.',
-			tooltipPlacement = 'bottom',
+
+			additionalButtons,
+			tooltipRef = null,
+			tooltip = null,
+			menuMinWidth = 150,
+			disableDirectEntry = false,
+			hideMenuOnSelection = true,
+			showXButton = false,
+			_input = {},
 			isDisabled = false,
+			tooltipPlacement = 'bottom',
+			placeholder = 'Choose a date.',
+
+			// withValue
+			value,
+			setValue,
 		} = props,
 		styles = UiGlobals.styles,
 		Datetime = getComponentFromType('Datetime'),
@@ -46,6 +61,7 @@ export function DateElement(props) {
 		pickerRef = useRef(),
 		[isPickerShown, setIsPickerShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
+		[textInputValue, setTextInputValue] = useState(value),
 		[isTranslateX, setIsTranslateX] = useState(false),
 		[isTranslateY, setIsTranslateY] = useState(false),
 		[top, setTop] = useState(0),
@@ -83,7 +99,16 @@ export function DateElement(props) {
 			}
 			setIsPickerShown(false);
 		},
-		onInputKeyPress = (e) => {
+		togglePicker = () => {
+			setIsPickerShown(!isPickerShown);
+		},
+		onInputKeyPress = (e, inputValue) => {
+			if (disableDirectEntry) {
+				return;
+			}
+			if (UiGlobals.mode !== UI_MODE_WEB) {
+				return;
+			}
 			switch(e.key) {
 				case 'Escape':
 				case 'Enter':
@@ -93,13 +118,16 @@ export function DateElement(props) {
 			}
 		},
 		onInputBlur = (e) => {
-			const {
-					relatedTarget
-				} = e;
-			if (!relatedTarget ||
-					(!inputRef.current.contains(relatedTarget) && triggerRef.current !== relatedTarget && (!pickerRef.current || !pickerRef.current.contains(relatedTarget)))) {
-				// hidePicker();
-			}
+			// if (UiGlobals.mode !== UI_MODE_WEB) {
+			// 	return;
+			// }
+			// const {
+			// 		relatedTarget
+			// 	} = e;
+			// if (!relatedTarget ||
+			// 		(!inputRef.current.contains(relatedTarget) && triggerRef.current !== relatedTarget && (!pickerRef.current || !pickerRef.current.contains(relatedTarget)))) {
+			// 	// hidePicker();
+			// }
 		},
 		onInputClick = (e) => {
 			if (!isRendered) {
@@ -107,9 +135,13 @@ export function DateElement(props) {
 			}
 			showPicker();
 		},
-		onInputSetValue = (value) => {
-			if (value === '') {
+		onInputChangeText = (value) => {
+			if (disableDirectEntry) {
+				return;
+			}
+			if (_.isEmpty(value)) {
 				setValue(null);
+				setTextInputValue('');
 				return;
 			}
 			switch(mode) {
@@ -133,7 +165,20 @@ export function DateElement(props) {
 					break;
 				default:
 			}
-			setValue(value);
+			
+			if (value !== 'Invalid date') {
+				setValue(value);
+			}
+
+			setTextInputValue(value);
+			if (!isPickerShown) {
+				showPicker();
+			}
+		},
+		onInputFocus = (e) => {
+			if (inputRef.current?.select) {
+				inputRef.current?.select();
+			}
 		},
 		onTriggerPress = (e) => {
 			if (!isRendered) {
@@ -144,10 +189,10 @@ export function DateElement(props) {
 			} else {
 				showPicker();
 			}
-			inputRef.current.focus();
+			inputRef.current?.focus();
 		},
 		onTriggerBlur = (e) => {
-			if (!isPickerShown) {
+			if (!isPickerShown || UiGlobals.mode !== UI_MODE_WEB) {
 				return;
 			}
 			const {
@@ -172,28 +217,15 @@ export function DateElement(props) {
 					break;
 				default:
 			}
-			setValue(value);
-		};
 
-
-	// place the picker in a convenient spot
-	const
-		translateParts = [],
-		translateProps = {};
-	if (isTranslateX) {
-		translateParts.push('translateX(-100%)');
-	}
-	if (isTranslateY) {
-		translateParts.push('translateY(-100%)');
-	}
-	if (!_.isEmpty(translateParts)) {
-		translateProps.style = {
-			transform: translateParts.join(' '),
+			if (moment && moment?.isValid()) {
+				setValue(value);
+				setTextInputValue(value);
+			}
 		};
-	}
-
+	
 	// Format the display date/time/datetime
-	let title = placeholderText,
+	let title = placeholder,
 		pickerValue = null,
 		height = 300,
 		width = 300;
@@ -226,147 +258,346 @@ export function DateElement(props) {
 		pickerValue = pickerValue.toDate();
 	}
 
-	// Web version
-	return <Tooltip label={tooltip} placement={tooltipPlacement}>
-				<Row flex={1} h="100%" alignItems="center" onLayout={() => setIsRendered(true)}>
-					<IconButton
-						ref={triggerRef}
-						icon={<Icon as={Calendar} color={styles.FORM_DATE_ICON_COLOR} />}
-						onPress={onTriggerPress}
-						onBlur={onTriggerBlur}
-						h={10}
-						w={10}
+	let xButton = null,
+		inputAndTrigger = null,
+		grid = null,
+		dropdownMenu = null,
+		assembledComponents = null;
+
+	if (showXButton && !_.isNil(value)) {
+		xButton = <IconButton
+						_icon={{
+							as: Xmark,
+							color: 'trueGray.600',
+							size: 'sm',
+						}}
 						isDisabled={isDisabled}
-						borderTopLeftRadius={6}
-						borderBottomLeftRadius={6}
-						borderTopRightRadius={0}
-						borderBottomRightRadius={0}
-						bg={styles.FORM_DATE_ICON_BG}
+						onPress={onClearBtn}
+						h="100%"
+						bg={styles.FORM_COMBO_TRIGGER_BG}
 						_hover={{
-							bg: styles.FORM_DATE_ICON_BG_HOVER,
+							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
 						}}
-					/>
-					<Input
-						ref={inputRef}
-						value={title}
-						setValue={onInputSetValue}
-						onKeyPress={onInputKeyPress}
-						onBlur={onInputBlur}
-						onClick={onInputClick}
-						flex={1}
-						h="100%"
-						p={2}
-						borderWidth={1}
-						borderColor="trueGray.300"
-						borderLeftWidth={0}
-						borderTopLeftRadius={0}
-						borderBottomLeftRadius={0}
-						borderTopRightRadius={6}
-						borderBottomRightRadius={6}
-						fontSize={styles.FORM_DATE_READOUT_FONTSIZE}
-						bg={styles.FORM_DATE_INPUT_BG}
-						_focus={{
-							bg: styles.FORM_DATE_INPUT_FOCUS_BG,
+					/>;
+	}
+
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		inputAndTrigger = <>
+							<IconButton
+								ref={triggerRef}
+								_icon={{
+									as: Calendar,
+									color: styles.FORM_DATE_ICON_COLOR,
+									size: 'sm',
+								}}
+								isDisabled={isDisabled}
+								onPress={onTriggerPress}
+								onBlur={onTriggerBlur}
+								h="100%"
+								w={10}
+								borderWidth={1}
+								borderColor="#bbb"
+								borderLeftRadius="md"
+								borderRighttRadius={0}
+								bg={styles.FORM_DATE_ICON_BG}
+								_hover={{
+									bg: styles.FORM_DATE_ICON_BG_HOVER,
+								}}
+							/>
+							{disableDirectEntry ?
+								<Pressable
+									onPress={togglePicker}
+									flex={1}
+									h="100%"
+								>
+									<Text
+										ref={inputRef}
+										flex={1}
+										h="100%"
+										numberOfLines={1}
+										ellipsizeMode="head"
+										m={0}
+										p={2}
+										borderWidth={1}
+										borderColor="trueGray.400"
+										borderLeftWidth={0}
+										borderLeftRadius={0}
+										borderRightRadius="md"
+										fontSize={styles.FORM_DATE_READOUT_FONTSIZE}
+										color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
+										bg={styles.FORM_DATE_INPUT_BG}
+										_focus={{
+											bg: styles.FORM_DATE_INPUT_FOCUS_BG,
+										}}
+									>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
+								</Pressable> :
+								<Input
+									ref={inputRef}
+									value={textInputValue}
+									autoSubmit={true}
+									isDisabled={isDisabled}
+									onChangeValue={onInputChangeText}
+									onKeyPress={onInputKeyPress}
+									onFocus={onInputFocus}
+									onBlur={onInputBlur}
+									onLayout={(e) => {
+										const {
+												height,
+												width,
+											} = e.nativeEvent.layout;
+										setWidth(Math.round(width));
+										setTop(Math.round(height));
+									}}
+									flex={1}
+									h="100%"
+									m={0}
+									autoSubmitDelay={1000}
+									borderTopRightRadius={0}
+									borderBottomRightRadius={0}
+									fontSize={styles.FORM_DATE_READOUT_FONTSIZE}
+									color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
+									bg={styles.FORM_DATE_INPUT_BG}
+									_focus={{
+										bg: styles.FORM_DATE_INPUT_FOCUS_BG,
+									}}
+									placeholder={placeholder}
+									{..._input}
+								/>}
+						</>;
+	}
+
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+		// This input and trigger are for show
+		// The just show the current value and open the menu
+		inputAndTrigger = <>
+							<IconButton
+								ref={triggerRef}
+								_icon={{
+									as: Calendar,
+									color: styles.FORM_DATE_ICON_COLOR,
+									size: 'sm',
+								}}
+								isDisabled={isDisabled}
+								onPress={onTriggerPress}
+								onBlur={onTriggerBlur}
+								h="100%"
+								w={10}
+								borderWidth={1}
+								borderColor="#bbb"
+								borderLeftRadius="md"
+								borderRightWidth={0}
+								borderRighttRadius={0}
+								bg={styles.FORM_DATE_ICON_BG}
+								_hover={{
+									bg: styles.FORM_DATE_ICON_BG_HOVER,
+								}}
+							/>
+							<Pressable
+								onPress={togglePicker}
+								flex={1}
+							>
+								<Text
+									flex={1}
+									h="100%"
+									numberOfLines={1}
+									ellipsizeMode="head"
+									m={0}
+									p={2}
+									borderWidth={1}
+									borderColor="trueGray.400"
+									borderLeftWidth={0}
+									borderLeftRadius={0}
+									borderRightRadius="md"
+									fontSize={styles.FORM_DATE_READOUT_FONTSIZE}
+									color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
+									bg={styles.FORM_DATE_INPUT_BG}
+									_focus={{
+										bg: styles.FORM_DATE_INPUT_FOCUS_BG,
+									}}
+								>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
+							</Pressable>
+						</>;
+	}
+
+	if (isPickerShown) {
+		if (UiGlobals.mode === UI_MODE_WEB) {
+
+			// place the picker in a convenient spot
+			const
+				translateParts = [],
+				translateProps = {};
+			if (isTranslateX) {
+				translateParts.push('translateX(-100%)');
+			}
+			if (isTranslateY) {
+				translateParts.push('translateY(-100%)');
+			}
+			if (!_.isEmpty(translateParts)) {
+				translateProps.style = {
+					transform: translateParts.join(' '),
+				};
+			}
+			dropdownMenu = <Popover
+								isOpen={isPickerShown}
+								onClose={() => {
+									hidePicker();
+								}}
+								trigger={emptyFn}
+								trapFocus={false}
+								placement={'auto'}
+								{...props}
+							>
+								<Popover.Content
+									position="absolute"
+									top={top + 'px'}
+									left={left + 'px'}
+									w={width + 'px'}
+									minWidth={menuMinWidth}
+									overflow="auto"
+									bg="#fff"
+								>
+									<Popover.Body
+										ref={pickerRef}
+										borderWidth={1}
+										borderColor='trueGray.400'
+										borderTopWidth={0}
+										p={0}
+									>
+										<Datetime
+											open={true}
+											input={false}
+											closeOnClickOutside={false}
+											value={pickerValue}
+											dateFormat={mode === DATE || mode === DATETIME ? 'YYYY-MM-DD' : false}
+											timeFormat={mode === TIME || mode === DATETIME ? 'HH:mm:ss' : false}
+											onChange={onPickerChange}
+										/>
+									</Popover.Body>
+								</Popover.Content>
+							</Popover>;
+		}
+		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
+				<Row h={10}>
+					<IconButton
+						_icon={{
+							as: Calendar,
+							color: styles.FORM_DATE_ICON_COLOR,
+							size: 'sm',
 						}}
 						isDisabled={isDisabled}
-						numberOfLines={1}
-						ellipsizeMode="head"
-						onLayout={(e) => {
-							// On web, this is not needed, but on RN it might be, so leave it in for now
-							const {
-									height,
-									top,
-									left,
-								} = e.nativeEvent.layout;
-							setTop(top + height);
-							setLeft(left);
+						onPress={() => hidePicker()}
+						h="100%"
+						w={10}
+						borderWidth={1}
+						borderColor="#bbb"
+						borderLeftRadius="md"
+						borderRightWidth={0}
+						borderRighttRadius={0}
+						bg={styles.FORM_DATE_ICON_BG}
+						_hover={{
+							bg: styles.FORM_DATE_ICON_BG_HOVER,
 						}}
-						w={props.w || null}
 					/>
-					{/* <Pressable
-						flex={1}
-						h="100%"
-						onPress={showPicker}
-					>
+					{disableDirectEntry ?
 						<Text
+							ref={inputRef}
 							flex={1}
 							h="100%"
-							ml={1}
-							p={2}
-							fontSize={styles.FORM_DATE_READOUT_FONTSIZE}
-							borderWidth={1}
-							borderColor="trueGray.300"
-							borderRadius={4}
 							numberOfLines={1}
 							ellipsizeMode="head"
-						>{title}</Text>
-					</Pressable> */}
-					<Popover
-						isOpen={isPickerShown}
-						onClose={() => {
-							hidePicker();
-						}}
-						trigger={emptyFn}
-						trapFocus={false}
-						placement={'auto'}
-						{...props}
-					>
-						<Popover.Content
-							position="absolute"
-							top={top + 'px'}
-							left={left + 'px'}
-							w={width}
-							h={height}
-							{...translateProps}
-						>
-							<Popover.Body
-								ref={pickerRef}
-								p={0}
+							m={0}
+							p={2}
+							borderWidth={1}
+							borderColor="trueGray.400"
+							borderLeftWidth={0}
+							borderLeftRadius={0}
+							borderRightRadius="md"
+							fontSize={styles.FORM_DATE_READOUT_FONTSIZE}
+							color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
+							bg={styles.FORM_DATE_INPUT_BG}
+							_focus={{
+								bg: styles.FORM_DATE_INPUT_FOCUS_BG,
+							}}
+						>{textInputValue}</Text> :
+						<Input
+							ref={inputRef}
+							value={textInputValue}
+							autoSubmit={true}
+							isDisabled={isDisabled}
+							onChangeValue={onInputChangeText}
+							onKeyPress={onInputKeyPress}
+							onFocus={onInputFocus}
+							onBlur={onInputBlur}
+							flex={1}
+							h="100%"
+							m={0}
+							autoSubmitDelay={1000}
+							borderTopRightRadius={0}
+							borderBottomRightRadius={0}
+							fontSize={styles.FORM_DATE_READOUT_FONTSIZE}
+							color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
+							bg={styles.FORM_DATE_INPUT_BG}
+							_focus={{
+								bg: styles.FORM_DATE_INPUT_FOCUS_BG,
+							}}
+							placeholder={placeholder}
+							{..._input}
+						/>}
+				</Row>;
+			dropdownMenu = <Modal
+								isOpen={true}
+								safeAreaTop={true}
+								onClose={() => setIsPickerShown(false)}
+								mt="auto"
+								mb="auto"
+								w="100%"
+								h={400}
+								p={5}
 							>
-								<Datetime
+								{inputAndTriggerClone}
+								{/* <Datetime
 									open={true}
 									input={false}
+									mode={mode === DATE ? 'date' : mode === TIME ? 'time' : mode === DATETIME ? 'datetime' : null}
 									closeOnClickOutside={false}
 									value={pickerValue}
 									dateFormat={mode === DATE || mode === DATETIME ? 'YYYY-MM-DD' : false}
 									timeFormat={mode === TIME || mode === DATETIME ? 'HH:mm:ss' : false}
 									onChange={onPickerChange}
-								/>
-							</Popover.Body>
-						</Popover.Content>
-					</Popover>
-				</Row>
-			</Tooltip>;
+								/> */}
+								<Box bg="#fff">
+									<Datetime
+										selectedStartDate={moment(value).toDate()}
+										onDateChange={onPickerChange}
+										todayBackgroundColor="#eee"
+										selectedDayColor="#f00"
+										selectedDayTextColor="#fff"
+									/>
+								</Box>
+							</Modal>;
+		}
+	}
 
-	// React Native v1
-	// return <Row>
-	// 			<Icon as={Calendar} />
-	// 			<Text>{title}</Text>
-	// 			{isPickerShown && <DateTimePicker
-	// 								value={value}
-	// 								mode={mode}
-	// 								display="default"
-	// 								onChange={(e, value) => {
-	// 									setValue(value);
-	// 								}}
-	// 								{...propsToPass}
-	// 							/>}
-	// 		</Row>;
+	const refProps = {};
+	if (tooltipRef) {
+		refProps.ref = tooltipRef;
+	}
+	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
+							{xButton}
+							{inputAndTrigger}
+							{additionalButtons}
+							{dropdownMenu}
+						</Row>;
 	
-	// React Native v2
-	// return <Box>
-	// 			<Button
-	// 				leftIcon={<Icon as={Calendar} />}
-	// 				onPress={showPicker}
-	// 			>{title}</Button>
-	// 			<DateTimePickerModal
-	// 				isPickerShown={isPickerShown}
-	// 				mode="date"
-	// 				onConfirm={handleConfirm}
-	// 				onCancel={hidePicker}
-	// 				{...propsToPass}
-	// 			/>
-	// 		</Box>;
+	if (tooltip) {
+		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+							{assembledComponents}
+						</Tooltip>;
+	}
+	
+	return assembledComponents;
+
 };
 
 export default withComponent(withValue(DateElement));

package/src/Components/Hoc/withComponent.js

@@ -17,7 +17,7 @@ export default function withComponent(WrappedComponent) {
 				componentMethods,
 				...propsToPass
 			} = props,
-			reference = _.isEmpty(props.reference) ? uuid() : props.reference,
+			reference = !_.isEmpty(props.reference) ? props.reference : uuid(),
 			childrenRef = useRef({}),
 			selfRef = useRef({
 				parent,
@@ -70,6 +70,7 @@ export default function withComponent(WrappedComponent) {
 					// parent={parent}
 					self={selfRef.current}
 					{...propsToPass}
+					reference={reference}
 				/>;
 
 	};

package/src/Components/Hoc/withEditor.js

@@ -265,48 +265,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			onRemoteDuplicate = async () => {
-
-				// Call /duplicate on server
-				const 
-					Model = Repository.getSchema().name,
+				const
 					entity = selection[0],
-					id = entity.id;
-				const result = await Repository._send('POST', Model + '/duplicate', { id });
-				if (!result) {
-					return;
-				}
-				const {
-					root,
-					success,
-					total,
-					message
-				} = Repository._processServerResponse(result);
-
-				if (!success) {
-					throw Error(message);
-				}
-
-				const duplicateId = root.id;
-
-				// TODO: I don't like this.
-				// Currently, we filter the repository by only the new Entity, then select the entity for editing.
-				// There is a 2-second delay between filtering and being able to select, and this is unacceptable.
-				// Why do we filter for just the new entity? Because it's not guaranteed to show up in the grid based on sorting.
-				// Can't we just manually add this record to the repository at the top and then edit it?
-
-				// Filter the grid with only the duplicate's ID, and open it for editing.
-				self.filterById(duplicateId, () => { // because of the way useFilters is made, we have to use a callback, not await a Promise.
-
-					// Select the only node
-					const duplicateEntity = Repository.getById(duplicateId);
-					setTimeout(() => {
-						setSelection([duplicateEntity]);
-
-						onEdit();
-					}, 2000); // we need this delay!
-
-				});
+					duplicateEntity = await Repository.remoteDuplicate(entity);
 
+				setSelection([duplicateEntity]);
+				onEdit();
 			},
 			onEditorSave = async (data, e) => {
 				const

package/src/Components/Messages/Loading.js

@@ -2,14 +2,14 @@ import {
 	Row,
 	Spinner,
 } from 'native-base';
-// import ScreenContainer from '../ScreenContainer.js';
+import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {
-	// if (props.isScreen) {
-	// 	return <ScreenContainer {...props}>
-	// 				<Spinner flex={1} color="primary.500" />
-	// 			</ScreenContainer>;
-	// }
+	if (props.isScreen) {
+		return <ScreenContainer {...props}>
+					<Spinner flex={1} color="primary.500" />
+				</ScreenContainer>;
+	}
 	return <Row justifyContent="center" minHeight={100} {...props}>
 				<Spinner flex={1} color="primary.500" />
 			</Row>;

package/src/Functions/processImage.js

@@ -1,10 +1,10 @@
 import * as ImageManipulator from 'expo-image-manipulator';
 
-export default async function processImage(uri) {
+export default async function processImage(uri, width = 1000) {
 	const file = await ImageManipulator.manipulateAsync(uri,
 		[{
 			resize: {
-				width: 1000
+				width,
 			}
 		}],
 		{

package/src/Functions/registerReactNativeComponents.js

@@ -2,6 +2,7 @@ import UiGlobals from '../UiGlobals.js';
 import Datetime from '../PlatformImports/ReactNative/Datetime';
 import Draggable from '../PlatformImports/ReactNative/Draggable';
 import ScreenContainer from '../Components/Container/ScreenContainer';
+import useWindowSize from '../PlatformImports/ReactNative/useWindowSize.js';
 import _ from 'lodash';
 
 export default function registerReactNativeComponents() {
@@ -9,5 +10,6 @@ export default function registerReactNativeComponents() {
 		Datetime,
 		Draggable,
 		ScreenContainer,
+		useWindowSize,
 	});
 }

package/src/Functions/registerWebComponents.js

@@ -4,6 +4,7 @@ import Attachments from '../PlatformImports/Web/Attachments.js';
 import Datetime from '../PlatformImports/Web/Datetime.js';
 import Draggable from '../PlatformImports/Web/Draggable.js';
 // import File from '../PlatformImports/Web/Attachments.js';
+import useWindowSize from '../PlatformImports/Web/useWindowSize.js';
 import _ from 'lodash';
 
 export default function registerWebComponents() {
@@ -13,5 +14,6 @@ export default function registerWebComponents() {
 		Datetime,
 		Draggable,
 		// File,
+		useWindowSize,
 	});
 }

package/src/Hooks/useAdjustedWindowSize.js

@@ -1,11 +1,13 @@
-import useWindowSize from './useWindowSize.js';
+import getComponentFromType from '../Functions/getComponentFromType.js';
 
 // This hook takes the submitted window size and adjusts it
 // to fit the actual screen size
 
 export default function(width, height, percentage = 1) {
 
-	const windowSize = useWindowSize();
+	const 
+		useWindowSize = getComponentFromType('useWindowSize'),
+		windowSize = useWindowSize();
 	
 	if (width > windowSize.width) {
 		width = windowSize.width * percentage;

package/src/PlatformImports/ReactNative/Datetime.js

@@ -1,4 +1,5 @@
 // import DateTimePickerModal from 'react-native-modal-datetime-picker'; // https://github.com/mmazzarolo/react-native-modal-datetime-picker
-import Datetime from '@react-native-community/datetimepicker'; // https://github.com/react-native-datetimepicker/datetimepicker
+// import Datetime from '@react-native-community/datetimepicker'; // https://github.com/react-native-datetimepicker/datetimepicker
+import CalendarPicker from 'react-native-calendar-picker'; // https://www.npmjs.com/package/react-native-calendar-picker
 
-export default Datetime.default || Datetime;
+export default CalendarPicker.default || CalendarPicker;

package/src/PlatformImports/ReactNative/useWindowSize.js

@@ -0,0 +1,4 @@
+import { useWindowDimensions } from 'react-native';
+
+const useWindowSize = useWindowDimensions;
+export default useWindowSize;

package/src/{Hooks → PlatformImports/Web}/useWindowSize.js

@@ -3,7 +3,6 @@
 import { useLayoutEffect, useState } from 'react';
 import _ from 'lodash';
 
-// For web only!
 export default function useWindowSize() {
 	const [windowSize, setWindowSize] = useState({
 		width: window?.innerWidth || 0,