@onehat/ui 0.4.56 → 0.4.58

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.56",
+	"version": "0.4.58",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/{components → Components}/Hoc/withComponent.js

@@ -75,11 +75,11 @@ export default function withComponent(WrappedComponent) {
 			});
 
 		useEffect(() => {
-			if (parent && !parent?.hasChild(selfRef.current)) {
+			if (parent?.hasChild && !parent.hasChild(selfRef.current)) {
 				parent.registerChild(selfRef.current);
 			}
 			return () => {
-				if (parent) {
+				if (parent?.unregisterChild) {
 					parent.unregisterChild(selfRef.current);
 				}
 				childrenRef.current = {};

package/src/Components/Icons/Stop.js

@@ -0,0 +1,11 @@
+import { createIcon } from "../Gluestack/icon";
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import Svg, { Path } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 384 512',
+	path: <Path d="M0 128c0-35.3 28.7-64 64-64h256c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z" />,
+});
+
+export default SvgComponent

package/src/Components/Layout/AsyncOperation.js

@@ -0,0 +1,153 @@
+import { useState, } from 'react';
+import {
+	Box,
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+import isJson from '../../Functions/isJson.js';
+import Form from '../Form/Form.js';
+import Button from '../Buttons/Button.js';
+import withComponent from '../Hoc/withComponent.js';
+import withAlert from '../Hoc/withAlert.js';
+import ChevronLeft from '../Icons/ChevronLeft.js';
+import ChevronRight from '../Icons/ChevronRight.js';
+import Play from '../Icons/Play.js';
+import Stop from '../Icons/Stop.js';
+import TabBar from '../Tab/TabBar.js';
+import Panel from '../Panel/Panel.js';
+import Toolbar from '../Toolbar/Toolbar.js';
+import _ from 'lodash';
+
+
+function AsyncOperation(props) {
+	const {
+			action,
+			Repository,
+			formItems = [],
+			formStartingValues = {},
+
+			// withComponent
+			self,
+
+			// withAlert
+			alert,
+		} = props,
+		initiate = async () => {
+
+			if (!Repository || !action) {
+				alert('AsyncOperation: Repository and action are required!');
+				return;
+			}
+
+			setFooter(getFooter('processing'));
+			
+			const
+				method = Repository.methods.edit,
+				uri = Repository.getModel() + '/' + action,
+				formValues = self.children.form.formGetValues(),
+				result = await Repository._send(method, uri, formValues);
+				
+			const response = Repository._processServerResponse(result);
+			if (!response.success) {
+				alert(result.message);
+				reset();
+				return;
+			}
+			
+			let results = <Text>Success</Text>;
+			if (response.message) {
+				let message = response.message;
+				if (isJson(message)) {
+					message = JSON.parse(message);
+				}
+				results = _.isArray(message) ? 
+								<VStack>
+									{message?.map((line, ix)=> {
+										return <Text key={ix}>{line}</Text>;
+									})}
+								</VStack> :
+								<Text>{message}</Text>;
+			}
+			showResults(results);
+		},
+		getFooter = (which = 'initiate') => {
+			switch(which) {
+				case 'initiate':
+					return <Toolbar>
+								<Button
+									text="Initiate"
+									rightIcon={ChevronRight}
+									onPress={() => initiate()}
+								/>
+							</Toolbar>;
+				case 'processing':
+					return <Toolbar>
+								<Button
+									text="Please wait"
+									isLoading={true}
+									variant="link"
+								/>
+							</Toolbar>;
+				case 'results':
+					return <Toolbar>
+								<Button
+									text="Reset"
+									icon={ChevronLeft}
+									onPress={() => reset()}
+								/>
+							</Toolbar>;
+			}
+		},
+		[footer, setFooter] = useState(getFooter()),
+		[results, setResults] = useState(''),
+		[currentTabIx, setCurrentTab] = useState(0),
+		showResults = (results) => {
+			setCurrentTab(1);
+			setFooter(getFooter('results'));
+			setResults(results);
+		},
+		reset = () => {
+			setCurrentTab(0);
+			setFooter(getFooter());
+		};
+
+	return <Panel {...props} footer={footer}>
+				<TabBar
+					tabs={[
+						{
+							title: 'Initiate',
+							icon: Play,
+							isDisabled: currentTabIx !== 0,
+							content: <Form
+										reference="form"
+										parent={self}
+										className="w-full h-full flex-1"
+										disableFooter={true}
+										items={formItems}
+										startingValues={formStartingValues}
+									/>,
+						},
+						{
+							title: 'Results',
+							icon: Stop,
+							isDisabled: currentTabIx !== 1,
+							content: <Box className="p-2">{results}</Box>,
+						},
+					]}
+					currentTabIx={currentTabIx}
+					canToggleCollapse={false}
+					tabsAreButtons={false}
+				/>
+			</Panel>;
+}
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					reference={props.reference || 'AsyncOperation'}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withComponent(withAlert(AsyncOperation)));

package/src/Components/Tab/Tab.js

@@ -0,0 +1,93 @@
+import { forwardRef, useRef } from 'react';
+import {
+	HStack,
+	Icon,
+} from '@project-components/Gluestack';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions.js';
+import withTooltip from '../Hoc/withTooltip.js';
+import IconButton from '../Buttons/IconButton.js';
+import Xmark from '../Icons/Xmark.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+const Tab = forwardRef((props, ref) => {
+	let {
+			className,
+			direction,
+			isDisabled,
+			isCurrentTab,
+			text,
+			_text,
+			useIconOnly,
+			icon,
+			_icon,
+			useCloseBtn,
+			onClose,
+			onPress, // remove it from propsToPass
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles;
+	
+	if (!ref) {
+		ref = useRef();
+	}
+
+	if (isCurrentTab) {
+		className += ' ' + styles.TAB_BG_CURRENT;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_CURRENT;
+		_text.className += ' ' + styles.TAB_COLOR_CURRENT;
+	}
+	if (isDisabled) {
+		className += ' ' + styles.TAB_BG_DISABLED_2;
+		_icon.className += ' ' + styles.TAB_COLOR_DISABLED;
+		_text.className += ' ' + styles.TAB_COLOR_DISABLED;
+	}
+
+	let tab = null;
+	if (useIconOnly) {
+		tab = <HStack className={className + ' Tab px-[20px] py-2'}>
+					<Icon
+						{...propsToPass}
+						className={className}
+						ref={ref}
+						{..._icon}
+						as={icon}
+					/>
+				</HStack>;
+	} else {
+		if (direction === VERTICAL) {
+			className += ' w-[200px]';
+		}
+
+		let closeBtn = null;
+		if (useCloseBtn) {
+			closeBtn = <IconButton
+							{...testProps('tabCloseButton-' + ix)}
+							onPress={onClose}
+							icon={Xmark}
+							_icon={_icon}
+							tooltip="Close Tab"
+							className="p-0"
+						/>;
+		}
+		tab = <HStack
+				{...propsToPass}
+				className={className}
+				ref={ref}
+			>
+				<Icon
+					{..._icon}
+					as={icon}
+				/>
+				<Text {..._text}>{text}</Text>
+				{closeBtn}
+			</HStack>;
+	}
+
+	return tab;
+});
+
+export default withTooltip(Tab);

package/src/{components → Components}/Tab/TabBar.js

@@ -1,7 +1,9 @@
 import { cloneElement, useState, useEffect, } from 'react';
 import {
+	Box,
 	HStack,
 	HStackNative,
+	Icon,
 	ScrollView,
 	VStack,
 	VStackNative,
@@ -10,6 +12,8 @@ import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import Tab from './Tab.js';
+import TabButton from './TabButton.js';
 import Button from '../Buttons/Button.js';
 import UiGlobals from '../../UiGlobals.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
@@ -20,7 +24,6 @@ import Minimize from '../Icons/Minimize.js';
 import Maximize from '../Icons/Maximize.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
-import Xmark from '../Icons/Xmark.js';
 import _ from 'lodash';
 
 
@@ -30,12 +33,14 @@ function TabBar(props) {
 			content, // e.g. Expo Router slot
 			direction = HORIZONTAL,
 			tabWidth = 150, // used on VERTICAL mode only
-			tabHeight = '47px', // used on HORIZONTAL mode only
+			tabHeight = 47, // used on HORIZONTAL mode only
 			additionalButtons,
 			initialTabIx = 0,
 			currentTabIx,
 			disableCollapse = false,
 			startsCollapsed = true,
+			canToggleCollapse = true,
+			tabsAreButtons = true,
 			onChangeCurrentTab,
 			onChangeIsCollapsed,
 			onPressTab,
@@ -87,9 +92,9 @@ function TabBar(props) {
 		},
 		renderToggleButton = () => {
 			const {
-					buttonProps: {
-						className: buttonPropsClassName,
-						...buttonPropsToPass
+					tabProps: {
+						className: tabPropsClassName,
+						...tabPropsToPass
 					},
 					textProps: {
 						className: textPropsClassName,
@@ -99,9 +104,9 @@ function TabBar(props) {
 						className: iconPropsClassName,
 						...iconPropsToPass
 					},
-				} = getButtonProps();
+				} = getTabProps();
 
-			let buttonClassName = buttonPropsClassName,
+			let tabClassName = tabPropsClassName,
 				textClassName = textPropsClassName,
 				iconClassName = iconPropsClassName;
 			
@@ -118,15 +123,15 @@ function TabBar(props) {
 							{...testProps('toggleBtn')}
 							key="toggleBtn"
 							onPress={onPress}
-							{...buttonPropsToPass}
+							{...tabPropsToPass}
 							icon={icon}
 							_icon={_icon}
-							className={buttonClassName}
+							className={tabClassName}
 							tooltip={isCollapsed ? 'Expand' : 'Collapse'}
 						/>;
 			} else {
-				buttonClassName += `
-					w-[200px]
+				tabClassName += `
+					${direction === VERTICAL ? 'w-[200px]' : ''}
 					pr-0
 					mr-0
 				`;
@@ -135,10 +140,10 @@ function TabBar(props) {
 							{...testProps('toggleBtn')}
 							key="toggleBtn"
 							onPress={onPress}
-							{...buttonPropsToPass}
+							{...tabPropsToPass}
 							icon={icon}
 							_icon={_icon}
-							className={buttonClassName}
+							className={tabClassName}
 							text="Collapse"
 							_text={{
 								className: textClassName,
@@ -150,15 +155,12 @@ function TabBar(props) {
 			}
 			return button;
 		},
-		getButtonProps = () => {
+		getTabProps = () => {
 			const
-				buttonProps = {
+				tabProps = {
 					className: `
 						${styles.TAB_BG}
 						${isCollapsed ? 'justify-center' : 'justify-start'}
-						${styles.TAB_BG_HOVER}
-						${styles.TAB_BG_ACTIVE}
-						${styles.TAB_BG_DISABLED}
 					`,
 				},
 				textProps = {
@@ -173,14 +175,11 @@ function TabBar(props) {
 					// size: 'md',
 					className: `
 						${styles.TAB_ICON_COLOR}
-						${styles.TAB_ICON_COLOR_HOVER}
-						${styles.TAB_ICON_COLOR_ACTIVE}
-						${styles.TAB_ICON_COLOR_DISABLED}
 					`,
 				};
 			switch(direction) {
 				case VERTICAL:
-					buttonProps.className += `
+					tabProps.className += `
 						rounded-l-lg
 						rounded-r-none
 						w-full
@@ -201,7 +200,7 @@ function TabBar(props) {
 					`;
 					break;
 				case HORIZONTAL:
-					buttonProps.className += `
+					tabProps.className += `
 						rounded-t
 						rounded-b-none
 						mr-1
@@ -216,16 +215,16 @@ function TabBar(props) {
 				default:
 			}
 			return {
-				buttonProps,
+				tabProps,
 				textProps,
 				iconProps,
 			};
 		},
 		renderTabs = () => {
 			const {
-					buttonProps: {
-						className: buttonPropsClassName,
-						...buttonPropsToPass
+					tabProps: {
+						className: tabPropsClassName,
+						...tabPropsToPass
 					},
 					textProps: {
 						className: textPropsClassName,
@@ -235,8 +234,8 @@ function TabBar(props) {
 						className: iconPropsClassName,
 						...iconPropsToPass
 					},
-				} = getButtonProps(),
-				buttons = [];
+				} = getTabProps(),
+				tabComponents = [];
 				
 			_.each(tabs, (tab, ix) => {
 				if (!tab.icon) {
@@ -244,7 +243,7 @@ function TabBar(props) {
 				}
 				const
 					isCurrentTab = ix === getCurrentTab(),
-					useIconButton = (isCollapsed || !tab.title),
+					useIconTab = (isCollapsed || !tab.title),
 					tabIcon = tab._icon ? _.clone(tab._icon) : {};
 				if (tabIcon.as && _.isString(tabIcon.as)) {
 					const Type = getComponentFromType(tabIcon.as);
@@ -253,20 +252,13 @@ function TabBar(props) {
 					}
 				}
 
-				let buttonClassName = buttonPropsClassName,
+				let tabClassName = tabPropsClassName,
 					textClassName = textPropsClassName,
 					iconClassName = iconPropsClassName;
 
-				if (isCurrentTab) {
-					buttonClassName += ' ' + styles.TAB_BG_CURRENT + 
-										' ' + styles.TAB_BG_CURRENT_HOVER;
-					iconClassName += ' ' + styles.TAB_ICON_COLOR_CURRENT;
-					textClassName += ' ' + styles.TAB_COLOR_CURRENT;
-				}
-
 				// overrides
 				if (tab._button?.className) {
-					buttonClassName += ' ' + tab._button.className;
+					tabClassName += ' ' + tab._button.className;
 				}
 				if (tab._text?.className) {
 					textClassName += ' ' + tab._text.className;
@@ -283,57 +275,28 @@ function TabBar(props) {
 					},
 					onPress = () => setCurrentTab(ix);
 
-				let button;
-				if (useIconButton) {
-					button = <IconButton
-								{...testProps(tab.path)}
-								key={'tabIconBtn' + ix}
-								onPress={onPress}
-								{...buttonPropsToPass}
-								icon={tab.icon}
-								_icon={_icon}
-								className={buttonClassName}
-								tooltip={tab.title}
-							/>;
-				} else {
-					if (direction === VERTICAL) {
-						buttonClassName += ' w-[200px]';
-					}
-
-					let closeBtn = null;
-					if (onTabClose && !tab.disableCloseBox) {
-						closeBtn = <IconButton
-										{...testProps('tabCloseButton-' + ix)}
-										key={'tabCloseButton' + ix}
-										onPress={() => onTabClose(ix)}
-										icon={Xmark}
-										_icon={{
-											...iconProps,
-											className: iconClassName,
+				const WhichTabType = tabsAreButtons ? TabButton : Tab
+				tabComponents.push(<WhichTabType
+										{...testProps(tab.path)}
+										key={'tab' + ix}
+										onPress={onPress}
+										{...tabPropsToPass}
+										icon={tab.icon}
+										_icon={_icon}
+										className={tabClassName}
+										tooltip={tab.title}
+										text={tab.title}
+										_text={{
+											className: textClassName,
+											...textPropsToPass,
 										}}
-										tooltip="Close Tab"
-										className="p-0"
-									/>;
-					}
-					button = <Button
-								{...testProps(tab.path)}
-								key={'tabBtn' + ix}
-								onPress={onPress}
-								{...buttonPropsToPass}
-								icon={tab.icon}
-								_icon={_icon}
-								rightIcon={closeBtn}
-								className={buttonClassName}
-								text={tab.title}
-								_text={{
-									className: textClassName,
-									...textPropsToPass,
-								}}
-								action="none"
-								variant="none"
-							/>;
-				}
-				buttons.push(button);
+										isDisabled={tab.isDisabled}
+										isCurrentTab={isCurrentTab}
+										useIconOnly={useIconTab}
+										direction={direction}
+										useCloseBtn={onTabClose && !tab.disableCloseBox}
+										onClose={() => onTabClose(ix)}
+									/>);
 			});
 
 			if (additionalButtons) {
@@ -343,7 +306,7 @@ function TabBar(props) {
 					}
 
 					const
-						useIconButton = (isCollapsed || !additionalButton.text),
+						useIconTab = (isCollapsed || !additionalButton.text),
 						additionalButtonIcon = _.clone(additionalButton._icon);
 
 					if (additionalButtonIcon.as && _.isString(additionalButtonIcon.as)) {
@@ -353,13 +316,13 @@ function TabBar(props) {
 						}
 					}
 
-					let buttonClassName = buttonPropsClassName,
+					let tabClassName = tabPropsClassName,
 						textClassName = textPropsClassName,
 						iconClassName = iconPropsClassName;
 
 					// overrides
 					if (additionalButton._button?.className) {
-						buttonClassName += ' ' + additionalButton._button.className;
+						tabClassName += ' ' + additionalButton._button.className;
 					}
 					if (additionalButton._text?.className) {
 						textClassName += ' ' + additionalButton._text.className;
@@ -372,10 +335,10 @@ function TabBar(props) {
 						// First button should have a gap before it
 						switch(direction) {
 							case VERTICAL:
-								buttonClassName += ' mt-6';
+								tabClassName += ' mt-6';
 								break;
 							case HORIZONTAL:
-								buttonClassName += ' ml-6';
+								tabClassName += ' ml-6';
 								break;
 							default:
 						}
@@ -390,27 +353,27 @@ function TabBar(props) {
 						onPress = additionalButton.onPress;
 
 					let button;
-					if (useIconButton) {
+					if (useIconTab) {
 						button = <IconButton
 									{...testProps('additionalBtn' + ix)}
 									key={'additionalBtn' + ix}
 									onPress={onPress}
-									{...buttonPropsToPass}
+									{...tabPropsToPass}
 									_icon={_icon}
-									className={buttonClassName}
+									className={tabClassName}
 									tooltip={additionalButton.text}
 								/>;
 					} else {
 						if (direction === VERTICAL) {
-							buttonClassName += ' w-[200px]';
+							tabClassName += ' w-[200px]';
 						}
 						button = <Button
 									{...testProps('additionalBtn' + ix)}
 									key={'additionalBtn' + ix}
 									onPress={onPress}
-									{...buttonPropsToPass}
+									{...tabPropsToPass}
 									_icon={_icon}
-									className={buttonClassName}
+									className={tabClassName}
 									text={additionalButton.text}
 									_text={{
 										className: textClassName,
@@ -420,11 +383,11 @@ function TabBar(props) {
 									variant="none"
 								/>;
 					}
-					buttons.push(button);
+					tabComponents.push(button);
 				});
 			}
 
-			return buttons;
+			return tabComponents;
 		},
 		renderCurrentTabContent = () => {
 			if (content) {
@@ -503,9 +466,10 @@ function TabBar(props) {
 					`}
 				>
 					{renderedTabs}
-					<VStack className="flex-1 w-full justify-end">
-						{renderedToggleButton}
-					</VStack>
+					{canToggleCollapse ? 
+						<VStack className="flex-1 w-full justify-end">
+							{renderedToggleButton}
+						</VStack> : null}
 				</VStackNative>;
 		if (renderedCurrentTabContent) {
 			tabBar = <HStackNative {...propsToPass} className="flex-1 w-full">
@@ -520,7 +484,7 @@ function TabBar(props) {
 		tabBar = <HStackNative
 					{...testProps('TabBar')}
 					className={`
-						${isCollapsed ? 'h-[38px]' : 'h-[' + tabHeight + 'px]'}
+						${'h-[' + tabHeight + 'px]'}
 						items-center
 						justify-start
 						p-1
@@ -530,15 +494,16 @@ function TabBar(props) {
 				>
 					<ScrollView
 						horizontal={true}
-						className={` ${isCollapsed ? "h-[30px]" : 'h-[' + tabHeight + 'px]'} `}
+						className={'h-[' + tabHeight + 'px]'}
 					>
 						{renderedTabs}
 					</ScrollView>
-					<HStack className="flex-1 h-full justify-end">
-						<HStack className="h-full">
-							{renderedToggleButton}
-						</HStack>
-					</HStack>
+					{canToggleCollapse ? 
+						<HStack className="flex-1 h-full justify-end">
+							<HStack className="h-full">
+								{renderedToggleButton}
+							</HStack>
+						</HStack> : null}
 				</HStackNative>;
 		if (renderedCurrentTabContent) {
 			tabBar = <VStackNative {...propsToPass} className="flex-1 w-full">