@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Filter/NumberRange.js

@@ -1,99 +1,103 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
 import Number from '../Form/Field/Number.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
-	const
-		NumberRange = (props) => {
-			const {
-					value = {
-						low: null,
-						high: null,
-					},
-					setValue,
-					tooltip = '',
-
-					minValue = 0,
-					maxValue,
-					...propsToPass
-				} = props,
-				[low, setLow] = useState(''),
-				[high, setHigh] = useState(''),
-				onChangeLow = (value) => {
-					setLow(value);
-					const newValue = {
-						low: value,
-						high,
-					};
-					setValue(newValue);
+const
+	NumberRange = (props) => {
+		const {
+				value = {
+					low: null,
+					high: null,
 				},
-				onChangeHigh = (value) => {
-					setHigh(value);
-					const newValue = {
-						low,
-						high: value,
-					};
-					setValue(newValue);
+				setValue,
+				tooltip = '',
+
+				minValue = 0,
+				maxValue,
+			} = props,
+			[low, setLow] = useState(''),
+			[high, setHigh] = useState(''),
+			onChangeLow = (value) => {
+				setLow(value);
+				const newValue = {
+					low: value,
+					high,
+				};
+				setValue(newValue);
+			},
+			onChangeHigh = (value) => {
+				setHigh(value);
+				const newValue = {
+					low,
+					high: value,
 				};
-			
-			useEffect(() => {
+				setValue(newValue);
+			};
+		
+		useEffect(() => {
+
+			// Initialize format of value - needs to be JSON object with combination of two values
+			if (value === null || typeof value === 'undefined') {
+				setValue({
+					low: null,
+					high: null,
+				});
+				return () => {};
+			}
+
+			// Make local value conform to externally changed value
+			if (value.low !== low) {
+				setLow(value.low);
+			}
+			if (value.high !== high) {
+				setHigh(value.high);
+			}
 
-				// Initialize format of value - needs to be JSON object with combination of two values
-				if (value === null || typeof value === 'undefined') {
-					setValue({
-						low: null,
-						high: null,
-					});
-					return () => {};
-				}
-	
-				// Make local value conform to externally changed value
-				if (value.low !== low) {
-					setLow(value.low);
-				}
-				if (value.high !== high) {
-					setHigh(value.high);
-				}
-	
-			}, [value]);
+		}, [value]);
 
-			return <Row
-						justifyContent="center"
-						alignItems="center"
-						flex={1}
-						px={1}
-						{...propsToPass}
-					>
-						<Number
-							{...testProps('low')}
-							value={low}
-							onChangeValue={onChangeLow}
-							startingValue={null}
-							minValue={minValue}
-							maxValue={maxValue}
-							tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
-							maxWidth={120}
-						/>
-						<Text px={2} userSelect="none">to</Text>
-						<Number
-							{...testProps('high')}
-							value={high}
-							onChangeValue={onChangeHigh}
-							startingValue={null}
-							minValue={minValue}
-							maxValue={maxValue}
-							tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
-							maxWidth={120}
-						/>
-					</Row>;
-		},
-		NumberRangeField = withValue(NumberRange);
+		let className = `
+			flex-1
+			justify-center
+			items-center
+			px-1
+			py-[2px]
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
+		
+		return <HStack className={className} style={props.style}>
+					<Number
+						{...testProps('low')}
+						value={low}
+						onChangeValue={onChangeLow}
+						startingValue={null}
+						minValue={minValue}
+						maxValue={maxValue}
+						tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
+						className="max-w-[150px]"
+					/>
+					<Text className="px-2 select-none">to</Text>
+					<Number
+						{...testProps('high')}
+						value={high}
+						onChangeValue={onChangeHigh}
+						startingValue={null}
+						minValue={minValue}
+						maxValue={maxValue}
+						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
+						className="max-w-[150px]"
+					/>
+				</HStack>;
+	},
+	NumberRangeField = withValue(NumberRange);
 
 export default NumberRangeField;
 

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Row,
-} from 'native-base';
+	HStack,
+} from '../Gluestack';
 import UiGlobals from '../../../../UiGlobals.js';
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import './ckeditor.css';
@@ -33,7 +33,7 @@ const
 			debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
 		}, [setValue]);
 
-		return <Row h={h} flex={1} ref={props.outerRef} {...props}>
+		return <HStack ref={props.outerRef} {...props} className={` h-${h} flex-1 `}>
 					<CKEditor
 						editor={Editor}
 						config={config}
@@ -46,7 +46,7 @@ const
 							debouncedSetValueRef.current(value);
 						}}
 					/>
-				</Row>;
+				</HStack>;
 	},
 	CKEditorField = withComponent(withValue(CKEditorElement));
 	

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

@@ -1,9 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Column,
-	Checkbox,
-	Row,
-} from 'native-base';
+	Checkbox, CheckboxGroup,
+} from '../../../Gluestack';
 import testProps from '../../../../Functions/testProps.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
@@ -52,9 +50,14 @@ const
 			setCheckboxes(checkboxes);
 		}, [value]);
 
-		return <Checkbox.Group onChange={props.setValue} accessibilityLabel={props.name} ref={props.outerRef} {...props}>
+		return <CheckboxGroup
+					onChange={props.setValue}
+					accessibilityLabel={props.name}
+					ref={props.outerRef}
+					{...props}
+				>
 					{checkboxes}
-				</Checkbox.Group>;
+				</CheckboxGroup>;
 	},
 	CheckboxGroupField = withValue(withData(CheckboxGroupElement));
 

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

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import React, { useState, useRef, } from 'react';
 import {
-	Popover,
+	HStackNative,
+	Popover, PopoverContent, PopoverBody,
 	Pressable,
-	Row,
-	Text,
 	Tooltip,
-} from 'native-base';
+} from '../../Gluestack';
 import { SketchPicker } from 'react-color';
 import {
 	UI_MODE_WEB,
@@ -134,94 +133,104 @@ export function ColorElement(props) {
 
 
 	// Web version
-	return <Tooltip label={tooltip} placement={tooltipPlacement}>
-				<Row flex={1} h="100%" alignItems="center" onLayout={() => setIsRendered(true)}>
-					<Pressable
-						ref={triggerRef}
-						onPress={onTriggerPress}
-						onBlur={onTriggerBlur}
-						h={10}
-						w={10}
-						bg={value}
-						borderTopLeftRadius={6}
-						borderBottomLeftRadius={6}
-						borderTopRightRadius={0}
-						borderBottomRightRadius={0}
-						borderWidth={1}
-						borderColor="trueGray.300"
-					/>
-					<Input
-						ref={inputRef}
-						value={value}
-						setValue={setValue}
-						maxLength={7}
-						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_COLOR_READOUT_FONTSIZE}
-						bg={styles.FORM_COLOR_INPUT_BG}
-						_focus={{
-							bg: styles.FORM_COLOR_INPUT_FOCUS_BG,
-						}}
-						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);
-						}}
-					/>
-					<Popover
-						isOpen={isPickerShown}
-						onClose={() => {
-							hidePicker();
-						}}
-						trigger={emptyFn}
-						trapFocus={true}
-						placement={'auto'}
-						{...props}
+	let assembledComponents = null;
+	assembledComponents =
+		<HStackNative
+			onLayout={() => setIsRendered(true)}
+			className="flex-1 h-full items-center"
+		>
+			<Pressable
+				ref={triggerRef}
+				onPress={onTriggerPress}
+				onBlur={onTriggerBlur}
+				borderTopLeftRadius={6}
+				borderBottomLeftRadius={6}
+				borderTopRightRadius={0}
+				borderBottomRightRadius={0}
+				className={` bg-${value} h-[10px] w-[10px] border border-grey-300 `}
+			/>
+			<Input
+				ref={inputRef}
+				value={value}
+				setValue={setValue}
+				maxLength={7}
+				onBlur={onInputBlur}
+				onClick={onInputClick}
+				className={`
+					flex-1
+					h-full
+					p-2
+					border
+					border-grey-300
+					border-left-0
+					border-top-left-radius-0
+					border-bottom-left-radius-0
+					border-top-right-radius-6
+					border-bottom-right-radius-6
+					${styles.FORM_COLOR_READOUT_FONTSIZE}
+					${styles.FORM_COLOR_INPUT_BG}
+					${styles.FORM_COLOR_INPUT_BG_FOCUS}
+				`}
+				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);
+				}}
+			/>
+			<Popover
+				isOpen={isPickerShown}
+				onClose={() => {
+					hidePicker();
+				}}
+				trigger={emptyFn}
+				trapFocus={true}
+				placement={'auto'}
+				{...props}
+			>
+				<PopoverContent
+					position="absolute"
+					className={`
+						w-[220px]
+						h-[287px]
+					`}
+					style={{
+						top,
+						left,
+					}}
+					{...translateProps}
+				>
+					<PopoverBody
+						ref={pickerRef}
+						className="p-0"
 					>
-						<Popover.Content
-							position="absolute"
-							top={top + 'px'}
-							left={left + 'px'}
-							w={220}
-							h={287}
-							{...translateProps}
-						>
-							<Popover.Body
-								ref={pickerRef}
-								p={0}
-							>
-								<SketchPicker
-									disableAlpha={true}
-									color={value}
-									onChange={(color) => setValue(color.hex)}
-									{...props}
-								/>
-							</Popover.Body>
-						</Popover.Content>
-					</Popover>
-				</Row>
-			</Tooltip>;
+						<SketchPicker
+							disableAlpha={true}
+							color={value}
+							onChange={(color) => setValue(color.hex)}
+							{...props}
+						/>
+					</PopoverBody>
+				</PopoverContent>
+			</Popover>
+		</HStackNative>;
+
 
 	// React Native v1
 	
 	
 	// React Native v2
 	
+	if (tooltip) {
+		// assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+		// 					{assembledComponents}
+		// 				</Tooltip>;
+	}
+	return assembledComponents;
 }
 
 export default withComponent(withValue(ColorElement));