@onehat/ui 0.2.37 → 0.2.38

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.37",
+	"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

@@ -24,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';
@@ -37,7 +38,8 @@ import _ from 'lodash';
 // 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__SIDE
+// Form is a popup or side window, used for editing items in a grid. Integrated with Repository
 //
 // EDITOR_TYPE__SMART
 // Form is a standalone editor
@@ -56,6 +58,8 @@ function Form(props) {
 			validator, // custom validator, mainly for EDITOR_TYPE__PLAIN
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
+			onBack,
+			ancillaryComponents = [],
 			
 			// sizing of outer container
 			h,
@@ -227,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 {
@@ -452,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/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/Panel/GridPanel.js

@@ -1,6 +1,6 @@
 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,
@@ -10,15 +10,27 @@ 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/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',