@onehat/ui 0.3.270 → 0.3.272

package/package.json

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

package/src/Components/Grid/Grid.js

@@ -308,6 +308,7 @@ function GridComponent(props) {
 			const items = _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 			if (canRowsReorder && CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
 				items.unshift(<IconButton
+					{...testProps('reorderBtn')}
 					key="reorderBtn"
 					parent={self}
 					reference="reorderBtn"

package/src/Components/Hoc/withAlert.js

@@ -15,6 +15,7 @@ import {
 	ALERT_MODE_CUSTOM,
 	ALERT_MODE_INFO,
 } from '../../Constants/Alert.js';
+import testProps from '../../Functions/testProps.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import CircleInfo from '../Icons/CircleInfo.js';
 import _ from 'lodash';
@@ -194,7 +195,7 @@ export default function withAlert(WrappedComponent) {
 							{canClose && <AlertDialog.CloseButton />}
 							<AlertDialog.Header>{title}</AlertDialog.Header>
 							<AlertDialog.Body>
-								<Row alignItems="center">
+								<Row alignItems="center" {...testProps('AlertDialog')}>
 									<Column w="40px" p={0} mr={5}>
 										<Icon as={mode === ALERT_MODE_INFO ? CircleInfo : TriangleExclamation} size={10} color={mode === ALERT_MODE_INFO ? '#000' : '#f00'} />
 									</Column>

package/src/Components/Hoc/withPdfButton.js

@@ -101,13 +101,18 @@ export default function withPdfButton(WrappedComponent) {
 					item.defaults.labelWidth = '90%';
 					if (!_.isEmpty(items)) {
 						const defaults = item.defaults;
-						item.children = _.map(items, (item, ix) => {
+						item.items = _.map(items, (item, ix) => {
 							return buildNextLayer(item, ix, defaults);
 						});
 					}
 					return item;
 				}
 
+
+				if (item.isHiddenInViewMode || type === 'Button') {
+					return null;
+				}
+
 				if (!item.title) {
 					const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 					if (propertyDef?.title) {
@@ -130,6 +135,9 @@ export default function withPdfButton(WrappedComponent) {
 			getStartingValues = (modalItems) => {
 				const startingValues = {};
 				function walkTree(item) {
+					if (!item) {
+						return;
+					}
 					let {
 							name,
 							items,
@@ -185,7 +193,7 @@ export default function withPdfButton(WrappedComponent) {
 						<Column bg="#fff" w={width} h={height}>
 							<FormPanel
 								title="PDF Fields to Show"
-								instructions="Please select which fields to show in the PDF."
+								instructions="Please select which parts to show in the PDF."
 								editorType={EDITOR_TYPE__PLAIN}
 								flex={1}
 								Repository={Repository}

package/src/Components/Messages/ErrorMessage.js

@@ -5,6 +5,7 @@ import {
 	Modal,
 	Text,
 } from 'native-base';
+import testProps from '../../Functions/testProps.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
 export default function ErrorMessage(props) {
@@ -14,7 +15,7 @@ export default function ErrorMessage(props) {
 			onOk,
 		} = props;
 
-	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }}>
+	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }} {...testProps('ErrorMessage')}>
 				<Modal.Content>
 					<Modal.Header>Alert</Modal.Header>
 					<Modal.Body

package/src/Components/Screens/Manager.js

@@ -5,6 +5,7 @@ import {
 	Text,
 } from 'native-base';
 import withComponent from '../Hoc/withComponent.js';
+import testProps from '../../Functions/testProps.js';
 import UiGlobals from '../../UiGlobals.js';
 import IconButton from '../Buttons/IconButton';
 import FullWidth from '../Icons/FullWidth';
@@ -95,6 +96,7 @@ function ManagerScreen(props) {
 					{allowSideBySide &&
 						<>
 							<IconButton
+								{...testProps('fullModeBtn')}
 								icon={FullWidth}
 								_icon={{
 									size: '25px',
@@ -105,6 +107,7 @@ function ManagerScreen(props) {
 								tooltip="Full Width"
 							/>
 							<IconButton
+								{...testProps('sideModeBtn')}
 								icon={SideBySide}
 								_icon={{
 									size: '25px',

package/src/Components/Tab/TabBar.js

@@ -13,6 +13,7 @@ import {
 } from '../../Constants/Directions.js';
 import UiGlobals from '../../UiGlobals.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
+import testProps from '../../Functions/testProps.js';
 import withComponent from '../Hoc/withComponent.js';
 import IconButton from '../Buttons/IconButton.js';
 import Minimize from '../Icons/Minimize.js';
@@ -97,6 +98,7 @@ function TabBar(props) {
 			let button;
 			if (isCollapsed) {
 				button = <IconButton
+							{...testProps('toggleBtn')}
 							key="toggleBtn"
 							onPress={onToggleCollapse}
 							{...buttonProps}
@@ -112,6 +114,7 @@ function TabBar(props) {
 						/>;
 			} else {
 				button = <Button
+							{...testProps('toggleBtn')}
 							key="toggleBtn"
 							onPress={onToggleCollapse}
 							leftIcon={<Icon
@@ -209,6 +212,7 @@ function TabBar(props) {
 				let closeBtn;
 				if (onTabClose && !tab.disableCloseBox) {
 					closeBtn = <IconButton
+									{...testProps('tabCloseButton-' + ix)}
 									key={'tabCloseButton' + ix}
 									onPress={() => onTabClose(ix)}
 									icon={Xmark}
@@ -222,6 +226,7 @@ function TabBar(props) {
 				}
 				if (useIconButton) {
 					button = <IconButton
+								{...testProps(tab.path)}
 								key={'tabIconButton' + ix}
 								onPress={() => setCurrentTab(ix)}
 								{...buttonProps}
@@ -244,6 +249,7 @@ function TabBar(props) {
 					// 		</Row>;
 				} else {
 					button = <Button
+								{...testProps(tab.path)}
 								key={'tabButton' + ix}
 								onPress={() => setCurrentTab(ix)}
 								leftIcon={<Icon
@@ -411,12 +417,14 @@ function TabBar(props) {
 	let tabBar = null;
 	if (direction === VERTICAL) {
 		tabBar = <Column
+						{...testProps('TabBar')}
 						alignItems="center"
 						justifyContent="flex-start"
 						py={2}
 						pl={isCollapsed ? 1 : 4}
 						bg={styles.TAB_BAR_BG}
 						w={isCollapsed ? '50px' : tabWidth}
+						{...propsToPass}
 					>
 						{renderedTabs}
 						<Column flex={1} w="100%" justifyContent="flex-end">
@@ -438,6 +446,7 @@ function TabBar(props) {
 	}
 	if (direction === HORIZONTAL) {
 		tabBar = <Row
+					{...testProps('TabBar')}
 					alignItems="center"
 					justifyContent="flex-start"
 					p={2}

package/src/Components/Toolbar/Pagination.js

@@ -5,6 +5,7 @@ import {
 	Text,
 } from 'native-base';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
@@ -64,6 +65,7 @@ export default function Pagination(props) {
 			isDisabled = (pageEnd === total);
 			if (showPagination) {
 				items.push(<Button
+								{...testProps('showMoreBtn')}
 								key="showMore"
 								parent={self}
 								reference="showMoreBtn"
@@ -74,6 +76,7 @@ export default function Pagination(props) {
 			}
 			if (!Repository.isLocal) {
 				items.push(<IconButton
+								{...testProps('reloadPageBtn')}
 								key="reload"
 								parent={self}
 								reference="reloadPageBtn"
@@ -88,6 +91,7 @@ export default function Pagination(props) {
 			isDisabled = page === 1;
 			if (showPagination) {
 				items.push(<IconButton
+								{...testProps('firstPageBtn')}
 								key="first"
 								parent={self}
 								reference="firstPageBtn"
@@ -98,6 +102,7 @@ export default function Pagination(props) {
 								tooltip="First Page"
 							/>);
 				items.push(<IconButton
+								{...testProps('prevPageBtn')}
 								key="prev"
 								parent={self}
 								reference="prevPageBtn"
@@ -116,6 +121,7 @@ export default function Pagination(props) {
 								>
 									<Text mr={2}>Page</Text>
 									<Input
+										{...testProps('pageInput')}
 										parent={self}
 										reference="pageInput"
 										keyboardType="numeric"
@@ -132,6 +138,7 @@ export default function Pagination(props) {
 
 				isDisabled = page === totalPages || totalPages <= 1;
 				items.push(<IconButton
+								{...testProps('nextPageBtn')}
 								key="next"
 								parent={self}
 								reference="nextPageBtn"
@@ -142,6 +149,7 @@ export default function Pagination(props) {
 								tooltip="Next Page"
 							/>);
 				items.push(<IconButton
+								{...testProps('lastPageBtn')}
 								key="last"
 								parent={self}
 								reference="lastPageBtn"
@@ -155,6 +163,7 @@ export default function Pagination(props) {
 
 			if (!Repository.isLocal) {
 				items.push(<IconButton
+								{...testProps('reloadPageBtn')}
 								key="reload"
 								parent={self}
 								reference="reloadPageBtn"
@@ -165,7 +174,12 @@ export default function Pagination(props) {
 							/>);
 			}
 			if (showPagination && !minimize && !disablePageSize) {
-				items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
+				items.push(<PageSizeCombo
+								{...testProps('pageSize')}
+								key="pageSize"
+								pageSize={pageSize}
+								Repository={Repository}
+							/>);
 			}
 			if (showPagination && !minimize) {
 				let pageSpan = `${pageStart} – ${pageEnd}`;

package/src/Functions/getIconButtonFromConfig.js

@@ -1,4 +1,5 @@
 import IconButton from '../Components/Buttons/IconButton.js';
+import testProps from './testProps.js';
 import UiGlobals from '../UiGlobals.js';
 
 export default function getIconButtonFromConfig(config, ix, parent) {
@@ -26,6 +27,7 @@ export default function getIconButtonFromConfig(config, ix, parent) {
 			color: isDisabled ? styles.TOOLBAR_ITEMS_DISABLED_COLOR : styles.TOOLBAR_ITEMS_COLOR,
 		};
 	return <IconButton
+				{...testProps(key || 'btn-' + ix)}
 				key={key || ix}
 				parent={parent}
 				reference={key || ix}

package/src/Functions/testProps.js

@@ -11,7 +11,7 @@ export default function testProps(id) {
 		// id is actually 'self' object
 		id = id.reference;
 	}
-	if (id.match(/\s/g)) {
+	if (id?.match(/\s/g)) {
 		id = id.replace(/\s/g, '_'); // convert any spaces to underscores
 	}
 	if (!window && Platform.OS === 'android') {