@onehat/ui 0.2.36 → 0.2.38

package/package.json

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

package/src/Components/Container/Container.js

@@ -119,7 +119,7 @@ export default function Container(props) {
 	}
 	if (east) {
 		componentProps.collapseDirection = HORIZONTAL;
-		if (!east.props.h && !east.props.flex) {
+		if (!east.props.w && !east.props.flex) {
 			componentProps.flex = 50;
 		}
 		if (canResize && east.props.isResizable) {
@@ -143,7 +143,7 @@ export default function Container(props) {
 	}
 	if (west) {
 		componentProps.collapseDirection = HORIZONTAL;
-		if (!west.props.h && !west.props.flex) {
+		if (!west.props.w && !west.props.flex) {
 			componentProps.flex = 50;
 		}
 		if (canResize && west.props.isResizable) {

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import {
+	Row,
 	Switch,
+	Text,
 } from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -19,21 +21,24 @@ const
 				setValue(!value);
 			};
 
-		return <Switch
-					ref={props.outerRef}
-					onToggle={onToggle}
-					isChecked={!!value}
-					// flex={1}
-					bg={styles.FORM_TOGGLE_BG}
-					size={styles.FORM_TOGGLE_SIZE}
-					onTrackColor={styles.FORM_TOGGLE_ON_COLOR}
-					offTrackColor={styles.FORM_TOGGLE_OFF_COLOR}
-					_hover={{
-						onTrackColor: styles.FORM_TOGGLE_ON_HOVER_COLOR,
-						offTrackColor: styles.FORM_TOGGLE_OFF_HOVER_COLOR,
-					}}
-					{...propsToPass}
-				/>;
+		return <Row alignItems="center">
+					<Switch
+						ref={props.outerRef}
+						onToggle={onToggle}
+						isChecked={!!value}
+						// flex={1}
+						bg={styles.FORM_TOGGLE_BG}
+						size={styles.FORM_TOGGLE_SIZE}
+						onTrackColor={styles.FORM_TOGGLE_ON_COLOR}
+						offTrackColor={styles.FORM_TOGGLE_OFF_COLOR}
+						_hover={{
+							onTrackColor: styles.FORM_TOGGLE_ON_HOVER_COLOR,
+							offTrackColor: styles.FORM_TOGGLE_OFF_HOVER_COLOR,
+						}}
+						{...propsToPass}
+					/>
+					<Text fontSize={styles.FORM_TOGGLE_FONTSIZE}>{!!value ? 'Yes' : 'No'}</Text>
+				</Row>;
 	},
 	ToggleField = withValue(ToggleElement);
 

package/src/Components/Form/Form.js

@@ -9,11 +9,12 @@ import {
 	Text,
 } from 'native-base';
 import {
-	EDITOR_TYPE_INLINE,
-	EDITOR_TYPE_WINDOWED,
-	EDITOR_TYPE_SMART,
-	EDITOR_TYPE_PLAIN,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__INLINE,
+	EDITOR_TYPE__WINDOWED,
+	EDITOR_TYPE__SIDE,
+	EDITOR_TYPE__SMART,
+	EDITOR_TYPE__PLAIN,
+} from '../../Constants/Editor.js';
 import { useForm, Controller } from 'react-hook-form'; // https://react-hook-form.com/api/
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -23,6 +24,7 @@ import withEditor from '../Hoc/withEditor.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import IconButton from '../Buttons/IconButton.js';
+import AngleLeft from '../Icons/AngleLeft.js';
 import Rotate from '../Icons/Rotate.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Panel/Footer.js';
@@ -32,29 +34,32 @@ import _ from 'lodash';
 // TODO: memoize field Components
 
 // Modes:
-// EDITOR_TYPE_INLINE
+// EDITOR_TYPE__INLINE
 // Form is a single scrollable row, based on columnsConfig and Repository
 //
-// EDITOR_TYPE_WINDOWED
-// Form is a popup window, used for editing items in a grid. Integrated with Repository
+// EDITOR_TYPE__WINDOWED
+// EDITOR_TYPE__SIDE
+// Form is a popup or side window, used for editing items in a grid. Integrated with Repository
 //
-// EDITOR_TYPE_SMART
+// EDITOR_TYPE__SMART
 // Form is a standalone editor
 //
-// EDITOR_TYPE_PLAIN
+// EDITOR_TYPE__PLAIN
 // Form is embedded on screen in some other way. Mainly use startingValues, items, validator
 
 function Form(props) {
 	const
 		{
-			editorType = EDITOR_TYPE_WINDOWED, // EDITOR_TYPE_INLINE | EDITOR_TYPE_WINDOWED | EDITOR_TYPE_PLAIN
+			editorType = EDITOR_TYPE__WINDOWED, // EDITOR_TYPE__INLINE | EDITOR_TYPE__WINDOWED | EDITOR_TYPE__SIDE | EDITOR_TYPE__SMART | EDITOR_TYPE__PLAIN
 			startingValues = {},
 			items = [], // Columns, FieldSets, Fields, etc to define the form
 			columnDefaults = {}, // defaults for each Column defined in items (above)
-			columnsConfig, // Which columns are shown in Grid, so the inline editor can match. Used only for EDITOR_TYPE_INLINE
-			validator, // custom validator, mainly for EDITOR_TYPE_PLAIN
+			columnsConfig, // Which columns are shown in Grid, so the inline editor can match. Used only for EDITOR_TYPE__INLINE
+			validator, // custom validator, mainly for EDITOR_TYPE__PLAIN
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
+			onBack,
+			ancillaryComponents = [],
 			
 			// sizing of outer container
 			h,
@@ -226,7 +231,9 @@ function Form(props) {
 			return <Row>{elements}</Row>;
 		},
 		buildFromItems = () => {
-			return  _.map(items, (item, ix) => buildNextLayer(item, ix, columnDefaults));
+			const
+				regularItems = _.map(items, (item, ix) => buildNextLayer(item, ix, columnDefaults));
+				return [...regularItems, ...ancillaryComponents];
 		},
 		buildNextLayer = (item, ix, defaults) => {
 			let {
@@ -356,7 +363,7 @@ function Form(props) {
 												{...editorTypeProps}
 											/>;
 							if (error) {
-								if (editorType !== EDITOR_TYPE_INLINE) {
+								if (editorType !== EDITOR_TYPE__INLINE) {
 									element = <Column pt={1} flex={1}>
 												{element}
 												<Text color="#f00">{error.message}</Text>
@@ -367,7 +374,7 @@ function Form(props) {
 
 								}
 							}
-							if (label && editorType !== EDITOR_TYPE_INLINE) {
+							if (label && editorType !== EDITOR_TYPE__INLINE) {
 								const labelProps = {};
 								if (defaults?.labelWidth) {
 									labelProps.w = defaults.labelWidth;
@@ -385,7 +392,7 @@ function Form(props) {
 		},
 		onSubmitError = (errors, e) => {
 			debugger;
-			if (editorType === EDITOR_TYPE_INLINE) {
+			if (editorType === EDITOR_TYPE__INLINE) {
 				alert(errors.message);
 			}
 		};
@@ -429,7 +436,7 @@ function Form(props) {
 
 	let formComponents,
 		editor;
-	if (editorType === EDITOR_TYPE_INLINE) {
+	if (editorType === EDITOR_TYPE__INLINE) {
 		// for inline editor
 		formComponents = buildFromColumnsConfig();
 		editor = <ScrollView
@@ -451,6 +458,16 @@ function Form(props) {
 	}
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
+
+				{onBack && <Row p={2} alignItems="center">
+								<Button
+									key="backBtn"
+									onPress={onBack}
+									leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
+									color="#fff"
+								>Back</Button>
+								<Text ml={2} fontSize={18}>Edit Mode</Text>
+							</Row>}
 				
 				{editor}
 

package/src/Components/Grid/Grid.js

@@ -27,6 +27,7 @@ import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
 import withData from '../Hoc/withData.js';
 import withEvents from '../Hoc/withEvents.js';
+import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
 import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
@@ -839,6 +840,26 @@ export function Grid(props) {
 
 }
 
+export const SideGridEditor = withAlert(
+									withEvents(
+										withData(
+											withMultiSelection(
+												withSelection(
+													withSideEditor(
+														withFilters(
+															withPresetButtons(
+																withContextMenu(
+																	Grid
+																)
+															)
+														)
+													)
+												)
+											)
+										)
+									)
+								);
+
 export const WindowedGridEditor = withAlert(
 									withEvents(
 										withData(

package/src/Components/Hoc/withEditor.js

@@ -1,4 +1,9 @@
 import { useState, } from 'react';
+import {
+	EDITOR_VIEW_MODE__VIEW,
+	EDITOR_VIEW_MODE__ADD,
+	EDITOR_VIEW_MODE__EDIT,
+} from '../../Constants/Editor.js';
 import _ from 'lodash';
 
 export default function withEditor(WrappedComponent) {
@@ -33,6 +38,7 @@ export default function withEditor(WrappedComponent) {
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
+			[editorViewMode, setEditorViewMode] = useState(EDITOR_VIEW_MODE__VIEW),
 			addRecord = async () => {
 				if (!userCanEdit) {
 					return;
@@ -42,6 +48,7 @@ export default function withEditor(WrappedComponent) {
 					entity = await Repository.add(defaultValues, false, true, true);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
+				setEditorViewMode(EDITOR_VIEW_MODE__ADD);
 				setIsEditorShown(true);
 			},
 			editRecord = () => {
@@ -49,6 +56,7 @@ export default function withEditor(WrappedComponent) {
 					return;
 				}
 				setIsEditorViewOnly(false);
+				setEditorViewMode(EDITOR_VIEW_MODE__EDIT);
 				setIsEditorShown(true);
 			},
 			deleteRecord = (e) => {
@@ -80,6 +88,7 @@ export default function withEditor(WrappedComponent) {
 					return;
 				}
 				setIsEditorViewOnly(true);
+				setEditorViewMode(EDITOR_VIEW_MODE__VIEW);
 				setIsEditorShown(true);
 			},
 			duplicateRecord = async () => {
@@ -138,6 +147,7 @@ export default function withEditor(WrappedComponent) {
 					setCurrentRecord={setCurrentRecord}
 					isEditorShown={isEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
+					editorViewMode={editorViewMode}
 					setIsEditorShown={setIsEditorShown}
 					onAdd={addRecord}
 					onEdit={editRecord}

package/src/Components/Hoc/withFilters.js

@@ -2,6 +2,7 @@ import { useState, useEffect, } from 'react';
 import {
 	Column,
 	Modal,
+	Row,
 	Text,
 } from 'native-base';
 import inArray from '../../Functions/inArray.js';
@@ -11,6 +12,7 @@ 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 UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 // Filters only work with Repository; not data array
@@ -20,6 +22,7 @@ export default function withFilters(WrappedComponent) {
 		const {
 				useFilters = false,
 				searchAllText = true,
+				showLabels = true,
 				filter1StartingField = '',
 				filter2StartingField = '',
 				filter3StartingField = '',
@@ -33,7 +36,8 @@ export default function withFilters(WrappedComponent) {
 
 				// withData
 				Repository,
-			} = props;
+			} = props,
+			styles = UiGlobals.styles;
 
 		let modal,
 			topToolbar = null;
@@ -195,15 +199,22 @@ export default function withFilters(WrappedComponent) {
 							if (!Element) {
 								debugger;
 							}
-							filterElements.push(<Element
-													key={ix}
+							let filterElement = <Element
+													key={'element-' + ix}
 													tooltip={titles[fieldName]}
 													placeholder={titles[fieldName]}
 													value={getFilterValue(ix)}
 													onChangeValue={(value) => onFilterChange(ix, value)}
 													{...filterProps}
 													{...modelProps}
-												/>);
+												/>;
+							if (showLabels) {
+								filterElement = <Row key={'label-' + ix}>
+													<Text fontSize={styles.FILTER_LABEL_FONTSIZE}>{titles[fieldName]}:</Text>
+													{filterElement}
+												</Row>;
+							}
+							filterElements.push(filterElement);
 						};
 					if (searchAllText) {
 						addFilter(null, 'q');

package/src/Components/Hoc/withInlineEditor.js

@@ -6,8 +6,8 @@ import {
 	Text,
 } from 'native-base';
 import {
-	EDITOR_TYPE_INLINE,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__INLINE,
+} from '../../Constants/Editor.js';
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
@@ -77,14 +77,14 @@ export default function withInlineEditor(WrappedComponent) {
 						onChangeColumnsConfig={onChangeColumnsConfig}
 						onEditorRowClick={onRowClick}
 					/>
-					{useEditor && editorType === EDITOR_TYPE_INLINE && Repository && 
+					{useEditor && editorType === EDITOR_TYPE__INLINE && Repository && 
 							<Modal
 								isOpen={isEditorShown}
 								onClose={() => setIsEditorShown(false)}
 							>
 								<Column position="absolute" ref={inlineEditorRef}>
 									{isEditorShown && <Form
-															editorType={EDITOR_TYPE_INLINE} 
+															editorType={EDITOR_TYPE__INLINE} 
 															record={selection[0]}
 															Repository={Repository}
 															isMultiple={selection.length > 1}

package/src/Components/Hoc/withSideEditor.js

@@ -0,0 +1,25 @@
+import {
+	EDITOR_TYPE__SIDE,
+} from '../../Constants/Editor.js';
+import Container from '../Container/Container.js';
+import withEditor from './withEditor.js';
+import _ from 'lodash';
+
+
+export default function withSideEditor(WrappedComponent) {
+	return withEditor((props) => {
+		const {
+				Editor,
+				editorProps = {},
+			} = props;
+
+		return <Container
+					center={<WrappedComponent {...props} />}
+					east={<Editor
+								editorType={EDITOR_TYPE__SIDE}
+								{...props}
+								{...editorProps}
+							/>}
+				/>;
+	});
+}

package/src/Components/Hoc/withWindowedEditor.js

@@ -4,8 +4,8 @@ import {
 	Text,
 } from 'native-base';
 import {
-	EDITOR_TYPE_WINDOWED,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__WINDOWED,
+} from '../../Constants/Editor.js';
 import withEditor from './withEditor.js';
 // import withDraggable from './withDraggable.js';
 import _ from 'lodash';
@@ -31,7 +31,8 @@ export default function withWindowedEditor(WrappedComponent) {
 				useEditor = false,
 				isEditorShown,
 				setIsEditorShown,
-				EditorWindow,
+				Editor,
+				editorProps = {},
 			} = props;
 
 		return <>
@@ -41,9 +42,10 @@ export default function withWindowedEditor(WrappedComponent) {
 							isOpen={true}
 							onClose={() => setIsEditorShown(false)}
 						>
-							<EditorWindow
-								editorType={EDITOR_TYPE_WINDOWED}
+							<Editor
+								editorType={EDITOR_TYPE__WINDOWED}
 								{...props}
+								{...editorProps}
 							/>
 						</Modal>}
 				</>;

package/src/Components/Panel/GridPanel.js

@@ -1,23 +1,36 @@
 import { useEffect, useState, } from 'react';
 import Panel from './Panel.js';
-import Grid, { InlineGridEditor, } from '../Grid/Grid.js';
+import Grid, { InlineGridEditor, SideGridEditor, } from '../Grid/Grid.js';
 import {
-	EDITOR_TYPE_INLINE,
-	EDITOR_TYPE_WINDOWED,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__INLINE,
+	EDITOR_TYPE__WINDOWED,
+	EDITOR_TYPE__SIDE,
+} from '../../Constants/Editor.js';
 import _ from 'lodash';
 
 export function GridPanel(props) {
 	const {
-			editorType,
+			editorType = EDITOR_TYPE__WINDOWED,
 			disableTitleChange = false,
 			selectorSelected,
 		} = props,
 		originalTitle = props.title,
-		WhichGrid = (editorType === EDITOR_TYPE_INLINE) ? InlineGridEditor : Grid,
 		[isReady, setIsReady] = useState(disableTitleChange),
 		[title, setTitle] = useState(originalTitle);
 
+	let WhichGrid;
+	switch(editorType) {
+		case EDITOR_TYPE__INLINE:
+			WhichGrid = InlineGridEditor;
+			break;
+		case EDITOR_TYPE__WINDOWED:
+			WhichGrid = Grid;
+			break;
+		case EDITOR_TYPE__SIDE:
+			WhichGrid = SideGridEditor;
+			break;
+	}
+
 	useEffect(() => {
 		if (!disableTitleChange && originalTitle) {
 			let newTitle = originalTitle;

package/src/Constants/Editor.js

@@ -0,0 +1,8 @@
+export const EDITOR_TYPE__INLINE = 'EDITOR_TYPE__INLINE';
+export const EDITOR_TYPE__WINDOWED = 'EDITOR_TYPE__WINDOWED';
+export const EDITOR_TYPE__SIDE = 'EDITOR_TYPE__SIDE';
+export const EDITOR_TYPE__SMART = 'EDITOR_TYPE__SMART';
+export const EDITOR_TYPE__PLAIN = 'EDITOR_TYPE__PLAIN';
+export const EDITOR_VIEW_MODE__VIEW = 'EDITOR_VIEW_MODE__VIEW';
+export const EDITOR_VIEW_MODE__ADD = 'EDITOR_VIEW_MODE__ADD';
+export const EDITOR_VIEW_MODE__EDIT = 'EDITOR_VIEW_MODE__EDIT';

package/src/Constants/Styles.js

@@ -6,6 +6,7 @@ const
 	FOCUS = '#ffd';
 
 const defaults = {
+	FILTER_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_COLOR_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_COLOR_INPUT_BG: WHITE,
 	FORM_COLOR_INPUT_FOCUS_BG: FOCUS,
@@ -41,6 +42,7 @@ const defaults = {
 	FORM_TEXTAREA_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TEXTAREA_HEIGHT: 130,
 	FORM_TOGGLE_BG: null,
+	FORM_TOGGLE_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TOGGLE_SIZE: 'md',
 	FORM_TOGGLE_ON_COLOR: '#0b0',
 	FORM_TOGGLE_ON_HOVER_COLOR: '#090',

package/src/Constants/EditorTypes.js

@@ -1,4 +0,0 @@
-export const EDITOR_TYPE_INLINE = 'EDITOR_TYPE_INLINE';
-export const EDITOR_TYPE_WINDOWED = 'EDITOR_TYPE_WINDOWED';
-export const EDITOR_TYPE_SMART = 'EDITOR_TYPE_SMART';
-export const EDITOR_TYPE_PLAIN = 'EDITOR_TYPE_PLAIN';