@onehat/ui 0.3.296 → 0.3.299

package/package.json

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

package/src/Components/Form/Form.js

@@ -31,6 +31,7 @@ import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
 import testProps from '../../Functions/testProps.js';
+import Toolbar from '../Toolbar/Toolbar.js';
 import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
@@ -848,7 +849,8 @@ function Form(props) {
 	}
 
 	const formButtons = [];
-	let formComponents,
+	let modeHeader = null,
+		formComponents,
 		editor,
 		additionalButtons,
 		isSaveDisabled = false,
@@ -889,16 +891,23 @@ function Form(props) {
 
 			additionalButtons = buildAdditionalButtons(additionalEditButtons);
 
-			formButtons.push(<Row key="buttonsRow" px={4} pt={4} alignItems="center" justifyContent="flex-end">
-								{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
-									<Button
-										{...testProps('backBtn')}
-										key="backBtn"
-										onPress={onBack}
-										leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
-										color="#fff"
-									>Back</Button>}
-								{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && !disableView &&
+			if (inArray(editorType, [EDITOR_TYPE__SIDE, EDITOR_TYPE__SMART, EDITOR_TYPE__WINDOWED]) && 
+				isSingle && editorMode === EDITOR_MODE__EDIT && 
+				(onBack || (onViewMode && !disableView))) {
+				modeHeader = <Toolbar>
+								<Row flex={1} alignItems="center">
+									{onBack &&
+										<Button
+											{...testProps('backBtn')}
+											key="backBtn"
+											onPress={onBack}
+											leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
+											color="#fff"
+											mr={4}
+										>Back</Button>}
+									<Text fontSize={20} ml={2} color="trueGray.500">Edit Mode</Text>
+								</Row>
+								{onViewMode && !disableView &&
 									<Button
 										{...testProps('toViewBtn')}
 										key="viewBtn"
@@ -906,11 +915,12 @@ function Form(props) {
 										leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
 										color="#fff"
 									>To View</Button>}
-							</Row>);
+							</Toolbar>;
+			}
 			if (editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
-				formButtons.push(<Row key="additionalButtonsRow" p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+				formButtons.push(<Toolbar key="additionalButtonsToolbar" justifyContent="flex-end" flexWrap="wrap">
 									{additionalButtons}
-								</Row>)
+								</Toolbar>)
 			}
 		}
 
@@ -948,11 +958,9 @@ function Form(props) {
 				showCloseBtn = true;
 			} else {
 				const formIsDirty = formState.isDirty;
-				// console.log('formIsDirty', formIsDirty);
-				// console.log('isPhantom', isPhantom);
-				if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
-					showCancelBtn = true;
-				}
+				// if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
+				// 	showCancelBtn = true;
+				// }
 				if (formIsDirty || isPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;
@@ -987,6 +995,7 @@ function Form(props) {
 						>{editor}</Row>}
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView _web={{ minHeight, }} width="100%" pb={1}>
+							{modeHeader}
 							{formHeader}
 							{formButtons}
 							{editor}

package/src/Components/Hoc/withModal.js

@@ -63,13 +63,16 @@ export default function withModal(WrappedComponent) {
 					w,
 				} = args;
 
+				if (!message && !body) {
+					throw new Error('Either message or body is required for showModal');
+				}
+
 				if (title) {
 					setTitle(title);
 				}
-				if (!message) {
-					throw new Error('Message is required for showModal');
+				if (message) {
+					setMessage(message);
 				}
-				setMessage(message);
 				setCanClose(canClose);
 				setIncludeCancel(includeCancel);
 				if (onNo) {
@@ -167,6 +170,7 @@ export default function withModal(WrappedComponent) {
 								h={height}
 								flex={null}
 							>
+								{canClose && <Modal.CloseButton />}
 								{title && <Modal.Header>{title}</Modal.Header>}
 								<Modal.Body
 									borderTopWidth={0}

package/src/Components/Panel/Header.js

@@ -80,7 +80,17 @@ export default function Header(props) {
 								}
 							}}
 						>
-							 <Column alignItems="center" justifyContent="flex-start" h="100%" w="100%" bg={styles.PANEL_HEADER_BG_VERTICAL} style={{ userSelect: 'none', }} testID={testID}>
+							 <Column
+							 	alignItems="center"
+								justifyContent="flex-start"
+								h="100%"
+								w="100%"
+								bg={styles.PANEL_HEADER_BG_VERTICAL}
+								borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
+								borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
+								style={{ userSelect: 'none', }}
+								testID={testID}
+							>
 								{collapseBtn}
 								<div style={{ textOrientation: 'mixed', writingMode: 'vertical-rl', }}>
 									<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
@@ -99,7 +109,16 @@ export default function Header(props) {
 						}
 					}}
 				>
-					<Row alignItems="center" justifyContent="flex-start" px={styles.PANEL_HEADER_PX} py={styles.PANEL_HEADER_PY} bg={styles.PANEL_HEADER_BG} style={{ userSelect: 'none', }} testID={testID}>
+					<Row
+						alignItems="center"
+						justifyContent="flex-start"
+						px={styles.PANEL_HEADER_PX}
+						py={styles.PANEL_HEADER_PY}
+						bg={styles.PANEL_HEADER_BG}
+						borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
+						borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
+						style={{ userSelect: 'none', }}
+						testID={testID}>
 						{closeBtn}
 						<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
 						{collapseBtn}
@@ -128,6 +147,8 @@ export default function Header(props) {
 								h="100%" 
 								w="100%"
 								bg={styles.PANEL_HEADER_BG_VERTICAL}
+								borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
+								borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
 							>
 								{collapseBtn}
 								<Column
@@ -167,6 +188,8 @@ export default function Header(props) {
 						px={styles.PANEL_HEADER_PX}
 						py={styles.PANEL_HEADER_PY}
 						bg={styles.PANEL_HEADER_BG}
+						borderBottomWidth={styles.PANEL_HEADER_BORDER_BOTTOM_WIDTH}
+						borderBottomColor={styles.PANEL_HEADER_BORDER_BOTTOM_COLOR}
 					>
 						{closeBtn}
 						<Text

package/src/Components/Viewer/Viewer.js

@@ -16,6 +16,7 @@ import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
 import testProps from '../../Functions/testProps.js';
+import Toolbar from '../Toolbar/Toolbar.js';
 import Button from '../Buttons/Button.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
@@ -254,7 +255,10 @@ function Viewer(props) {
 
 					<ScrollView _web={{ height: 1 }} width="100%" pb={1} ref={scrollViewRef}>
 						{canEdit && onEditMode &&
-							<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
+							<Toolbar justifyContent="flex-end">
+								<Row flex={1} alignItems="center">
+									<Text fontSize={20} ml={2} color="trueGray.500">View Mode</Text>
+								</Row>
 								<Button
 									{...testProps('toEditBtn')}
 									key="editBtn"
@@ -262,11 +266,11 @@ function Viewer(props) {
 									leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
 									color="#fff"
 								>To Edit</Button>
-							</Row>}
+							</Toolbar>}
 						{!_.isEmpty(additionalButtons) && 
-							<Row p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+							<Toolbar justifyContent="flex-end" flexWrap="wrap">
 								{additionalButtons}
-							</Row>}
+							</Toolbar>}
 						<Column>
 							{containerWidth >= CONTAINER_THRESHOLD ? <Row p={4} pl={0}>{viewerComponents}</Row> : null}
 							{containerWidth < CONTAINER_THRESHOLD ? <Column p={4}>{viewerComponents}</Column> : null}

package/src/Constants/Styles.js

@@ -87,6 +87,8 @@ const defaults = {
 	ICON_BUTTON_PY: 2,
 	INLINE_EDITOR_MIN_WIDTH: 150,
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
+	PANEL_HEADER_BORDER_BOTTOM_COLOR: 'trueGray.400',
+	PANEL_HEADER_BORDER_BOTTOM_WIDTH: 1,
 	PANEL_HEADER_BG: 'primary.100',
 	PANEL_HEADER_BG_VERTICAL: 'primary.100',
 	PANEL_HEADER_ICON_COLOR: WHITE,