@onehat/ui 0.3.85 → 0.3.88

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.85",
+	"version": "0.3.88",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -33,15 +33,15 @@
 		"@reduxjs/toolkit": "^1.9.5",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",
-		"locutus": "^2.0.16",
 		"native-base": "^3.4.28",
-		"react-hook-form": "^7.45.0",
+		"react-hook-form": "^7.49.2",
 		"react-redux": "^8.1.2",
 		"yup": "^1.2.0"
 	},
 	"peerDependencies": {
 		"@files-ui/react": "^1.0.8",
 		"ckeditor5-custom-build": "file:ckeditor5",
+		"locutus": "^2.0.16",
 		"react": "*",
 		"react-color": "^2.19.3",
 		"react-datetime": "^3.2.0",

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

@@ -24,6 +24,7 @@ function TagComponent(props) {
 			isValueAlwaysArray,
 			isValueAsStringifiedJson,
 			Editor,
+			_combo = {},
 
 			// parent Form
 			onChangeValue,
@@ -144,8 +145,12 @@ function TagComponent(props) {
 						onView={() => onView(val)}
 						onDelete={isEditor ? () => onDelete(val) : null}
 					/>;
-		}),
-		WhichCombo = isEditor ? ComboEditor : Combo;
+		});
+
+	let WhichCombo = ComboEditor;
+	if (!_.isNil(_combo.isEditor) && !_combo.isEditor) {
+		WhichCombo = Combo;
+	}
 
 	const sizeProps = {};
 	if (!props.flex && !props.w) {
@@ -184,6 +189,7 @@ function TagComponent(props) {
 							onChangeValue={onChangeComboValue}
 							parent={self}
 							reference="combo"
+							{..._combo}
 						/>}
 				</Column>
 				{isViewerShown && 

package/src/Components/Form/Form.js

@@ -121,6 +121,7 @@ function Form(props) {
 		record = props.record?.length === 1 ? props.record[0] : props.record,
 		isMultiple = _.isArray(record),
 		isSingle = !isMultiple, // for convenience
+		isPhantom = !!record?.isPhantom,
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
 		[containerWidth, setContainerWidth] = useState(),
@@ -157,6 +158,7 @@ function Form(props) {
 			// shouldUnregister: false,
 			// shouldUseNativeValidation: false,
 			resolver: yupResolver(validator || (isMultiple ? disableRequiredYupFields(Repository?.schema?.model?.validator) : Repository?.schema?.model?.validator) || yup.object()),
+			context: { isPhantom },
 		}),
 		buildFromColumnsConfig = () => {
 			// For InlineEditor
@@ -738,7 +740,7 @@ function Form(props) {
 			isSaveDisabled = true;
 			isSubmitDisabled = true;
 		}
-		if (_.isEmpty(formState.dirtyFields) && !record?.isPhantom) {
+		if (_.isEmpty(formState.dirtyFields) && !isPhantom) {
 			isSaveDisabled = true;
 		}
 
@@ -759,12 +761,10 @@ function Form(props) {
 			if (isEditorViewOnly) {
 				showCloseBtn = true;
 			} else {
-				const
-					formIsDirty = formState.isDirty,
-					recordIsPhantom = record?.isPhantom;
+				const formIsDirty = formState.isDirty;
 				// console.log('formIsDirty', formIsDirty);
-				// console.log('recordIsPhantom', recordIsPhantom);
-				if (formIsDirty || recordIsPhantom) {
+				// console.log('isPhantom', isPhantom);
+				if (formIsDirty || isPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;
 					}

package/src/Components/Messages/ErrorMessage.js

@@ -1,4 +1,5 @@
 import {
+	Box,
 	Button,
 	Icon,
 	Modal,
@@ -6,13 +7,13 @@ import {
 } from 'native-base';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
-export default function ErrorMsg(props) {
+export default function ErrorMessage(props) {
 	const {
 			text = 'Error',
 			color = 'red.500',
 			onOk,
 		} = props;
-console.log('render ErrorMessage text', text);
+
 	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }}>
 				<Modal.Content>
 					<Modal.Header>Alert</Modal.Header>
@@ -25,7 +26,9 @@ console.log('render ErrorMessage text', text);
 						borderRadius={5}
 						flexDirection="row"
 					>
-						<Icon as={TriangleExclamation} color="red.500" size="md" mr={1} />
+						<Box w="50px" mx={2}>
+							<Icon as={TriangleExclamation} color="red.500" size="10" />
+						</Box>
 						<Text color={color} fontSize="18px">{text}</Text>
 					</Modal.Body>
 					<Modal.Footer py={2} pr={4}>

package/src/Components/Tab/TabBar.js

@@ -396,10 +396,9 @@ function TabBar(props) {
 		renderedCurrentTabContent = renderCurrentTabContent(),
 		renderedToggleButton = !disableCollapse ? renderToggleButton() : null;
 
-
+	let tabBar = null;
 	if (direction === VERTICAL) {
-		return <Row flex={1} w="100%" {...propsToPass}>
-					<Column
+		tabBar = <Column
 						alignItems="center"
 						justifyContent="flex-start"
 						py={2}
@@ -411,21 +410,22 @@ function TabBar(props) {
 						<Column flex={1} w="100%" justifyContent="flex-end">
 							{renderedToggleButton}
 						</Column>
-					</Column>
-					{renderedCurrentTabContent && 
+					</Column>;
+		if (renderedCurrentTabContent) {
+			tabBar = <Row flex={1} w="100%" {...propsToPass}>
+						{tabBar}
 						<Column
 							alignItems="center"
 							justifyContent="flex-start"
 							flex={1}
 						>
 							{renderedCurrentTabContent}
-						</Column>}
-				</Row>;
+						</Column>
+					</Row>;
+		}
 	}
-
-	// HORIZONTAL
-	return <Column flex={1} w="100%" {...propsToPass}>
-				<Row
+	if (direction === HORIZONTAL) {
+		tabBar = <Row
 					alignItems="center"
 					justifyContent="flex-start"
 					p={2}
@@ -439,16 +439,21 @@ function TabBar(props) {
 							{renderedToggleButton}
 						</Row>
 					</Row>
-				</Row>
-				{renderedCurrentTabContent && 
-					<Column
-						alignItems="center"
-						justifyContent="flex-start"
-						flex={1}
-					>
-						{renderedCurrentTabContent}
-					</Column>}
-			</Column>;
+				</Row>;
+		if (renderedCurrentTabContent) {
+			tabBar = <Column flex={1} w="100%" {...propsToPass}>
+						{tabBar}
+						<Column
+							alignItems="center"
+							justifyContent="flex-start"
+							flex={1}
+						>
+							{renderedCurrentTabContent}
+						</Column>
+					</Column>;
+		}
+	}
+	return tabBar;
 }
 
 export default withComponent(TabBar);