@onehat/ui 0.2.38 → 0.2.40

package/package.json

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

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

@@ -1,12 +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) => {
@@ -16,28 +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 <Row alignItems="center">
-					<Switch
+		if (_.isNil(value)) {
+			return <IconButton
 						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>
+						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/Hoc/withEditor.js

@@ -1,8 +1,8 @@
 import { useState, } from 'react';
 import {
-	EDITOR_VIEW_MODE__VIEW,
-	EDITOR_VIEW_MODE__ADD,
-	EDITOR_VIEW_MODE__EDIT,
+	EDITOR_MODE__VIEW,
+	EDITOR_MODE__ADD,
+	EDITOR_MODE__EDIT,
 } from '../../Constants/Editor.js';
 import _ from 'lodash';
 
@@ -38,7 +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),
+			[editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW),
 			addRecord = async () => {
 				if (!userCanEdit) {
 					return;
@@ -48,7 +48,7 @@ export default function withEditor(WrappedComponent) {
 					entity = await Repository.add(defaultValues, false, true, true);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
-				setEditorViewMode(EDITOR_VIEW_MODE__ADD);
+				setEditorMode(EDITOR_MODE__ADD);
 				setIsEditorShown(true);
 			},
 			editRecord = () => {
@@ -56,7 +56,7 @@ export default function withEditor(WrappedComponent) {
 					return;
 				}
 				setIsEditorViewOnly(false);
-				setEditorViewMode(EDITOR_VIEW_MODE__EDIT);
+				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
 			deleteRecord = (e) => {
@@ -88,7 +88,7 @@ export default function withEditor(WrappedComponent) {
 					return;
 				}
 				setIsEditorViewOnly(true);
-				setEditorViewMode(EDITOR_VIEW_MODE__VIEW);
+				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(true);
 			},
 			duplicateRecord = async () => {
@@ -147,7 +147,8 @@ export default function withEditor(WrappedComponent) {
 					setCurrentRecord={setCurrentRecord}
 					isEditorShown={isEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
-					editorViewMode={editorViewMode}
+					editorMode={editorMode}
+					setEditorMode={setEditorMode}
 					setIsEditorShown={setIsEditorShown}
 					onAdd={addRecord}
 					onEdit={editRecord}

package/src/Components/Hoc/withFilters.js

@@ -209,8 +209,8 @@ export default function withFilters(WrappedComponent) {
 													{...modelProps}
 												/>;
 							if (showLabels) {
-								filterElement = <Row key={'label-' + ix}>
-													<Text fontSize={styles.FILTER_LABEL_FONTSIZE}>{titles[fieldName]}:</Text>
+								filterElement = <Row key={'label-' + ix} alignItems="center">
+													<Text ml={2} mr={1} fontSize={styles.FILTER_LABEL_FONTSIZE}>{titles[fieldName]}</Text>
 													{filterElement}
 												</Row>;
 							}

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

@@ -3,6 +3,6 @@ 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';
+export const EDITOR_MODE__VIEW = 'EDITOR_MODE__VIEW';
+export const EDITOR_MODE__ADD = 'EDITOR_MODE__ADD';
+export const EDITOR_MODE__EDIT = 'EDITOR_MODE__EDIT';