@onehat/ui 0.2.53 → 0.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.53",
+	"version": "0.2.55",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -19,8 +19,9 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.16.9",
+		"@onehat/data": "^1.17.0",
 		"@hookform/resolvers": "^2.9.11",
+		"@k-renwick/colour-mixer": "^1.2.1",
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",
 		"native-base": "^3.4.25",

package/src/Components/Buttons/CheckboxButton.js

@@ -0,0 +1,15 @@
+import IconButton from './IconButton.js';
+import SquareCheck from '../Icons/SquareCheck.js';
+import Square from '../Icons/Square.js';
+
+export default function CheckboxButton(props) {
+	const {
+			isChecked,
+		} = props;
+
+	return <IconButton
+				icon={isChecked ? SquareCheck : Square }
+				{...props}
+			/>;
+}
+

package/src/Components/Buttons/IconButton.js

@@ -17,10 +17,14 @@ const IconButton = React.forwardRef((props, ref) => {
 			tooltipPlacement = 'bottom',
 		} = props;
 	const propsIcon = props._icon || {};
-	let icon = props.icon || <Icon {...propsIcon} />;
+	let icon = props.icon || <Icon {...propsIcon} />,
+		ret;
 	if (isLoading) {
 		icon = <Spinner {..._spinner} />;
 	}
+	if (!React.isValidElement(icon)) {
+		icon = <Icon as={icon} {...propsIcon} />;
+	}
 	const pressable = <Pressable
 							ref={ref}
 							borderRadius="md"
@@ -29,16 +33,23 @@ const IconButton = React.forwardRef((props, ref) => {
 							justifyContent="center"
 							alignItems="center"
 							p={2}
+							// bg={styles.ICON_BUTTON_BG}
+							_hover={{
+								bg: styles.ICON_BUTTON_BG_HOVER,
+							}}
 							_disabled={{
 								bg: styles.ICON_BUTTON_BG_DISABLED,
 							}}
+							_pressed={{
+								bg: styles.ICON_BUTTON_BG_PRESSED,
+							}}
 							{...props}
 						>
-							{icon}
+						{icon}
 						</Pressable>;
-	let ret = pressable;
+	ret = pressable;
 	if (tooltip) {
-		ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{pressable}</Tooltip>;
+		ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{ret}</Tooltip>;
 	}
 	return ret;
 });

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);
 		};
 
@@ -49,7 +49,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

@@ -412,6 +412,7 @@ export function Combo(props) {
 										flex={1}
 										h="100%"
 										m={0}
+										autoSubmitDelay={0}
 										borderTopRightRadius={0}
 										borderBottomRightRadius={0}
 										fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}

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

@@ -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];
 			}
 

package/src/Components/Form/Label.js

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

package/src/Components/Grid/Grid.js

@@ -21,6 +21,7 @@ import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
 } from '../../Constants/Grid.js';
+import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
@@ -35,6 +36,7 @@ import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import withInlineEditor from '../Hoc/withInlineEditor.js';
 import testProps from '../../Functions/testProps.js';
+import nbToRgb from '../../Functions/nbToRgb.js';
 import GridHeaderRow from './GridHeaderRow.js';
 import GridRow, { ReorderableGridRow } from './GridRow.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -45,35 +47,21 @@ import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
 import _ from 'lodash';
 
+
 // Grid requires the use of HOC withSelection() whenever it's used.
 // 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 {
 
 			columnsConfig = [], // json configurations for each column
 
 			columnProps = {},
-			getRowProps = () => {
+			getRowProps = (item) => {
 				return {
 					borderBottomWidth: 1,
 					borderBottomColor: 'trueGray.500',
-					py: 2,
-					pl: 4,
-					pr: 2,
 				};
 			},
 			flatListProps = {},
@@ -348,19 +336,22 @@ export function Grid(props) {
 										/>;
 							}
 
-							let bg = styles.GRID_ROW_BG;
+							let bg = rowProps.bg || styles.GRID_ROW_BG,
+								mixWith;
 							if (isSelected) {
 								if (showHovers && isHovered) {
-									bg = styles.GRID_ROW_SELECTED_HOVER_BG;
-								} else {
-									bg = styles.GRID_ROW_SELECTED_BG;
-								}
-							} else {
-								if (showHovers && isHovered) {
-									bg = styles.GRID_ROW_HOVER_BG;
+									mixWith = styles.GRID_ROW_SELECTED_HOVER_BG;
 								} else {
-									bg = styles.GRID_ROW_BG;
+									mixWith = styles.GRID_ROW_SELECTED_BG;
 								}
+							} else if (showHovers && isHovered) {
+								mixWith = styles.GRID_ROW_HOVER_BG;
+							}
+							if (mixWith) {
+								const
+									mixWithObj = nbToRgb(mixWith),
+									ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
+								bg = colourMixer.blend(bg, ratio, mixWithObj.color);
 							}
 							let WhichGridRow = GridRow,
 								rowReorderProps = {};
@@ -672,6 +663,7 @@ export function Grid(props) {
 							sortable = true,
 							w,
 							flex,
+							...propsToPass
 						} = columnConfig,
 
 						config = {
@@ -689,6 +681,7 @@ export function Grid(props) {
 							w,
 							flex,
 							showDragHandles: false,
+							...propsToPass,
 						};
 
 					if (!config.w && !config.flex) {

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

@@ -12,6 +12,8 @@ import FormPanel from '../Panel/FormPanel.js';
 import Ban from '../Icons/Ban.js';
 import Gear from '../Icons/Gear.js';
 import Toolbar from '../Toolbar/Toolbar.js';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
@@ -34,8 +36,6 @@ export default function withFilters(WrappedComponent) {
 				customFilters = [], // of shape: { title, type, field, value, getRepoFilters(value) }
 				minFilters = 3,
 				maxFilters = 6,
-				getSaved,
-				setSaved,
 
 				// withData
 				Repository,
@@ -166,7 +166,7 @@ export default function withFilters(WrappedComponent) {
 						}
 						setSlots(newSlots);
 					}
-					if (save && setSaved) {
+					if (save) {
 						setSaved(id + '-filters', filters);
 					}
 				},
@@ -204,9 +204,12 @@ export default function withFilters(WrappedComponent) {
 					const filter = getFilterByField(field);
 					return filter?.type;
 				},
-				getIsFilterRange = (field) => {
-					// determines if filter is a "range" filter
+				getIsFilterRange = (filter) => {
+					let field = _.isString(filter) ? filter : filter.field;
 					const filterType = getFilterType(field);
+					if (filterType?.type) {
+						return inArray(filterType.type, ['NumberRange', 'DateRange'])
+					}
 					return inArray(filterType, ['NumberRange', 'DateRange']);
 				},
 				renderFilters = () => {
@@ -272,7 +275,7 @@ export default function withFilters(WrappedComponent) {
 					const newRepoFilters = [];
 					let filtersToUse = filters
 
-					if (!isReady && getSaved) {
+					if (!isReady) {
 						const savedFilters = await getSaved(id + '-filters');
 						if (!_.isEmpty(savedFilters)) {
 							// load saved filters
@@ -295,7 +298,7 @@ export default function withFilters(WrappedComponent) {
 									field,
 									value,
 								} = filter,
-								isFilterRange = getIsFilterRange(field);
+								isFilterRange = getIsFilterRange(filter);
 							if (isFilterRange) {
 								if (!!value) {
 									const

package/src/Components/Panel/TabPanel.js

@@ -45,16 +45,14 @@ export default function TabPanel(props) {
 			if (onChangeIsCollapsed) {
 				onChangeIsCollapsed(isCollapsed);
 			}
-			if (setSaved) {
-				setSaved(id + '-isCollapsed', isCollapsed);
-			}
+			setSaved(id + '-isCollapsed', isCollapsed);
 		},
 		setCurrentTab = (ix) => {
 			setCurrentTabRaw(ix);
 			if (onChangeCurrentTab) {
 				onChangeCurrentTab(ix);
 			}
-			if (setSaved && saveCurrentTab) {
+			if (saveCurrentTab) {
 				setSaved(id + '-currentTab', ix);
 			}
 		},

package/src/Components/Screens/DataMgt.js

@@ -311,7 +311,5 @@ export default function DataMgt(props) {
 				east={east}
 				isEastCollapsed={isEastCollapsed}
 				setIsEastCollapsed={setIsEastCollapsed}
-				getSaved={getSaved}
-				setSaved={setSaved}
 			/>;
 }

package/src/Components/Toolbar/Pagination.js

@@ -41,9 +41,6 @@ export default function Pagination(props) {
 	return useMemo(() => {
 		const
 			iconButtonProps = {
-				_hover: {
-					bg: 'trueGray.400',
-				},
 				// mx: 1,
 			},
 			iconProps = {

package/src/Components/Toolbar/PaginationToolbar.js

@@ -12,6 +12,7 @@ export default function PaginationToolbar(props) {
 		} = props,
 		[minimize, setMinimize] = useState(false),
 		propsToPass = _.omit(props, 'toolbarItems'),
+		showPagination = props.Repository?.totalPages > 1,
 		onLayout = (e) => {
 			// Note to future self: this is using hard-coded values.
 			// Eventually might want to make it responsive to actual sizes
@@ -30,6 +31,16 @@ export default function PaginationToolbar(props) {
 			}
 		};
 
+	let toolbarProps = {};
+	if (showPagination) {
+		toolbarProps = {
+			borderLeftWidth: 1,
+			borderLeftColor: 'trueGray.400',
+			pl: 3,
+			ml: 3,
+		};
+	}
+
 	return <Toolbar
 				bg="trueGray.200"
 				borderTopWidth={1}
@@ -37,7 +48,7 @@ export default function PaginationToolbar(props) {
 				w="100%"
 				onLayout={(e) => onLayout(e)}
 			>
-				<Pagination {...propsToPass} w={toolbarItems.length ? null : '100%'} minimize={minimize} />
-				{toolbarItems.length ? <Row flex={1} borderLeftWidth={1} borderLeftColor="trueGray.400" pl={3} ml={3}>{toolbarItems}</Row> : null}
+				{showPagination && <Pagination {...propsToPass} w={toolbarItems.length ? null : '100%'} minimize={minimize} />}
+				{toolbarItems.length ? <Row flex={1} {...toolbarProps}>{toolbarItems}</Row> : null}
 			</Toolbar>;
 };

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,
@@ -61,7 +61,10 @@ const defaults = {
 	GRID_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	GRID_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
 	GRID_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
+	ICON_BUTTON_BG: 'trueGray.200:alpha.0',
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
+	ICON_BUTTON_BG_HOVER: '#000:alpha.20',
+	ICON_BUTTON_BG_PRESSED: '#000:alpha.30',
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
 	PANEL_HEADER_BG: 'primary.100',
 	PANEL_HEADER_BG_VERTICAL: 'primary.100',

package/src/Functions/nbToRgb.js

@@ -0,0 +1,64 @@
+import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
+
+function isRgb(color) {
+	const
+		regex = /^#[\w]{3,6}$/,
+		matches = color.match(regex);
+	return !!matches?.[0];
+}
+
+// 'color' might be in a format NativeBase uses, like '#000:alpha.20' or 'primary.200'
+// 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 {
+			color,
+			alpha,
+		};
+	}
+	
+	const themeOverrideColors = UiGlobals?.ThemeOverrides?.colors || {};
+	if (themeOverrideColors[color]) {
+		color = themeOverrideColors[color];
+	}
+
+	// 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; // convert '20' to .2
+	}
+	if (matches[1]) {
+		// color part exists. parse it
+		color = matches[1];
+		regex = /^(.+)\.([\d]{3})$/;
+		matches = color.match(regex);
+		if (matches) {
+			// color is in dot notation, like 'primary.200'
+			color = matches[1];
+			const whichValue = parseInt(matches[2], 10);
+			if (themeOverrideColors[color]?.[whichValue]) {
+				color = themeOverrideColors[color][whichValue];
+			}
+		} else if (themeOverrideColors[color]) {
+			// color is of form 'hover'
+			color = themeOverrideColors[color];
+		}
+
+		if (!isRgb(color)) {
+			color = nbToRgb(color).color;
+		}
+	}
+	
+
+	return {
+		color,
+		alpha,
+	};
+}

package/src/Functions/setSaved.js

@@ -6,10 +6,6 @@ export default async function setSaved(key, value) {
 	const
 		Repo = oneHatData.getRepository(UiGlobals.uiSavesRepo),
 		entity = Repo?.getById(key);
-
-	if (!entity) {
-		return null;
-	}
 	
 	let isOneBuild = false,
 		isJson = false,

package/src/Functions/setThemeOverrides.js

@@ -0,0 +1,5 @@
+import UiGlobals from '../UiGlobals.js';
+
+export default function setThemeOverrides(ThemeOverrides) {
+	UiGlobals.ThemeOverrides = ThemeOverrides;
+}

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,
+		height: window.innerHeight
+	});
 
 	const handleSize = () => {
-		setWindowSize({
-			width: window.innerWidth,
-			height: window.innerHeight
-		});
+		const
+			existingSize = windowSize,
+			newSize = {
+				width: window.innerWidth,
+				height: window.innerHeight
+			};
+		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',