@onehat/ui 0.3.295 → 0.3.298

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.295",
+	"version": "0.3.298",
 	"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';
@@ -88,6 +89,7 @@ function Form(props) {
 			additionalEditButtons,
 			useAdditionalEditButtons = true,
 			additionalFooterButtons,
+			disableFooter = false,
 			
 			// sizing of outer container
 			h,
@@ -847,7 +849,8 @@ function Form(props) {
 	}
 
 	const formButtons = [];
-	let formComponents,
+	let modeHeader = null,
+		formComponents,
 		editor,
 		additionalButtons,
 		isSaveDisabled = false,
@@ -888,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"
@@ -905,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 justifyContent="flex-end" flexWrap="wrap">
 									{additionalButtons}
-								</Row>)
+								</Toolbar>)
 			}
 		}
 
@@ -947,23 +958,9 @@ function Form(props) {
 				showCloseBtn = true;
 			} else {
 				const formIsDirty = formState.isDirty;
-				// console.log('formIsDirty', formIsDirty);
-				// console.log('isPhantom', isPhantom);
-
-
-
-				
-				// LEFT OFF HERE
-				// The code I wrote below was supposed to be for the Tree search but messed up the standard
-				// windowed editors. Need to figure out how to make it work for both.
-				// Also, when crudding two records on the same tree in succession, the second record throws an error.
-
-
-
-
-				if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
-					showCancelBtn = true;
-				}
+				// if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
+				// 	showCancelBtn = true;
+				// }
 				if (formIsDirty || isPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;
@@ -998,84 +995,86 @@ function Form(props) {
 						>{editor}</Row>}
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView _web={{ minHeight, }} width="100%" pb={1}>
+							{modeHeader}
 							{formHeader}
 							{formButtons}
 							{editor}
 						</ScrollView>}
 					
-					<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
-						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
+					{!disableFooter && 
+						<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
+							{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 
-							<Row flex={1} justifyContent="flex-start">
-								<Button
-									{...testProps('deleteBtn')}
-									key="deleteBtn"
-									onPress={onDelete}
-									bg="warning"
-									_hover={{
-										bg: 'warningHover',
+								<Row flex={1} justifyContent="flex-start">
+									<Button
+										{...testProps('deleteBtn')}
+										key="deleteBtn"
+										onPress={onDelete}
+										bg="warning"
+										_hover={{
+											bg: 'warningHover',
+										}}
+										color="#fff"
+									>Delete</Button>
+								</Row>}
+
+							{showResetBtn && 
+								<IconButton
+									{...testProps('resetBtn')}
+									key="resetBtn"
+									onPress={() => doReset()}
+									icon={Rotate}
+									_icon={{
+										color: !formState.isDirty ? 'trueGray.400' : '#000',
 									}}
-									color="#fff"
-								>Delete</Button>
-							</Row>}
+									isDisabled={!formState.isDirty}
+									mr={2}
+								/>}
 
-						{showResetBtn && 
-							<IconButton
-								{...testProps('resetBtn')}
-								key="resetBtn"
-								onPress={() => doReset()}
-								icon={Rotate}
-								_icon={{
-									color: !formState.isDirty ? 'trueGray.400' : '#000',
-								}}
-								isDisabled={!formState.isDirty}
-								mr={2}
-							/>}
+							{showCancelBtn &&
+								<Button
+									{...testProps('cancelBtn')}
+									key="cancelBtn"
+									variant="ghost"
+									onPress={onCancel}
+									color="#fff"
+								>Cancel</Button>}
+								
+							{showCloseBtn && 
+								<Button
+									{...testProps('closeBtn')}
+									key="closeBtn"
+									variant="ghost"
+									onPress={onClose}
+									color="#fff"
+								>Close</Button>}
 
-						{showCancelBtn &&
-							<Button
-								{...testProps('cancelBtn')}
-								key="cancelBtn"
-								variant="ghost"
-								onPress={onCancel}
-								color="#fff"
-							>Cancel</Button>}
+							{showSaveBtn && 
+								<Button
+									{...testProps('saveBtn')}
+									key="saveBtn"
+									onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
+									isDisabled={isSaveDisabled}
+									color="#fff"
+								>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
 							
-						{showCloseBtn && 
-							<Button
-								{...testProps('closeBtn')}
-								key="closeBtn"
-								variant="ghost"
-								onPress={onClose}
-								color="#fff"
-							>Close</Button>}
-
-						{showSaveBtn && 
-							<Button
-								{...testProps('saveBtn')}
-								key="saveBtn"
-								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
-								isDisabled={isSaveDisabled}
-								color="#fff"
-							>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
+							{showSubmitBtn && 
+								<Button
+									{...testProps('submitBtn')}
+									key="submitBtn"
+									onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
+									isDisabled={isSubmitDisabled}
+									color="#fff"
+								>{submitBtnLabel || 'Submit'}</Button>}
 						
-						{showSubmitBtn && 
-							<Button
-								{...testProps('submitBtn')}
-								key="submitBtn"
-								onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
-								isDisabled={isSubmitDisabled}
-								color="#fff"
-							>{submitBtnLabel || 'Submit'}</Button>}
-					
-						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
-							return <Button
-										{...testProps('additionalFooterBtn-' + props.key)}
-										{...props}
-										onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
-									>{props.text}</Button>;
-						})}
-					</Footer>
+							{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
+								return <Button
+											{...testProps('additionalFooterBtn-' + props.key)}
+											{...props}
+											onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
+										>{props.text}</Button>;
+							})}
+						</Footer>}
 				</>}
 			</Column>;
 }

package/src/Components/Hoc/withAlert.js

@@ -20,6 +20,9 @@ import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import CircleInfo from '../Icons/CircleInfo.js';
 import _ from 'lodash';
 
+// This HOC enables easy usage of alert dialogs in the wrapped component.
+// It can be used for simple alerts, confirmations, and custom dialogs. 
+
 export default function withAlert(WrappedComponent) {
 	return (props) => {
 

package/src/Components/Hoc/withModal.js

@@ -14,6 +14,11 @@ import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
+// This HOC enables easy usage of more complex dialogs in the wrapped component.
+// Add en embedded Form, 
+
+// Use withAlert for simple alerts, confirmations, and custom dialogs.
+
 export default function withModal(WrappedComponent) {
 	return (props) => {
 
@@ -27,14 +32,17 @@ export default function withModal(WrappedComponent) {
 			[canClose, setCanClose] = useState(true),
 			[includeCancel, setIncludeCancel] = useState(false),
 			[isModalShown, setIsModalShown] = useState(false),
+			[h, setHeight] = useState(250),
+			[w, setWidth] = useState(400),
 			[onOk, setOnOk] = useState(),
 			[onYes, setOnYes] = useState(),
 			[onNo, setOnNo] = useState(),
 			[customButtons, setCustomButtons] = useState(),
 			[color, setColor] = useState('#000'),
+			[body, setBody]	= useState(), 
 			autoFocusRef = useRef(null),
 			cancelRef = useRef(null),
-			[width, height] = useAdjustedWindowSize(400, 250),
+			[width, height] = useAdjustedWindowSize(w, h),
 			onCancel = () => {
 				setIsModalShown(false);
 			},
@@ -49,58 +57,65 @@ export default function withModal(WrappedComponent) {
 					onNo,
 					customButtons,
 					color,
+					// formItems = {},
+					body,
+					h,
+					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) {
+					setOnNo(() => onNo);
+				}
 				if (onOk) {
 					setOnOk(() => onOk);
 				}
 				if (onYes) {
 					setOnYes(() => onYes);
 				}
-				if (onNo) {
-					setOnNo(() => onNo);
-				}
 				if (customButtons) {
 					setCustomButtons(customButtons);
 				}
 				if (color) {
 					setColor(color);
 				}
+				if (body) {
+					setBody(body);
+				}
+				if (h) {
+					setHeight(h);
+				}
+				if (w) {
+					setWidth(w);
+				}
 
 				setIsModalShown(true);
 			};
 
 		let buttons = [];
 		if (isModalShown) {
+			// assemble buttons
 			if (includeCancel) {
 				buttons.push(<Button
 									{...testProps('cancelBtn')}
 									key="cancelBtn"
 									onPress={onCancel}
-									color="#fff"
 									colorScheme="coolGray"
 									variant="ghost" // or unstyled
 									ref={cancelRef}
 								>Cancel</Button>);
 			}
-			if (onOk) {
-				buttons.push(<Button
-								{...testProps('okBtn')}
-								key="okBtn"
-								ref={autoFocusRef}
-								onPress={onOk}
-								color="#fff"
-							>OK</Button>);
-			}
 			if (onNo) {
 				buttons.push(<Button
 								{...testProps('noBtn')}
@@ -108,18 +123,23 @@ export default function withModal(WrappedComponent) {
 								onPress={onNo}
 								color="trueGray.800"
 								variant="ghost"
-								// colorScheme="neutral"
 								mr={2}
 							>No</Button>);
 			}
+			if (onOk) {
+				buttons.push(<Button
+								{...testProps('okBtn')}
+								key="okBtn"
+								ref={autoFocusRef}
+								onPress={onOk}
+							>OK</Button>);
+			}
 			if (onYes) {
 				buttons.push(<Button
 								{...testProps('yesBtn')}
 								key="yesBtn"
 								ref={autoFocusRef}
 								onPress={onYes}
-								color="#fff"
-								// colorScheme="danger"
 							>Yes</Button>);
 			}
 			if (customButtons) {
@@ -150,21 +170,24 @@ export default function withModal(WrappedComponent) {
 								h={height}
 								flex={null}
 							>
-
+								{canClose && <Modal.CloseButton />}
 								{title && <Modal.Header>{title}</Modal.Header>}
 								<Modal.Body
 									borderTopWidth={0}
 									bg="#fff"
 									p={3}
-									justifyContent="center"
+									justifyContent=" center"
 									alignItems="center"
 									borderRadius={5}
 									flexDirection="row"
 								>
-									<Box w="50px" mx={2}>
-										<Icon as={TriangleExclamation} color={color} size="10" />
-									</Box>
-									<Text flex={1} color={color} fontSize="18px">{message}</Text>
+									{body || 
+										<>
+											<Box w="50px" mx={2}>
+												<Icon as={TriangleExclamation} color={color} size="10" />
+											</Box>
+											<Text flex={1} color={color} fontSize="18px">{message}</Text>
+										</>}
 								</Modal.Body>
 								<Modal.Footer py={2} pr={4} justifyContent="flex-end">
 									{buttons}

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,