@onehat/ui 0.3.50 → 0.3.53

package/package.json

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

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

@@ -51,6 +51,7 @@ export function ComboComponent(props) {
 			displayIx,
 
 			// withSelection
+			disableWithSelection,
 			selection,
 			setSelection,
 			selectionMode,
@@ -186,7 +187,9 @@ export function ComboComponent(props) {
 
 			// If user focused on the trigger and text is blank, clear the selection and close the menu
 			if ((triggerRef.current === relatedTarget || triggerRef.current.contains(relatedTarget)) && (_.isEmpty(textValue) || _.isNil(textValue))) {
-				setSelection([]); // delete current selection
+				if (!disableWithSelection) {
+					setSelection([]); // delete current selection
+				}
 				hideMenu();
 				return;
 			}
@@ -209,18 +212,28 @@ export function ComboComponent(props) {
 				hideMenu();
 			}
 			if (_.isEmpty(textValue) || _.isNil(textValue)) {
-				setSelection([]); // delete current selection
+
+				if (!disableWithSelection) {
+					setSelection([]); // delete current selection
+				}
 
 			} else if (getIsManuallyEnteringText()) {
 				if (forceSelection) {
-					setSelection([]); // delete current selection
+					if (!disableWithSelection) {
+						setSelection([]); // delete current selection
+					} else {
+						setValue(textValue);
+					}
 					hideMenu();
 				} else {
 					setValue(textValue);
 				}
 			}
-			if (_.isEmpty(selection)) {
-				setTextValue('');
+			
+			if (!disableWithSelection) {
+				if (_.isEmpty(selection)) {
+					setTextValue('');
+				}
 			}
 		},
 		onInputClick = (e) => {
@@ -245,8 +258,10 @@ export function ComboComponent(props) {
 					relatedTarget
 				} = e;
 			
-			if (_.isEmpty(textValue) || _.isNil(textValue)) {
-				setSelection([]); // delete current selection
+			if (!disableWithSelection) {
+				if (_.isEmpty(textValue) || _.isNil(textValue)) {
+					setSelection([]); // delete current selection
+				}
 			}
 
 			if (!isMenuShown) {
@@ -301,13 +316,15 @@ export function ComboComponent(props) {
 				}
 
 				setSavedSearch(value);
-				const numResults = Repository.entities.length;
-				if (!numResults) {
-					setSelection([]);
-				} else if (numResults === 1) {
-					const selection = Repository.entities[0];
-					setSelection([selection]);
-					setSavedSearch(null);
+				if (!disableWithSelection) {
+					const numResults = Repository.entities.length;
+					if (!numResults) {
+						setSelection([]);
+					} else if (numResults === 1) {
+						const selection = Repository.entities[0];
+						setSelection([selection]);
+						setSavedSearch(null);
+					}
 				}
 			
 			} else {
@@ -324,19 +341,19 @@ export function ComboComponent(props) {
 						newTextValue = getDisplayValuesFromSelection(newSelection);
 
 					setTextValue(newTextValue);
-					setSelection(newSelection);
+					if (!disableWithSelection) {
+						setSelection(newSelection);
+					}
 				} else {
 					if (value === '') { // Text field was cleared, so clear selection
-						setSelection([]);
+						if (!disableWithSelection) {
+							setSelection([]);
+						}
 					}
 				}
 			}
 		};
 
-	if (_.isUndefined(selection)) {
-		throw new Error('Combo must be used with withSelection hook!');
-	}
-
 	useEffect(() => {
 		// on render, focus the input
 		if (!isRendered) {
@@ -348,18 +365,20 @@ export function ComboComponent(props) {
 
 	}, [isRendered]);
 
-	useEffect(() => {
-		if (getIsManuallyEnteringText() && getSavedSearch()) {
-			return
-		}
+	if (!disableWithSelection) {
+		useEffect(() => {
+			if (getIsManuallyEnteringText() && getSavedSearch()) {
+				return
+			}
 
-		// Adjust text input to match selection
-		let localTextValue = getDisplayValuesFromSelection(selection);
-		if (!_.isEqual(localTextValue, textValue)) {
-			setTextValue(localTextValue);
-		}
-		setIsManuallyEnteringText(false);
-	}, [selection]);
+			// Adjust text input to match selection
+			let localTextValue = getDisplayValuesFromSelection(selection);
+			if (!_.isEqual(localTextValue, textValue)) {
+				setTextValue(localTextValue);
+			}
+			setIsManuallyEnteringText(false);
+		}, [selection]);
+	}
 
 
 	const refProps = {};

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

@@ -0,0 +1,128 @@
+import {
+	Column,
+	Pressable,
+	Row,
+	Text,
+} from 'native-base';
+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 Xmark from '../../../Icons/Xmark.js';
+import Combo, { ComboEditor } from '../Combo/Combo.js';
+import _ from 'lodash';
+
+
+function ValueBox(props) {
+	const {
+			text,
+			onDelete,
+		} = props;
+
+	return <Row
+				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,
+						color: 'trueGray.600',
+						size: 'sm',
+					}}
+					onPress={onDelete}
+					h="100%"
+				/>
+			</Row>;
+}
+
+function TagComponent(props) {
+
+	const {
+			// withValue
+			value = [],
+			setValue,
+		} = props,
+		onAdd = (item, e) => {
+			// make sure value doesn't already exist
+			let exists = false;
+			_.each(value, (val) => {
+				if (val.id === item.getId()) {
+					exists = true;
+					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);
+			}
+		},
+		onDelete = (val) => {
+			// Remove from value array
+			const newValue = _.filter(value, (val1) => {
+				return val1.id !== val.id;
+			});			
+			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>;
+	
+}
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isValueAlwaysArray={true}
+					isValueAsStringifiedJson={true}
+					{...props}
+				/>;
+	};
+}
+
+export const Tag = withAdditionalProps(
+						withComponent(
+							withData(
+								withValue(
+									TagComponent
+								)
+							)
+						)
+					);
+
+export const TagEditor = Tag;
+// export const TagEditor = withAdditionalProps(ComboEditor);
+
+export default Tag;

package/src/Components/Form/Form.js

@@ -482,7 +482,7 @@ function Form(props) {
 									labelProps.w = defaults.labelWidth;
 								}
 								let requiredIndicator = null;
-								if (propertyDef.validator?.spec && !propertyDef.validator.spec.optional) {
+								if (propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) {
 									requiredIndicator = <Text color="#f00" pr={1}>*</Text>;
 								}
 								element = <Row w="100%" py={1}>

package/src/Components/Grid/Grid.js

@@ -72,6 +72,7 @@ function GridComponent(props) {
 				};
 			},
 			flatListProps = {},
+			onRowPress,
 			// enableEditors = false,
 			loadOnRender = true,
 			pullToRefresh = true,
@@ -124,6 +125,7 @@ function GridComponent(props) {
 			onChangeColumnsConfig,
 
 			// withSelection
+			disableWithSelection,
 			selection,
 			setSelection,
 			selectionMode,
@@ -167,6 +169,12 @@ function GridComponent(props) {
 			if (isInlineEditorShown) {
 				return;
 			}
+			if (onRowPress) {
+				onRowPress(item, e);
+			}
+			if (disableWithSelection) {
+				return;
+			}
 			const
 				{
 					shiftKey,
@@ -258,7 +266,7 @@ function GridComponent(props) {
 				} = row,
 				isHeaderRow = row.item.id === 'headerRow',
 				rowProps = getRowProps && !isHeaderRow ? getRowProps(item) : {},
-				isSelected = !isHeaderRow && isInSelection(item);
+				isSelected = !isHeaderRow && !disableWithSelection && isInSelection(item);
 
 			return <Pressable
 						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
@@ -299,7 +307,9 @@ function GridComponent(props) {
 							
 							// context menu
 							const selection = [item];
-							setSelection(selection);
+							if (!disableWithSelection) {
+								setSelection(selection);
+							}
 							if (onEditorRowClick) { // e.g. inline editor
 								onEditorRowClick(item, index, e);
 							}
@@ -762,7 +772,9 @@ function GridComponent(props) {
 
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
-		Repository.ons(['changePage', 'changePageSize',], deselectAll);
+		if (!disableWithSelection) {
+			Repository.ons(['changePage', 'changePageSize',], deselectAll);
+		}
 		Repository.ons(['changeData', 'change'], forceUpdate);
 		Repository.on('changeFilters', onChangeFilters);
 		Repository.on('changeSorters', onChangeSorters);
@@ -771,7 +783,9 @@ function GridComponent(props) {
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
-			Repository.offs(['changePage', 'changePageSize',], deselectAll);
+			if (!disableWithSelection) {
+				Repository.offs(['changePage', 'changePageSize',], deselectAll);
+			}
 			Repository.offs(['changeData', 'change'], forceUpdate);
 			Repository.off('changeFilters', onChangeFilters);
 			Repository.off('changeSorters', onChangeSorters);

package/src/Components/Grid/GridHeaderRow.js

@@ -71,7 +71,9 @@ export default function GridHeaderRow(props) {
 			Repository.sort(currentSortField, isCurrentSortDirectionAsc ? SORT_ASCENDING : SORT_DESCENDING, sortFn);
 
 			// clear the selection
-			setSelection([]);
+			if (setSelection) {
+				setSelection([]);
+			}
 		},
 		onHeaderMouseEnter = (e, ix) => {
 			if (isDragging) {

package/src/Components/Hoc/withAlert.js

@@ -20,6 +20,11 @@ import _ from 'lodash';
 
 export default function withAlert(WrappedComponent) {
 	return (props) => {
+
+		if (props.disableWithAlert) {
+			return <WrappedComponent {...props} />;
+		}
+
 		const
 			[isAlertShown, setIsAlertShown] = useState(false),
 			[title, setTitle] = useState(''),
@@ -146,6 +151,7 @@ export default function withAlert(WrappedComponent) {
 		return <>
 					<WrappedComponent
 						{...props}
+						disableWithAlert={false}
 						alert={onAlert}
 						confirm={onConfirm}
 						hideAlert={hideAlert}

package/src/Components/Hoc/withData.js

@@ -11,6 +11,11 @@ import _ from 'lodash';
 
 export default function withData(WrappedComponent) {
 	return (props) => {
+
+		if (props.disableWithData) {
+			return <WrappedComponent {...props} />;
+		}
+		
 		const
 			{
 				// For @onehat/data repositories
@@ -102,6 +107,7 @@ export default function withData(WrappedComponent) {
 
 		return <WrappedComponent
 					{...propsToPass}
+					disableWithData={false}
 					Repository={LocalRepository}
 					model={model}
 					data={data}

package/src/Components/Hoc/withEditor.js

@@ -12,6 +12,10 @@ import _ from 'lodash';
 export default function withEditor(WrappedComponent, isTree = false) {
 	return (props) => {
 
+		if (props.disableWithEditor) {
+			return <WrappedComponent {...props} />;
+		}
+
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
 				userCanEdit = true,
@@ -411,6 +415,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 		return <WrappedComponent
 					{...props}
+					disableWithEditor={false}
 					currentRecord={currentRecord}
 					setCurrentRecord={setCurrentRecord}
 					isEditorShown={isEditorShown}

package/src/Components/Hoc/withPresetButtons.js

@@ -308,6 +308,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 
 		return <WrappedComponent
 					{...propsToPass}
+					disablePresetButtons={false}
 					contextMenuItems={contextMenuItemsToPass}
 					additionalToolbarButtons={additionalToolbarButtonsToPass}
 					onChangeColumnsConfig={onChangeColumnsConfigDecorator}

package/src/Components/Hoc/withSelection.js

@@ -11,6 +11,10 @@ import _ from 'lodash';
 export default function withSelection(WrappedComponent) {
 	return (props) => {
 
+		if (props.disableWithSelection) {
+			return <WrappedComponent {...props} />;
+		}
+
 		if (props.setSelection) {
 			// bypass everything, since we're already using withSelection() in hierarchy.
 			// For example, Combo has withSelection(), and intenally it uses Grid which also has withSelection(),
@@ -352,6 +356,7 @@ export default function withSelection(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
+					disableWithSelection={false}
 					selection={localSelection}
 					setSelection={setSelection}
 					selectionMode={selectionMode}

package/src/Components/Hoc/withValue.js

@@ -9,6 +9,10 @@ import _ from 'lodash';
 export default function withValue(WrappedComponent) {
 	return (props) => {
 
+		if (props.disableWithValue) {
+			return <WrappedComponent {...props} />;
+		}
+
 		if (props.setValue) {
 			// bypass everything, since we're already using withValue() in hierarchy.
 			// For example, Combo has withValue(), and intenally it uses Input which also has withValue(),
@@ -21,9 +25,8 @@ export default function withValue(WrappedComponent) {
 				onChangeValue,
 				value,
 				startingValue = null,
-				valueIsAlwaysArray = false,
-				valueAsIdAndText = false,
-				valueAsStringifiedJson = false,
+				isValueAlwaysArray = false,
+				isValueAsStringifiedJson = false,
 
 				// withData
 				Repository,
@@ -46,36 +49,14 @@ export default function withValue(WrappedComponent) {
 			},
 			setValueRef = useRef((newValue) => {
 				// NOTE: We useRef so that this function stays current after renders
-				if (valueIsAlwaysArray && !_.isArray(newValue)) {
+				if (isValueAlwaysArray && !_.isArray(newValue)) {
 					newValue = _.isNil(newValue) ? [] : [newValue];
 				}
 				if (_.isArray(newValue)) {
 					// TODO: sort by the sortProperty, whatever that is, instead of just value
 					newValue.sort(natsort()); // Only sort if we're using id/text arrangement. Otherwise, keep sort order as specified in Repository.
 				}
-				if (valueAsIdAndText) {
-					if (_.isArray(newValue)) {
-						newValue = _.map(newValue, (id) => {
-							if (_.isNil(id)) {
-								return id;
-							}
-							const record = Repository.getById(id);
-							return {
-								id: record.getId(),
-								text: record.getDisplayValue(),
-							};
-						})
-					} else {
-						if (!_.isNil(id)) {
-							const record = Repository.getById(newValue);
-							newValue = {
-								id: record.getId(),
-								text: record.getDisplayValue(),
-							};
-						}
-					}
-				}
-				if (valueAsStringifiedJson) {
+				if (isValueAsStringifiedJson) {
 					newValue = JSON.stringify(newValue);
 				}
 
@@ -142,28 +123,18 @@ export default function withValue(WrappedComponent) {
 		
 		// Convert localValue to normal JS primitives for field components
 		let convertedValue = getLocalValue();
-		if (_.isString(convertedValue) && valueAsStringifiedJson && !_.isNil(convertedValue)) {
+		if (_.isString(convertedValue) && isValueAsStringifiedJson && !_.isNil(convertedValue)) {
 			convertedValue = JSON.parse(convertedValue);
 		}
-		if (valueIsAlwaysArray) {
+		if (isValueAlwaysArray) {
 			if (_.isEmpty(convertedValue) || _.isNil(convertedValue)) {
-				convertedValue = null;
-			} else if (convertedValue.length === 1) {
-				convertedValue = convertedValue[0];
-			}
-		}
-		if (valueAsIdAndText && !_.isNil(convertedValue)) {
-			if (_.isArray(convertedValue)) {
-				convertedValue = _.map(convertedValue, (value) => {
-					return value?.id;
-				});
-			} else {
-				convertedValue = convertedValue?.id;
+				convertedValue = [];
 			}
 		}
 
 		return <WrappedComponent
 					{...props}
+					disableWithValue={false}
 					value={convertedValue}
 					setValue={setValue}
 					onChangeSelection={onChangeSelection}

package/src/Components/index.js

@@ -40,7 +40,7 @@ import PlusMinusButton from './Buttons/PlusMinusButton.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
 import SquareButton from './Buttons/SquareButton.js';
 import TabPanel from './Panel/TabPanel.js';
-import Tag from './Form/Field/Combo/Tag.js';
+import Tag from './Form/Field/Tag/Tag.js';
 import TagViewer from './Viewer/TagViewer.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';

package/src/PlatformImports/Web/Attachments.js

@@ -3,7 +3,9 @@ import {
 	Box,
 	Button,
 	Column,
+	Pressable,
 	Row,
+	Text,
 } from 'native-base';
 import {
 	CURRENT_MODE,
@@ -16,6 +18,8 @@ import {
 	FILE_MODE_FILE,
 } from '../../Constants/File.js';
 import { Avatar, Dropzone, FileMosaic, FileCard, FileInputButton, } from "@files-ui/react";
+import IconButton from '@onehat/ui/src/Components/Buttons/IconButton.js';
+import Xmark from '@onehat/ui/src/Components/Icons/Xmark.js'
 import withAlert from '../../Components/Hoc/withAlert.js';
 import withData from '../../Components/Hoc/withData.js';
 import _ from 'lodash';
@@ -24,6 +28,46 @@ const
 	EXPANDED_MAX = 100,
 	COLLAPSED_MAX = 2;
 
+const downloadWithFetch = (url, options = {}) => {
+	fetch(url, options)
+		.then( res => res.blob() )
+		.then( blob => {
+			const
+				winName = 'ReportWindow',
+				opts = 'resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1',
+				externalWindow = window.open('', winName, opts),
+				file = externalWindow.URL.createObjectURL(blob);
+			externalWindow.location.assign(file);
+		});
+};
+
+function FileCardCustom(props) {
+	const
+		{
+			id,
+			name: filename,
+			type: mimetype,
+			onDelete,
+			downloadUrl,
+		} = props;
+	return <Pressable
+				px={3}
+				py={1}
+				alignItems="center"
+				flexDirection="row"
+				borderRadius={5}
+				borderWidth={1}
+				borderColor="primary.700"
+				onPress={() => {
+					downloadWithFetch(downloadUrl);
+				}}
+			>
+				<Text>{filename}</Text>
+				<IconButton icon={Xmark} onPress={() => onDelete(id)} />
+			</Pressable>;
+}
+	
+
 // Note this component uploads only one file per server request---
 // it doesn't upload multiple files simultaneously.
 
@@ -37,6 +81,7 @@ function AttachmentsElement(props) {
 			canCrud = true,
 			_dropZone = {},
 			_fileMosaic = {},
+			useFileMosaic = true,
 			accept, // 'image/*'
 			maxFiles = null,
 			disabled = false,
@@ -200,7 +245,6 @@ function AttachmentsElement(props) {
 	}
 	let content = <Column
 						w="100%"
-						// minHeight={50}
 						p={2}
 						background={styles.ATTACHMENTS_BG}
 					>
@@ -210,11 +254,18 @@ function AttachmentsElement(props) {
 											key={file.id}
 											marginRight={4}
 										>
-											<FileMosaic
-												{...file}
-												backgroundBlurImage={false}
-												{..._fileMosaic}
-											/>
+											{useFileMosaic &&
+												<FileMosaic
+													{...file}
+													backgroundBlurImage={false}
+													{..._fileMosaic}
+												/>}
+											{!useFileMosaic &&
+												<FileCardCustom
+													{...file}
+													backgroundBlurImage={false}
+													{..._fileMosaic}
+												/>}
 										</Box>;
 							})}
 						</Row>

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

@@ -1,23 +0,0 @@
-import {
-	SELECTION_MODE_MULTI,
-} from '../../../../Constants/Selection.js';
-import Combo, { ComboEditor } from './Combo.js';
-
-function withAdditionalProps(WrappedComponent) {
-	return (props) => {
-		return <WrappedComponent
-					selectionMode={SELECTION_MODE_MULTI}
-					valueIsAlwaysArray={true}
-					valueAsIdAndText={true}
-					valueAsStringifiedJson={true}
-					disableDirectEntry={true}
-					pageSize={500}
-					{...props}
-				/>;
-	};
-}
-
-const Tag = withAdditionalProps(Combo);
-export const TagEditor = withAdditionalProps(ComboEditor);
-
-export default Tag;