@onehat/ui 0.3.381 → 0.4.0

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

@@ -1,8 +1,13 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '../../Gluestack';
+import {
+	hasWidth,
+	hasFlex,
+} from '../../../Functions/tailwindFunctions.js';
+import Decimal from 'decimal.js';
 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';
@@ -28,7 +33,6 @@ const
 				tooltip = null,
 				isDisabled = false,
 				testID,
-				...propsToPass
 			} = props,
 			styles = UiGlobals.styles,
 			debouncedSetValueRef = useRef(),
@@ -58,7 +62,7 @@ const
 				}
 			},
 			onChangeText = (value) => {
-				if (value === '') {
+				if (!value || 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
@@ -83,7 +87,7 @@ const
 				if (!localValue) {
 					localValue = 0;
 				}
-				localValue = parseFloat(localValue, 10) - step;
+				localValue = new Decimal(localValue).minus(step).toNumber();
 				if (minValue > localValue) {
 					localValue = minValue;
 				}
@@ -97,7 +101,7 @@ const
 				if (!localValue) {
 					localValue = 0;
 				}
-				localValue = parseFloat(localValue, 10) + step;
+				localValue = new Decimal(localValue).plus(step).toNumber();
 				if (maxValue < localValue) {
 					localValue = maxValue;
 				}
@@ -136,46 +140,50 @@ const
 			inputValue = '' + inputValue;
 		}
 
-		const sizeProps = {};
-		if (!props.flex && !props.w) {
-			sizeProps.flex = 1;
+		const style = props.style || {};
+		if (!hasWidth(props) && !hasFlex(props)) {
+			style.flex = 1;
 		}
 
 		if (sliderValue === 0) {
 			sliderValue = FAKE_ZERO; // Slider doesn't like zero
 		}
 
-		return <Row
-					w="100%"
-					alignItems="center"
-					{...propsToPass}
+		let className = `
+			w-full
+			items-center
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
+		
+		return <HStack
+					className={className}
+					style={props.style}
 				>
 					<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}
+						disableAutoFlex={true}
+						className={`
+							InputWithTooltip
+							h-full
+							w-[50px]
+							p-2
+							mr-4
+							text-center
+							rounded-md
+							${styles.SLIDER_READOUT_FONTSIZE}
+						`}
 						{...props._input}
 					/>
-					<Row flex={1}>
+					<HStack className="flex-1">
 						<Slider
 							{...testProps('slider')}
 							ref={props.outerRef}
-
 							style={{
 								width: '100%', 
 								height: 40,
@@ -199,8 +207,8 @@ const
 								setValue(value);
 							}}
 						/>
-					</Row>
-				</Row>;
+					</HStack>
+				</HStack>;
 	},
 	SliderField = withComponent(withValue(SliderElement));
 

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

@@ -1,15 +1,15 @@
-import { useState, useRef, } from 'react';
+import { useRef, } from 'react';
 import {
-	Column,
-	Modal,
-	Row,
-} from 'native-base';
+	HStack,
+	VStack,
+} from '../../../Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../../Constants/Editor.js';
 import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
+import withModal from '../../../Hoc/withModal.js';
 import withValue from '../../../Hoc/withValue.js';
 import ValueBox from './ValueBox.js';
 import Combo, { ComboEditor } from '../Combo/Combo.js';
@@ -22,6 +22,8 @@ function TagComponent(props) {
 			isViewOnly = false,
 			isValueAlwaysArray,
 			isValueAsStringifiedJson,
+			isFilter = false,
+			minimizeForRow = false,
 			Editor,
 			_combo = {},
 			tooltip,
@@ -38,20 +40,22 @@ function TagComponent(props) {
 			// withValue
 			value = [],
 			setValue,
+
+			// withModal
+			showModal,
+			hideModal,
+
 			...propsToPass // break connection between Tag and Combo props
 		} = props,
 		styles = UiGlobals.styles,
 		valueRef = useRef(value),
 		ignoreNextComboValueChangeRef = useRef(false),
-		[isViewerShown, setIsViewerShown] = useState(false),
-		[viewerSelection, setViewerSelection] = useState([]),
 		getIgnoreNextComboValueChange = () => {
 			return ignoreNextComboValueChangeRef.current;
 		},
 		setIgnoreNextComboValueChange = (bool) => {
 			ignoreNextComboValueChangeRef.current = bool;
 		},
-		onViewerClose = () => setIsViewerShown(false),
 		onView = async (item, e) => {
 			const
 				id = item.id,
@@ -69,8 +73,22 @@ function TagComponent(props) {
 				return;
 			}
 
-			setViewerSelection([record]);
-			setIsViewerShown(true);
+			showModal({
+				body: <Editor
+							editorType={EDITOR_TYPE__WINDOWED}
+							{...propsToPass}
+							parent={self}
+							reference="viewer"
+							isEditorViewOnly={true}
+							selection={[record]}
+							onEditorClose={hideModal}
+							className={`
+								w-full
+								p-0
+							`}
+						/>,
+				onCancel: hideModal,
+			});
 		},
 		clearComboValue = () => {
 			setIgnoreNextComboValueChange(true); // we're clearing out the value of the underlying Combo, so ignore it when this combo submits the new value change
@@ -224,76 +242,74 @@ function TagComponent(props) {
 		WhichCombo = ComboEditor;
 	}
 
-	const sizeProps = {};
+	if (propsToPass.selectorId) {
+		_combo.selectorId = propsToPass.selectorId;
+		_combo.selectorSelected = propsToPass.selectorSelected;
+	}
+
+	let className = `
+		Tag
+		p-0
+	`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	const style = {};
 	if (!props.flex && !props.w) {
-		sizeProps.flex = 1;
+		style.flex = 1;
 	} else {
 		if (props.w) {
-			sizeProps.w = props.w;
+			style.width = props.w;
 		}
 		if (props.flex) {
-			sizeProps.flex = props.flex;
+			style.flex = props.flex;
 		}
 	}
-
-	if (propsToPass.selectorId) {
-		_combo.selectorId = propsToPass.selectorId;
-		_combo.selectorSelected = propsToPass.selectorSelected;
+	if (props.style) {
+		_.assign(style, props.style); // needed for grid; otherwise valuebox width can be too wide
 	}
-
-	return <>
-				<Column
-					{...props}
-					{...sizeProps}
-					px={0}
-					py={0}
-				>
-					<Row
-						w="100%"
-						borderWidth={1}
-						borderColor="trueGray.300"
-						borderRadius="md"
-						bg="trueGray.100"
-						p={styles.FORM_TAG_PADDING}
-						mb={styles.FORM_TAG_MB}
-						minHeight={styles.FORM_TAG_MIN_HEIGHT}
-						flexWrap="wrap"
-					>{valueBoxes}</Row>
-					{!isViewOnly && <WhichCombo
-										Repository={props.Repository}
-										Editor={props.Editor}
-										onChangeValue={onChangeComboValue}
-										parent={self}
-										reference="combo"
-										isInTag={true}
-										onGridAdd={onGridAdd}
-										onGridSave={onGridSave}
-										onGridDelete={onGridDelete}
-										tooltip={tooltip}
-										usePermissions={props.usePermissions}
-										{..._combo}
-									/>}
-				</Column>
-				{isViewerShown && 
-					<Modal
-						isOpen={true}
-						onClose={onViewerClose}
-					>
-						<Editor
-							editorType={EDITOR_TYPE__WINDOWED}
-							{...propsToPass}
-							px={0}
-							py={0}
-							w="100%"
-							parent={self}
-							reference="viewer"
-
-							isEditorViewOnly={true}
-							selection={viewerSelection}
-							onEditorClose={onViewerClose}
-						/>
-					</Modal>}
-			</>;
+	let valueBoxesClassName = `
+		Tag-valueBoxes-container
+		w-full
+		flex-wrap
+		max-h-[200px]
+		overflow-auto
+		border
+		border-grey-300
+		rounded-md
+		bg-grey-100
+		${styles.FORM_TAG_MIN_HEIGHT}
+		${styles.FORM_TAG_MB}
+		${styles.FORM_TAG_PADDING}
+	`,
+	comboClassName = '';
+	if (minimizeForRow) {
+		valueBoxesClassName += ' h-auto min-h-0 flex-1 max-h-[50px] overflow-auto';
+		comboClassName += ' h-auto min-h-0 flex-1';
+	}
+	
+	
+	return <VStack
+				className={className}
+				style={style}
+			>
+				<HStack className={valueBoxesClassName}>{valueBoxes}</HStack>
+				
+				{!isViewOnly && <WhichCombo
+									Repository={props.Repository}
+									Editor={props.Editor}
+									onChangeValue={onChangeComboValue}
+									parent={self}
+									reference="combo"
+									isInTag={true}
+									onGridAdd={onGridAdd}
+									onGridSave={onGridSave}
+									onGridDelete={onGridDelete}
+									tooltip={tooltip}
+									usePermissions={props.usePermissions}
+									{..._combo}
+								/>}
+			</VStack>;
 	
 }
 

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

@@ -1,7 +1,7 @@
 import {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '../../../Gluestack';
 import testProps from '../../../../Functions/testProps.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';
@@ -16,41 +16,46 @@ export default function ValueBox(props) {
 			onDelete,
 		} = props,
 		styles = UiGlobals.styles;
-	return <Row
+	return <HStack
 				{...testProps('valueBox-' + text)}
-				borderWidth={1}
-				borderColor="trueGray.400"
-				borderRadius="md"
-				mr={1}
-				bg="trueGray.200"
-				alignItems="center"
-				maxWidth="100%"
+				className={`
+					max-w-full
+					items-center
+					mr-1
+					bg-grey-100
+					border
+					border-grey-400
+					rounded-md
+					${!onDelete && 'pr-4'}
+				`}
 			>
 				<IconButton
 					{...testProps('eyeBtn')}
+					icon={Eye}
 					_icon={{
-						as: Eye,
-						color: 'trueGray.600',
 						size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
+						className: 'text-grey-600',
 					}}
 					onPress={onView}
-					h="100%"
+					className="h-full"
 				/>
 				<Text
-					color="trueGray.600"
-					mr={onDelete ? 0 : 2}
-					fontSize={styles.FORM_TAG_VALUEBOX_FONTSIZE}
+					className={`
+						text-grey-600
+						${styles.FORM_TAG_VALUEBOX_FONTSIZE}
+						${onDelete ? 'mr-0' : 'mr-1'}
+					`}
 				>{text}</Text>
 				{onDelete &&
 					<IconButton
 						{...testProps('xBtn')}
+						icon={Xmark}
 						_icon={{
-							as: Xmark,
-							color: 'trueGray.600',
 							size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
+							className: 'text-grey-600',
 						}}
 						onPress={onDelete}
-						h="100%"
+						className="h-full"
 					/>}
-			</Row>;
+			</HStack>;
 }

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import {
-	Text,
-} from 'native-base';
+	TextNative,
+} from '../../Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -9,20 +9,29 @@ import withTooltip from '../../Hoc/withTooltip.js';
 const
 	TextElement = (props) => {
 		const styles = UiGlobals.styles;
-		return <Text
+
+		let className = `
+			Text
+			flex-1
+			min-h-[40px]
+			px-3
+			py-2
+			${styles.FORM_TEXT_FONTSIZE}
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
+		
+		return <TextNative
 					ref={props.outerRef}
-					ellipsizeMode="head" 
-					flex={1}
-					fontSize={styles.FORM_TEXT_FONTSIZE}
-					minHeight='40px'
-					px={3}
-					py={2}
+					ellipsizeMode="head"
 					{...props}
-				>{props.value}</Text>;
+					className={className}
+				>{props.value}</TextNative>;
 	},
 	TextField = withComponent(TextElement); // NOT using withValue on Text element, as this element is simply for display purposes!
 
 // Tooltip needs us to forwardRef
-export default withTooltip(React.forwardRef((props, ref) => {
+export default withTooltip(forwardRef((props, ref) => {
 	return <TextField {...props} outerRef={ref} />;
 }));

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	TextArea,
-} from 'native-base';
+	Textarea, TextareaInput,
+} from '../../Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -15,6 +15,8 @@ const
 				autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
 				autoSubmitDelay = UiGlobals.autoSubmitDelay,
 				onChangeText,
+				placeholder,
+				minimizeForRow = false,
 			} = props,
 			value = _.isNil(props.value) ? '' : props.value, // null value may not actually reset this TextArea, so set it explicitly to empty string
 			styles = UiGlobals.styles,
@@ -75,20 +77,35 @@ const
 		if (localValue === null || typeof localValue === 'undefined') {
 			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
 		}
+		let textareaClassName = `
+				Textarea
+			`,
+			inputClassName = `
+				TextAreaInput
+				flex-1
+				${styles.FORM_TEXTAREA_BG}
+				${styles.FORM_TEXTAREA_FONTSIZE}
+				${styles.FORM_TEXTAREA_HEIGHT}
+			`;
+		if (props.className) {
+			inputClassName += ' ' + props.className;
+		}
+		if (minimizeForRow) {
+			textareaClassName += ' max-h-[50px] overflow-auto';
+		}
 
-		return <TextArea
-					ref={props.outerRef}
-					onChangeText={onChangeTextLocal}
-					flex={1}
-					bg={styles.FORM_TEXTAREA_BG}
-					_focus={{
-						bg: styles.FORM_TEXTAREA_BG,
-					}}
-					fontSize={styles.FORM_TEXTAREA_FONTSIZE}
-					h={styles.FORM_TEXTAREA_HEIGHT}
-					{...props}
-					value={localValue}
-				/>;
+		return <Textarea className={textareaClassName}>
+					<TextareaInput
+						ref={props.outerRef}
+						onChangeText={onChangeTextLocal}
+						_focus={{
+							bg: styles.FORM_TEXTAREA_BG,
+						}}
+						value={localValue}
+						className={inputClassName}
+						placeholder={placeholder}
+					/>
+				</Textarea>;
 	},
 	TextAreaField = withComponent(withValue(TextAreaElement));
 

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

@@ -1,15 +1,15 @@
 import React, { useRef, } from 'react';
 import {
+	HStack,
 	Icon,
 	Pressable,
-	Row,
 	Switch,
 	Text,
-} from 'native-base';
+} from '../../Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Na from '../../Icons/Na.js';
-import testProps from '../../../Functions/testProps.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';
@@ -22,7 +22,6 @@ const
 				setValue,
 				onText = 'Yes',
 				offText = 'No',
-
 				flex, // flex doesn't work right on mobile
 				...propsToPass
 			} = props,
@@ -45,34 +44,51 @@ const
 				}
 			};
 
+		let className = `
+			Toggle
+			h-full
+			items-center
+			py-[2px]
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
+
 		if (_.isNil(value)) {
-			return <IconButton
-						{...testProps('naBtn')}
-						ref={props.outerRef}
-						icon={<Icon as={Na} color="trueGray.400" />}
-						onPress={onToggle}
-						borderWidth={1}
-						borderColor="trueGray.700"
-					/>;
+			return <HStack className={className}>
+						<IconButton
+							{...testProps('naBtn')}
+							ref={props.outerRef}
+							icon={Na}
+							_icon={{
+								className: 'text-grey-400',
+							}}
+							onPress={onToggle}
+							className={`
+								border
+								border-grey-700
+							`}
+						/>
+					</HStack>;
 		}
 
-		return <Row alignItems="center">
+		return <HStack className={className}>
 					<Pressable
 						{...testProps('nullifyBtn')}
 						onPress={onNullify}
+						className="justify-start"
 					>
 						<Switch
 							ref={props.outerRef}
 							onToggle={onToggle}
-							isChecked={!!value}
-							bg={styles.FORM_TOGGLE_BG}
+							value={!!value}
 							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,
+							trackColor={{
+								false: styles.FORM_TOGGLE_OFF_COLOR,
+								true: styles.FORM_TOGGLE_ON_COLOR,
 							}}
+							thumbColor="#eee"
+							activeThumbColor="#eee"
 							{...propsToPass}
 						/>
 					</Pressable>
@@ -82,12 +98,14 @@ const
 					>
 						<Text
 							{...testProps('readout')}
-							ml={1}
-							mr={2}
-							fontSize={styles.FORM_TOGGLE_FONTSIZE}
+							className={`
+								ml-1
+								mr-2
+								${styles.FORM_TOGGLE_FONTSIZE}
+							`}
 						>{_.isNil(value) ? 'N/A' : (!!value ? onText : offText)}</Text>
 					</Pressable>
-				</Row>;
+				</HStack>;
 	},
 	ToggleField = withComponent(withValue(ToggleElement));