@onehat/ui 0.1.2 → 0.2.0

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

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Input,
+	Tooltip,
+} from 'native-base';
+import {
+	AUTO_SUBMIT_DELAY,
+} from '../../../Constants/Input';
+import styles from '../../../Constants/Styles';
+import withValue from '../../Hoc/withValue';
+import _ from 'lodash';
+
+function InputElement(props) {
+	let {
+			value,
+			setValue,
+			autoSubmit = false, // automatically setValue after user stops typing for autoSubmitDelay
+			autoSubmitDelay = AUTO_SUBMIT_DELAY,
+			maxLength,
+			onKeyPress,
+			onChangeText,
+			tooltip = null,
+			tooltipPlacement = 'bottom',
+		} = props,
+		debouncedSetValueRef = useRef(),
+		[localValue, setLocalValue] = useState(value),
+		onKeyPressLocal = (e) => {
+			if (e.key === 'Enter') {
+				setValue(localValue);
+			}
+			if (onKeyPress) {
+				onKeyPress(e, localValue);
+			}
+		},
+		onChangeTextLocal = (value) => {
+			if (value === '') {
+				value = null; // empty string makes value null
+				setLocalValue(value);
+			} else if (!maxLength || maxLength >= value?.length ) {
+				setLocalValue(value);
+			}
+			if (autoSubmit) {
+				debouncedSetValueRef.current(value);
+			}
+			if (onChangeText) {
+				onChangeText(value);
+			}
+		};
+		
+	useEffect(() => {
+		// Set up debounce fn
+		// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+		debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
+	}, [setValue]);
+		
+	useEffect(() => {
+
+		// Make local value conform to externally changed value
+		setLocalValue(value);
+
+	}, [value]);
+
+	if (localValue === null || typeof localValue === 'undefined') {
+		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+	}
+	
+	let component = <Input
+						ref={props.outerRef}
+						onChangeText={onChangeTextLocal}
+						_input={{
+							onKeyPress: onKeyPressLocal,
+						}}
+						flex={1}
+						fontSize={styles.FORM_INPUT_FONTSIZE}
+						bg={styles.FORM_INPUT_BG}
+						_focus={{
+							bg: styles.FORM_INPUT_FOCUS_BG,
+						}}
+						{...props}
+						value={localValue}
+					/>;
+	if (tooltip) {
+		component = <Tooltip label={tooltip} placement={tooltipPlacement}>
+						{component}
+					</Tooltip>;
+	}
+	return component;
+}
+
+const
+	InputField = withValue(InputElement),
+	InputForwardRef = React.forwardRef((props, ref) => {
+		return <InputField {...props} outerRef={ref} component="Input" />;
+	});
+
+export default InputForwardRef;

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

@@ -0,0 +1,151 @@
+
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Icon,
+	Input,
+	Row,
+} from 'native-base';
+import {
+	AUTO_SUBMIT_DELAY,
+} from '../../../Constants/Input';
+import styles from '../../../Constants/Styles';
+import IconButton from '../../Buttons/IconButton';
+import withTooltip from '../../Hoc/withTooltip';
+import withValue from '../../Hoc/withValue';
+import Plus from '../../Icons/Plus';
+import Minus from '../../Icons/Minus';
+import _ from 'lodash';
+
+const InputWithTooltip = withTooltip(Input);
+
+function NumberElement(props) {
+	let {
+		value,
+		setValue,
+		minValue,
+		maxValue,
+		tooltip = null,
+	} = props,
+	debouncedSetValueRef = useRef(),
+	[localValue, setLocalValue] = useState(value),
+	onInputKeyPress = (e) => {
+		switch(e.key) {
+			case 'ArrowDown':
+			case 'ArrowLeft':
+				onDecrement();
+				break;
+			case 'ArrowUp':
+			case 'ArrowRight':
+				onIncrement();
+				break;
+			case 'Tab':
+			case 'Backspace':
+				return;
+				break;
+			case 'Enter':
+				setValue(value);
+				break;
+				default:
+		}
+		if (!e.key.match(/^[\-\d\.]*$/)) {
+			e.preventDefault(); // kill anything that's not a number
+		}
+	},
+	onChangeText = (value) => {
+		if (value === '') {
+			value = null; // empty string makes value null
+		}
+		setLocalValue(value);
+		debouncedSetValueRef.current(value);
+	},
+	onDecrement = () => {
+		let localValue = value;
+		if (minValue && localValue === minValue) {
+			return;
+		}
+		if (!localValue) {
+			localValue = 0;
+		}
+		localValue = parseFloat(localValue, 10) -1;
+		setValue(localValue);
+	},
+	onIncrement = () => {
+		let localValue = value;
+		if (maxValue && localValue === maxValue) {
+			return;
+		}
+		if (!localValue) {
+			localValue = 0;
+		}
+		localValue = parseFloat(localValue, 10) +1;
+		setValue(localValue);
+	};
+		
+	useEffect(() => {
+		// Set up debounce fn
+		// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+		debouncedSetValueRef.current = _.debounce(setValue, AUTO_SUBMIT_DELAY);
+	}, [setValue]);
+	
+	useEffect(() => {
+
+		// Make local value conform to externally changed value
+		setLocalValue(value);
+
+	}, [value]);
+
+	if (localValue === null || typeof localValue === 'undefined') {
+		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+	}
+
+	const
+		isIncrementDisabled = typeof maxValue !== 'undefined' && value === maxValue,
+		isDecrementDisabled = typeof minValue !== 'undefined' && (value === minValue || (!value && minValue === 0));
+
+	return <Row flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6}>
+				<IconButton
+					icon={<Icon as={Minus} color={isDecrementDisabled ? 'disabled' : 'trueGray.500'} />}
+					onPress={onDecrement}
+					isDisabled={isDecrementDisabled}
+					h="100%"
+					flex={1}
+					maxWidth={10}
+					_hover={{
+						bg: isDecrementDisabled ? null : 'trueGray.400',
+					}}
+					borderRightRadius={0}
+					zIndex={10}
+				/>
+				<InputWithTooltip
+					value={localValue}
+					onChangeText={onChangeText}
+					onKeyPress={onInputKeyPress}
+					flex={5}
+					h="100%"
+					fontSize={styles.FORM_INPUT_FONTSIZE}
+					bg={styles.FORM_INPUT_BG}
+					_focus={{
+						bg: styles.FORM_INPUT_FOCUS_BG,
+					}}
+					textAlign="center"
+					borderRadius={0}
+					tooltip={tooltip}
+					{...props._input}
+				/>
+				<IconButton
+					icon={<Icon as={Plus} color={isIncrementDisabled ? 'disabled' : 'trueGray.500'} />}
+					onPress={onIncrement}
+					isDisabled={isIncrementDisabled}
+					h="100%"
+					flex={1}
+					maxWidth={10}
+					_hover={{
+						bg: isIncrementDisabled ? null : 'trueGray.400',
+					}}
+					borderLeftRadius={0}
+					zIndex={10}
+				/>
+			</Row>;
+}
+
+export default withValue(NumberElement);

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

@@ -0,0 +1,13 @@
+import RadioGroup from './RadioGroup';
+
+// This is a building block for other RadioGroups,
+// which store their data as a JSON array, not a data repository.
+// Need to supply data prop from outer component.
+export default function ArrayRadioGroup(props) {
+	return <RadioGroup
+				idField="id"
+				displayField="value"
+				fields={['id', 'value']}
+				{...props}
+			/>;
+}

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

@@ -0,0 +1,62 @@
+import React, { useState, useEffect, } from 'react';
+import {
+	Column,
+	Radio,
+	Row,
+} from 'native-base';
+import withData from '../../../Hoc/withData';
+import withValue from '../../../Hoc/withValue';
+import withTooltip from '../../../Hoc/withTooltip';
+import _ from 'lodash';
+
+const
+	RadioGroupElement = (props) => {
+		const {
+				value,
+
+				// withData
+				Repository,
+				data,
+				idIx,
+				displayIx,
+			} = props,
+			[radios, setRadioes] = useState([]);
+
+		useEffect(() => {
+
+			// adjust the radios to match the value
+			let radios = [];
+			const radioProps = {
+				my: '2px',
+			};
+			if (Repository) {
+				const entities = Repository.getEntitiesOnPage();
+				radios = _.map(entities, (entity, ix) => {
+					return <Radio
+								key={ix}
+								value={entity.id}
+								{...radioProps}
+							>{entity.displayValue}</Radio>;
+				});
+			} else {
+				radios = _.map(data, (datum, ix) => {
+					return <Radio
+								key={ix}
+								value={datum[idIx]}
+								{...radioProps}
+							>{datum[displayIx]}</Radio>;
+				});
+			}
+			setRadioes(radios);
+		}, [value]);
+
+		return <Radio.Group onChange={props.setValue} accessibilityLabel={props.name} {...props}>
+					{radios}
+				</Radio.Group>;
+	},
+	RadioGroupField = withValue(withData(RadioGroupElement));
+
+// Tooltip needs us to forwardRef
+export default withTooltip(React.forwardRef((props, ref) => {
+	return <RadioGroupField {...props} outerRef={ref} />;
+}));

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

@@ -0,0 +1,11 @@
+import {
+	SELECTION_MODE_MULTI,
+} from '../../../Constants/Selection';
+import Combo from './Combo/Combo';
+
+export default function Tag(props) {
+	return <Combo
+				selectionMode={SELECTION_MODE_MULTI}
+				{...props}
+			/>;
+}

package/src/Components/Form/Field/Text.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
+	TextElement = (props) => {
+		return <Text
+					ref={props.outerRef}
+					numberOfLines={1}
+					ellipsizeMode="head" 
+					flex={1}
+					fontSize={styles.FORM_TEXT_FONTSIZE}
+					bg={styles.FORM_TEXT_BG}
+					px={3}
+					py={1}
+					{...props}
+				>{props.value}</Text>;
+	},
+	TextField = withValue(TextElement);
+
+// Tooltip needs us to forwardRef
+export default withTooltip(React.forwardRef((props, ref) => {
+	return <TextField {...props} outerRef={ref} />;
+}));

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+	TextArea,
+} from 'native-base';
+import styles from '../../../Constants/Styles';
+import withTooltip from '../../Hoc/withTooltip';
+import withValue from '../../Hoc/withValue';
+
+const
+	TextAreaElement = (props) => {
+		return <TextArea
+					ref={props.outerRef}
+					onChangeText={props.setValue}
+					flex={1}
+					bg={styles.FORM_TEXTAREA_BG}
+					fontSize={styles.FORM_TEXTAREA_FONTSIZE}
+					h={styles.FORM_TEXTAREA_HEIGHT}
+					{...props}
+				/>;
+	},
+	TextAreaField = withValue(TextAreaElement);
+
+// Tooltip needs us to forwardRef
+export default withTooltip(React.forwardRef((props, ref) => {
+	return <TextAreaField {...props} outerRef={ref} />;
+}));

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+	Switch,
+} from 'native-base';
+import styles from '../../../Constants/Styles';
+import withTooltip from '../../Hoc/withTooltip';
+import withValue from '../../Hoc/withValue';
+
+const
+	ToggleElement = (props) => {
+		const {
+				value,
+				setValue,
+			} = props,
+			onToggle = () => {
+				setValue(!value);
+			};
+		return <Switch
+					ref={props.outerRef}
+					onToggle={onToggle}
+					isChecked={!!value}
+					// flex={1}
+					bg={styles.FORM_TOGGLE_BG}
+					size={styles.FORM_TOGGLE_SIZE}
+					onTrackColor={styles.FORM_TOGGLE_ON_COLOR}
+					offTrackColor={styles.FORM_TOGGLE_OFF_COLOR}
+					_hover={{
+						onTrackColor: styles.FORM_TOGGLE_ON_HOVER_COLOR,
+						offTrackColor: styles.FORM_TOGGLE_OFF_HOVER_COLOR,
+					}}
+					{...props}
+				/>;
+	},
+	ToggleField = withValue(ToggleElement);
+
+// Tooltip needs us to forwardRef
+export default withTooltip(React.forwardRef((props, ref) => {
+	return <ToggleField {...props} outerRef={ref} />;
+}));

package/src/Components/Form/Field/datetime.css

@@ -0,0 +1,5 @@
+.rdtPicker {
+	min-height: 290px;
+	min-width: 130px;
+	background: #fff;
+}

package/src/Components/Form/FieldSet.js

@@ -0,0 +1,64 @@
+import { useState, } from 'react';
+import {
+	Box,
+	Column,
+	Row,
+	Text,
+} from 'native-base';
+import styles from '../../Constants/Styles';
+import IconButton from '../Buttons/IconButton';
+import CaretUp from '../Icons/CaretUp';
+import CaretDown from '../Icons/CaretDown';
+
+export default function FieldSet(props) {
+	const {
+			title,
+			helpText,
+			children,
+			isCollapsed,
+			hasErrors,
+			...propsToPass
+		} = props,
+		[localIsCollapsed, setLocalIsCollapsed] = useState(isCollapsed),
+		onToggleCollapse = () => {
+			setLocalIsCollapsed(!localIsCollapsed);
+		};
+		
+	return <Box
+				borderWidth={1}
+				borderColor="trueGray.400"
+				bg={styles.FORM_FIELDSET_BG}
+				m={2}
+				pb={1}
+				{...propsToPass}
+			>
+				{title &&
+					<Row
+						w="100%"
+						borderBottomWidth={1}
+						borderBottomColor="trueGray.200"
+						mb={2}
+						style={{ userSelect: 'none', }}
+					>
+						<Text
+							fontSize={styles.FORM_FIELDSET_FONTSIZE}
+							fontWeight="bold"
+							py={1}
+							px={3}
+							flex={1}
+							numberOfLines={1}
+							ellipsizeMode="head"
+						>{title}</Text>
+						<IconButton
+							_icon={{
+								as: localIsCollapsed ? <CaretDown /> : <CaretUp />,
+								size: 'sm',
+								color: 'trueGray.300',
+							}}
+							onPress={onToggleCollapse}
+						/>
+					</Row>}
+				{helpText && <Text>{helpText}</Text>}
+				{!localIsCollapsed && children}
+			</Box>;
+}

package/src/Components/Form/FiltersForm.js

@@ -0,0 +1,66 @@
+import { useState, useEffect, } from 'react';
+import {
+	Button,
+	Column,
+	Icon,
+	Row,
+	ScrollView,
+	Text,
+} from 'native-base';
+import Form from './Form';
+import _ from 'lodash';
+
+
+function FiltersForm(props) {
+
+	let 
+		Filter1Element,
+		Filter2Element,
+		Filter3Element,
+		Filter4Element,
+		Filter5Element;
+
+	return <Form
+				flex={1}
+				values={{
+					// fields that are not a part of the entity,
+					// but should still be controlled by form (with validation if needed)
+					// Anything which is 'null' is uncontrolled (RN behavior)
+					filter1: '',
+					filter2: '',
+					filter3: '',
+					filter4: '',
+					filter5: '',
+				}}
+				items={[
+					{
+						type: Filter1Element,
+						label: 'Filter 1',
+						name: 'filter1',
+					},
+					{
+						type: Filter2Element,
+						label: 'Filter 2',
+						name: 'filter2',
+					},
+					{
+						type: Filter3Element,
+						label: 'Filter 3',
+						name: 'filter3',
+					},
+					{
+						type: Filter4Element,
+						label: 'Filter 4',
+						name: 'filter4',
+					},
+					{
+						type: Filter5Element,
+						label: 'Filter 5',
+						name: 'filter5',
+					},
+				]}
+			/>;
+
+}
+
+export default FiltersForm;