@onehat/ui 0.3.34 → 0.3.36

package/package.json

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

package/src/Components/Form/Field/Combo/Combo.js

@@ -38,6 +38,7 @@ export function ComboComponent(props) {
 			hideMenuOnSelection = true,
 			_input = {},
 			isEditor = false,
+			isDisabled = false,
 
 			// withValue
 			value,
@@ -258,6 +259,10 @@ export function ComboComponent(props) {
 		},
 		searchForMatches = async (value) => {
 
+			if (_.isEmpty(value)) {
+				return;
+			}
+
 			let found;
 			if (Repository) {
 				
@@ -275,9 +280,7 @@ export function ComboComponent(props) {
 						searchField = displayFieldName + ' LIKE';
 					}
 
-					if (!_.isEmpty(value)) {
-						value += '%';
-					}
+					value += '%';
 
 					await Repository.filter(searchField, value);
 					if (!this.isAutoLoad) {
@@ -408,6 +411,7 @@ export function ComboComponent(props) {
 										ref={inputRef}
 										value={textValue}
 										autoSubmit={true}
+										isDisabled={isDisabled}
 										onChangeValue={onInputChangeText}
 										onKeyPress={onInputKeyPress}
 										onBlur={onInputBlur}
@@ -453,6 +457,7 @@ export function ComboComponent(props) {
 										color: 'primary.800',
 										size: 'sm',
 									}}
+									isDisabled={isDisabled}
 									onPress={onTriggerPress}
 									onBlur={onTriggerBlur}
 									h="100%"

package/src/Components/Form/Form.js

@@ -307,8 +307,12 @@ function Form(props) {
 					type = 'Text';
 				}
 			}
-			if (type?.match && type.match(/Combo$/) && Repository?.isRemote && !Repository?.isLoaded) {
-				editorTypeProps.autoLoad = true;
+			if (item.hasOwnProperty('autoLoad')) {
+				editorTypeProps.autoLoad = item.autoLoad;
+			} else {
+				if (type?.match && type.match(/Combo$/) && Repository?.isRemote && !Repository?.isLoaded) {
+					editorTypeProps.autoLoad = true;
+				}
 			}
 			const Element = getComponentFromType(type);
 			let children;

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/withData.js

@@ -18,8 +18,9 @@ export default function withData(WrappedComponent) {
 				setRepository,
 				uniqueRepository = false,
 				model,
-				autoLoad = false,
+				autoLoad, // bool
 				pageSize,
+				baseParams,
 
 				// For plain JS data
 				data,
@@ -46,11 +47,14 @@ export default function withData(WrappedComponent) {
 				return () => {};
 			}
 
+			let repositoryId;
+
 			(async () => {
 				let Repository;
 				if (uniqueRepository) {
 					const schema = oneHatData.getSchema(model);
 					Repository = await oneHatData.createRepository({ schema });
+					repositoryId = Repository.id;
 				} else {
 					Repository = oneHatData.getRepository(model);
 				}
@@ -59,8 +63,19 @@ export default function withData(WrappedComponent) {
 					Repository.setPageSize(pageSize);
 				}
 
-				if (Repository && (autoLoad || Repository.autoLoad) && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
-					await Repository.load();
+				if (baseParams) {
+					Repository.setBaseParams(baseParams);
+				}
+
+
+				if (Repository && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
+					let doAutoLoad = Repository.autoLoad;
+					if (!_.isNil(autoLoad)) { // prop can override schema setting for autoLoad
+						doAutoLoad = autoLoad;
+					}
+					if (doAutoLoad) {
+						await Repository.load();
+					}
 				}
 	
 				setLocalRepository(Repository);
@@ -73,7 +88,13 @@ export default function withData(WrappedComponent) {
 				setIsReady(true);
 			})();
 
-		}, [LocalRepository]);
+			return () => {
+				if (repositoryId) {
+					oneHatData.deleteRepository(repositoryId);
+				}
+			}
+
+		}, []);
 
 		if (!isReady) {
 			return null;

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

@@ -154,6 +154,7 @@ export default function withPdfButton(WrappedComponent) {
 			key: 'viewPdfBtn',
 			text: 'View PDF',
 			icon: Pdf,
+			isDisabled: selection.length !== 1,
 			handler: () => {
 				setIsModalShown(true);
 			},

package/src/Components/Hoc/withSelection.js

@@ -281,7 +281,7 @@ export default function withSelection(WrappedComponent) {
 			(async () => {
 
 				if (usesWithValue && Repository?.isRemote 
-					&& !Repository.isAutoLoad && !Repository.isLoaded && !Repository.isLoading) {
+					&& !Repository.isAutoLoad && !Repository.isLoaded && !Repository.isLoading && (!_.isNil(value) || !_.isEmpty(selection)) || autoSelectFirstItem) {
 					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 
 					// so first load repo, then conform to value
 					await Repository.load();

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/Panel/Panel.js

@@ -35,7 +35,7 @@ function Panel(props) {
 			onLayout = null,
 			
 			// Header
-			title = UiGlobals.customInflect(Inflector.camel2words(Inflector.underscore(props.model))),
+			title = props.model ? UiGlobals.customInflect(Inflector.camel2words(Inflector.underscore(props.model))) : '',
 			showHeader = true,
 			header = null,
 			isClosable = false,

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()}