@onehat/ui 0.3.55 → 0.3.57

package/package.json

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

package/src/Components/Buttons/BackButton.js

@@ -11,7 +11,7 @@ export default function BackButton(props) {
 		...propsToPass
 	} = props;
 	return <Pressable flexDirection="row" justifyContent="flex-start" alignItems="center" pr={5} {...propsToPass}>
-				<Icon as={AngleLeft} color={color} size="sm" />
+				<Icon as={AngleLeft} color={color} size="sm" mr={1} />
 				<Text fontSize={20} color={color} left={-1}>Back</Text>
 			</Pressable>;
 }

package/src/Components/Editor/Editor.js

@@ -31,7 +31,7 @@ function Editor(props) {
 	}
 
 	// Repository?.isRemotePhantomMode && selection.length === 1 && 
-	if (editorMode === EDITOR_MODE__VIEW) {
+	if (editorMode === EDITOR_MODE__VIEW || isEditorViewOnly) {
 		const record = selection[0];
 		if (record.isDestroyed) {
 			return null;

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

@@ -1,13 +1,19 @@
+import { useState, } from 'react';
 import {
 	Column,
-	Pressable,
+	Modal,
 	Row,
 	Text,
 } from 'native-base';
+import {
+	EDITOR_TYPE__WINDOWED,
+} from '@onehat/ui/src/Constants/Editor.js';
+import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';
 import IconButton from '../../../Buttons/IconButton.js';
+import Eye from '../../../Icons/Eye.js';
 import Xmark from '../../../Icons/Xmark.js';
 import Combo, { ComboEditor } from '../Combo/Combo.js';
 import _ from 'lodash';
@@ -16,6 +22,7 @@ import _ from 'lodash';
 function ValueBox(props) {
 	const {
 			text,
+			onView,
 			onDelete,
 		} = props;
 
@@ -23,31 +30,72 @@ function ValueBox(props) {
 				borderWidth={1}
 				borderColor="trueGray.400"
 				borderRadius="md"
-				pl={2}
 				mr={1}
 				bg="trueGray.200"
 				alignItems="center"
 			>
-				<Text color="trueGray.600">{text}</Text>
 				<IconButton
 					_icon={{
-						as: Xmark,
+						as: Eye,
 						color: 'trueGray.600',
 						size: 'sm',
 					}}
-					onPress={onDelete}
+					onPress={onView}
 					h="100%"
 				/>
+				<Text color="trueGray.600">{text}</Text>
+				{onDelete &&
+					<IconButton
+						_icon={{
+							as: Xmark,
+							color: 'trueGray.600',
+							size: 'sm',
+						}}
+						onPress={onDelete}
+						h="100%"
+					/>}
 			</Row>;
 }
 
 function TagComponent(props) {
 
 	const {
+			isEditor = false,
+			isValueAlwaysArray,
+			isValueAsStringifiedJson,
+			Editor,
+
+			// parent Form
+			onChangeValue,
+
+			// withComponent
+			self,
+
 			// withValue
 			value = [],
 			setValue,
+			...propsToPass // break connection between Tag and Combo props
 		} = props,
+		[isViewerShown, setIsViewerShown] = useState(false),
+		[viewerSelection, setViewerSelection] = useState(false),
+		onViewerClose = () => setIsViewerShown(false),
+		onView = async (item, e) => {
+			const
+				id = item.id,
+				repository = propsToPass.Repository;
+			let record = repository.getById(id); // first try to get from entities in memory
+			if (!record && repository.getSingleEntityFromServer) {
+				record = await repository.getSingleEntityFromServer(id); // TODO: Build this
+			}
+
+			if (!record) {
+				alert('Record could not be found!');
+				return;
+			}
+
+			setViewerSelection([record]);
+			setIsViewerShown(true);
+		},
 		onAdd = (item, e) => {
 			// make sure value doesn't already exist
 			let exists = false;
@@ -57,16 +105,18 @@ function TagComponent(props) {
 					return false; // break
 				}
 			});
-
-			if (!exists) {
-				// add new value
-				const newValue = _.clone(value); // so we trigger a re-render
-				newValue.push({
-					id: item.getId(),
-					text: item.getDisplayValue(),
-				})
-				setValue(newValue);
+			if (exists) {
+				alert('Value already exists!');
+				return;
 			}
+
+			// add new value
+			const newValue = _.clone(value); // so we trigger a re-render
+			newValue.push({
+				id: item.getId(),
+				text: item.getDisplayValue(),
+			})
+			setValue(newValue);
 		},
 		onDelete = (val) => {
 			// Remove from value array
@@ -76,29 +126,51 @@ function TagComponent(props) {
 			setValue(newValue);
 		},
 		valueBoxes = _.map(value, (val, ix) => {
-			return <ValueBox key={ix} text={val.text} onDelete={() => onDelete(val)} />;
-		});
-
-	return <Column w="100%" flex={1}>
-				{!_.isEmpty(valueBoxes) && 
-					<Row
-						w="100%"
-						borderWidth={1}
-						borderColor="trueGray.300"
-						borderRadius="md"
-						bg="trueGray.100"
-						p={1}
-						mb={1}
-						flexWrap="wrap"
-					>{valueBoxes}</Row>}
-				<Combo
-					{...props}
-					disableWithValue={true}
-					disableWithSelection={true}
-					disableWithEditor={true}
-					onRowPress={onAdd}
-				/>
-			</Column>;
+			return <ValueBox
+						key={ix}
+						text={val.text}
+						onView={() => onView(val)}
+						onDelete={isEditor ? () => onDelete(val) : null}
+					/>;
+		}),
+		WhichCombo = isEditor ? ComboEditor : Combo;
+
+	return <>
+				<Column w="100%" flex={1}>
+					{!_.isEmpty(valueBoxes) && 
+						<Row
+							w="100%"
+							borderWidth={1}
+							borderColor="trueGray.300"
+							borderRadius="md"
+							bg="trueGray.100"
+							p={1}
+							mb={1}
+							flexWrap="wrap"
+						>{valueBoxes}</Row>}
+					<WhichCombo
+						Repository={props.Repository}
+						Editor={props.Editor}
+						onRowPress={onAdd}
+					/>
+				</Column>
+				{isViewerShown && 
+					<Modal
+						isOpen={true}
+						onClose={onViewerClose}
+					>
+						<Editor
+							editorType={EDITOR_TYPE__WINDOWED}
+							{...propsToPass}
+							parent={self}
+							reference="viewer"
+
+							isEditorViewOnly={true}
+							selection={viewerSelection}
+							onEditorClose={onViewerClose}
+						/>
+					</Modal>}
+			</>;
 	
 }
 
@@ -114,15 +186,37 @@ function withAdditionalProps(WrappedComponent) {
 
 export const Tag = withAdditionalProps(
 						withComponent(
-							withData(
-								withValue(
-									TagComponent
+							withAlert(
+								withData(
+									withValue(
+										TagComponent
+									)
 								)
 							)
 						)
 					);
 
-export const TagEditor = Tag;
-// export const TagEditor = withAdditionalProps(ComboEditor);
+function withAdditionalEditorProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isEditor={true}
+					isValueAlwaysArray={true}
+					isValueAsStringifiedJson={true}
+					{...props}
+				/>;
+	};
+}
+
+export const TagEditor = withAdditionalEditorProps(
+							withComponent(
+								withAlert(
+									withData(
+										withValue(
+											TagComponent
+										)
+									)
+								)
+							)
+						);
 
 export default Tag;

package/src/Components/Hoc/withAlert.js

@@ -13,15 +13,13 @@ import {
 	ALERT_MODE_YES_NO,
 	ALERT_MODE_CUSTOM,
 } from '../../Constants/Alert.js';
-import Panel from '../Panel/Panel.js';
-import Footer from '../Layout/Footer.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import _ from 'lodash';
 
 export default function withAlert(WrappedComponent) {
 	return (props) => {
 
-		if (props.disableWithAlert) {
+		if (props.disableWithAlert || props.alert) {
 			return <WrappedComponent {...props} />;
 		}
 

package/src/Components/Hoc/withWindowedEditor.js

@@ -39,6 +39,7 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				h,
 
 				...propsToPass
 			} = props;

package/src/Components/Viewer/Viewer.js

@@ -256,11 +256,12 @@ function Viewer(props) {
 										color="#fff"
 									>Delete</Button>
 								</Row>}
-							{showCloseBtn && <Button
-												key="closeBtn"
-												onPress={onClose}
-												color="#fff"
-											>Close</Button>}
+							{onClose && showCloseBtn &&
+								<Button
+									key="closeBtn"
+									onPress={onClose}
+									color="#fff"
+								>Close</Button>}
 						</Footer>}
 
 				</>}