@onehat/ui 0.3.33 → 0.3.35

package/package.json

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

package/src/Components/Form/Form.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, isValidElement, } from 'react';
+import { useEffect, useState, useRef, isValidElement, } from 'react';
 import {
 	Box,
 	Column,
@@ -106,6 +106,7 @@ function Form(props) {
 			// withAlert
 			alert,
 		} = props,
+		formRef = useRef(),
 		styles = UiGlobals.styles,
 		record = props.record?.length === 1 ? props.record[0] : props.record,
 		isMultiple = _.isArray(record),
@@ -565,6 +566,10 @@ function Form(props) {
 	if (!_.isNil(editorStateRef)) {
 		editorStateRef.current = formState; // Update state so HOC can know what's going on
 	}
+
+	if (self) {
+		self.ref = formRef;
+	}
 	
 	const sizeProps = {};
 	if (!flex && !h && !w) {
@@ -655,7 +660,7 @@ function Form(props) {
 
 	const additionalButtons = buildAdditionalButtons(additionalEditButtons);
 	
-	return <Column {...sizeProps} onLayout={onLayout}>
+	return <Column {...sizeProps} onLayout={onLayout} ref={formRef}>
 
 				<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
 					{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 

package/src/Components/Grid/Grid.js

@@ -145,6 +145,7 @@ function GridComponent(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		forceUpdate = useForceUpdate(),
+		containerRef = useRef(),
 		gridRef = useRef(),
 		isAddingRef = useRef(),
 		[isReady, setIsReady] = useState(false),
@@ -774,6 +775,9 @@ function GridComponent(props) {
 
 	}, [selectorId, selectorSelected]);
 
+	if (self) {
+		self.ref = containerRef;
+	}
 
 	isAddingRef.current = isAdding;
 
@@ -798,7 +802,7 @@ function GridComponent(props) {
 	let listFooterComponent = null;
 	if (!disableBottomToolbar) {
 		if (Repository && bottomToolbar === 'pagination' && !disablePagination && Repository.isPaginated) {
-			listFooterComponent = <PaginationToolbar Repository={Repository} toolbarItems={footerToolbarItemComponents} disablePageSize={!disableAdjustingPageSizeToHeight} />;
+			listFooterComponent = <PaginationToolbar Repository={Repository} self={self} toolbarItems={footerToolbarItemComponents} disablePageSize={!disableAdjustingPageSizeToHeight} />;
 		} else if (footerToolbarItemComponents.length) {
 			listFooterComponent = <Toolbar>{footerToolbarItemComponents}</Toolbar>;
 		}
@@ -813,6 +817,7 @@ function GridComponent(props) {
 
 	return <Column
 				{...testProps('Grid')}
+				ref={containerRef}
 				w="100%"
 				bg={bg}
 				borderWidth={styles.GRID_BORDER_WIDTH}

package/src/Components/Hoc/withComponent.js

@@ -18,6 +18,13 @@ export default function withComponent(WrappedComponent) {
 			selfRef = useRef({
 				parent,
 				reference,
+				hasChild: (childRef) => {
+					const {
+							reference,
+						} = childRef,
+						found = _.find(childrenRef.current, (ref, ix) => ix === reference);
+					return !!found;
+				},
 				registerChild: (childRef) => {
 					const {
 							reference,
@@ -44,7 +51,7 @@ export default function withComponent(WrappedComponent) {
 					selfRef.current[name] = method;
 				});
 			}
-			if (parent && reference) {
+			if (parent && reference && !parent.hasChild(selfRef.current)) {
 				parent.registerChild(selfRef.current);
 			}
 			return () => {

package/src/Components/Hoc/withInlineEditor.js

@@ -106,6 +106,7 @@ export default function withInlineEditor(WrappedComponent) {
 								>
 									{isEditorShown && <Form
 															parent={self}
+															reference="form"
 															editorType={EDITOR_TYPE__INLINE}
 															editorStateRef={editorStateRef}
 															record={selection[0]}

package/src/Components/Hoc/withPdfButton.js

@@ -158,8 +158,10 @@ export default function withPdfButton(WrappedComponent) {
 				setIsModalShown(true);
 			},
 		};
-		additionalEditButtons.push(button);
-		if (additionalEditButtons !== additionalViewButtons) { // Ensure they're NOT the same object, otherwise this would be adding it twice!
+		if (!_.find(additionalEditButtons, btn => button.key === btn.key)) { 
+			additionalEditButtons.push(button);
+		}
+		if (!_.find(additionalViewButtons, btn => button.key === btn.key)) { 
 			additionalViewButtons.push(button);
 		}
 	

package/src/Components/Hoc/withSideEditor.js

@@ -37,6 +37,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 								borderLeftColor="#ccc"
 								{...editorProps}
 								parent={self}
+								reference="editor"
 							/>}
 				/>;
 	});

package/src/Components/Hoc/withWindowedEditor.js

@@ -55,6 +55,7 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 								{...propsToPass}
 								{...editorProps}
 								parent={self}
+								reference="editor"
 							/>
 						</Modal>}
 				</>;

package/src/Components/Icons/Certificate.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M211 7.3C205 1 196-1.4 187.6.8s-14.9 8.9-17.1 17.3l-15.8 62.5-62-17.5c-8.4-2.4-17.4 0-23.5 6.1s-8.5 15.1-6.1 23.5l17.5 62-62.5 15.9c-8.4 2.1-15 8.7-17.3 17.1S1 205 7.3 211l46.2 45-46.2 45c-6.3 6-8.7 15-6.5 23.4s8.9 14.9 17.3 17.1l62.5 15.8-17.5 62c-2.4 8.4 0 17.4 6.1 23.5s15.1 8.5 23.5 6.1l62-17.5 15.8 62.5c2.1 8.4 8.7 15 17.1 17.3s17.3-.2 23.4-6.4l45-46.2 45 46.2c6.1 6.2 15 8.7 23.4 6.4s14.9-8.9 17.1-17.3l15.8-62.5 62 17.5c8.4 2.4 17.4 0 23.5-6.1s8.5-15.1 6.1-23.5l-17.5-62 62.5-15.8c8.4-2.1 15-8.7 17.3-17.1s-.2-17.3-6.4-23.4l-46.2-45 46.2-45c6.2-6.1 8.7-15 6.4-23.4s-8.9-14.9-17.3-17.1l-62.5-15.8 17.5-62c2.4-8.4 0-17.4-6.1-23.5s-15.1-8.5-23.5-6.1l-62 17.5-15.9-62.5c-2.1-8.4-8.7-15-17.1-17.3S307 1 301 7.3l-45 46.2-45-46.2z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/ClipboardCheck.js

@@ -0,0 +1,21 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      id="Layer_2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 9.51 12.68"
+      {...props}
+    >
+      <Path
+        d="M4.76 0C3.72 0 2.84.66 2.52 1.59h-.93C.72 1.59 0 2.3 0 3.18v7.93c0 .87.71 1.59 1.59 1.59h6.34c.87 0 1.59-.71 1.59-1.59V3.17c0-.87-.71-1.59-1.59-1.59H7A2.384 2.384 0 004.76-.01zm0 1.59c.44 0 .79.35.79.79s-.35.79-.79.79-.79-.35-.79-.79.35-.79.79-.79zm2.8 5.18L4.39 9.94c-.23.23-.61.23-.84 0L1.96 8.35c-.23-.23-.23-.61 0-.84s.61-.23.84 0l1.16 1.16 2.75-2.75c.23-.23.61-.23.84 0s.23.61 0 .84z"
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/Gauge.js

@@ -0,0 +1,21 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      id="Layer_2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 10.46 10.46"
+      {...props}
+    >
+      <Path
+        d="M0 5.23C0 2.34 2.34 0 5.23 0s5.23 2.34 5.23 5.23-2.34 5.23-5.23 5.23S0 8.12 0 5.23zm5.89-3.27c0-.36-.29-.65-.65-.65s-.65.29-.65.65.29.65.65.65.65-.29.65-.65zM5.24 8.5c.72 0 1.31-.59 1.31-1.31 0-.36-.14-.68-.37-.91L7.49 3.3c.11-.25 0-.54-.25-.65s-.54 0-.65.25L5.28 5.88h-.04c-.72 0-1.31.59-1.31 1.31S4.52 8.5 5.24 8.5zM3.6 2.94c0-.36-.29-.65-.65-.65s-.65.29-.65.65.29.65.65.65.65-.29.65-.65zM1.96 5.88c.36 0 .65-.29.65-.65s-.29-.65-.65-.65-.65.29-.65.65.29.65.65.65zm7.19-.65c0-.36-.29-.65-.65-.65s-.65.29-.65.65.29.65.65.65.65-.29.65-.65z"
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/Video.js

@@ -0,0 +1,20 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 11.77 7.85"
+      {...props}
+    >
+      <Path
+        d="M0 1.31C0 .59.59 0 1.31 0h5.23c.72 0 1.31.59 1.31 1.31v5.23c0 .72-.59 1.31-1.31 1.31H1.31C.59 7.85 0 7.26 0 6.54V1.31zM11.43.73c.21.11.35.34.35.58v5.23c0 .24-.13.46-.35.58s-.47.1-.67-.03L8.8 5.78l-.29-.19V2.27l.29-.19L10.76.77c.2-.13.46-.15.67-.03z"
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Toolbar/Pagination.js

@@ -18,6 +18,9 @@ export default function Pagination(props) {
 	const {
 			minimize = false,
 			disablePageSize = false,
+
+			// withComponent
+			self,
 	
 			// withData
 			Repository,
@@ -56,6 +59,8 @@ export default function Pagination(props) {
 			isDisabled = page === 1;
 		items.push(<IconButton
 						key="first"
+						parent={self}
+						reference="firstPageBtn"
 						{...iconButtonProps}
 						isDisabled={isDisabled}
 						icon={<Icon as={AnglesLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
@@ -64,6 +69,8 @@ export default function Pagination(props) {
 					/>);
 		items.push(<IconButton
 						key="prev"
+						parent={self}
+						reference="prevPageBtn"
 						{...iconButtonProps}
 						isDisabled={isDisabled}
 						icon={<Icon as={AngleLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
@@ -79,6 +86,8 @@ export default function Pagination(props) {
 						>
 							<Text mr={2}>Page</Text>
 							<Input
+								parent={self}
+								reference="pageInput"
 								keyboardType="numeric"
 								value={page?.toString()}
 								onChangeValue={(value) => Repository.setPage(value)}
@@ -94,6 +103,8 @@ export default function Pagination(props) {
 		isDisabled = page === totalPages || totalPages <= 1;
 		items.push(<IconButton
 						key="next"
+						parent={self}
+						reference="nextPageBtn"
 						{...iconButtonProps}
 						isDisabled={isDisabled}
 						icon={<Icon as={AngleRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
@@ -102,6 +113,8 @@ export default function Pagination(props) {
 					/>);
 		items.push(<IconButton
 						key="last"
+						parent={self}
+						reference="lastPageBtn"
 						{...iconButtonProps}
 						isDisabled={isDisabled}
 						icon={<Icon as={AnglesRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
@@ -111,6 +124,8 @@ export default function Pagination(props) {
 		if (!Repository.isLocal) {
 			items.push(<IconButton
 							key="reload"
+							parent={self}
+							reference="reloadPageBtn"
 							{...iconButtonProps}
 							icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
 							onPress={() => Repository.reload()}

package/src/Components/Viewer/Viewer.js

@@ -1,3 +1,4 @@
+import { useRef, } from 'react';
 import {
 	Column,
 	Icon,
@@ -45,6 +46,7 @@ function Viewer(props) {
 			selectorSelected,
 
 		} = props,
+		scrollViewRef = useRef(),
 		isMultiple = _.isArray(record),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		styles = UiGlobals.styles,
@@ -205,13 +207,17 @@ function Viewer(props) {
 			return additionalButtons;
 		};
 
+	if (self) {
+		self.ref = scrollViewRef;
+	}
+
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
 		showCloseBtn = !isSideEditor,
 		additionalButtons = buildAdditionalButtons();
 
 	return <Column flex={flex} {...props}>
-				<ScrollView width="100%" _web={{ height: 1 }}>
+				<ScrollView width="100%" _web={{ height: 1 }} ref={scrollViewRef}>
 					<Column p={4}>
 						{onEditMode && <Row mb={4} justifyContent="flex-end">
 											<Button