@onehat/ui 0.3.84 → 0.3.86

package/package.json

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

package/src/Components/Buttons/IconButton.js

@@ -61,6 +61,7 @@ const
 									bg: styles.ICON_BUTTON_BG_PRESSED,
 								}}
 								{...props}
+								size={null /* this prop was coming from above and messing things up! */}
 							>
 							{icon}
 							</Pressable>;

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/Hoc/withEditor.js

@@ -299,24 +299,33 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				setIsSaving(true);
-				await Repository.save();
+				let success;
+				try {
+					await Repository.save();
+					success = true;
+				} catch (e) {
+					success = false;
+				}
 				setIsSaving(false);
 
-				setIsAdding(false);
-				setEditorMode(EDITOR_MODE__EDIT);
-				// setIsEditorShown(false);
-				
-				if (getListeners().onAfterEdit) {
-					await getListeners().onAfterEdit(what);
-				}
-				if (onChange) {
-					onChange();
-				}
-				if (onSave) {
-					onSave(what);
+				if (success) {
+					setIsAdding(false);
+					
+					setEditorMode(EDITOR_MODE__EDIT);
+					// setIsEditorShown(false);
+					
+					if (getListeners().onAfterEdit) {
+						await getListeners().onAfterEdit(what);
+					}
+					if (onChange) {
+						onChange();
+					}
+					if (onSave) {
+						onSave(what);
+					}
 				}
 
-				return true;
+				return success;
 			},
 			onEditorCancel =  () => {
 				async function doIt() {

package/src/Components/Tab/TabBar.js

@@ -28,7 +28,7 @@ function TabBar(props) {
 			content, // e.g. Expo Router slot
 			direction = HORIZONTAL,
 			tabWidth = 150, // used on VERTICAL mode only
-			tabHeight = '44px', // used on HORIZONTAL mode only
+			tabHeight = '47px', // used on HORIZONTAL mode only
 			additionalButtons,
 			initialTabIx = 0,
 			currentTabIx,
@@ -38,6 +38,7 @@ function TabBar(props) {
 			onChangeIsCollapsed,
 			onPressTab,
 			onTabClose,
+			self,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -196,6 +197,20 @@ function TabBar(props) {
 						tabIcon.as = Type;
 					}
 				}
+				let closeBtn;
+				if (onTabClose && !tab.disableCloseBox) {
+					closeBtn = <IconButton
+									key={'tabCloseButton' + ix}
+									onPress={() => onTabClose(ix)}
+									icon={Xmark}
+									_icon={{
+										color: isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR,
+										...iconProps,
+									}}
+									tooltip="Close Tab"
+									p={0}
+								/>;
+				}
 				if (useIconButton) {
 					button = <IconButton
 								key={'tabIconButton' + ix}
@@ -213,6 +228,11 @@ function TabBar(props) {
 								bg={isCurrentTab ? styles.TAB_ACTIVE_BG : styles.TAB_BG}
 								tooltip={tab.title}
 							/>;
+					// button = <Row
+					// 			key={'tab' + ix}
+					// 		>
+					// 			{button}
+					// 		</Row>;
 				} else {
 					button = <Button
 								key={'tabButton' + ix}
@@ -222,12 +242,19 @@ function TabBar(props) {
 											{...iconProps}
 											{...tabIcon}
 										/>}
+								// endIcon={<Icon
+								// 			color={isCurrentTab ? styles.TAB_ACTIVE_ICON_COLOR : styles.TAB_ICON_COLOR}
+								// 			{...iconProps}
+								// 			{...tabIcon}
+								// 		/>}
+								endIcon={closeBtn}
 								{...buttonProps}
 								{...thisButtonProps}
 								_hover={{
 									bg: isCurrentTab? styles.TAB_ACTIVE_HOVER_BG : styles.TAB_HOVER_BG,
 								}}
 								bg={isCurrentTab ? styles.TAB_ACTIVE_BG : styles.TAB_BG}
+								direction="row"
 							>
 								<Text
 									color={isCurrentTab ? styles.TAB_ACTIVE_COLOR : styles.TAB_COLOR}
@@ -238,19 +265,6 @@ function TabBar(props) {
 					 			>{tab.title}</Text>
 							</Button>;
 				}
-				if (onTabClose) {
-					button = <Row
-								key={'tab' + ix}
-							>
-								{button}
-								<IconButton
-									key={'tabXButton' + ix}
-									onPress={() => onTabClose(ix)}
-									icon={Xmark}
-									tooltip="Close Tab"
-								/>
-							</Row>;
-				}
 				buttons.push(button);
 			});
 
@@ -371,6 +385,12 @@ function TabBar(props) {
 		return null;
 	}
 
+	if (self) {
+		self.getCurrentTab = getCurrentTab;
+		self.setCurrentTab = setCurrentTab;
+		self.setIsCollapsed = setIsCollapsed;
+	}
+
 	const
 		renderedTabs = renderTabs(),
 		renderedCurrentTabContent = renderCurrentTabContent(),