@onehat/ui 0.4.57 → 0.4.58

package/package.json

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

package/src/Components/Layout/AsyncOperation.js

@@ -1,11 +1,12 @@
 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 CenterBox from '../Layout/CenterBox.js';
 import withComponent from '../Hoc/withComponent.js';
 import withAlert from '../Hoc/withAlert.js';
 import ChevronLeft from '../Icons/ChevronLeft.js';
@@ -23,6 +24,7 @@ function AsyncOperation(props) {
 			action,
 			Repository,
 			formItems = [],
+			formStartingValues = {},
 
 			// withComponent
 			self,
@@ -40,7 +42,7 @@ function AsyncOperation(props) {
 			setFooter(getFooter('processing'));
 			
 			const
-				method = Repository.methods.post,
+				method = Repository.methods.edit,
 				uri = Repository.getModel() + '/' + action,
 				formValues = self.children.form.formGetValues(),
 				result = await Repository._send(method, uri, formValues);
@@ -52,16 +54,19 @@ function AsyncOperation(props) {
 				return;
 			}
 			
-			let results = <CenterBox><Text>Success</Text></CenterBox>;
+			let results = <Text>Success</Text>;
 			if (response.message) {
-				const decodedMessage = JSON.parse(response.message);
-				results = _.isArray(decodedMessage) ? 
+				let message = response.message;
+				if (isJson(message)) {
+					message = JSON.parse(message);
+				}
+				results = _.isArray(message) ? 
 								<VStack>
-									{decodedMessage?.map((line, ix)=> {
+									{message?.map((line, ix)=> {
 										return <Text key={ix}>{line}</Text>;
 									})}
-								</VStack> : 
-								<Text>{decodedMessage}</Text>;
+								</VStack> :
+								<Text>{message}</Text>;
 			}
 			showResults(results);
 		},
@@ -119,17 +124,19 @@ function AsyncOperation(props) {
 										className="w-full h-full flex-1"
 										disableFooter={true}
 										items={formItems}
+										startingValues={formStartingValues}
 									/>,
 						},
 						{
 							title: 'Results',
 							icon: Stop,
 							isDisabled: currentTabIx !== 1,
-							content: results,
+							content: <Box className="p-2">{results}</Box>,
 						},
 					]}
 					currentTabIx={currentTabIx}
 					canToggleCollapse={false}
+					tabsAreButtons={false}
 				/>
 			</Panel>;
 }

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/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';
 
 
@@ -37,6 +40,7 @@ function TabBar(props) {
 			disableCollapse = false,
 			startsCollapsed = true,
 			canToggleCollapse = true,
+			tabsAreButtons = true,
 			onChangeCurrentTab,
 			onChangeIsCollapsed,
 			onPressTab,
@@ -88,9 +92,9 @@ function TabBar(props) {
 		},
 		renderToggleButton = () => {
 			const {
-					buttonProps: {
-						className: buttonPropsClassName,
-						...buttonPropsToPass
+					tabProps: {
+						className: tabPropsClassName,
+						...tabPropsToPass
 					},
 					textProps: {
 						className: textPropsClassName,
@@ -100,9 +104,9 @@ function TabBar(props) {
 						className: iconPropsClassName,
 						...iconPropsToPass
 					},
-				} = getButtonProps();
+				} = getTabProps();
 
-			let buttonClassName = buttonPropsClassName,
+			let tabClassName = tabPropsClassName,
 				textClassName = textPropsClassName,
 				iconClassName = iconPropsClassName;
 			
@@ -119,14 +123,14 @@ 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 += `
+				tabClassName += `
 					${direction === VERTICAL ? 'w-[200px]' : ''}
 					pr-0
 					mr-0
@@ -136,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,
@@ -151,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 = {
@@ -174,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
@@ -202,7 +200,7 @@ function TabBar(props) {
 					`;
 					break;
 				case HORIZONTAL:
-					buttonProps.className += `
+					tabProps.className += `
 						rounded-t
 						rounded-b-none
 						mr-1
@@ -217,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,
@@ -236,8 +234,8 @@ function TabBar(props) {
 						className: iconPropsClassName,
 						...iconPropsToPass
 					},
-				} = getButtonProps(),
-				buttons = [];
+				} = getTabProps(),
+				tabComponents = [];
 				
 			_.each(tabs, (tab, ix) => {
 				if (!tab.icon) {
@@ -245,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);
@@ -254,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;
@@ -284,59 +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}
-								isDisabled={tab.isDisabled}
-							/>;
-				} 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,
-								}}
-								isDisabled={tab.isDisabled}
-								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) {
@@ -346,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)) {
@@ -356,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;
@@ -375,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:
 						}
@@ -393,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,
@@ -423,11 +383,11 @@ function TabBar(props) {
 									variant="none"
 								/>;
 					}
-					buttons.push(button);
+					tabComponents.push(button);
 				});
 			}
 
-			return buttons;
+			return tabComponents;
 		},
 		renderCurrentTabContent = () => {
 			if (content) {

package/src/Components/Tab/TabButton.js

@@ -0,0 +1,82 @@
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions.js';
+import Button from '../Buttons/Button.js';
+import IconButton from '../Buttons/IconButton.js';
+import Xmark from '../Icons/Xmark.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+
+export default function TabButton(props) {
+	let {
+			className,
+			direction,
+			isDisabled,
+			isCurrentTab,
+			text,
+			_text,
+			useIconOnly,
+			_icon,
+			useCloseBtn,
+			onClose,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles;
+
+	className += ' ' + styles.TAB_BG_HOVER + 
+				' ' + styles.TAB_BG_ACTIVE;
+	_icon.className += ' ' + styles.TAB_ICON_COLOR_HOVER +
+						' ' + styles.TAB_ICON_COLOR_ACTIVE;
+
+	if (isCurrentTab) {
+		className += ' ' + styles.TAB_BG_CURRENT + 
+						' ' + styles.TAB_BG_CURRENT_HOVER;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_CURRENT;
+		_text.className += ' ' + styles.TAB_COLOR_CURRENT;
+	}
+	if (isDisabled) {
+		className += ' ' + styles.TAB_BG_DISABLED;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_DISABLED;
+		_text.className += ' ' + styles.TAB_COLOR_DISABLED;
+	}
+
+	let tab = null;
+	if (useIconOnly) {
+		tab = <IconButton
+					{...propsToPass}
+					{..._icon}
+					className={className}
+				/>;
+
+	} 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 = <Button
+					{...propsToPass}
+					className={className}
+					text={text}
+					_text={_text}
+					_icon={_icon}
+					rightIcon={closeBtn}
+					action="none"
+					variant="none"
+				/>;
+	}
+
+	return tab;
+}

package/src/Constants/Styles.js

@@ -103,12 +103,14 @@ const defaults = {
 	TAB_BG_ACTIVE: 'active:bg-grey-900/50',
 	TAB_BG_CURRENT: 'bg-grey-0',
 	TAB_BG_DISABLED: 'disabled:bg-grey-200',
+	TAB_BG_DISABLED_2: 'bg-grey-200',
 	TAB_BG_HOVER: 'hover:bg-grey-900/30',
 	TAB_BG_ACTIVE_HOVER: 'hover:bg-grey-200',
 	TAB_BG_CURRENT_HOVER: 'hover:bg-grey-900/30',
 	TAB_COLOR: 'text-' + BLACK,
 	TAB_COLOR_ACTIVE: 'active:text-primary-800',
-	TAB_COLOR_CURRENT: 'active:text-primary-800',
+	TAB_COLOR_CURRENT: 'text-primary-800',
+	TAB_COLOR_DISABLED: 'text-grey-400',
 	TAB_ICON_COLOR: 'text-' + BLACK,
 	TAB_ICON_COLOR_ACTIVE: 'text-' + BLACK,
 	TAB_ICON_COLOR_CURRENT: 'text-' + BLACK,