@onehat/ui 0.2.54 → 0.2.56

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.54",
+	"version": "0.2.56",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -19,7 +19,7 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.16.10",
+		"@onehat/data": "^1.17.0",
 		"@hookform/resolvers": "^2.9.11",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"ckeditor5-custom-build": "file:ckeditor5",

package/src/Components/Editor/Editor.js

@@ -27,7 +27,7 @@ export default function Editor(props) {
 		onEditMode = () => {
 			setEditorMode(EDITOR_MODE__EDIT);
 		},
-		onBack = () => {
+		onViewMode = () => {
 			setEditorMode(EDITOR_MODE__VIEW);
 		};
 
@@ -40,6 +40,7 @@ export default function Editor(props) {
 					record={selection[0]}
 					Repository={Repository}
 					onEditMode={isViewOnly ? null : onEditMode}
+					onClose={onClose}
 					{...props}
 				/>;
 	}
@@ -49,7 +50,7 @@ export default function Editor(props) {
 
 	return <Form
 				record={selection}
-				onBack={onBack}
+				onViewMode={onViewMode}
 				onCancel={onCancel}
 				onSave={onSave}
 				onClose={onClose}

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/Field/File.js

@@ -147,16 +147,16 @@ function FileElement(props) {
 			setIsDropping(false);
 		};
 
-	useEffect(() => {
-		const {
-				dataUri,
-				control,
-				filename,
-			} = value;
-		setLocalDataUri(localDataUri);
-		setLocalControl(localControl);
-		setLocalFilename(localFilename);
-	}, []);
+	// useEffect(() => {
+	// 	const {
+	// 			dataUri,
+	// 			control,
+	// 			filename,
+	// 		} = value;
+	// 	setLocalDataUri(dataUri);
+	// 	setLocalControl(control);
+	// 	setLocalFilename(filename);
+	// }, []);
 
 	if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
 		throw new Error('Not yet implemented for RN.');

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';
 
@@ -282,14 +282,10 @@ function Form(props) {
 				});
 				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
-			
-			if (!name) {
-				throw new Error('name is required');
-			}
 
 			if (isViewOnly || !isEditable) {
 				const Text = getComponentFromType('Text');
-				if (!label && Repository) {
+				if (!label && Repository && model.titles?.[name]) {
 					label = model.titles[name];
 				}
 				const value = (record && record[name]) || (startingValues && startingValues[name]) || null;
@@ -307,7 +303,7 @@ function Form(props) {
 				return <Row key={ix} px={2} pb={1}>{element}</Row>;
 			}
 
-			if (!label && Repository) {
+			if (!label && Repository && model.titles?.[name]) {
 				label = model.titles[name];
 			}
 
@@ -500,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}
-				// maxWidth="30%"
+				minWidth="120px"
+				maxWidth="50%"
 				alignItems="center"
 				pl={2}
 				{...props}

package/src/Components/Grid/Grid.js

@@ -52,18 +52,6 @@ import _ from 'lodash';
 // The default export is *with* the HOC. A separate *raw* component is
 // exported which can be combined with many HOCs for various functionality.
 
-	// Desired features: ---------
-	// Rows
-		// Rows with ability to use multiple lines (I was thinking custom render fns on rows, could possibly already do this!)
-	// selection
-		// Draggable selection (not super important)
-	// editor
-		// [ ] Show inline editor for selected row
-		// Dragging of window (see withWindowedEditor)
-	// custom cell types
-		// Most would use text, and depend on @onehat/data for formatting
-	// Display tree data
-
 export function Grid(props) {
 	const {
 
@@ -74,9 +62,6 @@ export function Grid(props) {
 				return {
 					borderBottomWidth: 1,
 					borderBottomColor: 'trueGray.500',
-					py: 2,
-					pl: 4,
-					pr: 2,
 				};
 			},
 			flatListProps = {},
@@ -363,8 +348,10 @@ export function Grid(props) {
 								mixWith = styles.GRID_ROW_HOVER_BG;
 							}
 							if (mixWith) {
-								const mixWithObj = nbToRgb(mixWith);
-								bg = colourMixer.blend(bg, 0.9, mixWithObj.color);
+								const
+									mixWithObj = nbToRgb(mixWith),
+									ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
+								bg = colourMixer.blend(bg, ratio, mixWithObj.color);
 							}
 							let WhichGridRow = GridRow,
 								rowReorderProps = {};
@@ -676,6 +663,7 @@ export function Grid(props) {
 							sortable = true,
 							w,
 							flex,
+							...propsToPass
 						} = columnConfig,
 
 						config = {
@@ -693,6 +681,7 @@ export function Grid(props) {
 							w,
 							flex,
 							showDragHandles: false,
+							...propsToPass,
 						};
 
 					if (!config.w && !config.flex) {
@@ -754,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;
@@ -808,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/Grid/GridRow.js

@@ -32,10 +32,39 @@ export default function GridRow(props) {
 			const renderColumns = (item) => {
 				if (_.isArray(columnsConfig)) {
 					return _.map(columnsConfig, (config, key) => {
+						const propsToPass = columnProps[key] || {};
+						if (config.w) {
+							propsToPass.w = config.w;
+						} else if (config.flex) {
+							propsToPass.flex = config.flex;
+							propsToPass.minWidth = 100;
+						} else {
+							propsToPass.flex = 1;
+						}
+						propsToPass.p = 1;
+						propsToPass.justifyContent = 'center';
+
 						let value;
 						if (_.isPlainObject(config)) {
 							if (config.renderer) {
-								return config.renderer(item, key);
+								const extraProps = _.omit(config, [
+									'columnId',
+									'header',
+									'fieldName',
+									'type',
+									'isEditable',
+									'editor',
+									'format',
+									'renderer',
+									'reorderable',
+									'resizable',
+									'sortable',
+									'w',
+									'flex',
+									'showDragHandles',
+								]);
+
+								return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
 							}
 							if (config.fieldName) {
 								if (item.properties && item.properties[config.fieldName]) {
@@ -63,16 +92,6 @@ export default function GridRow(props) {
 						if (_.isFunction(value)) {
 							return value(key);
 						}
-
-						const propsToPass = columnProps[key] || {};
-						if (config.w) {
-							propsToPass.w = config.w;
-						} else if (config.flex) {
-							propsToPass.flex = config.flex;
-							propsToPass.minWidth = 100;
-						} else {
-							propsToPass.flex = 1;
-						}
 						
 						return <Text
 									key={key}

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

@@ -51,10 +51,8 @@ export default function withData(WrappedComponent) {
 					Repository = oneHatData.getRepository(model);
 				}
 
-
-				if (autoLoad && Repository && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
+				if (Repository && (autoLoad || Repository.autoLoad) && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
 					await Repository.load();
-					// TODO: Implement some method by which I can detect if Repository is still loading and wait until it's done!
 				}
 	
 				setLocalRepository(Repository);

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/Constants/Styles.js

@@ -33,7 +33,7 @@ const defaults = {
 	FORM_INPUT_BG: WHITE,
 	FORM_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_INPUT_FOCUS_BG: FOCUS,
-	FORM_LABEL_WIDTH: '170px',
+	FORM_LABEL_WIDTH: '30%',
 	FORM_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_NUMBER_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TEXT_FONTSIZE: DEFAULT_FONTSIZE,

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/Functions/nbToRgb.js

@@ -12,6 +12,8 @@ function isRgb(color) {
 // Try to convert this to actual RGB colors.
 export default function nbToRgb(color) {
 
+	let regex, alpha, matches;
+
 	if (isRgb(color)) {
 		// already in RGB format; simply return it
 		return {
@@ -25,13 +27,12 @@ export default function nbToRgb(color) {
 		color = themeOverrideColors[color];
 	}
 
-	let regex, alpha, matches;
-
+	// Detect 'primary.100:alpha.20' format
 	regex = /^([\w#\.]+)(:alpha\.([\d]{1,2}))?$/;
 	matches = color.match(regex);
 	if (matches[3]) {
 		// alpha part exists. parse it
-		alpha = parseInt(matches[3], 10) / 100;
+		alpha = parseInt(matches[3], 10) / 100; // convert '20' to .2
 	}
 	if (matches[1]) {
 		// color part exists. parse it

package/src/Functions/setSaved.js

@@ -3,11 +3,10 @@ import UiGlobals from '../UiGlobals.js';
 import _ from 'lodash';
 
 export default async function setSaved(key, value) {
-	const Repo = oneHatData.getRepository(UiGlobals.uiSavesRepo);
-	if (!Repo) {
-		return null;
-	}
-
+	const
+		Repo = oneHatData.getRepository(UiGlobals.uiSavesRepo),
+		entity = Repo?.getById(key);
+	
 	let isOneBuild = false,
 		isJson = false,
 		model = null;
@@ -33,8 +32,6 @@ export default async function setSaved(key, value) {
 		}
 		isJson = true;
 	}
-	
-	const entity = Repo.getById(key);
 	if (entity) {
 		entity.setValues({
 			value,

package/src/Hooks/useAdjustedWindowSize.js

@@ -3,7 +3,7 @@ import useWindowSize from './useWindowSize.js';
 // This hook takes the submitted window size and adjusts it
 // to fit the actual screen size
 
-export default function(width, height, percentage = 0.9) {
+export default function(width, height, percentage = 1) {
 
 	const windowSize = useWindowSize();
 	

package/src/Hooks/useWindowSize.js

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

package/src/Styles/ThemeOverrides.js

@@ -14,9 +14,9 @@ const ThemeOverrides = {
 		// secondary: {
 		// 	500: '#1F3854', // default for buttons
 		// },
-		selected: '#ffc',
-		hover: '#eee',
-		selectedHover: '#eeb',
+		selected: '#ff0:alpha.20',
+		hover: '#000:alpha.10',
+		selectedHover: '#cc0',
 		unselected: '#bbb',
 		disabled: '#ccc',
 		control: '#1B518C',