@onehat/ui 0.1.2 → 0.2.0

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

@@ -0,0 +1,370 @@
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Icon,
+	Popover,
+	Pressable,
+	Row,
+	Text,
+	Tooltip,
+} from 'native-base';
+import {
+	DATE,
+	TIME,
+	DATETIME,
+} from '../../../Constants/Date';
+// import DateTimePickerModal from 'react-native-modal-datetime-picker'; // https://github.com/mmazzarolo/react-native-modal-datetime-picker
+// import DateTimePicker from '@react-native-community/datetimepicker'; // https://github.com/react-native-datetimepicker/datetimepicker
+import Datetime from 'react-datetime'; // https://www.npmjs.com/package/react-datetime
+import 'react-datetime/css/react-datetime.css';
+import './datetime.css';
+import {
+	UI_MODE_WEB,
+} from '../../../Constants/UiModes';
+import UiConfig from '../../../UiConfig';
+import Formatters from '@onehat/data/src/Util/Formatters';
+import Parsers from '@onehat/data/src/Util/Parsers';
+import Input from '../Field/Input';
+import IconButton from '../../Buttons/IconButton';
+import withValue from '../../Hoc/withValue';
+import emptyFn from '../../../Functions/emptyFn';
+import Calendar from '../../Icons/Calendar';
+import styles from '../../../Constants/Styles';
+import _ from 'lodash';
+
+export function DateElement(props) {
+	const {
+			placeholderText,
+			value,
+			setValue,
+			format,
+			mode = DATE,
+			tooltip = 'Choose a date.',
+			tooltipPlacement = 'bottom',
+		} = props,
+		inputRef = useRef(),
+		triggerRef = useRef(),
+		pickerRef = useRef(),
+		[isPickerShown, setIsPickerShown] = useState(false),
+		[isRendered, setIsRendered] = useState(false),
+		[isTranslateX, setIsTranslateX] = useState(false),
+		[isTranslateY, setIsTranslateY] = useState(false),
+		[top, setTop] = useState(0),
+		[left, setLeft] = useState(0),
+		showPicker = () => {
+			if (isPickerShown) {
+				return;
+			}
+			if (UiConfig.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);
+	
+				setLeft(inputRect.left);
+				if (isLower) {
+					setTop(inputRect.top);
+					setIsTranslateY(true);
+				} else {
+					setTop(inputRect.top + inputRect.height);
+				}
+				if (isRight) {
+					// setIsTranslateX(true);
+				}
+			}
+
+			setIsPickerShown(true);
+		},
+		hidePicker = () => {
+			if (!isPickerShown) {
+				return;
+			}
+			setIsPickerShown(false);
+		},
+		onInputKeyPress = (e) => {
+			switch(e.key) {
+				case 'Escape':
+				case 'Enter':
+					hidePicker();
+					break;
+				default:
+			}
+		},
+		onInputBlur = (e) => {
+			const {
+					relatedTarget
+				} = e;
+			if (!relatedTarget ||
+					(!inputRef.current.contains(relatedTarget) && triggerRef.current !== relatedTarget && (!pickerRef.current || !pickerRef.current.contains(relatedTarget)))) {
+				// hidePicker();
+			}
+		},
+		onInputClick = (e) => {
+			if (!isRendered) {
+				return;
+			}
+			showPicker();
+		},
+		onInputSetValue = (value) => {
+			if (value === '') {
+				setValue(null);
+				return;
+			}
+			switch(mode) {
+				case DATE:
+					if (!_.isNil(value)) {
+						value = Parsers.ParseDate(value);
+						value = Formatters.FormatDate(value, 'YYYY-MM-DD');
+					}
+					break;
+				case TIME:
+					if (!_.isNil(value)) {
+						value = Parsers.ParseTime(value);
+						value = Formatters.FormatTime(value);
+					}
+					break;
+				case DATETIME:
+					if (!_.isNil(value)) {
+						value = Parsers.ParseDate(value);
+						value = Formatters.FormatDate(value, 'YYYY-MM-DD HH:mm:ss');
+					}
+					break;
+				default:
+			}
+			setValue(value);
+		},
+		onTriggerPress = (e) => {
+			if (!isRendered) {
+				return;
+			}
+			if (isPickerShown) {
+				hidePicker();
+			} else {
+				showPicker();
+			}
+			inputRef.current.focus();
+		},
+		onTriggerBlur = (e) => {
+			if (!isPickerShown) {
+				return;
+			}
+			const {
+					relatedTarget
+				} = e;
+			if (!relatedTarget || 
+					(!inputRef.current.contains(relatedTarget) && triggerRef.current !== relatedTarget && !pickerRef.current.contains(relatedTarget))) {
+				hidePicker();
+			}
+		},
+		onPickerChange = (moment) => {
+			let value = null;
+			switch(mode) {
+				case DATE:
+					value = Formatters.FormatDate(moment, 'YYYY-MM-DD');
+					break;
+				case TIME:
+					value = Formatters.FormatTime(moment);
+					break;
+				case DATETIME:
+					value = Formatters.FormatDateTime(moment, 'YYYY-MM-DD HH:mm:ss');
+					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(' '),
+		};
+	}
+
+	// Format the display date/time/datetime
+	let title = placeholderText,
+		pickerValue = null,
+		height = 300,
+		width = 300;
+	switch(mode) {
+		case DATE:
+			height = 272;
+			if (!_.isNil(value)) {
+				title = format ? Formatters.FormatDate(value, format) : Formatters.FormatDate(value);
+				pickerValue = Parsers.ParseDate(value, 'YYYY-MM-DD');
+			}
+			break;
+		case TIME:
+			height = 120;
+			width = 150;
+			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');
+			}
+			break;
+		default:
+	}
+
+	if (pickerValue?.toDate) {
+		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}
+						borderTopLeftRadius={6}
+						borderBottomLeftRadius={6}
+						borderTopRightRadius={0}
+						borderBottomRightRadius={0}
+						bg={styles.FORM_DATE_ICON_BG}
+						_hover={{
+							bg: styles.FORM_DATE_ICON_BG_HOVER,
+						}}
+					/>
+					<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,
+						}}
+						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);
+						}}
+					/>
+					{/* <Pressable
+						flex={1}
+						h="100%"
+						onPress={showPicker}
+					>
+						<Text
+							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}
+							>
+								<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>
+				</Row>
+			</Tooltip>;
+
+	// 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>;
+	
+	// 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>;
+};
+
+export default withValue(DateElement);

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+	Text,
+} from 'native-base';
+import styles from '../../../Constants/Styles';
+import withTooltip from '../../Hoc/withTooltip';
+import withValue from '../../Hoc/withValue';
+
+const
+	DisplayElement = (props) => {
+		const {
+				value,
+				text = value,
+			} = props;
+		return <Text
+					ref={props.outerRef}
+					onChangeText={props.setValue}
+					flex={1}
+					fontSize={styles.TEXT_FONTSIZE}
+					{...props}
+				>{text}</Text>;
+	},
+	DisplayField = withValue(DisplayElement);
+
+// Tooltip needs us to forwardRef
+export default withTooltip(React.forwardRef((props, ref) => {
+	return <DisplayField {...props} outerRef={ref} />;
+}));

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

@@ -0,0 +1,14 @@
+import {
+	Box,
+} from 'native-base';
+import _ from 'lodash';
+
+export default function Blank(props) {
+	const {
+			children,
+			...propsToPass
+		} = props;
+	return <Box {...propsToPass}>
+				{children}
+			</Box>;
+}

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

@@ -0,0 +1,218 @@
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Box,
+	Icon,
+	Row,
+	Text,
+	Tooltip,
+} from 'native-base';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from '../../../Constants/UiModes';
+import UiConfig from '../../../UiConfig';
+import styles from '../../../Constants/Styles';
+import {
+	FILE_MODE_IMAGE,
+	FILE_MODE_FILE,
+} from '../../../Constants/File';
+import IconButton from '../../Buttons/IconButton';
+import withValue from '../../Hoc/withValue';
+import File from '../../Icons/File';
+import Trash from '../../Icons/Trash';
+import _ from 'lodash';
+
+// NOTES: Since this arrangement of form and fields has only a single value per field, 
+// but there are multiple fields used in file uploads, change things so that the single
+// value is a JSON object, with the separate values encoded within.
+
+// TODO:
+// √ Combine values into single JSON value
+// Build interpreter so the field can work with existing value
+// Build back-end to receive this
+// Build thumbnail viewer for existing image
+// Build editor, with large viewer for existing image / video / pdf
+// 
+
+function FileElement(props) {
+	const {
+			name,
+			value = {
+				dataUri: null,
+				control: null,
+				filename: null,
+			},
+			setValue,
+
+			mode = FILE_MODE_IMAGE, // FILE_MODE_IMAGE, FILE_MODE_FILE
+			imagePath = '',
+			version = 2,
+			tooltip = 'Choose or drag a file on top of this control.',
+			tooltipPlacement = 'bottom',
+		} = props,
+		dragRef = useRef(),
+		fileInputRef = useRef(),
+		[isDropping, setIsDropping] = useState(false),
+		[localDataUri, setLocalDataUri] = useState(null),
+		[localControl, setLocalControl] = useState(null),
+		[localFilename, setLocalFilename] = useState(null),
+		onClear = () => {
+			setLocalDataUri(null);
+			setLocalControl(null);
+			setLocalFilename(null);
+
+			setValue({
+				dataUri: null,
+				control: null,
+				filename: null,
+				version,
+			});
+
+			fileInputRef.current.value = null;
+		},
+		onSelect = () => {
+			fileInputRef.current.click();
+			
+			setValue({
+				dataUri: null,
+				control: null,
+				filename: null,
+				version,
+			});
+		},
+		onChangeFile = (e) => {
+			const
+				files = fileInputRef.current.files,
+				file = files[0],
+				reader = new FileReader();
+
+			reader.readAsBinaryString(file);
+			reader.onload = (e) => {
+				setBase64(file, e.target.result);
+			};
+		},
+		setBase64 = (file, readerResult) => {
+			const
+				base64 = btoa(readerResult), // 'btoa' is deprecated in Node.js, but not browsers, so use it!
+				dataUri = `data:${file.type};base64,${base64}`,
+				control = '',
+				filename = file.name;
+
+			setLocalDataUri(dataUri);
+			setLocalControl(control);
+			setLocalFilename(filename);
+
+			setValue({
+				dataUri,
+				control,
+				filename,
+				version,
+			});
+		},
+		onDragEnter = (e) => {
+			const
+				fileTypes = e.dataTransfer && e.dataTransfer.types,
+				items = e.dataTransfer && e.dataTransfer.items;
+
+			if (fileTypes.indexOf('Files') === -1) {
+				return;
+			}
+			if (items && items.length > 1) {
+				throw new Error('You can only drop a single file!');
+			}
+
+			setIsDropping(true);
+		},
+		onDragLeave = (e) => {
+			if (dragRef.current.contains(e.relatedTarget)) {
+				return; // ignore events that bubble from within
+			}
+			setIsDropping(false);
+		},
+		onDragOver = (e) => {
+			e.preventDefault();
+		},
+		onDrop = (e) => {
+			e.preventDefault();
+			const
+				files = e.dataTransfer && e.dataTransfer.files,
+				file = files[0],
+				reader = new FileReader();
+
+			reader.readAsDataURL(file);
+			reader.onload = (e) => {
+				setBase64(file, e.target.result);
+			};
+			setIsDropping(false);
+		};
+
+	useEffect(() => {
+		const {
+				dataUri,
+				control,
+				filename,
+			} = value;
+		setLocalDataUri(localDataUri);
+		setLocalControl(localControl);
+		setLocalFilename(localFilename);
+	}, []);
+
+	if (UiConfig.mode === UI_MODE_REACT_NATIVE) {
+		throw new Error('Not yet implemented for RN.');
+	}
+		
+	return <div ref={dragRef} style={{ flex: 1, height: '100%', }} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDragOver={onDragOver} onDrop={onDrop}>
+				<Tooltip label={tooltip} placement={tooltipPlacement}>
+					<Row flex={1} h={10} alignItems="center">
+						{isDropping && <Box position="absolute" borderWidth={isDropping ? 2 : 0} borderColor="primary.800" top={0} left={0} w="100%" h="100%" bg="trueGray.200" zIndex={10000} justifyContent="center" alignItems="center">
+											<Text>Set File</Text>
+										</Box>}
+						<IconButton
+							icon={<Icon as={File} color={styles.FORM_FILE_ICON_COLOR} />}
+							onPress={onSelect}
+							h={10}
+							w={10}
+							bg={styles.FORM_FILE_ICON_BG}
+							_hover={{
+								bg: styles.FORM_FILE_ICON_BG_HOVER,
+							}}
+						/>
+						<IconButton
+							icon={<Icon as={Trash} color={styles.FORM_FILE_ICON_COLOR} />}
+							onPress={onClear}
+							h={10}
+							w={10}
+							ml={1}
+							isDisabled={!value?.dataUri}
+							bg={value?.dataUri ? styles.FORM_FILE_ICON_BG : 'disabled'}
+							_hover={{
+								bg: value?.dataUri ? styles.FORM_FILE_ICON_BG_HOVER : 'disabled',
+							}}
+						/>
+						{mode === FILE_MODE_FILE && <Text
+														flex={1}
+														ml={3}
+														fontSize={styles.FORM_FILE_READOUT_FONTSIZE}
+														fontStyle="italic"
+														numberOfLines={1}
+														ellipsizeMode="head"
+														bg={styles.FORM_FILE_READOUT_BG}
+													>{value.filename || 'No file'}</Text>}
+						{mode === FILE_MODE_IMAGE && <Box
+														flex={1}
+														h="100%"
+														ml={1}
+														bg={styles.FORM_FILE_READOUT_BG}
+														backgroundImage={value?.dataUri ? 'url(' + imagePath + encodeURIComponent(value.dataUri) + ')' : 'none'}
+														backgroundSize="contain"
+														backgroundRepeat="no-repeat"
+														borderRadius={4}
+														borderWidth={1}
+													/>}
+						<input type="file" ref={fileInputRef} name={name} onChange={onChangeFile} style={{ position: 'absolute', opacity: 0, height: 0, width: 0, }} />
+					</Row>
+				</Tooltip>
+			</div>;
+}
+
+export default withValue(FileElement);