@onehat/ui 0.2.37 → 0.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.37",
+	"version": "0.2.39",
 	"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,10 +1,17 @@
-import React from 'react';
+import React, { useRef, } from 'react';
 import {
+	Icon,
+	Pressable,
+	Row,
 	Switch,
+	Text,
 } from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
+import IconButton from '../../Buttons/IconButton.js';
+import Na from '../../Icons/Na.js';
 import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
+import _ from 'lodash';
 
 const
 	ToggleElement = (props) => {
@@ -14,26 +21,53 @@ const
 				flex, // flex doesn't work right on mobile
 				...propsToPass
 			} = props,
+			isBlocked = useRef(false),
 			styles = UiGlobals.styles,
-			onToggle = () => {
-				setValue(!value);
+			onToggle = (val, e) => {
+				if (!isBlocked.current) {
+					setValue(!value);
+				}
+			},
+			onNullify = (e) => {
+				if (e.shiftKey) {
+					// If user presses shift key while pressing...
+					// Set value to null, and tempoarily disable the onToggle method
+					setValue(null);
+					isBlocked.current = true;
+					setTimeout(() => {
+						isBlocked.current = false;
+					}, 200);
+				}
 			};
 
-		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}
-				/>;
+		if (_.isNil(value)) {
+			return <IconButton
+						icon={<Icon as={Na} color="trueGray.400" />}
+						onPress={onToggle}
+						borderWidth={1}
+						borderColor="trueGray.700"
+					/>;
+		}
+
+		return <Row alignItems="center">
+					<Pressable onPress={onNullify}>
+						<Switch
+							ref={props.outerRef}
+							onToggle={onToggle}
+							isChecked={!!value}
+							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}
+						/>
+					</Pressable>
+					<Text ml={2} fontSize={styles.FORM_TOGGLE_FONTSIZE}>{_.isNil(value) ? 'N/A' : (!!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} alignItems="center">
+													<Text ml={2} mr={1} fontSize={styles.FILTER_LABEL_FONTSIZE}>{titles[fieldName]}</Text>
+													{filterElement}
+												</Row>;
+							}
+							filterElements.push(filterElement);
 						};
 					if (searchAllText) {
 						addFilter(null, 'q');

package/src/Components/Hoc/withSideEditor.js

@@ -11,12 +11,14 @@ export default function withSideEditor(WrappedComponent) {
 		const {
 				Editor,
 				editorProps = {},
+				sideFlex = 100,
 			} = props;
 
 		return <Container
 					center={<WrappedComponent {...props} />}
 					east={<Editor
 								editorType={EDITOR_TYPE__SIDE}
+								flex={sideFlex}
 								{...props}
 								{...editorProps}
 							/>}

package/src/Components/Icons/Na.js

@@ -0,0 +1,17 @@
+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 512.24 402.86"
+			{...props}
+		>
+			<Path d="M0 54.41h36.81L76.09 171.3c11.39 33.02 21.44 68.25 30.17 105.7-3.16-22.64-5.5-43.14-7.02-61.48-1.52-18.34-2.28-35.61-2.28-51.8V54.41h39.66V347.4h-37L55.41 215.52c-4.05-12.27-7.88-24.86-11.48-37.76s-6.93-26.44-9.96-40.61c-.26-1.77-.66-3.92-1.23-6.45-.57-2.53-1.23-5.44-1.99-8.73.38 3.29.69 6.1.95 8.44.25 2.34.44 4.33.57 5.98l2.09 29.79 2.09 36.24c.12 2.03.22 4.49.28 7.4.06 2.91.09 6.2.09 9.87l2.09 127.71H0V54.41zM335.39 0h30.55L191.36 402.86h-30.93L335.39 0zM418.69 54.41h30.74l62.81 292.99h-39.09l-11.01-57.12h-58.07l-11.2 57.12h-37.95l63.76-292.99zm37.76 205.32l-8.73-46.68c-5.82-31.75-10.56-65.66-14.23-101.71-1.77 17.59-4.05 35.39-6.83 53.42-2.79 18.03-6.07 37.16-9.87 57.4l-7.21 37.57h46.87z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

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',