@onehat/ui 0.4.114 → 0.4.115

package/package.json

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

package/src/Components/Buttons/Button.js

@@ -1,4 +1,4 @@
-import { cloneElement, forwardRef, isValidElement, useRef } from 'react';
+import { cloneElement, forwardRef, isValidElement, useContext, useRef } from 'react';
 import {
 	Button,
 	ButtonText,
@@ -10,9 +10,12 @@ import addIconProps from '../../Functions/addIconProps.js';
 import clsx from 'clsx';
 import withComponent from '../Hoc/withComponent.js';
 import withTooltip from '../Hoc/withTooltip.js';
+import FormContext from '../Form/FormContext.js';
 import _ from 'lodash';
 
 const ButtonComponent = forwardRef((props, ref) => {
+
+	const formContext = useContext(FormContext);
 	let {
 			self,
 			text, // the text to display on the button
@@ -32,6 +35,16 @@ const ButtonComponent = forwardRef((props, ref) => {
 		propsToPass.onPress = propsToPass.handler; // alias
 	}
 
+	const {
+		disableOnInvalid,
+		...propsToPassWithoutDisableOnInvalid
+	} = propsToPass;
+	propsToPass = propsToPassWithoutDisableOnInvalid;
+
+	if (_.isNil(propsToPass.isDisabled) && disableOnInvalid && formContext && !formContext.isValid) {
+		propsToPass.isDisabled = true;
+	}
+
 	if (icon) {
 		if (isValidElement(icon)) {
 			if (_icon) {
@@ -64,8 +77,10 @@ const ButtonComponent = forwardRef((props, ref) => {
 		'flex',
 		'flex-row',
 		'items-center',
-		'disabled:opacity-40',
-		'disabled:cursor-not-allowed',
+		'data-[disabled=true]:opacity-40',
+		'data-[disabled=true]:cursor-not-allowed',
+		'web:disabled:opacity-40',
+		'web:disabled:cursor-not-allowed',
 	);
 	if (isExpandToFillVertical) {
 		// IMPORTANT! Otherwise the button will cut off the vertical content due to size classes automatically added by Gluestack (e.g. h-10)

package/src/Components/Form/Form.js

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useState, useRef, isValidElement, } from 'react';
+import { useEffect, useCallback, useState, useRef, isValidElement, cloneElement, Children, } from 'react';
 import {
 	Box,
 	HStack,
@@ -59,6 +59,7 @@ import Xmark from '../Icons/Xmark.js';
 import Check from '../Icons/Check.js';
 import Footer from '../Layout/Footer.js';
 import Label from '../Form/Label.js';
+import FormContext from '../Form/FormContext.js';
 import _ from 'lodash';
 
 // TODO: memoize field Components
@@ -1119,6 +1120,42 @@ function Form(props) {
 				alert(errors.message);
 			}
 		},
+		decorateAdditionalFooterItems = (elements) => {
+			const decorateElement = (element) => {
+				if (!isValidElement(element)) {
+					return element;
+				}
+
+				const
+					elementProps = element.props || {},
+					propsToInject = {};
+
+				if (elementProps.disableOnInvalid && !formState.isValid) {
+					propsToInject.isDisabled = true;
+				}
+
+				if (typeof elementProps.onPress === 'function' && (elementProps.disableOnInvalid || elementProps.skipSubmit || elementProps.submitWithForm)) {
+					const originalOnPress = elementProps.onPress;
+					if (elementProps.skipSubmit) {
+						propsToInject.onPress = () => originalOnPress();
+					} else {
+						propsToInject.onPress = (e) => handleSubmit(originalOnPress, onSubmitError)(e);
+					}
+				}
+
+				if (elementProps.children) {
+					propsToInject.children = Children.map(elementProps.children, decorateElement);
+				}
+
+				if (_.isEmpty(propsToInject)) {
+					return element;
+				}
+
+				return cloneElement(element, propsToInject);
+			};
+
+			return Children.map(elements, decorateElement);
+		},
 		doReset = (values) => {
 			reset(values);
 			if (onReset) {
@@ -1444,7 +1481,7 @@ function Form(props) {
 		}
 		footerItems =
 			<>
-				{additionalFooterItems}
+				{decorateAdditionalFooterItems(additionalFooterItems)}
 				{!additionalFooterItems && additionalFooterButtons && _.map(additionalFooterButtons, (props, ix) => {
 					let isDisabled = false;
 					if (props.disableOnInvalid) {
@@ -1597,7 +1634,8 @@ function Form(props) {
 		className += ' ' + props.className;
 	}
 	const scrollToTopAnchor = <Box ref={(el) => (ancillaryItemsRef.current[0] = el)} className="h-0" />;
-	return <VStackNative
+	return <FormContext.Provider value={{ isValid: formState.isValid }}>
+			<VStackNative
 				ref={formRef}
 				{...testProps(self)}
 				style={style}
@@ -1639,7 +1677,8 @@ function Form(props) {
 					{isFabVisible && fab}
 
 				</>}
-			</VStackNative>;
+			</VStackNative>
+		</FormContext.Provider>;
 }
 
 // helper fns

package/src/Components/Form/FormContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const FormContext = createContext({
+	isValid: true,
+});
+
+export default FormContext;