@onehat/ui 0.3.17 → 0.3.21

package/package.json

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

package/src/Components/Form/Form.js

@@ -421,15 +421,18 @@ function Form(props) {
 					/>;
 		},
 		buildAncillary = () => {
-			let components = [];
+			const components = [];
 			if (ancillaryItems.length) {
-				components = _.map(ancillaryItems, (item, ix) => {
+				_.each(ancillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,
 						selectorId,
 						...propsToPass
 					} = item;
+					if (isMultiple && type !== 'Attachments') {
+						return;
+					}
 					if (!propsToPass.h) {
 						propsToPass.h = 400;
 					}
@@ -448,7 +451,7 @@ function Form(props) {
 									fontWeight="bold"
 								>{title}</Text>;
 					}
-					return <Column key={'ancillary-' + ix} mx={2} my={5}>{title}{element}</Column>;
+					components.push(<Column key={'ancillary-' + ix} mx={2} my={5}>{title}{element}</Column>);
 				});
 			}
 			return components;
@@ -607,7 +610,7 @@ function Form(props) {
 				{editor}
 
 				<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
-					{onDelete && editorMode === EDITOR_MODE__EDIT && 
+					{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 						<Row flex={1} justifyContent="flex-start">
 							<Button
 								key="deleteBtn"
@@ -631,7 +634,7 @@ function Form(props) {
 											}}
 											icon={<Rotate color="#fff" />}
 										/>}
-						{!isEditorViewOnly && onCancel && <Button
+						{!isEditorViewOnly && isSingle && onCancel && <Button
 														key="cancelBtn"
 														variant="ghost"
 														onPress={onCancel}

package/src/Components/Grid/GridRow.js

@@ -7,6 +7,7 @@ import {
 import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import AngleRight from '../Icons/AngleRight.js';
@@ -25,10 +26,17 @@ export default function GridRow(props) {
 			item,
 			isInlineEditorShown,
 		} = props,
-		styles = UiGlobals.styles,
+		styles = UiGlobals.styles;
+
+	if (item.isDestroyed) {
+		return null;
+	}
+
+	const
 		isPhantom = item.isPhantom,
 		hash = item?.hash || item;
 
+
 		return useMemo(() => {
 			const renderColumns = (item) => {
 				if (_.isArray(columnsConfig)) {
@@ -86,9 +94,30 @@ export default function GridRow(props) {
 								return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
 							}
 							if (config.fieldName) {
-								if (item.properties && item.properties[config.fieldName]) {
-									const property = item.properties[config.fieldName];	
+								if (item?.properties && item.properties[config.fieldName]) {
+									const property = item.properties[config.fieldName];
 									value = property.displayValue;
+
+									if (property?.viewerType?.type) {
+										const Element = getComponentFromType(property?.viewerType?.type);
+										return <Element
+													value={value}
+													key={key}
+													overflow="hidden"
+													textOverflow="ellipsis"
+													alignSelf="center"
+													style={{
+														userSelect: 'none',
+													}}
+													fontSize={styles.GRID_CELL_FONTSIZE}
+													px={styles.GRID_CELL_PX}
+													py={styles.GRID_CELL_PY}
+													numberOfLines={1}
+													ellipsizeMode="head"
+													{...propsToPass}
+													{...propsToPass}
+												/>;
+									}
 								} else if (item[config.fieldName]) {
 									value = item[config.fieldName];
 								} else if (fields) {

package/src/Components/Hoc/withEditor.js

@@ -121,6 +121,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			},
 			onEdit = async () => {
+				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
+					return;
+				}
 				if (getListeners().onBeforeEdit) {
 					const listenerResult = await getListeners().onBeforeEdit();
 					if (listenerResult === false) {
@@ -132,6 +135,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			onDelete = async (cb) => {
+				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
+					return;
+				}
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete();
 					if (listenerResult === false) {
@@ -165,7 +171,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					deleteRecord(cb);
 				} else {
 					const identifier = getRecordIdentifier(selection);
-					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(cb));
+					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(null, cb));
 				}
 			},
 			onMoveChildren = (cb) => {
@@ -268,7 +274,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				async function doIt() {
 					const
 						isSingle = selection.length === 1,
-						isPhantom = selection[0] && selection[0].isPhantom;
+						isPhantom = selection[0] && !selection[0]?.isDestroyed && selection[0].isPhantom;
 					if (isSingle && isPhantom) {
 						await deleteRecord();
 					}
@@ -301,7 +307,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 							// For multiple entities selected, change it to edit multiple mode
 							mode = EDITOR_MODE__EDIT;
 						}
-					} else if (selection.length === 1 && selection[0].isPhantom) {
+					} else if (selection.length === 1 && !selection[0].isDestroyed && selection[0].isPhantom) {
 						if (!disableAdd) {
 							// When a phantom entity is selected, change it to add mode.
 							mode = EDITOR_MODE__ADD;
@@ -354,12 +360,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					setIsEditorShown={setIsEditorShown}
 					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
 					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
-					onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
+					onDelete={(!userCanEdit || disableDelete) ? null : onDelete}
 					onView={viewRecord}
 					onDuplicate={duplicateRecord}
 					onEditorSave={onEditorSave}
 					onEditorCancel={onEditorCancel}
-					onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
+					onEditorDelete={(!userCanEdit || disableDelete) ? null : onEditorDelete}
 					onEditorClose={onEditorClose}
 					setWithEditListeners={setListeners}
 					isEditor={true}

package/src/Components/Hoc/withFilters.js

@@ -80,13 +80,12 @@ export default function withFilters(WrappedComponent) {
 						if (propertyDef) {
 							title = propertyDef.title;
 							type = propertyDef.filterType;
-						} else {
-							if (!modelFilterTypes[field]) {
-								throw Error('not a propertyDef, and not an ancillaryFilter!');
-							}
+						} else if (modelAncillaryFilters[field]) {
 							const ancillaryFilter = modelFilterTypes[field];
 							title = ancillaryFilter.title;
 							type = FILTER_TYPE_ANCILLARY;
+						} else {
+							throw Error('not a propertyDef, and not an ancillaryFilter!');
 						}
 						formatted = {
 							field,
@@ -330,6 +329,7 @@ export default function withFilters(WrappedComponent) {
 							const {
 									field,
 									value,
+									type,
 								} = filter,
 								isFilterRange = getIsFilterRange(filter);
 							if (isFilterRange) {
@@ -345,8 +345,11 @@ export default function withFilters(WrappedComponent) {
 									newRepoFilters.push({ name: lowField, value: lowValue, });
 								}
 							} else {
-								newFilterNames.push(field);
-								newRepoFilters.push({ name: field, value, });
+								const
+									isAncillary = type === FILTER_TYPE_ANCILLARY,
+									filterName =  (isAncillary ? 'ancillary___' : '') + field;
+								newFilterNames.push(filterName);
+								newRepoFilters.push({ name: filterName, value, });
 							}
 						});
 
@@ -421,7 +424,7 @@ export default function withFilters(WrappedComponent) {
 				_.each(modalSlots, (field, ix) => {
 
 					// Create the data for the combobox. (i.e. List all the possible filters for this slot)
-					const data = [];
+					let data = [];
 					_.each(modelFilterTypes, (filterType, filterField) => {
 						if (inArray(filterField, usedFields) && field !== filterField) { // Show all filters not yet applied, but include the current filter
 							return; // skip, since it's already been used
@@ -430,7 +433,7 @@ export default function withFilters(WrappedComponent) {
 						// Is it an ancillary filter?
 						const isAncillary = _.isPlainObject(filterType) && filterType.isAncillary;
 						if (isAncillary) {
-							data.push([ filterField, filterType.title ]);
+							data.push([ filterField, filterType.title + ' •' ]);
 							return;
 						}
 
@@ -439,6 +442,9 @@ export default function withFilters(WrappedComponent) {
 						data.push([ filterField, propertyDef.title ]);
 					});
 
+					// sort by title
+					data = _.sortBy(data, [function(datum) { return datum[1]; }]);
+
 					const
 						ixPlusOne = (ix +1),
 						filterName = 'filter' + ixPlusOne;

package/src/Components/Hoc/withPresetButtons.js

@@ -143,7 +143,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
 						}
-						if (_.isEmpty(selection)) {
+						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
 						break;
@@ -154,7 +154,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
 						}
-						if (_.isEmpty(selection) || selection.length > 1) {
+						if (_.isEmpty(selection) || (_.isArray(selection) && selection.length > 1)) {
 							isDisabled = true;
 						}
 						break;

package/src/Components/Icons/ChartPie.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+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 576 512" {...props}>
+      <Path d="M304 240V16.6c0-9 7-16.6 16-16.6 123.7 0 224 100.3 224 224 0 9-7.6 16-16.6 16H304zM32 272c0-121.3 90.1-221.7 207-237.7 9.2-1.3 17 6.1 17 15.4V288l156.5 156.5c6.7 6.7 6.2 17.7-1.5 23.1-39.2 28-87.2 44.4-139 44.4-132.5 0-240-107.4-240-240zm526.4 16c9.3 0 16.6 7.8 15.4 17-7.7 55.9-34.6 105.6-73.9 142.3-6 5.6-15.4 5.2-21.2-.7L320 288h238.4z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/Gears.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+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 640 512" {...props}>
+      <Path d="M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25-2.3-5.3-4.8-10.5-7.6-15.5l-3.1-5.4c-3-5-6.3-9.9-9.8-14.6-5.7-7.6-15.7-10.1-24.7-7.1L241.3 77c-10.7-8.8-23-16-36.2-20.9l-6.1-29c-1.9-9.3-9.1-16.7-18.5-17.8-6.6-.9-13.3-1.3-20.1-1.3h-.7c-6.8 0-13.5.4-20.1 1.2-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9l-28.3-9.2c-9-3-19-.5-24.7 7.1-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6-3.7 8.7-.9 18.6 6.2 25l22.2 19.8c-1.1 6.7-1.7 13.7-1.7 20.8s.6 14.1 1.7 20.9l-22.2 19.8c-7.1 6.3-9.9 16.2-6.2 25 2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6 5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8 6.7.8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1 3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5 3.7-8.7.9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112 176a48 48 0 1196 0 48 48 0 11-96 0zm392.7 324.5c6.3 7.1 16.2 9.9 25 6.2 5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8 7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2L613 391c9.3-1.9 16.7-9.1 17.8-18.5.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5l-29.1-6.2c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1.6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2l-29.1 6c-9.3 1.9-16.7 9.1-17.8 18.5-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7 4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6 8.7 3.7 18.6.9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 304a48 48 0 110 96 48 48 0 110-96z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Viewer/TagViewer.js

@@ -0,0 +1,28 @@
+import {
+	Text,
+} from 'native-base';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+function TagViewer(props) {
+	const {
+			value,
+		} = props,
+		parsedValue = value ? JSON.parse(value) : null,
+		values = parsedValue ? _.map(parsedValue, (val) => {
+			const ret = val?.text;
+			return ret;
+		}).join(', ') : [],
+		styles = UiGlobals.styles;
+
+	return <Text
+				numberOfLines={1}
+				ellipsizeMode="head"
+				// fontSize={styles.FORM_TEXT_FONTSIZE}
+				// minHeight='40px'
+				// px={3}
+				// py={2}
+				{...props}
+			>{values}</Text>;
+}
+export default TagViewer;

package/src/Components/{Editor → Viewer}/Viewer.js

@@ -37,19 +37,23 @@ export default function Viewer(props) {
 			onClose,
 			onDelete,
 		} = props,
+		isMultiple = _.isArray(record),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		styles = UiGlobals.styles,
 		flex = props.flex || 1,
 		buildAncillary = () => {
-			let components = [];
+			const components = [];
 			if (ancillaryItems.length) {
-				components = _.map(ancillaryItems, (item, ix) => {
+				_.each(ancillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,
 						selectorId = null,
 						...propsToPass
 					} = item;
+					if (isMultiple && type !== 'Attachments') {
+						return;
+					}
 					if (!propsToPass.h) {
 						propsToPass.h = 400;
 					}
@@ -70,7 +74,7 @@ export default function Viewer(props) {
 									fontWeight="bold"
 								>{title}</Text>;
 					}
-					return <Column key={'ancillary-' + ix} my={5}>{title}{element}</Column>;
+					components.push(<Column key={'ancillary-' + ix} my={5}>{title}{element}</Column>);
 				});
 			}
 			return components;

package/src/Components/index.js

@@ -38,6 +38,7 @@ import PlusMinusButton from './Buttons/PlusMinusButton.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
 import TabPanel from './Panel/TabPanel.js';
 import Tag from './Form/Field/Combo/Tag.js';
+import TagViewer from './Viewer/TagViewer.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
@@ -87,6 +88,7 @@ const components = {
 	RadioGroup,
 	TabPanel,
 	Tag,
+	TagViewer,
 	Text,
 	TextArea,
 	TimezonesCombo,

package/src/PlatformImports/Web/Attachments.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, } from 'react';
+import { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
 	Button,
@@ -49,8 +49,9 @@ function AttachmentsElement(props) {
 
 		} = props,
 		styles = UiGlobals.styles,
-		model = selectorSelected?.repository?.name,
-		modelid = selectorSelected?.id,
+		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
+		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity.id) : selectorSelected?.id,
+		modelid = useRef(modelidCalc),
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),
 		[showAll, setShowAll] = useState(false),
@@ -78,6 +79,9 @@ function AttachmentsElement(props) {
 			});
 			setFiles(files);
 		},
+		clearFiles = () => {
+			setFiles([]);
+		},
 		toggleShowAll = () => {
 			setShowAll(!showAll);
 		},
@@ -86,7 +90,7 @@ function AttachmentsElement(props) {
 			_.each(files, (file) => {
 				file.extraUploadData = {
 					model,
-					modelid,
+					modelid: modelid.current,
 				};
 			});
 		},
@@ -112,6 +116,10 @@ function AttachmentsElement(props) {
 			Repository.deleteById(id);
 		};
 
+	if (!_.isEqual(modelidCalc, modelid.current)) {
+		modelid.current = modelidCalc;
+	}
+
 	useEffect(() => {
 
 		if (!model) {
@@ -120,37 +128,43 @@ function AttachmentsElement(props) {
 
 		(async () => {
 
-			// Load Repository
-			const filters = [
-				{
-					name: 'model',
-					value: model,
-				},
-				{
-					name: 'modelid',
-					value: modelid,
-				},
-			];
-			if (accept) {
-				let name,
-					mimetypes;
-				if (_.isString(accept)) {
-					name = 'mimetype LIKE';
-					mimetypes = accept.replace('*', '%');
-				} else if (_.isArray(accept)) {
-					name = 'mimetype IN';
-					mimetypes = accept;
+			if (!_.isArray(modelid.current)) {
+
+				// Load Repository
+				const filters = [
+					{
+						name: 'model',
+						value: model,
+					},
+					{
+						name: 'modelid',
+						value: modelid.current,
+					},
+				];
+				if (accept) {
+					let name,
+						mimetypes;
+					if (_.isString(accept)) {
+						name = 'mimetype LIKE';
+						mimetypes = accept.replace('*', '%');
+					} else if (_.isArray(accept)) {
+						name = 'mimetype IN';
+						mimetypes = accept;
+					}
+					filters.push({
+						name,
+						value: mimetypes,
+					});
 				}
-				filters.push({
-					name,
-					value: mimetypes,
-				});
+				Repository.filter(filters);
+				Repository.setPageSize(showAll ? EXPANDED_MAX : COLLAPSED_MAX);
+				await Repository.load();
+
+				buildFiles();
+			} else {
+				clearFiles();
 			}
-			Repository.filter(filters);
-			Repository.setPageSize(showAll ? EXPANDED_MAX : COLLAPSED_MAX);
-			await Repository.load();
 
-			buildFiles();
 
 			if (!isReady) {
 				setIsReady(true);
@@ -162,7 +176,7 @@ function AttachmentsElement(props) {
 		return () => {
 			Repository.off('load', buildFiles);
 		};
-	}, [model, modelid, showAll]);
+	}, [model, modelid.current, showAll]);
 
 	if (!isReady) {
 		return null;