@onehat/ui 0.3.292 → 0.3.295

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.292",
+	"version": "0.3.295",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -31,6 +31,7 @@
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@onehat/data": "^1.21.0",
+		"@react-native-community/slider": "^4.5.2",
 		"@reduxjs/toolkit": "^1.9.5",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",

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

@@ -19,80 +19,80 @@ const InputWithTooltip = withTooltip(Input);
 
 function NumberElement(props) {
 	let {
-		value,
-		setValue,
-		minValue,
-		maxValue,
-		autoSubmitDelay = UiGlobals.autoSubmitDelay,
-		tooltip = null,
-		isDisabled = false,
-		testID,
-		...propsToPass
-	} = props,
-	styles = UiGlobals.styles,
-	debouncedSetValueRef = useRef(),
-	[localValue, setLocalValue] = useState(value),
-	onInputKeyPress = (e) => {
-		const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
-		switch(key) {
-			case 'ArrowDown':
-				onDecrement();
-				break;
-			case 'ArrowUp':
-				onIncrement();
-				break;
-			case 'Enter':
-				debouncedSetValueRef.current?.cancel();
-				setValue(value);
-				break;
-			case 'ArrowLeft':
-			case 'ArrowRight':
-			case 'Tab':
-			case 'Backspace':
-				return;
-			default:
-		}
-		if (!key.match(/^[\-\d\.]*$/)) {
-			e.preventDefault(); // kill anything that's not a number
-		}
-	},
-	onChangeText = (value) => {
+			value,
+			setValue,
+			minValue,
+			maxValue,
+			autoSubmitDelay = UiGlobals.autoSubmitDelay,
+			tooltip = null,
+			isDisabled = false,
+			testID,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		debouncedSetValueRef = useRef(),
+		[localValue, setLocalValue] = useState(value),
+		onInputKeyPress = (e) => {
+			const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
+			switch(key) {
+				case 'ArrowDown':
+					onDecrement();
+					break;
+				case 'ArrowUp':
+					onIncrement();
+					break;
+				case 'Enter':
+					debouncedSetValueRef.current?.cancel();
+					setValue(value);
+					break;
+				case 'ArrowLeft':
+				case 'ArrowRight':
+				case 'Tab':
+				case 'Backspace':
+					return;
+				default:
+			}
+			if (!key.match(/^[\-\d\.]*$/)) {
+				e.preventDefault(); // kill anything that's not a number
+			}
+		},
+		onChangeText = (value) => {
 
-		if (value === '') {
-			value = null; // empty string makes value null
-		} else if (value.match(/\.$/)) { // value ends with a decimal point
-			// don't parseFloat, otherwise we'll lose the decimal point
-		} else if (value.match(/0$/)) { // value ends with a zero
-			// don't parseFloat, otherwise we'll lose the ability to do things like 1.03
-		} else {
-			value = parseFloat(value, 10);
-		}
-		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);
-	};
-		
+			if (value === '') {
+				value = null; // empty string makes value null
+			} else if (value.match(/\.$/)) { // value ends with a decimal point
+				// don't parseFloat, otherwise we'll lose the decimal point
+			} else if (value.match(/0$/)) { // value ends with a zero
+				// don't parseFloat, otherwise we'll lose the ability to do things like 1.03
+			} else {
+				value = parseFloat(value, 10);
+			}
+			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

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

@@ -0,0 +1,210 @@
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Row,
+	Text,
+} from 'native-base';
+import Input from './Input.js';
+import Slider from '@react-native-community/slider'; // https://www.npmjs.com/package/@react-native-community/slider
+import UiGlobals from '../../../UiGlobals.js';
+import testProps from '../../../Functions/testProps.js';
+import withComponent from '../../Hoc/withComponent.js';
+import withTooltip from '../../Hoc/withTooltip.js';
+import withValue from '../../Hoc/withValue.js';
+import _ from 'lodash';
+
+const FAKE_ZERO = 0.0000000001; // Slider doesn't like zero
+
+const InputWithTooltip = withTooltip(Input);
+
+const
+	SliderElement = (props) => {
+		let {
+				value = 0,
+				setValue,
+				minValue = 0,
+				maxValue = 100,
+				step = 10,
+				autoSubmitDelay = UiGlobals.autoSubmitDelay,
+				tooltip = null,
+				isDisabled = false,
+				testID,
+				...propsToPass
+			} = props,
+			styles = UiGlobals.styles,
+			debouncedSetValueRef = useRef(),
+			[localValue, setLocalValue] = useState(value),
+			onInputKeyPress = (e) => {
+				const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
+				switch(key) {
+					case 'ArrowDown':
+						onDecrement();
+						break;
+					case 'ArrowUp':
+						onIncrement();
+						break;
+					case 'Enter':
+						debouncedSetValueRef.current?.cancel();
+						setValue(value);
+						break;
+					case 'ArrowLeft':
+					case 'ArrowRight':
+					case 'Tab':
+					case 'Backspace':
+						return;
+					default:
+				}
+				if (!key.match(/^[\-\d\.]*$/)) {
+					e.preventDefault(); // kill anything that's not a number
+				}
+			},
+			onChangeText = (value) => {
+				if (value === '') {
+					value = 0; // empty string makes value null
+				} else if (value.match(/\.$/)) { // value ends with a decimal point
+					// don't parseFloat, otherwise we'll lose the decimal point
+				} else if (value.match(/0$/)) { // value ends with a zero
+					// don't parseFloat, otherwise we'll lose the ability to do things like 1.03
+				} else {
+					value = parseFloat(value, 10);
+				}
+				if (value < minValue) {
+					value = minValue;
+				} else if (value > maxValue) {
+					value = maxValue;
+				}
+				setLocalValue(value);
+				debouncedSetValueRef.current(value);
+			},
+			onDecrement = () => {
+				let localValue = value;
+				if (minValue && localValue === minValue) {
+					return;
+				}
+				if (!localValue) {
+					localValue = 0;
+				}
+				localValue = parseFloat(localValue, 10) - step;
+				if (minValue > localValue) {
+					localValue = minValue;
+				}
+				setValue(localValue);
+			},
+			onIncrement = () => {
+				let localValue = value;
+				if (maxValue && localValue === maxValue) {
+					return;
+				}
+				if (!localValue) {
+					localValue = 0;
+				}
+				localValue = parseFloat(localValue, 10) + step;
+				if (maxValue < localValue) {
+					localValue = maxValue;
+				}
+				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?.cancel(); // Cancel any previous debounced fn
+			debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
+		}, [setValue]);
+
+		useEffect(() => {
+
+			// Make local value conform to externally changed value
+			if (value !== localValue) {
+				setLocalValue(value);
+			}
+	
+		}, [value]);
+
+		let sliderValue = value;
+
+		if (localValue === null || typeof localValue === 'undefined') {
+			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+		}
+
+		if (sliderValue === null || typeof sliderValue === 'undefined') {
+			sliderValue = 0; // If the value is null or undefined, force slider to use zero
+		}
+
+		// convert localValue to string if necessary, because numbers work on web but not mobile; while strings work in both places
+		let inputValue = localValue;
+		if (_.isNumber(inputValue)) {
+			inputValue = '' + inputValue;
+		}
+
+		const sizeProps = {};
+		if (!props.flex && !props.w) {
+			sizeProps.flex = 1;
+		}
+
+		if (sliderValue === 0) {
+			sliderValue = FAKE_ZERO; // Slider doesn't like zero
+		}
+
+		return <Row
+					w="100%"
+					alignItems="center"
+					{...propsToPass}
+				>
+					<InputWithTooltip
+						{...testProps('readout')}
+						value={inputValue}
+						onChangeText={onChangeText}
+						onKeyPress={onInputKeyPress}
+						h="100%"
+						w="50px"
+						p={2}
+						mr={4}
+						bg={styles.FORM_INPUT_BG}
+						_focus={{
+							bg: styles.FORM_INPUT_FOCUS_BG,
+						}}
+						fontSize={styles.SLIDER_READOUT_FONTSIZE}
+						textAlign="center"
+						borderRadius="md"
+						borderWidth={1}
+						borderColor="#bbb"
+						isDisabled={isDisabled}
+						{...props._input}
+					/>
+					<Row flex={1}>
+						<Slider
+							{...testProps('slider')}
+							ref={props.outerRef}
+
+							style={{
+								width: '100%', 
+								height: 40,
+							}}
+							minimumTrackTintColor={styles.SLIDER_MIN_TRACK_COLOR}
+							maximumTrackTintColor={styles.SLIDER_MAX_TRACK_COLOR}
+							thumbTintColor={styles.SLIDER_THUMB_COLOR}
+							minimumValue={minValue}
+							maximumValue={maxValue}
+							step={step}
+							value={sliderValue}
+							onValueChange={(value) => {
+								// This sets the localValue, only for display purposes
+								setLocalValue(value);
+							}}
+							onSlidingComplete={(value) => {
+								// This sets the actual value
+								if (value === FAKE_ZERO) {
+									value = 0;
+								}
+								setValue(value);
+							}}
+						/>
+					</Row>
+				</Row>;
+	},
+	SliderField = withComponent(withValue(SliderElement));
+
+// Tooltip needs us to forwardRef
+export default withTooltip(React.forwardRef((props, ref) => {
+	return <SliderField {...props} outerRef={ref} />;
+}));

package/src/Components/Hoc/withModal.js

@@ -0,0 +1,177 @@
+import React, { useState, useRef, useEffect, } from 'react';
+import {
+	Box,
+	Button,
+	Column,
+	Icon,
+	Modal,
+	Row,
+	Text,
+} from 'native-base';
+import Panel from '../Panel/Panel.js';
+import TriangleExclamation from '../Icons/TriangleExclamation.js';
+import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import testProps from '../../Functions/testProps.js';
+import _ from 'lodash';
+
+export default function withModal(WrappedComponent) {
+	return (props) => {
+
+		if (props.disableWithModal || props.showModal) {
+			return <WrappedComponent {...props} />;
+		}
+
+		const
+			[title, setTitle] = useState(''),
+			[message, setMessage] = useState(''),
+			[canClose, setCanClose] = useState(true),
+			[includeCancel, setIncludeCancel] = useState(false),
+			[isModalShown, setIsModalShown] = useState(false),
+			[onOk, setOnOk] = useState(),
+			[onYes, setOnYes] = useState(),
+			[onNo, setOnNo] = useState(),
+			[customButtons, setCustomButtons] = useState(),
+			[color, setColor] = useState('#000'),
+			autoFocusRef = useRef(null),
+			cancelRef = useRef(null),
+			[width, height] = useAdjustedWindowSize(400, 250),
+			onCancel = () => {
+				setIsModalShown(false);
+			},
+			showModal = (args) => {
+				const {
+					title = '',
+					message = '',
+					canClose = true,
+					includeCancel = false,
+					onOk,
+					onYes,
+					onNo,
+					customButtons,
+					color,
+				} = args;
+
+				if (title) {
+					setTitle(title);
+				}
+				if (!message) {
+					throw new Error('Message is required for showModal');
+				}
+				setMessage(message);
+				setCanClose(canClose);
+				setIncludeCancel(includeCancel);
+				if (onOk) {
+					setOnOk(() => onOk);
+				}
+				if (onYes) {
+					setOnYes(() => onYes);
+				}
+				if (onNo) {
+					setOnNo(() => onNo);
+				}
+				if (customButtons) {
+					setCustomButtons(customButtons);
+				}
+				if (color) {
+					setColor(color);
+				}
+
+				setIsModalShown(true);
+			};
+
+		let buttons = [];
+		if (isModalShown) {
+			if (includeCancel) {
+				buttons.push(<Button
+									{...testProps('cancelBtn')}
+									key="cancelBtn"
+									onPress={onCancel}
+									color="#fff"
+									colorScheme="coolGray"
+									variant="ghost" // or unstyled
+									ref={cancelRef}
+								>Cancel</Button>);
+			}
+			if (onOk) {
+				buttons.push(<Button
+								{...testProps('okBtn')}
+								key="okBtn"
+								ref={autoFocusRef}
+								onPress={onOk}
+								color="#fff"
+							>OK</Button>);
+			}
+			if (onNo) {
+				buttons.push(<Button
+								{...testProps('noBtn')}
+								key="noBtn"
+								onPress={onNo}
+								color="trueGray.800"
+								variant="ghost"
+								// colorScheme="neutral"
+								mr={2}
+							>No</Button>);
+			}
+			if (onYes) {
+				buttons.push(<Button
+								{...testProps('yesBtn')}
+								key="yesBtn"
+								ref={autoFocusRef}
+								onPress={onYes}
+								color="#fff"
+								// colorScheme="danger"
+							>Yes</Button>);
+			}
+			if (customButtons) {
+				_.each(customButtons, (button) => {
+					buttons.push(button);
+				});
+			}
+		}
+
+		return <>
+					<WrappedComponent
+						{...props}
+						disableWithModal={false}
+						showModal={showModal}
+						hideModal={onCancel}
+					/>
+					{isModalShown && 
+						<Modal
+							isOpen={true}
+							onClose={onCancel}
+						>
+							<Panel
+								{...props}
+								reference="modal"
+								isCollapsible={false}
+								bg="#fff"
+								w={width}
+								h={height}
+								flex={null}
+							>
+
+								{title && <Modal.Header>{title}</Modal.Header>}
+								<Modal.Body
+									borderTopWidth={0}
+									bg="#fff"
+									p={3}
+									justifyContent="center"
+									alignItems="center"
+									borderRadius={5}
+									flexDirection="row"
+								>
+									<Box w="50px" mx={2}>
+										<Icon as={TriangleExclamation} color={color} size="10" />
+									</Box>
+									<Text flex={1} color={color} fontSize="18px">{message}</Text>
+								</Modal.Body>
+								<Modal.Footer py={2} pr={4} justifyContent="flex-end">
+									{buttons}
+								</Modal.Footer>
+							</Panel>
+						</Modal>}
+					
+				</>;
+	};
+}

package/src/Components/index.js

@@ -222,6 +222,7 @@ import Panel from './Panel/Panel.js';
 // import Picker from '../Components/Panel/Picker.js';
 import PlusMinusButton from './Buttons/PlusMinusButton.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
+import Slider from './Form/Field/Slider.js';
 import SquareButton from './Buttons/SquareButton.js';
 import TabPanel from './Panel/TabPanel.js';
 import Tag from './Form/Field/Tag/Tag.js';
@@ -457,6 +458,7 @@ const components = {
 	// Picker,
 	PlusMinusButton,
 	RadioGroup,
+	Slider,
 	Row,
 	SquareButton,
 	TabPanel,

package/src/Constants/Styles.js

@@ -98,6 +98,10 @@ const defaults = {
 	REORDER_BORDER_COLOR: '#23d9ea',
 	REORDER_BORDER_WIDTH: 4,
 	REORDER_BORDER_STYLE: 'dashed',
+	SLIDER_MIN_TRACK_COLOR: '#000',
+	SLIDER_MAX_TRACK_COLOR: '#ccc',
+	SLIDER_THUMB_COLOR: '#000',
+	SLIDER_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
 	TAB_ACTIVE_BG: 'trueGray.200',
 	TAB_ACTIVE_HOVER_BG: 'trueGray.200',
 	TAB_ACTIVE_COLOR: 'primary.800',