@onehat/ui 0.3.381 → 0.4.0

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

@@ -1,26 +1,36 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
-	Input,
-	Tooltip,
-} from 'native-base';
+	Input, InputField, InputIcon, InputSlot,
+	Pressable,
+} from '../../Gluestack';
+import {
+	hasWidth,
+	hasFlex,
+} from '../../../Functions/tailwindFunctions.js';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
+import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
-function InputElement(props) {
+const InputElement = forwardRef((props, ref) => {
 	let { // so localValue can be changed, if needed
+			testID,
 			value,
 			setValue,
 			autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
 			autoSubmitDelay = UiGlobals.autoSubmitDelay,
-			autoCapitalize = 'none',
+			disableAutoFlex = false,
 			maxLength,
 			onKeyPress,
 			onChangeText,
-			tooltip = null,
-			tooltipPlacement = 'bottom',
-			self,
+			leftElement,
+			leftIcon,
+			leftIconHandler,
+			rightElement,
+			rightIcon,
+			rightIconHandler,
+			placeholder,
 		} = props,
 		styles = UiGlobals.styles,
 		debouncedSetValueRef = useRef(),
@@ -94,39 +104,79 @@ function InputElement(props) {
 		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
 	}
 
-	const sizeProps = {};
-	if (!props.flex && !props.w) {
-		sizeProps.flex = 1;
+	const style = props.style || {};
+	// auto-set width to flex if it's not already set another way
+	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
+		style.flex = 1;
 	}
-	
-	let component = <Input
-						ref={props.outerRef}
-						onChangeText={onChangeTextLocal}
-						_input={{
-							onKeyPress: onKeyPressLocal,
-						}}
-						fontSize={styles.FORM_INPUT_FONTSIZE}
-						bg={styles.FORM_INPUT_BG}
-						_focus={{
-							bg: styles.FORM_INPUT_FOCUS_BG,
-						}}
-						autoCapitalize={autoCapitalize}
-						{...sizeProps}
-						{...props}
-						value={localValue}
-					/>;
-	if (tooltip) {
-		component = <Tooltip label={tooltip} placement={tooltipPlacement}>
-						{component}
-					</Tooltip>;
+	let inputClassName = `
+			Input
+			flex-1
+			block
+			h-auto
+			${styles.FORM_INPUT_BG}
+			${styles.FORM_INPUT_BG_FOCUS}
+			${styles.FORM_INPUT_BG_HOVER}
+		`,
+		inputFieldClassName = `
+			InputField
+			min-h-[40px]
+			w-full
+			p-2
+			text-left
+			${styles.FORM_INPUT_FONTSIZE}
+			${styles.FORM_INPUT_BG}
+			${styles.FORM_INPUT_BG_FOCUS}
+			${styles.FORM_INPUT_BG_HOVER}
+		`;
+	if (props.className) {
+		inputClassName += props.className;
+		inputFieldClassName += props.className;
 	}
-	return component;
-}
+	
+	return <Input
+				className={inputClassName}
+				style={style}
+			>
+				{leftElement &&
+					<InputSlot>{leftElement}</InputSlot>}
+				
+				{leftIcon && leftIconHandler && 
+					<Pressable onPress={leftIconHandler}>
+						<InputIcon className="ml-2">
+							{leftIcon}
+						</InputIcon>
+					</Pressable>}
+				{leftIcon && !leftIconHandler && 
+					<InputIcon className="ml-2">
+						{leftIcon}
+					</InputIcon>}
+
+				<InputField
+					ref={ref}
+					onChangeText={onChangeTextLocal}
+					onKeyPress={onKeyPressLocal}
+					value={localValue}
+					className={inputFieldClassName}
+					dataFocusVisible={true}
+					variant="outline"
+					placeholder={placeholder}
+				/>
+
+				{rightElement &&
+					<InputSlot>{rightElement}</InputSlot>}
 
-const
-	InputField = withComponent(withValue(InputElement)),
-	InputForwardRef = React.forwardRef((props, ref) => {
-		return <InputField {...props} outerRef={ref} component="Input" />;
-	});
+				{rightIcon && rightIconHandler && 
+					<Pressable onPress={rightIconHandler}>
+						<InputIcon className="mr-2">
+							{rightIcon}
+						</InputIcon>
+					</Pressable>}
+				{rightIcon && !rightIconHandler && 
+					<InputIcon className="mr-2">
+						{rightIcon}
+					</InputIcon>}
+			</Input>;
+});
 
-export default InputForwardRef;
+export default withComponent(withValue(withTooltip(InputElement)));

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

@@ -1,9 +1,9 @@
 import {
-	Row,
+	HStack,
 	Tooltip,
-} from 'native-base';
+} from '../../Gluestack';
 import {
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
 import UiGlobals from '../../../UiGlobals.js';
@@ -35,15 +35,23 @@ export function JsonElement(props) {
 
 	let assembledComponents = null;
 	
-	if (UiGlobals.mode === UI_MODE_WEB) {
-		const src = JSON.parse(value);
+	if (UiGlobals.mode === UI_MODE_NATIVE) {
+		throw new Error('JsonElement not yet implemented for React Native');
+	}
+
+	let className = `
+		Json
+		flex-1
+		justify-start
+		${testID}
+	`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	// if (UiGlobals.mode === UI_MODE_WEB) {
+		const src = value ? JSON.parse(value) : {};
 		assembledComponents = 
-			<Row
-				flex={1}
-				{...propsToPass}
-				justifyContent="flex-start"
-				testID={testID}
-			>
+			<HStack style={props.style} className={className}>
 				<JsonEditor
 					width="100%"
 					editable={!isViewOnly}
@@ -55,19 +63,15 @@ export function JsonElement(props) {
 					}}
 					{...props}
 				/>
-			</Row>;
-
-	}
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
-		throw new Error('JsonElement not yet implemented for React Native');
-	}
+			</HStack>;
+	// }
 	
 	if (tooltip) {
-		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
-								{assembledComponents}
-							</Tooltip>;
+		// assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+		// 						{assembledComponents}
+		// 					</Tooltip>;
 	}
 	return assembledComponents;
-};
+}
 
 export default withComponent(withValue(JsonElement));

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

@@ -1,12 +1,12 @@
 
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Icon,
-	Input,
-	Row,
-} from 'native-base';
+	HStack,
+} from '../../Gluestack';
+import Decimal from 'decimal.js';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
+import Input from './Input.js';
 import testProps from '../../../Functions/testProps.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -27,7 +27,6 @@ function NumberElement(props) {
 			tooltip = null,
 			isDisabled = false,
 			testID,
-			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
 		debouncedSetValueRef = useRef(),
@@ -57,15 +56,16 @@ function NumberElement(props) {
 			}
 		},
 		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);
+			if (!_.isNil(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);
@@ -78,7 +78,7 @@ function NumberElement(props) {
 			if (!localValue) {
 				localValue = 0;
 			}
-			localValue = parseFloat(localValue, 10) -1;
+			localValue = new Decimal(localValue).minus(1).toNumber();
 			setValue(localValue);
 		},
 		onIncrement = () => {
@@ -89,7 +89,7 @@ function NumberElement(props) {
 			if (!localValue) {
 				localValue = 0;
 			}
-			localValue = parseFloat(localValue, 10) +1;
+			localValue = new Decimal(localValue).plus(1).toNumber();
 			setValue(localValue);
 		};
 	
@@ -123,62 +123,81 @@ function NumberElement(props) {
 		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}
-				{...propsToPass}
+	let className = `
+		Number
+		flex
+		h-full
+		items-center
+		max-h-[40px]
+		p-0
+		border
+		border-grey-400
+		rounded-[6px]
+	`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+
+	return <HStack
+				className={className}
 			>
 				<IconButton
 					{...testProps('decrementBtn')}
-					icon={<Icon as={Minus} color={(isDecrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
+					icon={Minus}
+					_icon={{
+						className: 'text-grey-500',
+					}}
 					onPress={onDecrement}
 					isDisabled={isDecrementDisabled || isDisabled}
-					h="100%"
-					flex={1}
-					maxWidth={10}
-					_hover={{
-						bg: isDecrementDisabled ? null : 'trueGray.400',
+					className={`
+						decrementBtn
+						h-full
+						rounded-r-none
+					`}
+					style={{
+						width: 40,
 					}}
-					borderRightRadius={0}
-					zIndex={10}
 				/>
 				<InputWithTooltip
 					testID={testID}
 					value={inputValue}
 					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}
 					isDisabled={isDisabled}
+					tooltip={tooltip}
+					className={`
+						InputWithTooltip
+						h-full
+						text-center
+						rounded-none
+						${styles.FORM_INPUT_FONTSIZE}
+						${styles.FORM_INPUT_BG}
+						${styles.FORM_INPUT_BG_HOVER}
+						${styles.FORM_INPUT_BG_FOCUS}
+					`}
+					style={{
+						flex: 3
+					}}
 					{...props._input}
 				/>
 				<IconButton
 					{...testProps('incrementBtn')}
-					icon={<Icon as={Plus} color={(isIncrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
+					icon={Plus}
+					_icon={{
+						className: 'text-grey-500',
+					}}
 					onPress={onIncrement}
 					isDisabled={isIncrementDisabled || isDisabled}
-					h="100%"
-					flex={1}
-					maxWidth={10}
-					_hover={{
-						bg: isIncrementDisabled ? null : 'trueGray.400',
+					className={`
+						incrementBtn
+						h-full
+						rounded-l-none
+					`}
+					style={{
+						width: 40,
 					}}
-					borderLeftRadius={0}
-					zIndex={10}
 				/>
-			</Row>;
+			</HStack>;
 }
 
 export default withComponent(withValue(NumberElement));

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

@@ -1,9 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Column,
-	Radio,
-	Row,
-} from 'native-base';
+	Radio, RadioGroup,
+} from '../../../Gluestack';
 import testProps from '../../../../Functions/testProps.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
@@ -55,9 +53,9 @@ const
 		}, [value]);
 
 		// return <Radio.Group onChange={props.setValue} accessibilityLabel={props.name} ref={props.outerRef} {...props}> // RadioGroup from NativeBase doesn't yet allow refs
-		return <Radio.Group onChange={props.setValue} accessibilityLabel={props.name} {...props}>
+		return <RadioGroup onChange={props.setValue} accessibilityLabel={props.name} {...props}>
 					{radios}
-				</Radio.Group>;
+				</RadioGroup>;
 	},
 	RadioGroupField = withComponent(withValue(withData(RadioGroupElement)));
 

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

@@ -0,0 +1,33 @@
+import { useMemo, } from 'react';
+import {
+	HStack,
+} from '../../../Gluestack';
+import Select from './Select.js';
+
+export default function PageSizeSelect(props) {
+	const {
+			Repository,
+			pageSize,
+		} = props;
+
+	return useMemo(() => {
+		return <HStack className="PageSizeSelect-HStack w-[70px] ml-3">
+					<Select
+						data={[
+							// [ 1, '1', ],
+							[ 5, '5', ],
+							[ 10, '10', ],
+							[ 20, '20', ],
+							[ 50, '50', ],
+							[ 100, '100', ],
+						]}
+						value={pageSize}
+						onChangeValue={(value) => Repository.setPageSize(value)}
+						tooltip="Page Size"
+					/>
+				</HStack>;
+	}, [
+		Repository,
+		pageSize,
+	]);
+}

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

@@ -0,0 +1,109 @@
+import { forwardRef, useState, useEffect, useRef, } from 'react';
+import {
+	Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectIcon,  SelectItem,  SelectPortal, SelectTrigger,
+} from '../../../Gluestack';
+import {
+	hasWidth,
+	hasFlex,
+} from '../../../../Functions/tailwindFunctions.js';
+import UiGlobals from '../../../../UiGlobals.js';
+import withComponent from '../../../Hoc/withComponent.js';
+import withTooltip from '../../../Hoc/withTooltip.js';
+import withValue from '../../../Hoc/withValue.js';
+import CaretDown from '../../../Icons/CaretDown.js';
+import _ from 'lodash';
+
+const SelectElement = forwardRef((props, ref) => {
+	let { // so localValue can be changed, if needed
+			data = [], // in format [ [ value, label, ], ... ]
+			value,
+			setValue,
+			onKeyPress,
+			placeholder,
+			disableAutoFlex = false,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		// debouncedSetValueRef = useRef(),
+		// [localValue, setLocalValue] = useState(value),
+		// onKeyPressLocal = (e) => {
+		// 	if (e.key === 'Enter') {
+		// 		debouncedSetValueRef.current?.cancel();
+		// 		setValue(localValue);
+		// 	}
+		// 	if (onKeyPress) {
+		// 		onKeyPress(e, localValue);
+		// 	}
+		// },
+		items = data.map(([ value, label, ], key) => {
+			return <SelectItem key={key} label={label} value={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?.cancel(); // Cancel any previous debounced fn
+	// 	debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
+
+	// }, [setValue]);
+		
+	// useEffect(() => {
+
+	// 	if (value !== localValue) {
+	// 		// 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 select
+	// }
+
+	const style = props.style || {};
+	// auto-set width to flex if it's not already set another way
+	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
+		style.flex = 1;
+	}
+	let className = `
+		Select
+		min-h-[40px]
+		w-full
+		text-left
+		rounded-lg
+		${styles.FORM_SELECT_FONTSIZE}
+		${styles.FORM_SELECT_BG}
+		${styles.FORM_SELECT_BG_FOCUS}
+		${styles.FORM_SELECT_BG_HOVER}
+	`;
+	if (props.className) {
+		className += props.className;
+	}
+
+	return <Select
+				{...propsToPass}
+				ref={ref}
+				onValueChange={setValue}
+				selectedValue={value}
+				closeOnOverlayClick={true}
+				className={className}
+				style={style}
+			>
+				<SelectTrigger variant="outline" size="md" className="SelectTrigger" >
+					<SelectInput placeholder={placeholder} className="SelectInput" />
+					<SelectIcon className="mr-3" as={CaretDown} />
+				</SelectTrigger>
+				<SelectPortal className="SelectPortal">
+					<SelectBackdrop />
+					<SelectContent className="SelectContent">
+						<SelectDragIndicatorWrapper>
+							<SelectDragIndicator />
+						</SelectDragIndicatorWrapper>
+						{items}
+					</SelectContent>
+				</SelectPortal>
+			</Select>;
+});
+
+export default withComponent(withValue(withTooltip(SelectElement)));