@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Container/Container.js

@@ -1,15 +1,15 @@
-import React, { useState, useEffect, } from 'react';
+import { cloneElement, useState, useEffect, } from 'react';
 import {
-	Column,
-	Row,
-} from 'native-base';
+	HStack,
+	VStack,
+} from '../Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
 import {
 	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
 import withComponent from '../Hoc/withComponent.js';
@@ -18,6 +18,45 @@ import setSaved from '../../Functions/setSaved.js';
 import Splitter from './Splitter.js';
 import _ from 'lodash';
 
+// function extractTokenFromClassName(token, className) {
+// 	const
+// 		regex = new RegExp(
+// 					'(?:^|\s)' + // match the beginning of the string or a space.
+// 					token + '-' +
+// 					'(\d+%?|full)' + // match a number, percentage, or 'full'
+// 					'(?=\s|$)' // match the end of the string or a space
+// 				),
+// 		match = className.match(regex);
+// 	let value = match ? match[1] : null;
+// 	if (value === 'full') {
+// 		value = '100%';
+// 	}
+// 	return value;
+// }
+// function extractTokenFromStyle(token, style) {
+// 	return style[token] || null;
+// }
+// function extractHeight(props) {
+// 	let height = null;
+// 	if (props.style) {
+// 		height = extractTokenFromStyle('height', props.style);
+// 	}
+// 	if (height === null && props.className) {
+// 		height = extractTokenFromClassName('h', props.className);
+// 	}
+// 	return height;
+// }
+// function extractWidth(props) {
+// 	let width = null;
+// 	if (props.style) {
+// 		width = extractTokenFromStyle('width', props.style);
+// 	}
+// 	if (width === null && props.className) {
+// 		width = extractTokenFromClassName('w', props.className);
+// 	}
+// 	return width;
+// }
+
 function Container(props) {
 	const {
 			center,
@@ -188,7 +227,7 @@ function Container(props) {
 		westComponent = null,
 		westSplitter = null;
 
-	centerComponent = React.cloneElement(center, { isCollapsible: false, });
+	centerComponent = cloneElement(center, { isCollapsible: false, });
 	if (north) {
 		componentProps.collapseDirection = VERTICAL;
 		if (!north.props.h && !north.props.flex) {
@@ -210,7 +249,7 @@ function Container(props) {
 			};
 			northSplitter = <Splitter mode={VERTICAL} onDragStop={onNorthResize} />;
 		}
-		northComponent = React.cloneElement(north, { ...componentProps, w: '100%', });
+		northComponent = cloneElement(north, { ...componentProps, w: '100%', });
 		componentProps = {};
 	}
 	if (south) {
@@ -234,7 +273,7 @@ function Container(props) {
 			};
 			southSplitter = <Splitter mode={VERTICAL} onDragStop={onSouthResize} />;
 		}
-		southComponent = React.cloneElement(south, { ...componentProps, w: '100%', });
+		southComponent = cloneElement(south, { ...componentProps, w: '100%', });
 		componentProps = {};
 	}
 	if (east) {
@@ -258,7 +297,7 @@ function Container(props) {
 			};
 			eastSplitter = <Splitter mode={HORIZONTAL} onDragStop={onEastResize} />;
 		}
-		eastComponent = React.cloneElement(east, { ...componentProps, h: '100%', });
+		eastComponent = cloneElement(east, { ...componentProps, h: '100%', });
 		componentProps = {};
 	}
 	if (west) {
@@ -282,25 +321,25 @@ function Container(props) {
 			};
 			westSplitter = <Splitter mode={HORIZONTAL} onDragStop={onWestResize} />;
 		}
-		westComponent = React.cloneElement(west, { ...componentProps, h: '100%', });
+		westComponent = cloneElement(west, { ...componentProps, h: '100%', });
 		componentProps = {};
 	}
 	
-	return <Column w="100%" flex={1}>
+	return <VStack className="w-full flex-1">
 				{northComponent}
 				{(!isNorthCollapsed && !localIsNorthCollapsed) && northSplitter}
-				<Row w="100%" flex={100}>
+				<HStack className="w-full" style={{ flex: 100 }}>
 					{westComponent}
 					{(!isWestCollapsed && !localIsWestCollapsed) && westSplitter}
-					<Column h="100%" flex={100}>
+					<VStack className="h-full overflow-auto" style={{ flex: 100 }}>
 						{centerComponent}
-					</Column>
+					</VStack>
 					{(!isEastCollapsed && !localIsEastCollapsed) && eastSplitter}
 					{eastComponent}
-				</Row>
+				</HStack>
 				{(!isSouthCollapsed && !localIsSouthCollapsed) && southSplitter}
 				{southComponent}
-			</Column>;
+			</VStack>;
 }
 
 export default withComponent(Container);

package/src/Components/Container/ScreenContainer.js

@@ -4,10 +4,11 @@ import {
 	useWindowDimensions,
 } from 'react-native';
 import {
-	Column,
-	ScrollView,
 	KeyboardAvoidingView,
-} from 'native-base';
+	ScrollView,
+	VStack,
+	VStackNative,
+} from '../Gluestack';
 import withComponent from '../Hoc/withComponent.js';
 // import { useHeaderHeight } from '@react-navigation/elements';
 // import testProps from '../OneHat/functions/testProps';
@@ -35,20 +36,23 @@ function ScreenContainer(props) {
 		safeAreaProps.safeArea = true;
 	}
 
-	const column = <Column
-						// {...testProps(screenName)}
-						alignItems="center"
-						justifyContent="flex-start"
-						flex={1}
-						w="100%"
-						p={p}
-						bg={bg}
-						overflow="visible"
+	const column = <VStackNative
 						onLayout={onLayout}
 						{...safeAreaProps}
+						className={`
+							items-center
+							justify-start
+							flex-1
+							w-full
+							overflow-visible
+						`}
+						style={{
+							padding: p,
+							backgroundColor: bg,
+						}}
 					>
 						{props.children}
-					</Column>;
+					</VStackNative>;
 	
 	if (scrollEnabled) {
 		const scrollViewProps = {};
@@ -66,15 +70,21 @@ function ScreenContainer(props) {
 								{...scrollViewProps}
 							>{column}</ScrollView>;
 		if (keyboardAvoiding) {
-			return <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} flex={1} width="100%">
+			return <KeyboardAvoidingView
+						behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+						className="flex-1 w-full"
+					>
 						{scrollView}
-					</KeyboardAvoidingView>
+					</KeyboardAvoidingView>;
 		} else {
 			return scrollView;
 		}
 	}
 	if (keyboardAvoiding) {
-		return <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} flex={1} width="100%">
+		return <KeyboardAvoidingView
+					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+					className="flex-1 w-full"
+				>
 					{column}
 				</KeyboardAvoidingView>;
 	}

package/src/Components/Container/Splitter.js

@@ -1,8 +1,7 @@
 import {
-	Column,
-	Row,
-	Text,
-} from 'native-base';
+	HStack,
+	VStack,
+} from '../Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -21,28 +20,42 @@ function Splitter(props) {
 		} = props;
 
 	if (mode === VERTICAL) {
-		return <Row
-					testID="Splitter"
-					bg={isDragging ? 'secondary.600' : 'primary.600'}
-					h="3px"
-					w="100%"
-					alignItems="center"
-					justifyContent="center"
+		return <HStack
+					className={`
+						Splitter
+						h-[3px]
+						w-full
+						items-center
+						justify-center
+						${isDragging ? "bg-secondary-600" : "bg-primary-600"}
+					`}
 				>
-					<Row testID="handle" h="2px" w="10%" bg="#ccc"></Row>
-				</Row>;
+					<HStack className={`
+						handle
+						h-[2px]
+						w-[10%]
+						bg-[#ccc]
+					`}></HStack>
+				</HStack>;
 	}
-	return <Column
-				testID="Splitter"
-				bg={isDragging ? 'secondary.600' : 'primary.600'}
-				h="100%"
-				w="3px"
-				alignItems="center"
-				justifyContent="center"
+	return <VStack
 				style={styles.ewResize}
+				className={`
+					Splitter
+					h-full
+					w-[3px]
+					items-center
+					justify-center
+					${isDragging ? "bg-secondary-600" : "bg-primary-600"}
+				`}
 			>
-				<Column testID="handle" w="2px" h="10%" bg="#ccc"></Column>
-			</Column>;
+				<VStack className={`
+					handle
+					w-[2px]
+					h-[10%]
+					bg-[#ccc]
+				`}></VStack>
+			</VStack>;
 }
 
 function withAdditionalProps(WrappedComponent) {
@@ -61,9 +74,9 @@ function withParentNode(WrappedComponent) {
 				getParentNode = (node) => node.parentElement.parentElement,
 			} = props;
 		return <WrappedComponent
-			getParentNode={getParentNode}
-			{...props}
-		/>;
+					getParentNode={getParentNode}
+					{...props}
+				/>;
 	};
 }
 

package/src/Components/Editor/Editor.js

@@ -2,6 +2,7 @@ import {
 	EDITOR_MODE__VIEW,
 } from '../../Constants/Editor.js';
 import withComponent from '../Hoc/withComponent.js';
+import withPdfButtons from '../Hoc/withPdfButtons.js';
 import Form from '../Form/Form.js';
 import Viewer from '../Viewer/Viewer.js';
 import _ from 'lodash';
@@ -39,7 +40,7 @@ function Editor(props) {
 	if (canRecordBeEdited && !canRecordBeEdited(selection)) {
 		canEdit = false;
 	}
-
+	
 	// Repository?.isRemotePhantomMode && selection.length === 1 && 
 	if (editorMode === EDITOR_MODE__VIEW || isEditorViewOnly || !canEdit) {
 		const record = selection[0];
@@ -71,4 +72,4 @@ function Editor(props) {
 			/>;
 }
 
-export default withComponent(Editor);
+export default withComponent(withPdfButtons(Editor));

package/src/Components/Editor/InlineEditor.js

@@ -1,14 +1,12 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
-	Column,
-	Row,
-	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import withComponent from '../Hoc/withComponent.js';
 import {
 	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
+	UI_MODE_NATIVE,
 } from '../../Constants/UiModes.js';
 import {
 	EDITOR_TYPE__INLINE,
@@ -20,7 +18,7 @@ import _ from 'lodash';
 
 function InlineEditor(props) {
 
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+	if (UiGlobals.mode === UI_MODE_NATIVE) {
 		throw new Error('Not yet implemented for RN.');
 	}
 	
@@ -46,6 +44,7 @@ function InlineEditor(props) {
 		styles = UiGlobals.styles,
 		maskRef = useRef(),
 		inlineEditorRef = useRef(),
+		footerRef = useRef(),
 		[currentRow, setCurrentRow] = useState(),
 		onScreenResize = () => {
 			// TODO: Attach a div with zIndex 0 to body to monitor resize events. THis is handler
@@ -65,7 +64,7 @@ function InlineEditor(props) {
 		onEditorShown = () => {
 			// determine which row to move the editor to
 			const
-				data = self.parent.gridRef.current.props.data, // This is okay, because (for now) the inlineEditor is only for use with grids
+				data = self.parent.gridRef.current.props.data, // This is okay, because (for now) the inlineEditor is only for use with Grids
 				ix = data.indexOf(selection[0]),
 				gridRowsContainer = self.parent.gridRef.current._listRef._scrollRef.childNodes[0],
 				currentRow = gridRowsContainer.childNodes[ix];
@@ -102,14 +101,6 @@ function InlineEditor(props) {
 	return <>
 				<Box
 					ref={maskRef}
-					position="fixed"
-					w="100vw"
-					h="100vh"
-					top="0"
-					left="0"
-					bg="#000"
-					opacity={0.3}
-					zIndex={0}
 					onClick={(e) => {
 						e.preventDefault();
 						e.stopPropagation();
@@ -121,41 +112,56 @@ function InlineEditor(props) {
 							onEditorCancel();
 						}
 					}}
+					className={`
+						InlineEditor-mask
+						fixed
+						w-screen
+						h-screen
+						top-0
+						left-0
+						bg-black
+						opacity-30 z-0
+					`} 
 				/>
-				<Column
+				<VStack
 					ref={inlineEditorRef}
-					position="absolute"
-					zIndex={10}
 					{...testProps('inlineEditor')}
-					h={isEditorShown ? '100px' : 0}
-					minWidth="100%"
-					display="inline-block"
-					whiteSpace="nowrap"
+					className={`
+						InlineEditor-VStack
+						absolute
+						z-10
+						min-w-full
+						inline-block
+						max-h-[100px]
+						${isEditorShown ? "h-[100px]" : "h-[0px]"}
+					`}
 				>
 					<Form
 						editorType={EDITOR_TYPE__INLINE}
 						editorStateRef={editorStateRef}
-
 						Repository={Repository}
 						isMultiple={selection.length > 1}
 						isEditorViewOnly={isEditorViewOnly}
 						columnsConfig={columnsConfig}
-						bg="#fff"
-						borderTopWidth={4}
-						borderTopColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
-						borderBottomWidth={4}
-						borderBottomColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
-						py={1}
-						px={0}
-
 						record={selection[0]}
 						onCancel={onEditorCancel}
 						onSave={onEditorSave}
 						onClose={onEditorClose}
 						parent={self}
 						reference="form"
+						className={`
+							InlineEditor-Form
+							flex-1
+							bg-white
+							px-0
+							py-1
+							border-t-4
+							border-b-4
+							${styles.GRID_INLINE_EDITOR_BORDER_TOP_COLOR}
+							${styles.GRID_INLINE_EDITOR_BORDER_BOTTOM_COLOR}
+						`}
 					/>
-				</Column>
+				</VStack>
 			</>;
 
 }

package/src/Components/Filter/DateRange.js

@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
 import {
-	Row,
+	HStack,
+	HStackNative,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
 import Date from '../Form/Field/Date.js';
 import testProps from '../../Functions/testProps.js';
 import withTooltip from '../Hoc/withTooltip.js';
@@ -18,10 +19,17 @@ const
 				},
 				setValue,
 				mode,
-				tooltip = '',
-
-				minValue = 0,
+				minValue,
 				maxValue,
+				tooltip,
+
+				// withComponent
+				self,
+
+				// prevent passthru of these props
+				onChangeValue,
+				onChangeSelection,
+
 				...propsToPass
 			} = props,
 			[low, setLow] = useState(''),
@@ -71,34 +79,45 @@ const
 		if (!isReady) {
 			return null;
 		}
+
+		let className = `
+			flex-1
+			justify-center
+			items-center
+			px-1
+			py-[2px]
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
 		
-		return <Row
-					justifyContent="center"
-					alignItems="center"
-					flex={1}
-					px={1}
-					{...propsToPass}
-				>
+		return <HStack className={className} style={props.style}>
 					<Date
 						{...testProps('low')}
 						value={low}
 						onChangeValue={onChangeLow}
 						mode={mode}
-						// minValue={minValue}
-						// maxValue={maxValue}
+						minValue={minValue}
+						maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
+						limitWidth={true}
+						parent={self}
+						reference="low"
 					/>
-					<Text px={2} userSelect="none">to</Text>
+					<Text className="px-2 select-none">to</Text>
 					<Date
 						{...testProps('high')}
 						value={high}
 						onChangeValue={onChangeHigh}
 						mode={mode}
-						// minValue={minValue}
-						// maxValue={maxValue}
+						minValue={minValue}
+						maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
+						limitWidth={true}
+						parent={self}
+						reference="high"
 					/>
-				</Row>;
+				</HStack>;
 	},
 	DateRangeField = withValue(DateRange);