@onehat/ui 0.3.130 → 0.3.133

package/package.json

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

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

@@ -51,6 +51,7 @@ export function ComboComponent(props) {
 			onRowPress,
 			icon,
 			Editor, // only used for the eyeButton
+			onSave, // to hook into when menu saves (ComboEditor only)
 
 			// withComponent
 			self,
@@ -81,6 +82,7 @@ export function ComboComponent(props) {
 		[isRendered, setIsRendered] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isSearchMode, setIsSearchMode] = useState(false),
+		[containerWidth, setContainerWidth] = useState(),
 		[gridSelection, setGridSelection] = useState(null),
 		[textInputValue, setTextInputValue] = useState(''),
 		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
@@ -88,6 +90,10 @@ export function ComboComponent(props) {
 		[width, setWidth] = useState(0),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
+		onLayout = (e) => {
+			setIsRendered(true);
+			setContainerWidth(e.nativeEvent.layout.width);
+		},
 		showMenu = async () => {
 			if (isMenuShown) {
 				return;
@@ -738,6 +744,9 @@ export function ComboComponent(props) {
 							const id = entity.id;
 							setValue(id);
 						}
+						if (onSave) {
+							onSave(selection);
+						}
 					}}
 					onRowPress={(item, e) => {
 						if (onRowPress) {
@@ -896,13 +905,31 @@ export function ComboComponent(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
-	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
-							{xButton}
-							{eyeButton}
-							{inputAndTrigger}
-							{additionalButtons}
-							{dropdownMenu}
-						</Row>;
+
+	if (isRendered && additionalButtons?.length && containerWidth < 500) {
+		// be responsive for small screen sizes and bump additionalButtons to the next line
+		assembledComponents = 
+			<Column>
+				<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1}>
+					{xButton}
+					{eyeButton}
+					{inputAndTrigger}
+					{dropdownMenu}
+				</Row>
+				<Row mt={2}>
+					{additionalButtons}
+				</Row>
+			</Column>;
+	} else {
+		assembledComponents = 
+			<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={onLayout}>
+				{xButton}
+				{eyeButton}
+				{inputAndTrigger}
+				{additionalButtons}
+				{dropdownMenu}
+			</Row>;
+	}
 	
 	if (isViewerShown && Editor) {
 		const propsForViewer = _.pick(props, [

package/src/Components/Form/Form.js

@@ -521,10 +521,20 @@ function Form(props) {
 							}
 
 							if (item.additionalEditButtons) {
-								element = <Row flex={1} flexWrap="wrap">
+								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
+								if (containerWidth > 400) {
+									element = <Row flex={1} flexWrap="wrap">
+													{element}
+													{buttons}
+												</Row>;
+								} else {
+									element = <Column flex={1} w="100%">
 												{element}
-												{buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState })}
-											</Row>;
+												<Row flex={1} w="100%" mt={2} flexWrap="wrap">
+													{buttons}
+												</Row>
+											</Column>;
+								}
 							}
 								
 							let isRequired = false,

package/src/Components/Hoc/withContextMenu.js

@@ -10,8 +10,14 @@ import {
 	Spacer,
 	Text,
 } from 'native-base';
+import {
+	UI_MODE_WEB,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
 import _ from 'lodash';
 
+const CONTEXT_MENU_WIDTH = 180;
+
 export default function withContextMenu(WrappedComponent) {
 	return (props) => {
 		const {
@@ -42,6 +48,29 @@ export default function withContextMenu(WrappedComponent) {
 				setIsContextMenuShown(true);
 				setContextMenuX(e.nativeEvent.pageX);
 				setContextMenuY(e.nativeEvent.pageY);
+			},
+			onLayout = (e) => {
+				if (CURRENT_MODE !== UI_MODE_WEB) {
+					return;
+				}
+
+				const
+					{
+						top,
+						left,
+						// width,
+						height,
+					} = e.nativeEvent.layout,
+					screenWidth = window.innerWidth,
+					screenHeight = window.innerHeight,
+					width = CONTEXT_MENU_WIDTH;
+
+				if (screenWidth - width < left) {
+					setContextMenuX(screenWidth - width);
+				}
+				if (screenHeight - height < top) {
+					setContextMenuY(screenHeight - height);
+				}
 			};
 
 		useEffect(() => {
@@ -133,7 +162,7 @@ export default function withContextMenu(WrappedComponent) {
 						isOpen={isContextMenuShown && !disableContextMenu}
 						onClose={() => setIsContextMenuShown(false)}
 					>
-						<Column bg="#fff" w={180} position="absolute" top={contextMenuY} left={contextMenuX}>
+						<Column bg="#fff" w={CONTEXT_MENU_WIDTH} position="absolute" top={contextMenuY} left={contextMenuX} onLayout={onLayout}>
 							{contextMenuItemComponents}
 						</Column>
 					</Modal>

package/src/Components/Screens/Manager.js

@@ -25,9 +25,13 @@ function ManagerScreen(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		id = props.id || props.self?.path,
-		[isReady, setIsReady] = useState(false),
+		[isRendered, setIsRendered] = useState(false),
+		[allowSideBySide, setAllowSideBySide] = useState(false),
 		[mode, setModeRaw] = useState(MODE_FULL),
 		setMode = (newMode) => {
+			if (!allowSideBySide && newMode === MODE_SIDE) {
+				return;
+			}
 			if (newMode === mode) {
 				return; // no change
 			}
@@ -35,12 +39,22 @@ function ManagerScreen(props) {
 			if (id) {
 				setSaved(id + '-mode', newMode);
 			}
+		},
+		onLayout = (e) => {
+			const
+				containerWidth = e.nativeEvent.layout.width,
+				allowSideBySide = containerWidth > 600;
+			setAllowSideBySide(allowSideBySide);
+			setIsRendered(true);
 		};
 
 	useEffect(() => {
+		if (!isRendered) {
+			return;
+		}
+
 		// Restore saved settings
 		(async () => {
-
 			if (id) {
 				const
 					key = id + '-mode',
@@ -49,19 +63,11 @@ function ManagerScreen(props) {
 					setMode(val);
 				}
 			}
-
-			if (!isReady) {
-				setIsReady(true);
-			}
 		})();
-	}, []);
-
-	if (!isReady) {
-		return null;
-	}
+	}, [isRendered]);
 
 	let whichComponent;
-	if (mode === MODE_FULL) {
+	if (!allowSideBySide || mode === MODE_FULL) {
 		whichComponent = fullModeComponent;
 	} else if (mode === MODE_SIDE) {
 		whichComponent = sideModeComponent;
@@ -74,38 +80,42 @@ function ManagerScreen(props) {
 		};
 	}
 
-	return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%">
-				<Row
-					h="80px"
-					py={2}
-					borderBottomWidth={2}
-					borderBottomColor="#ccc"
-				>
-					<Text p={4} fontSize="26" fontWeight={700} {...textProps}>{title}</Text>
-					<IconButton
-						icon={FullWidth}
-						_icon={{
-							size: '25px',
-							color: mode === MODE_FULL ? 'primary.100' : '#000',
-						}}
-						disabled={mode === MODE_FULL}
-						onPress={() => setMode(MODE_FULL)}
-						tooltip="Full Width"
-					/>
-					<IconButton
-						icon={SideBySide}
-						_icon={{
-							size: '25px',
-							color: mode === MODE_SIDE ? 'primary.100' : '#000',
-						}}
-						disabled={mode === MODE_SIDE}
-						onPress={() => setMode(MODE_SIDE)}
-						tooltip="Side Editor"
-					/>
-				</Row>
-
-				{whichComponent}
-
+	return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%" onLayout={onLayout}>
+				{isRendered && 
+					<>
+						<Row
+							h="80px"
+							py={2}
+							borderBottomWidth={2}
+							borderBottomColor="#ccc"
+						>
+							<Text p={4} fontSize="26" fontWeight={700} {...textProps}>{title}</Text>
+							{allowSideBySide &&
+								<>
+									<IconButton
+										icon={FullWidth}
+										_icon={{
+											size: '25px',
+											color: mode === MODE_FULL ? 'primary.100' : '#000',
+										}}
+										disabled={mode === MODE_FULL}
+										onPress={() => setMode(MODE_FULL)}
+										tooltip="Full Width"
+									/>
+									<IconButton
+										icon={SideBySide}
+										_icon={{
+											size: '25px',
+											color: mode === MODE_SIDE ? 'primary.100' : '#000',
+										}}
+										disabled={mode === MODE_SIDE}
+										onPress={() => setMode(MODE_SIDE)}
+										tooltip="Side Editor"
+									/>
+								</>}
+						</Row>
+						{whichComponent}
+					</>}
 			</Column>;
 }