@onehat/ui 0.3.381 → 0.4.0

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

@@ -1,21 +1,20 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { forwardRef, useState, useRef, useEffect, } from 'react';
 import {
 	Box,
-	Icon,
-	Modal,
-	Popover,
+	HStack,
+	HStackNative,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Popover, PopoverBackdrop, PopoverContent, PopoverBody,
 	Pressable,
-	Row,
-	Text,
-	Tooltip,
-} from 'native-base';
+	TextNative,
+} from '../../Gluestack';
 import {
 	DATE,
 	TIME,
 	DATETIME,
 } from '../../../Constants/Date.js';
 import {
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
 import UiGlobals from '../../../UiGlobals.js';
@@ -25,6 +24,7 @@ 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 withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
 import testProps from '../../../Functions/testProps.js';
@@ -34,22 +34,22 @@ import moment from 'moment';
 import _ from 'lodash';
 
 
-export function DateElement(props) {
+export const DateElement = forwardRef((props, ref) => {
+	
 	const {
 			format,
 			mode = DATE,
 
 			additionalButtons,
-			tooltipRef = null,
-			tooltip = null,
-			menuMinWidth = 150,
+			menuMinWidth = 200,
 			disableDirectEntry = false,
 			hideMenuOnSelection = true,
 			showXButton = false,
 			_input = {},
 			isDisabled = false,
-			tooltipPlacement = 'bottom',
-			placeholder = 'Choose a date.',
+			limitWidth = false,
+			minValue,
+			maxValue,
 			testID,
 
 			// withComponent
@@ -58,19 +58,16 @@ export function DateElement(props) {
 			// withValue
 			value,
 			setValue,
-			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
 		Datetime = getComponentFromType('Datetime'),
-		inputRef = useRef(),
+		inputRef = ref || useRef(),
 		triggerRef = useRef(),
 		pickerRef = useRef(),
 		[isPickerShown, setIsPickerShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
 		[localValue, setLocalValue] = useState(value),
 		[textInputValue, setTextInputValue] = useState(value),
-		[isTranslateX, setIsTranslateX] = useState(false),
-		[isTranslateY, setIsTranslateY] = useState(false),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
 		setBothValues = (value) => {
@@ -105,24 +102,12 @@ export function DateElement(props) {
 			if (UiGlobals.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const 
-					triggerRect = triggerRef.current.getBoundingClientRect(),
-					inputRect = inputRef.current.getBoundingClientRect(),
-					bodyRect = document.body.getBoundingClientRect(),
-					isLower = triggerRect.top > (bodyRect.height / 2),
-					isRight = triggerRect.left > (bodyRect.width / 2);
-	
+					// triggerRect = triggerRef.current.getBoundingClientRect(),
+					inputRect = inputRef.current.getBoundingClientRect();
+			
 				setLeft(inputRect.left);
-				if (isLower) {
-					setTop(inputRect.top);
-					setIsTranslateY(true);
-				} else {
-					setTop(inputRect.top + inputRect.height);
-				}
-				if (isRight) {
-					// setIsTranslateX(true);
-				}
+				setTop(inputRect.top + inputRect.height);
 			}
-
 			setIsPickerShown(true);
 		},
 		hidePicker = () => {
@@ -248,30 +233,39 @@ export function DateElement(props) {
 	}, [value]);
 	
 	// Format the display date/time/datetime
-	let title = placeholder,
+	let placeholder = 'Select';
 		pickerValue = null,
-		height = 300,
-		width = 300;
+		height = null,
+		width = null;
 	switch(mode) {
+		case DATETIME:
+			placeholder = 'Select Date/Time';
+			if (!_.isNil(value)) {
+				title = format ? Formatters.FormatDateTime(value, format) : Formatters.FormatDateTime(value);
+				pickerValue = Parsers.ParseDate(value, 'YYYY-MM-DD HH:mm:ss');
+			}
+			if (limitWidth) {
+				width = 200;
+			}
+			break;
 		case DATE:
-			height = 272;
+			placeholder = 'Select Date';
 			if (!_.isNil(value)) {
 				title = format ? Formatters.FormatDate(value, format) : Formatters.FormatDate(value);
 				pickerValue = Parsers.ParseDate(value, 'YYYY-MM-DD');
 			}
+			if (limitWidth) {
+				width = 150;
+			}
 			break;
 		case TIME:
-			height = 120;
-			width = 150;
+			placeholder = 'Select Time';
 			if (!_.isNil(value)) {
 				title = format ? Formatters.FormatTime(value, format) : Formatters.FormatTime(value);
 				pickerValue = Parsers.ParseDate(value, 'HH:mm:ss');
 			}
-			break;
-		case DATETIME:
-			if (!_.isNil(value)) {
-				title = format ? Formatters.FormatDateTime(value, format) : Formatters.FormatDateTime(value);
-				pickerValue = Parsers.ParseDate(value, 'YYYY-MM-DD HH:mm:ss');
+			if (limitWidth) {
+				width = 150;
 			}
 			break;
 		default:
@@ -282,217 +276,174 @@ export function DateElement(props) {
 	}
 
 	let xButton = null,
-		inputAndTrigger = null,
-		grid = null,
+		trigger = null,
+		input = null,
 		dropdownMenu = null,
 		assembledComponents = null;
 
 	if (showXButton && !_.isNil(value)) {
 		xButton = <IconButton
 						{...testProps('xBtn')}
+						icon={Xmark}
 						_icon={{
-							as: Xmark,
-							color: 'trueGray.600',
 							size: 'sm',
+							className: 'text-grey-600',
 						}}
 						isDisabled={isDisabled}
 						onPress={onClearBtn}
-						h="100%"
-						bg={styles.FORM_COMBO_TRIGGER_BG}
-						_hover={{
-							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
-						}}
+						className={`
+							h-full
+							${styles.FORM_COMBO_TRIGGER_BG}
+							${styles.FORM_COMBO_TRIGGER_BG_HOVER}
+						`}
 					/>;
 	}
+	trigger = <IconButton
+				{...testProps('trigger')}
+				ref={triggerRef}
+				icon={Calendar}
+				_icon={{
+					size: 'sm',
+					className: styles.FORM_DATE_ICON_COLOR,
+				}}
+				onPress={onTriggerPress}
+				onBlur={onTriggerBlur}
+				isDisabled={isDisabled}
+				className={`
+					h-10
+					w-10
+					border
+					border-grey-400
+					rounded-l-md
+					rounded-r-none
+					${styles.FORM_DATE_ICON_BG}
+					${styles.FORM_DATE_ICON_BG_HOVER}
+				`}
+			/>;
 
 	if (UiGlobals.mode === UI_MODE_WEB) {
-		inputAndTrigger = <>
-							<IconButton
-								{...testProps('trigger')}
-								ref={triggerRef}
-								_icon={{
-									as: Calendar,
-									color: styles.FORM_DATE_ICON_COLOR,
-									size: 'sm',
-								}}
-								onPress={onTriggerPress}
-								onBlur={onTriggerBlur}
-								h={10}
-								w={10}
-								isDisabled={isDisabled}
-								borderWidth={1}
-								borderColor="#bbb"
-								borderLeftRadius="md"
-								borderRighttRadius={0}
-								bg={styles.FORM_DATE_ICON_BG}
-								_hover={{
-									bg: styles.FORM_DATE_ICON_BG_HOVER,
-								}}
-							/>
-							{disableDirectEntry ?
-								<Pressable
-									{...testProps('togglePickerBtn')}
-									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
-									testID={testID}
-									ref={inputRef}
-									value={textInputValue}
-									// setValue={onInputSetValue}
-									onChangeValue={onInputChangeValue}
-									onKeyPress={onInputKeyPress}
-									onBlur={onInputBlur}
-									onFocus={onInputFocus}
-									autoSubmit={true}
-									isDisabled={isDisabled}
-									// 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}
-								/>}
-						</>;
+		input = disableDirectEntry ?
+			<Pressable
+				{...testProps('togglePickerBtn')}
+				onPress={togglePicker}
+				className="flex-1 h-full"
+			>
+				<TextNative
+					ref={inputRef}
+					numberOfLines={1}
+					ellipsizeMode="head"
+					className={`
+						flex-1
+						h-full
+						m-0
+						p-2
+						border
+						border-grey-400
+						border-l-[0px]
+						rounded-l-none
+						rounded-r-md
+						${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
+						${styles.FORM_DATE_INPUT_BG}
+						${styles.FORM_DATE_INPUT_BG_FOCUS}
+						${styles.FORM_DATE_READOUT_FONTSIZE}
+					`}
+				>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
+			</Pressable> :
+			<Input
+				testID={testID}
+				ref={inputRef}
+				value={textInputValue}
+				// setValue={onInputSetValue}
+				onChangeValue={onInputChangeValue}
+				onKeyPress={onInputKeyPress}
+				onBlur={onInputBlur}
+				onFocus={onInputFocus}
+				autoSubmit={true}
+				isDisabled={isDisabled}
+				// onLayout={(e) => {
+				// 	const {
+				// 			height,
+				// 			width,
+				// 		} = e.nativeEvent.layout;
+				// 	setWidth(Math.round(width));
+				// 	setTop(Math.round(height));
+				// }}
+				className={`
+					flex-1
+					h-full
+					m-0
+					rounded-tr-none
+					rounded-br-none
+					${styles.FORM_DATE_INPUT_BG}
+					${styles.FORM_DATE_INPUT_BG_FOCUS}
+					${styles.FORM_DATE_READOUT_FONTSIZE}
+					${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
+				`}
+				autoSubmitDelay={1000}
+				placeholder={placeholder}
+				{..._input}
+			/>;
 	}
-
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+	if (UiGlobals.mode === UI_MODE_NATIVE) {
+		throw new Error('Migration to Gluestack not yet implemented for Native mode');
 		// This input and trigger are for show
 		// The just show the current value and open the menu
-		inputAndTrigger = <>
-							<IconButton
-								{...testProps('trigger')}
-								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
-								{...testProps('togglePickerBtn')}
-								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>
-						</>;
+		input = <Pressable
+					{...testProps('togglePickerBtn')}
+					onPress={togglePicker}
+					className="flex-1"
+				>
+					<TextNative
+						numberOfLines={1}
+						ellipsizeMode="head"
+						className={`
+							flex-1
+							h-full
+							m-0
+							p-2
+							border
+							border-grey-400
+							border-l-[0px]
+							rounded-l-none
+							rounded-r-md
+							${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"} 
+							${styles.FORM_DATE_READOUT_FONTSIZE} 
+							${styles.FORM_DATE_INPUT_BG}
+							${styles.FORM_DATE_INPUT_BG_FOCUS}
+						`}
+					>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
+				</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}
+								className="block"
 							>
-								<Popover.Content
-									position="absolute"
-									top={top + 'px'}
-									left={left + 'px'}
-									w={width + 'px'}
-									minWidth={menuMinWidth}
-									overflow="auto"
-									bg="#fff"
-									{...translateProps}
+								<PopoverBackdrop className="PopoverBackdrop bg-[#000]" />
+								<PopoverContent
+									ref={pickerRef}
+									className={`
+										PopoverContent
+									`}
+									style={{
+										top,
+										left,
+										width,
+										height,
+										minWidth: menuMinWidth,
+									}}
 								>
-									<Popover.Body
-										ref={pickerRef}
-										borderWidth={1}
-										borderColor='trueGray.400'
-										borderTopWidth={0}
-										p={0}
+									<PopoverBody
+										className={`
+											PopoverBody
+											overflow-hidden
+										`}
 									>
 										<Datetime
 											{...testProps('picker')}
@@ -504,13 +455,13 @@ export function DateElement(props) {
 											timeFormat={mode === TIME || mode === DATETIME ? 'HH:mm:ss' : false}
 											onChange={onPickerChange}
 										/>
-									</Popover.Body>
-								</Popover.Content>
+									</PopoverBody>
+								</PopoverContent>
 							</Popover>;
 		}
-		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+		if (UiGlobals.mode === UI_MODE_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}>
+				<HStack className="h-[10px]">
 					<IconButton
 						{...testProps('hidePickerBtn')}
 						_icon={{
@@ -520,39 +471,38 @@ export function DateElement(props) {
 						}}
 						isDisabled={isDisabled}
 						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,
-						}}
+						className={`
+							h-full
+							w-10
+							border
+							border-grey-400
+							rounded-l-md
+							rounded-r-none
+							${styles.FORM_DATE_ICON_BG}
+							${styles.FORM_DATE_ICON_BG_HOVER}
+						`}
 					/>
 					{disableDirectEntry ?
-						<Text
+						<TextNative
 							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,
-							}}
-						>{textInputValue}</Text> :
+							className={`
+								flex-1
+								h-full
+								m-0
+								p-2
+								border
+								border-grey-400
+								border-l-0
+								rounded-l-none
+								rounded-r-md
+								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
+								${styles.FORM_DATE_INPUT_BG}
+								${styles.FORM_DATE_INPUT_BG_FOCUS}
+								${styles.FORM_DATE_READOUT_FONTSIZE}
+							`}
+						>{textInputValue}</TextNative> :
 						<Input
 							{...testProps('input')}
 							ref={inputRef}
@@ -563,77 +513,91 @@ export function DateElement(props) {
 							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}
+							className={`
+								flex-1
+								h-full
+								m-0
+								rounded-tr-none
+								rounded-br-none
+								${_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black'}
+								${styles.FORM_DATE_READOUT_FONTSIZE}
+								${styles.FORM_DATE_INPUT_BG}
+								${styles.FORM_DATE_INPUT_BG_FOCUS}
+							`}
 							{..._input}
 						/>}
-				</Row>;
+				</HStack>;
 			dropdownMenu = <Modal
 								isOpen={true}
 								safeAreaTop={true}
 								onClose={() => setIsPickerShown(false)}
-								mt="auto"
-								mb="auto"
-								w="100%"
-								h={400}
-								p={5}
+								className="mt-auto mb-auto w-full h-[400px] p-[5px]"
 							>
-								{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}
-								/> */}
-								<Box bg="#fff">
-									<Datetime
-										{...testProps('picker')}
-										initialDate={moment(value).toDate()}
-										selectedStartDate={moment(value).toDate()}
-										onDateChange={onPickerChange}
-										todayBackgroundColor="#eee"
-										selectedDayColor="#f00"
-										selectedDayTextColor="#fff"
-									/>
-								</Box>
+								<ModalBackdrop />
+								<ModalContent>
+									<ModalBody>
+										{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}
+										/> */}
+										<Box className="bg-white">
+											<Datetime
+												{...testProps('picker')}
+												initialDate={moment(value).toDate()}
+												selectedStartDate={moment(value).toDate()}
+												onDateChange={onPickerChange}
+												todayBackgroundColor="#eee"
+												selectedDayColor="#f00"
+												selectedDayTextColor="#fff"
+											/>
+										</Box>
+									</ModalBody>
+								</ModalContent>
 							</Modal>;
 		}
 	}
 
-	const refProps = {};
-	if (tooltipRef) {
-		refProps.ref = tooltipRef;
+	let className = `
+		Date-HStackNative
+		flex-1
+		justify-center
+		items-center
+		${styles.FORM_COMBO_HEIGHT}
+	`;
+	if (props.className) {
+		className += props.className;
 	}
-	assembledComponents = <Row {...refProps} {...propsToPass} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
+	const style = props.style || {};
+	if (!_.isNil(height)) {
+		style.height = height;
+	}
+	if (!_.isNil(width)) {
+		style.width = width;
+	}
+
+	assembledComponents = <HStackNative
+							onLayout={() => setIsRendered(true)}
+							className={className}
+							style={style}
+						>
 							{xButton}
-							{inputAndTrigger}
+							{trigger}
+							{input}
 							{additionalButtons}
 							{dropdownMenu}
-						</Row>;
-	
-	if (tooltip) {
-		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
-							{assembledComponents}
-						</Tooltip>;
-	}
+						</HStackNative>;
 	
 	return assembledComponents;
 
-};
+});
 
-export default withComponent(withValue(DateElement));
+export default withComponent(withValue(withTooltip(DateElement)));