@onehat/ui 0.3.34 → 0.3.35

package/package.json

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

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),
@@ -775,7 +776,7 @@ function GridComponent(props) {
 	}, [selectorId, selectorSelected]);
 
 	if (self) {
-		self.ref = gridRef;
+		self.ref = containerRef;
 	}
 
 	isAddingRef.current = isAdding;
@@ -801,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>;
 		}
@@ -816,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/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/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()}