@onehat/ui 0.4.55 → 0.4.57

package/package.json

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

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

@@ -64,6 +64,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			viewerProps = {}, // popup for eyeButton
 			_input = {},
 			_editor = {},
+			_grid = {},
 			isEditor = false,
 			isDisabled = false,
 			isInTag = false,
@@ -732,6 +733,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 			'selectorSelectedField',
 			'usePermissions',
 		]);
+		if (!_.isEmpty(_grid)){
+			_.assign(gridProps, _grid);
+		}
 		if (!isInTag) {
 			gridProps.value = props.value;
 		}

package/src/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,146 @@
+import { useState, } from 'react';
+import {
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+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';
+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 = [],
+
+			// 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.post,
+				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 = <CenterBox><Text>Success</Text></CenterBox>;
+			if (response.message) {
+				const decodedMessage = JSON.parse(response.message);
+				results = _.isArray(decodedMessage) ? 
+								<VStack>
+									{decodedMessage?.map((line, ix)=> {
+										return <Text key={ix}>{line}</Text>;
+									})}
+								</VStack> : 
+								<Text>{decodedMessage}</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}
+									/>,
+						},
+						{
+							title: 'Results',
+							icon: Stop,
+							isDisabled: currentTabIx !== 1,
+							content: results,
+						},
+					]}
+					currentTabIx={currentTabIx}
+					canToggleCollapse={false}
+				/>
+			</Panel>;
+}
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					reference={props.reference || 'AsyncOperation'}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withComponent(withAlert(AsyncOperation)));

package/src/Components/Tab/TabBar.js

@@ -30,12 +30,13 @@ 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,
 			onChangeCurrentTab,
 			onChangeIsCollapsed,
 			onPressTab,
@@ -126,7 +127,7 @@ function TabBar(props) {
 						/>;
 			} else {
 				buttonClassName += `
-					w-[200px]
+					${direction === VERTICAL ? 'w-[200px]' : ''}
 					pr-0
 					mr-0
 				`;
@@ -294,6 +295,7 @@ function TabBar(props) {
 								_icon={_icon}
 								className={buttonClassName}
 								tooltip={tab.title}
+								isDisabled={tab.isDisabled}
 							/>;
 				} else {
 					if (direction === VERTICAL) {
@@ -329,6 +331,7 @@ function TabBar(props) {
 									className: textClassName,
 									...textPropsToPass,
 								}}
+								isDisabled={tab.isDisabled}
 								action="none"
 								variant="none"
 							/>;
@@ -503,9 +506,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 +524,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 +534,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">

package/src/Components/index.js

@@ -165,6 +165,7 @@ import SquareCheck from './Icons/SquareCheck.js';
 import SquareCheckRegular from './Icons/SquareCheckRegular.js';
 import SquareMinus from './Icons/SquareMinus.js';
 import SquareRegular from './Icons/SquareRegular.js';
+import Stop from './Icons/Stop.js';
 import Store from './Icons/Store.js';
 import Table from './Icons/Table.js';
 import ThumbsDown from './Icons/ThumbsDown.js';
@@ -408,6 +409,7 @@ const components = {
 	SquareCheckRegular,
 	SquareMinus,
 	SquareRegular,
+	Stop,
 	Store,
 	Table,
 	ThumbsDown,