@onehat/ui 0.2.55 → 0.2.56

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -40,6 +40,7 @@ export default function Editor(props) {
 					record={selection[0]}
 					Repository={Repository}
 					onEditMode={isViewOnly ? null : onEditMode}
+					onClose={onClose}
 					{...props}
 				/>;
 	}

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

@@ -463,7 +463,8 @@ export function Combo(props) {
 										w={width + 'px'}
 										h={height ? height + 'px' : null}
 										minWidth={menuMinWidth}
-										overflow="scroll"
+										overflow="auto"
+										bg="#fff"
 									>
 										<Popover.Body
 											ref={menuRef}
@@ -484,6 +485,7 @@ export function Combo(props) {
 														py: 1,
 														pl: 4,
 														pr: 2,
+														w: '100%',
 													};
 												}}
 												{...props}

package/src/Components/Form/Form.js

@@ -31,7 +31,7 @@ import AngleLeft from '../Icons/AngleLeft.js';
 import Eye from '../Icons/Eye.js';
 import Rotate from '../Icons/Rotate.js';
 import Pencil from '../Icons/Pencil.js';
-import Footer from '../Panel/Footer.js';
+import Footer from '../Layout/Footer.js';
 import Label from '../Form/Label.js';
 import _ from 'lodash';
 
@@ -496,7 +496,7 @@ function Form(props) {
 							onPress={onViewMode}
 							leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
 							color="#fff"
-						>View</Button>}
+						>To View</Button>}
 				</Row>
 				{!_.isEmpty(additionalButtons) && 
 					<Row p={2} alignItems="center" justifyContent="flex-end">

package/src/Components/Form/Label.js

@@ -10,7 +10,8 @@ export default function Label(props) {
 		} = props;
 	return <Row
 				w={w}
-				minWidth="220px"
+				minWidth="120px"
+				maxWidth="50%"
 				alignItems="center"
 				pl={2}
 				{...props}

package/src/Components/Grid/Grid.js

@@ -743,7 +743,7 @@ export function Grid(props) {
 		if (!Repository) {
 			return () => {};
 		}
-		if (!disableSelectorSelected) {
+		if (!disableSelectorSelected && selectorId) {
 			let id = selectorSelected?.id;
 			if (_.isEmpty(selectorSelected)) {
 				id = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
@@ -797,7 +797,7 @@ export function Grid(props) {
 							scrollEnabled={true}
 							nestedScrollEnabled={true}
 							contentContainerStyle={{
-								overflow: 'scroll',
+								overflow: 'auto',
 								borderWidth: isReorderMode ? 4 : 0,
 								borderColor: isReorderMode ? '#23d9ea' : null,
 								borderStyle: 'dashed',

package/src/Components/Hoc/withAlert.js

@@ -13,7 +13,7 @@ import {
 	ALERT_MODE_CUSTOM,
 } from '../../Constants/Alert.js';
 import Panel from '../Panel/Panel.js';
-import Footer from '../Panel/Footer.js';
+import Footer from '../Layout/Footer.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import _ from 'lodash';
 

package/src/Components/Icons/EyeSlash.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 640 512" {...props}>
+		<Path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4.1 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-105.2-82.4c39.6-40.6 66.4-86.1 79.9-118.4 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm184.3 144.4c25.5-23.3 59.6-37.5 96.9-37.5 79.5 0 144 64.5 144 144 0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5 0-53-43-96-96-96-2.8 0-5.6.1-8.4.4 5.3 9.3 8.4 20.1 8.4 31.6 0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1-79.5 0-144-64.5-144-144 0-6.9.5-13.6 1.4-20.2l-94.3-74.3c-22.8 29.7-39.1 59.3-48.6 82.2-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47 43.8 111.7 80.6 192.5 80.6 47.8 0 89.9-12.9 126.2-32.5z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/UserPlus.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 640 512" {...props}>
+		<Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Layout/CenterBox.js

@@ -0,0 +1,17 @@
+import {
+	Box,
+} from 'native-base';
+
+export default function CenterBox(props) {
+	return <Box
+				alignItems="center"
+				justifyContent="center"
+				flex={1}
+				w="100%"
+				p={2}
+				safeAreaBottom
+				{...props}
+			>
+				{props.children}
+			</Box>;
+}

package/src/Components/Panel/AccordionGridPanel.js

@@ -5,7 +5,7 @@ import {
 } from 'native-base';
 import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
 import testProps from '../../Functions/testProps';
-import Footer from './Footer.js';
+import Footer from '../Layout/Footer.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from './NoRecordsFound.js';

package/src/Components/Toolbar/Toolbar.js

@@ -10,7 +10,7 @@ export default function Toolbar(props) {
 				borderBottomWidth={1}
 				borderBottomColor="trueGray.400"
 				p={2}
-				overflow="scroll"
+				overflow="auto"
 				{...props}
 			>
 				{props.children}

package/src/Data/Hoc/withRedux.js

@@ -1,8 +1,13 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import actionCreators from '../../../Models/actions/ActionCreators';
 import _ from 'lodash';
 
+let actionCreators = null;
+
+export function setActionCreators(ac) {
+	actionCreators = ac;
+}
+
 // Usage:
 // At top of file: 
 // import withRedux from '../../OneHat/Data/hoc/WithData';

package/src/Hooks/useWindowSize.js

@@ -6,16 +6,16 @@ import _ from 'lodash';
 // For web only!
 export default function useWindowSize() {
 	const [windowSize, setWindowSize] = useState({
-		width: window.innerWidth,
-		height: window.innerHeight
+		width: window?.innerWidth || 0,
+		height: window?.innerHeight || 0,
 	});
 
 	const handleSize = () => {
 		const
 			existingSize = windowSize,
 			newSize = {
-				width: window.innerWidth,
-				height: window.innerHeight
+				width: window?.innerWidth || 0,
+				height: window?.innerHeight || 0,
 			};
 		if (!_.isEqual(existingSize, newSize)) {
 			setWindowSize(newSize);