@onehat/ui 0.3.380 → 0.4.0

package/src/Components/Grid/NoRecordsFound.js

@@ -1,8 +1,8 @@
 import {
-	Column,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import IconButton from '../Buttons/IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 
@@ -13,33 +13,30 @@ export default function NoRecordsFound(props) {
 			text = 'No Records found.',
 		} = props,
 		textComponent = <Text
-							textAlign="center"
+							className="text-center"
 						>{text}</Text>;
 
 	let component = textComponent;
 	if (onRefresh) {
-		component = <Row justifyContent="center" alignItems="center" w="100%" flex={1}>
+		component = <HStack className="NoRecordsFound justify-center items-center w-full flex-1">
 						<IconButton
+							icon={Rotate}
 							_icon={{
-								as: Rotate,
-								name: 'redo-alt',
-								style: {
-									fontSize: 16,
-								},
-								color: 'trueGray.400',
-								mr: 1,
+								size: 'md',
+								className: `
+									text-grey-400
+								`,
 							}}
 							onPress={onRefresh}
-							variant="ghost"
-							p={1}
-							ml={-4}
+							variant="outline"
+							className="p-1 px-2 mr-2"
 						/>
 						{textComponent}
-					</Row>;
+					</HStack>;
 	} else {
-		component = <Column justifyContent="center" alignItems="center" w="100%" flex={1}>
+		component = <VStack className="NoRecordsFound justify-center items-center w-full flex-1">
 						{textComponent}
-					</Column>;
+					</VStack>;
 	}
 	return component;
 }

package/src/Components/Grid/RowDragHandle.js

@@ -1,24 +1,20 @@
 import {
-	Column,
 	Icon,
-	Row,
-	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
 function RowDragHandle(props) {
-	return <Column
-				testID="HeaderReorderHandle"
-				bg="trueGray.100"
-				// h="100%"
-				w={3}
-				alignItems="center"
-				justifyContent="center"
+	return <VStack
 				style={styles.ewResize}
+				className="HeaderReorderHandle bg-grey-100 w-[3px] items-center justify-center"
 			>
-				<Icon as={GripVertical} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
-			</Column>;
+				<Icon
+					as={GripVertical}
+					size="xs"
+					className="handle w-full h-full text-[#ccc]" />
+			</VStack>;
 }
 
 export default RowDragHandle;

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -1,7 +1,4 @@
 import { useEffect, useState, useRef, } from 'react';
-import {
-	Button,
-} from 'native-base';
 import {
 	ADD,
 	EDIT,
@@ -15,6 +12,8 @@ import {
 	EDITOR_MODE__EDIT,
 	EDITOR_TYPE__SIDE,
 } from '../../../Constants/Editor.js';
+import Button from '../../Buttons/Button.js';
+import UiGlobals from '../../../UiGlobals.js';
 import _ from 'lodash';
 
 // NOTE: This is a modified version of @onehat/ui/src/Hoc/withEditor
@@ -262,12 +261,18 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 						message: 'The node you have selected for deletion has children. ' + 
 								'Should these children be moved up to this node\'s parent, or be deleted?',
 						buttons: [
-							<Button colorScheme="danger" onPress={() => secondaryDoMoveChildren(cb)} key="moveBtn">
-								Move Children
-							</Button>,
-							<Button colorScheme="danger" onPress={() => secondaryDoDeleteChildren(cb)} key="deleteBtn">
-								Delete Children
-							</Button>
+							<Button
+								key="moveBtn"
+								colorScheme="danger"
+								onPress={() => secondaryDoMoveChildren(cb)}
+								text="Move Children"
+							/>,
+							<Button
+								key="deleteBtn"
+								colorScheme="danger"
+								onPress={() => secondaryDoDeleteChildren(cb)}
+								text="Delete Children"
+							/>
 						],
 						includeCancel: true,
 					});

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.js

@@ -1,8 +1,6 @@
 import {
-	Column,
-	Modal,
-	Text,
-} from 'native-base';
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+} from '../../Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../Constants/Editor.js';
@@ -72,13 +70,18 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 							isOpen={true}
 							onClose={() => secondarySetIsEditorShown(false)}
 						>
-							<SecondaryEditor
-								editorType={EDITOR_TYPE__WINDOWED}
-								{...propsToPass}
-								{...secondaryEditorProps}
-								parent={self}
-								reference="secondaryEditor"
-							/>
+							<ModalBackdrop />
+							<ModalContent>
+								<ModalBody>
+									<SecondaryEditor
+										editorType={EDITOR_TYPE__WINDOWED}
+										{...propsToPass}
+										{...secondaryEditorProps}
+										parent={self}
+										reference="secondaryEditor"
+									/>
+								</ModalBody>
+							</ModalContent>
 						</Modal>}
 				</>;
 	}, isTree));

package/src/Components/Hoc/withAlert.js

@@ -1,222 +1,172 @@
-import React, { useState, useRef, useEffect, } from 'react';
+import { forwardRef, } from 'react';
 import {
-	AlertDialog,
-	Button,
-	Column,
+	Box,
+	HStack,
 	Icon,
-	Modal,
-	Row,
 	Text,
-} from 'native-base';
-import {
-	ALERT_MODE_OK,
-	ALERT_MODE_YES,
-	ALERT_MODE_YES_NO,
-	ALERT_MODE_CUSTOM,
-	ALERT_MODE_INFO,
-} from '../../Constants/Alert.js';
-import testProps from '../../Functions/testProps.js';
-import TriangleExclamation from '../Icons/TriangleExclamation.js';
+} from '../Gluestack';
+import withModal from './withModal.js';
 import CircleInfo from '../Icons/CircleInfo.js';
+import CircleQuestion from '../Icons/CircleQuestion.js';
+import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import _ from 'lodash';
 
 // This HOC enables easy usage of alert dialogs in the wrapped component.
-// It can be used for simple alerts, confirmations, and custom dialogs. 
+// It can be used for simple alerts, info boxes, confirmations, and 
+// custom dialogs.
 
-export default function withAlert(WrappedComponent) {
-	return (props) => {
+function withAlert(WrappedComponent) {
+	return forwardRef((props, ref) => {
 
 		if (props.disableWithAlert || props.alert) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
-		const
-			[isAlertShown, setIsAlertShown] = useState(false),
-			[title, setTitle] = useState(''),
-			[message, setMessage] = useState(''),
-			[canClose, setCanClose] = useState(true),
-			[includeCancel, setIncludeCancel] = useState(false),
-			[okCallback, setOkCallback] = useState(),
-			[yesCallback, setYesCallback] = useState(),
-			[noCallback, setNoCallback] = useState(),
-			[customButtons, setCustomButtons] = useState(),
-			[mode, setMode] = useState(ALERT_MODE_OK),
-			autoFocusRef = useRef(null),
-			cancelRef = useRef(null),
-			onAlert = (arg1, okCallback, includeCancel = false, canClose = true) => {
-				clearAll();
+		const {
+				showModal,
+				hideModal,
+			} = props,
+			getBody = (args) => {
+				const {
+					icon,
+					message,
+					color = 'black',
+				} = args;
+				return <HStack className="withAlert-HStack flex-1 w-full">
+							<Box className={`
+								withAlert-Box1
+								h-full
+								w-[100px]
+								flex
+								items-end
+								justify-center 
+								pr-3
+							`}>
+								<Icon as={icon} className={`
+									withAlert-Icon
+									h-[40px]
+									w-[40px]
+									text-${color}
+								`} />
+							</Box>
+							<Box className={`
+								withAlert-Box2
+								h-full
+								flex
+								flex-1
+								items-start
+								justify-center
+							`}>
+								<Text className={`
+									withAlert-Text
+									text-${color}
+									text-[18px]
+									flex-none
+								`}>{message}</Text>
+							</Box>
+						</HStack>;
+			},
+			onAlert = (arg1, onOk, includeCancel = false, canClose = true) => {
+
+				hideModal();
+
+				let title = 'Alert',
+					message,
+					buttons;
+				
 				if (_.isString(arg1)) {
-					setMode(ALERT_MODE_OK);
-					setTitle('Alert');
-					setMessage(arg1);
-					setOkCallback(() => okCallback);
-					setIncludeCancel(includeCancel);
-					setCanClose(canClose);
+					// simple alert
+					message = arg1;
 				} else if (_.isPlainObject(arg1)) {
 					// custom
-					const {
-							title = 'Alert',
-							message,
-							buttons,
-							includeCancel,
-							canClose,
-						} = arg1;
-					setMode(ALERT_MODE_CUSTOM);
-					setTitle(title);
-					setMessage(message);
-					setCustomButtons(buttons);
-					setIncludeCancel(includeCancel);
-					setCanClose(canClose);
-				}
-				showAlert();
-			},
-			onConfirm = (message, yesCallback, includeCancel = false, noCallback) => {
-				clearAll();
-				setMode(includeCancel ? ALERT_MODE_YES : ALERT_MODE_YES_NO);
-				setTitle('Confirm');
-				setMessage(message);
-				setIncludeCancel(includeCancel);
-				setYesCallback(() => yesCallback);
-				setNoCallback(noCallback ? () => noCallback : null);
-				showAlert();
-			},
-			onCancel = () => {
-				setIsAlertShown(false);
-			},
-			onInfo = (msg) => {
-				clearAll();
-				setMode(ALERT_MODE_INFO);
-				setTitle('Info');
-				setMessage(msg);
-				setIncludeCancel(false);
-				setCanClose(true);
-				showAlert();
-			},
-			onOk = () => {
-				if (okCallback) {
-					okCallback();
+					if (arg1.hasOwnProperty('title')) {
+						title = arg1.title;
+					}
+					message = arg1.message;
+					if (arg1.hasOwnProperty('buttons')) {
+						buttons = arg1.buttons;
+					}
+					if (arg1.hasOwnProperty('onOk')) {
+						onOk = arg1.onOk;
+					}
+					if (arg1.hasOwnProperty('includeCancel')) {
+						includeCancel = arg1.includeCancel;
+					}
+					if (arg1.hasOwnProperty('canClose')) {
+						canClose = arg1.canClose;
+					}
 				}
-				hideAlert();
-			},
-			onYes = () => {
-				if (yesCallback) {
-					yesCallback();
-				}
-				hideAlert();
-			},
-			onNo = () => {
-				if (noCallback) {
-					noCallback();
-				}
-				hideAlert();
-			},
-			showAlert = () => {
-				setIsAlertShown(true);
+				showModal({
+					title,
+					body: getBody({
+						icon: TriangleExclamation,
+						message,
+						color: 'red',
+					}),
+					onOk: () => {
+						hideModal();
+						onOk();
+					},
+					includeCancel,
+					canClose,
+					customButtons: buttons ?? null,
+					h: 250,
+					w: 400,
+				});
 			},
-			hideAlert = () => {
-				setIsAlertShown(false);
-				clearAll();
+			onConfirm = (message, onYes, includeCancel = false, onNo) => {
+				hideModal();
+				showModal({
+					title: 'Confirm',
+					body: getBody({
+						icon: CircleQuestion,
+						message,
+					}),
+					onYes: () => {
+						hideModal();
+						onYes();
+					},
+					onNo: () => {
+						hideModal();
+						if (onNo) {
+							onNo();
+						}
+					},
+					includeCancel,
+					h: 250,
+					w: 400,
+				});
 			},
-			clearAll = () => {
-				setOkCallback();
-				setYesCallback();
-				setNoCallback();
-				setCustomButtons();
+			onInfo = (message) => {
+				hideModal();
+				showModal({
+					title: 'Info',
+					body: getBody({
+						icon: CircleInfo,
+						message,
+					}),
+					onOk: () => hideModal(),
+					canClose: true,
+					h: 200,
+					w: 400,
+				});
 			};
 
-		let buttons = [];
-		if (includeCancel) {
-			buttons.push(<Button
-								{...testProps('cancelBtn')}
-								key="cancelBtn"
-								onPress={onCancel}
-								color="#fff"
-								colorScheme="coolGray"
-								variant="ghost" // or unstyled
-								ref={cancelRef}
-							>Cancel</Button>);
-		}
-		switch(mode) {
-			case ALERT_MODE_OK:
-			case ALERT_MODE_INFO:
-				buttons.push(<Button
-								{...testProps('okBtn')}
-								key="okBtn"
-								ref={autoFocusRef}
-								onPress={onOk}
-								color="#fff"
-							>OK</Button>);
-				break;
-			case ALERT_MODE_YES:
-				buttons.push(<Button
-								{...testProps('yesBtn')}
-								key="yesBtn"
-								ref={autoFocusRef}
-								onPress={onYes}
-								color="#fff"
-								colorScheme="danger"
-							>Yes</Button>);
-				break;
-			case ALERT_MODE_YES_NO:
-				// TODO: need to create a new colorScheme so this can be black with blank background
-				buttons.push(<Button
-								{...testProps('noBtn')}
-								key="noBtn"
-								onPress={onNo}
-								color="trueGray.800"
-								variant="ghost"
-								// colorScheme="neutral"
-								mr={2}
-							>No</Button>);
-				buttons.push(<Button
-								{...testProps('yesBtn')}
-								key="yesBtn"
-								ref={autoFocusRef}
-								onPress={onYes}
-								color="#fff"
-								colorScheme="danger"
-							>Yes</Button>);
-				break;
-			case ALERT_MODE_CUSTOM:
-				_.each(customButtons, (button) => {
-					buttons.push(button);
-				});
-				break;
-			default:
+		if (!showModal) {
+			throw new Error('withAlert: showModal is not defined in props');
 		}
 
-		return <>
-					<WrappedComponent
-						{...props}
-						disableWithAlert={false}
-						alert={onAlert}
-						confirm={onConfirm}
-						hideAlert={hideAlert}
-						showInfo={onInfo}
-					/>
-					<AlertDialog
-						leastDestructiveRef={cancelRef}
-						isOpen={isAlertShown}
-						onClose={() => setIsAlertShown(false)}
-					>
-						<AlertDialog.Content
-							{...testProps('AlertDialog')}
-						>
-							{canClose && <AlertDialog.CloseButton />}
-							<AlertDialog.Header>{title}</AlertDialog.Header>
-							<AlertDialog.Body>
-								<Row alignItems="center">
-									<Column w="40px" p={0} mr={5}>
-										<Icon as={mode === ALERT_MODE_INFO ? CircleInfo : TriangleExclamation} size={10} color={mode === ALERT_MODE_INFO ? '#000' : '#f00'} />
-									</Column>
-									<Text flex={1}>{message}</Text>
-								</Row>
-							</AlertDialog.Body>
-							<AlertDialog.Footer>
-								{buttons}
-							</AlertDialog.Footer>
-						</AlertDialog.Content>
-					</AlertDialog>
-				</>;
-	};
-}
+		return <WrappedComponent
+					{...props}
+					ref={ref}
+					alert={onAlert}
+					confirm={onConfirm}
+					hideAlert={hideModal}
+					showInfo={onInfo}
+				/>;
+	});
+}
+
+export default function(WrappedComponent) {
+	return withModal(withAlert(WrappedComponent));
+}

package/src/Components/Hoc/withBlank.js

@@ -1,12 +1,10 @@
-import {
-} from 'native-base';
-import _ from 'lodash';
+import { forwardRef } from 'react';
 
 export default function withBlank(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		const {
 
 			} = props;
-		return <WrappedComponent {...props} />;
-	};
+		return <WrappedComponent {...props} ref={ref} />;
+	});
 }

package/src/Components/Hoc/withCollapsible.js

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 
 export default function withCollapsible(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		const
 			{
 				isCollapsed = false,
@@ -15,6 +15,7 @@ export default function withCollapsible(WrappedComponent) {
 					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
 					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/withComponent.js

@@ -1,14 +1,41 @@
-import { useRef, useEffect, } from 'react';
+import { forwardRef, useRef, useEffect, } from 'react';
+import _ from 'lodash';
 
-// This HOC establishes a parent-child relationship between components.
+// withComponent() is an HOC that should wrap every UI base component
+//
+// It does two things:
+// 1) Establishes a parent-child relationship between components.
 // Basically anything wrapped in withComponent that has a reference prop
 // registers itself with a parent and allows children to register.
+// 2) Translates h, w, and flex tokens in the props to styles.
+// It does this here so components above it in the hierarchy (like Container)
+// can use these tokens for all components.
 
 export default function withComponent(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
+		props = _.clone(props); // without cloning, I couldn't write to props
+
+		// translate h, w, and flex tokens to styles
+		if (!props.style) {
+			props.style = {};
+		}
+		if (props.h) {
+			props.style.height = props.h;
+			delete props.h;
+		}
+		if (props.w) {
+			props.style.width = props.w;
+			delete props.w;
+		}
+		if (props.flex) {
+			props.style.flex = props.flex;
+			delete props.flex;
+		}
+
+		// now deal with parent-child relationships (if needed)
 		if (!props.reference) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		const {
@@ -62,7 +89,7 @@ export default function withComponent(WrappedComponent) {
 		return <WrappedComponent
 					self={selfRef.current}
 					{...propsToPass}
+					ref={ref}
 				/>;
-
-	};
+	});
 }