@onehat/ui 0.3.58 → 0.3.60

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Box,
+	Modal,
 	Popover,
 	Pressable,
 	Row,
@@ -8,6 +8,7 @@ import {
 	Tooltip,
 } from 'native-base';
 import {
+	UI_MODE_REACT_NATIVE,
 	UI_MODE_WEB,
 } from '../../../../Constants/UiModes.js';
 import UiGlobals from '../../../../UiGlobals.js';
@@ -20,6 +21,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 +33,7 @@ export function ComboComponent(props) {
 			menuMinWidth = 150,
 			disableDirectEntry = false,
 			hideMenuOnSelection = true,
+			showXButton = false,
 			_input = {},
 			isEditor = false,
 			isDisabled = false,
@@ -58,7 +61,6 @@ export function ComboComponent(props) {
 		triggerRef = useRef(),
 		menuRef = useRef(),
 		displayValueRef = useRef(null),
-		savedSearch = useRef(null),
 		typingTimeout = useRef(),
 		[isMenuShown, setIsMenuShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
@@ -115,12 +117,6 @@ export function ComboComponent(props) {
 		toggleMenu = () => {
 			setIsMenuShown(!isMenuShown);
 		},
-		getSavedSearch = () => {
-			return savedSearch.current;
-		},
-		setSavedSearch = (val) => {
-			savedSearch.current = val;
-		},
 		resetInputTextValue = () => {
 			setTextInputValue(getDisplayValue());
 		},
@@ -184,9 +180,7 @@ export function ComboComponent(props) {
 			}
 
 			if (_.isEmpty(value)) {
-				// text input is cleared
-				hideMenu();
-				return;
+				setValue(null);
 			}
 
 			setTextInputValue(value);
@@ -198,7 +192,9 @@ export function ComboComponent(props) {
 			}, 300);
 		},
 		onInputFocus = (e) => {
-			inputRef.current.select();
+			if (inputRef.current.select) {
+				inputRef.current.select();
+			}
 		},
 		onInputBlur = (e) => {
 			if (isEventStillInComponent(e)) {
@@ -231,6 +227,10 @@ export function ComboComponent(props) {
 			resetInputTextValue();
 			hideMenu();
 		},
+		onClearBtn = () => {
+			setTextInputValue('');
+			setValue(null);
+		}
 		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
@@ -272,11 +272,9 @@ export function ComboComponent(props) {
 				} else {
 					throw Error('Not yet implemented');
 				}
-
-				setSavedSearch(null);
 			
 			} else {
-				throw Error('Not yet implemented');
+				// throw Error('Not yet implemented');
 			}
 		},
 		searchForMatches = async (value) => {
@@ -325,11 +323,11 @@ export function ComboComponent(props) {
 					Repository.filter(filter);
 				}
 
-				setSavedSearch(value);
 				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 +388,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,90 +422,51 @@ export function ComboComponent(props) {
 		return null;
 	}
 
-	const refProps = {};
-	if (tooltipRef) {
-		refProps.ref = tooltipRef;
+	if (self) {
+		self.clear = onClearBtn;
 	}
 
-	const gridProps = _.pick(props, [
-		'Editor',
-		'model',
-		'Repository',
-		'data',
-		'idIx',
-		'displayIx',
-		'value',
-		'disableView',
-		'disableCopy',
-		'disableDuplicate',
-		'disablePrint',
-	]);
-
-	const WhichGrid = isEditor ? WindowedGridEditor : Grid;
+	let xButton = null,
+		inputAndTrigger = null,
+		grid = null,
+		dropdownMenu = null,
+		assembledComponents = null;
 	
-	let comboComponent = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
-								{disableDirectEntry ?
-									<Pressable
-										onPress={toggleMenu}
-										flex={1}
-										h="100%"
-									>
-										<Text
-											ref={inputRef}
-											onLayout={(e) => {
-												// On web, this is not needed, but on RN it might be, so leave it in for now
-												const {
-														height,
-														width,
-														top,
-														left,
-													} = e.nativeEvent.layout;
-												setWidth(width);
-												setTop(top + height);
-												setLeft(left);
-											}}
-											flex={1}
-											h="100%"
-											numberOfLines={1}
-											ellipsizeMode="head"
-											m={0}
-											p={2}
-											borderWidth={1}
-											borderColor="trueGray.400"
-											borderTopRightRadius={0}
-											borderBottomRightRadius={0}
-											fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
-											bg={styles.FORM_COMBO_INPUT_BG}
-											_focus={{
-												bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
-											}}
-										>{textInputValue}</Text>
-									</Pressable> :
-									<Input
+	if (showXButton && !_.isNil(value)) {
+		xButton = <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,
+						}}
+					/>;
+	}
+
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		inputAndTrigger = <>
+							{disableDirectEntry ?
+								<Pressable
+									onPress={toggleMenu}
+									flex={1}
+									h="100%"
+								>
+									<Text
 										ref={inputRef}
-										value={textInputValue}
-										autoSubmit={true}
-										isDisabled={isDisabled}
-										onChangeValue={onInputChangeText}
-										onKeyPress={onInputKeyPress}
-										onFocus={onInputFocus}
-										onBlur={onInputBlur}
-										onLayout={(e) => {
-											// On web, this is not needed, but on RN it might be, so leave it in for now
-											const {
-													height,
-													width,
-													top,
-													left,
-												} = e.nativeEvent.layout;
-											setWidth(width);
-											setTop(top + height);
-											setLeft(left);
-										}}
 										flex={1}
 										h="100%"
+										numberOfLines={1}
+										ellipsizeMode="head"
 										m={0}
-										autoSubmitDelay={0}
+										p={2}
+										borderWidth={1}
+										borderColor="trueGray.400"
 										borderTopRightRadius={0}
 										borderBottomRightRadius={0}
 										fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
@@ -515,147 +474,360 @@ export function ComboComponent(props) {
 										_focus={{
 											bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 										}}
-										{..._input}
-									/>}
-								<IconButton
-									ref={triggerRef}
-									_icon={{
-										as: CaretDown,
-										color: 'primary.800',
-										size: 'sm',
-									}}
+									>{textInputValue}</Text>
+								</Pressable> :
+								<Input
+									ref={inputRef}
+									value={textInputValue}
+									autoSubmit={true}
 									isDisabled={isDisabled}
-									onPress={onTriggerPress}
-									onBlur={onTriggerBlur}
+									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%"
-									borderWidth={1}
-									borderColor="#bbb"
-									borderLeftWidth={0}
-									borderLeftRadius={0}
-									borderRightRadius="md"
-									bg={styles.FORM_COMBO_TRIGGER_BG}
-									_hover={{
-										bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+									m={0}
+									autoSubmitDelay={0}
+									borderTopRightRadius={0}
+									borderBottomRightRadius={0}
+									fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+									bg={styles.FORM_COMBO_INPUT_BG}
+									_focus={{
+										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 									}}
-								/>
-								{additionalButtons}
-								<Popover
-									isOpen={isMenuShown}
-									onClose={() => {
-										hideMenu();
+									{..._input}
+								/>}
+							<IconButton
+								ref={triggerRef}
+								_icon={{
+									as: CaretDown,
+									color: 'primary.800',
+									size: 'sm',
+								}}
+								isDisabled={isDisabled}
+								onPress={onTriggerPress}
+								onBlur={onTriggerBlur}
+								h="100%"
+								borderWidth={1}
+								borderColor="#bbb"
+								borderLeftWidth={0}
+								borderLeftRadius={0}
+								borderRightRadius="md"
+								bg={styles.FORM_COMBO_TRIGGER_BG}
+								_hover={{
+									bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+								}}
+							/>
+						</>;
+	}
+
+	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 = <>
+							<Pressable
+								onPress={showMenu}
+								flex={1}
+							>
+								<Text
+									flex={1}
+									h="100%"
+									numberOfLines={1}
+									ellipsizeMode="head"
+									m={0}
+									p={2}
+									borderWidth={1}
+									borderColor="trueGray.400"
+									borderTopRightRadius={0}
+									borderBottomRightRadius={0}
+									fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+									bg={styles.FORM_COMBO_INPUT_BG}
+									_focus={{
+										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 									}}
-									trigger={emptyFn}
-									trapFocus={false}
-									placement={'auto'}
-									// _fade={{
-									// 	entryDuration: 0, // Doesn't work, as Popover doesn't have animation controls like Modal does. See node_modules/native-base/src/components/composites/Popover/Popover.tsx line 99 (vs .../composites/Modal/Modal.tsx line 113 which has ..._fade) I added a feature request to NativeBase https://github.com/GeekyAnts/NativeBase/issues/5651
-									// }}
-									{...props}
+								>{textInputValue}</Text>
+							</Pressable>
+							<IconButton
+								ref={triggerRef}
+								_icon={{
+									as: CaretDown,
+									color: 'primary.800',
+									size: 'sm',
+								}}
+								isDisabled={isDisabled}
+								onPress={onTriggerPress}
+								h="100%"
+								borderWidth={1}
+								borderColor="#bbb"
+								borderLeftWidth={0}
+								borderLeftRadius={0}
+								borderRightRadius="md"
+								bg={styles.FORM_COMBO_TRIGGER_BG}
+								_hover={{
+									bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+								}}
+							/>
+						</>;
+	}
+
+	if (isMenuShown) {
+		const gridProps = _.pick(props, [
+			'Editor',
+			'model',
+			'Repository',
+			'data',
+			'idIx',
+			'displayIx',
+			'value',
+			'disableView',
+			'disableCopy',
+			'disableDuplicate',
+			'disablePrint',
+		]);
+		const WhichGrid = isEditor ? WindowedGridEditor : Grid;
+		grid = <WhichGrid
+					showHeaders={false}
+					showHovers={true}
+					shadow={1}
+					getRowProps={() => {
+						return {
+							borderBottomWidth: 1,
+							borderBottomColor: 'trueGray.300',
+							py: 1,
+							pl: 4,
+							pr: 2,
+							w: '100%',
+						};
+					}}
+					autoAdjustPageSizeToHeight={false}
+					{...gridProps}
+					reference="dropdownGrid"
+					parent={self}
+					h={UiGlobals.mode === UI_MODE_WEB ? styles.FORM_COMBO_MENU_HEIGHT + 'px' : null}
+					newEntityDisplayValue={newEntityDisplayValue}
+					disablePresetButtons={!isEditor}
+					onChangeSelection={(selection) => {
+
+						if (Repository && selection[0]?.isPhantom) {
+							// do nothing
+							return;
+						}
+
+						setGridSelection(selection);
+
+						if (Repository) {
+
+							// When we first open the menu, we try to match the selection to the value, ignore this
+							if (selection[0]?.displayValue === getDisplayValue()) {
+								return;
+							}
+
+							// 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;
+						}
+
+						if (hideMenuOnSelection && !isEditor) {
+							hideMenu();
+						}
+
+					}}
+					onSave={(selection) => {
+						const entity = selection[0];
+						if (entity?.id !== value) {
+							// Either a phantom record was just solidified into a real record, or a new (non-phantom) record was added.
+							// Select it and set the value of the combo.
+							setGridSelection([entity]);
+							const id = entity.id;
+							setValue(id);
+						}
+					}}
+					onRowPress={(item, e) => {
+						if (onRowPress) {
+							onRowPress(item, e);
+							return;
+						}
+						const id = Repository ? item.id : item[idIx];
+						if (id === value) {
+							hideMenu();
+							onInputFocus();
+						}
+					}}
+				/>;
+		if (UiGlobals.mode === UI_MODE_WEB) {
+			dropdownMenu = <Popover
+								isOpen={isMenuShown}
+								onClose={() => {
+									hideMenu();
+								}}
+								trigger={emptyFn}
+								trapFocus={false}
+								placement={'auto'}
+								// _fade={{
+								// 	entryDuration: 0, // Doesn't work, as Popover doesn't have animation controls like Modal does. See node_modules/native-base/src/components/composites/Popover/Popover.tsx line 99 (vs .../composites/Modal/Modal.tsx line 113 which has ..._fade) I added a feature request to NativeBase https://github.com/GeekyAnts/NativeBase/issues/5651
+								// }}
+								{...props}
+							>
+								<Popover.Content
+									position="absolute"
+									top={top + 'px'}
+									left={left + 'px'}
+									w={width + 'px'}
+									minWidth={menuMinWidth}
+									overflow="auto"
+									bg="#fff"
+
+									h={200}
 								>
-									<Popover.Content
-										position="absolute"
-										top={top + 'px'}
-										left={left + 'px'}
-										w={width + 'px'}
-										minWidth={menuMinWidth}
-										overflow="auto"
-										bg="#fff"
+									<Popover.Body
+										ref={menuRef}
+										borderWidth={1}
+										borderColor='trueGray.400'
+										borderTopWidth={0}
+										p={0}
 									>
-										<Popover.Body
-											ref={menuRef}
-											borderWidth={1}
-											borderColor='trueGray.400'
-											borderTopWidth={0}
-											p={0}
-										>
-											<WhichGrid
-												showHeaders={false}
-												showHovers={true}
-												shadow={1}
-												getRowProps={() => {
-													return {
-														borderBottomWidth: 1,
-														borderBottomColor: 'trueGray.300',
-														py: 1,
-														pl: 4,
-														pr: 2,
-														w: '100%',
-													};
-												}}
-												autoAdjustPageSizeToHeight={false}
-												{...gridProps}
-												reference="dropdownGrid"
-												parent={self}
-												h={styles.FORM_COMBO_MENU_HEIGHT + 'px'}
-												newEntityDisplayValue={newEntityDisplayValue}
-												disablePresetButtons={!isEditor}
-												onChangeSelection={(selection) => {
-													if (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;
-													}
-
-													// 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]?.id);
-
-													if (_.isEmpty(selection)) {
-														return;
-													}
-
-													if (hideMenuOnSelection && !isEditor) {
-														hideMenu();
-													}
-
-												}}
-												onSave={(selection) => {
-													const entity = selection[0];
-													if (entity?.id !== value) {
-														// Either a phantom record was just solidified into a real record, or a new (non-phantom) record was added.
-														// Select it and set the value of the combo.
-														setGridSelection([entity]);
-														const id = entity.id;
-														setValue(id);
-													}
-												}}
-												onRowPress={(item, e) => {
-													if (onRowPress) {
-														onRowPress(item, e);
-														return;
-													}
-													const id = Repository ? item.id : item[idIx];
-													if (id === value) {
-														hideMenu();
-														onInputFocus();
-													}
-												}}
-											/>
-										</Popover.Body>
-									</Popover.Content>
-								</Popover>
-							</Row>;
+										{grid}
+									</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}>
+					{disableDirectEntry ?
+						<Text
+							ref={inputRef}
+							flex={1}
+							h="100%"
+							numberOfLines={1}
+							ellipsizeMode="head"
+							m={0}
+							p={2}
+							borderWidth={1}
+							borderColor="trueGray.400"
+							borderTopRightRadius={0}
+							borderBottomRightRadius={0}
+							fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+							bg={styles.FORM_COMBO_INPUT_BG}
+							_focus={{
+								bg: styles.FORM_COMBO_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={0}
+							borderTopRightRadius={0}
+							borderBottomRightRadius={0}
+							fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+							bg={styles.FORM_COMBO_INPUT_BG}
+							_focus={{
+								bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
+							}}
+							{..._input}
+						/>}
+					<IconButton
+						_icon={{
+							as: CaretDown,
+							color: 'primary.800',
+							size: 'sm',
+						}}
+						isDisabled={isDisabled}
+						onPress={() => hideMenu()}
+						h="100%"
+						borderWidth={1}
+						borderColor="#bbb"
+						borderLeftWidth={0}
+						borderLeftRadius={0}
+						borderRightRadius="md"
+						bg={styles.FORM_COMBO_TRIGGER_BG}
+						_hover={{
+							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+						}}
+					/>
+				</Row>;
+			dropdownMenu = <Modal
+								isOpen={true}
+								onClose={() => setIsMenuShown(false)}
+								top="30%"
+								w="100%"
+								h={400}
+								px={5}
+							>
+								{inputAndTriggerClone}
+								{grid}
+							</Modal>;
+		}
+	}
+
+	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>;
+	
 	if (tooltip) {
-		comboComponent = <Tooltip label={tooltip} placement={tooltipPlacement}>
-							{comboComponent}
+		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+							{assembledComponents}
 						</Tooltip>;
 	}
 	
-	return comboComponent;
+	return assembledComponents;
 }
 
 export const Combo = withComponent(