@onehat/ui 0.3.112 → 0.3.114

package/package.json

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

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

@@ -20,7 +20,7 @@ import _ from 'lodash';
 function TagComponent(props) {
 
 	const {
-			isEditor = false,
+			isViewOnly = false,
 			isValueAlwaysArray,
 			isValueAsStringifiedJson,
 			Editor,
@@ -143,7 +143,7 @@ function TagComponent(props) {
 						key={ix}
 						text={val.text}
 						onView={() => onView(val)}
-						onDelete={() => onDelete(val)}
+						onDelete={!isViewOnly ? () => onDelete(val) : null}
 					/>;
 		});
 
@@ -187,14 +187,14 @@ function TagComponent(props) {
 						minHeight={10}
 						flexWrap="wrap"
 					>{valueBoxes}</Row>
-					<WhichCombo
-						Repository={props.Repository}
-						Editor={props.Editor}
-						onChangeValue={onChangeComboValue}
-						parent={self}
-						reference="combo"
-						{..._combo}
-					/>
+					{!isViewOnly && <WhichCombo
+										Repository={props.Repository}
+										Editor={props.Editor}
+										onChangeValue={onChangeComboValue}
+										parent={self}
+										reference="combo"
+										{..._combo}
+									/>}
 				</Column>
 				{isViewerShown && 
 					<Modal

package/src/Components/Grid/Grid.js

@@ -42,6 +42,8 @@ import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import withInlineEditor from '../Hoc/withInlineEditor.js';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
@@ -167,6 +169,8 @@ function GridComponent(props) {
 
 		} = props,
 		styles = UiGlobals.styles,
+		id = props.id || props.self?.path,
+		localColumnsConfigKey = id && id + '-localColumnsConfig',
 		forceUpdate = useForceUpdate(),
 		containerRef = useRef(),
 		gridRef = useRef(),
@@ -180,6 +184,10 @@ function GridComponent(props) {
 		[dragRowSlot, setDragRowSlot] = useState(null),
 		[dragRowIx, setDragRowIx] = useState(),
 		setLocalColumnsConfig = (config) => {
+			if (localColumnsConfigKey) {
+				setSaved(localColumnsConfigKey, config);
+			}
+
 			setLocalColumnsConfigRaw(config);
 			if (onChangeColumnsConfig) {
 				onChangeColumnsConfig(config);
@@ -718,79 +726,92 @@ function GridComponent(props) {
 			return () => {};
 		}
 
-		// second call -- do other necessary setup
-		function calculateLocalColumnsConfig() {
-			// convert json config into actual elements
-			const localColumnsConfig = [];
-			if (_.isEmpty(columnsConfig)) {
-				if (Repository) {
-					// create a column for the displayProperty
-					localColumnsConfig.push({
-						fieldName: Repository.schema.model.displayProperty,
-					});
-				} else {
-					localColumnsConfig.push({
-						fieldName: displayField,
-					});
-				}
+		(async () => {
+
+			// second call -- do other necessary setup
+
+			// calculate localColumnsConfig
+			let localColumnsConfig = [];
+			let savedLocalColumnsConfig;
+			if (localColumnsConfigKey) {
+				savedLocalColumnsConfig = await getSaved(localColumnsConfigKey);
+			}
+			if (savedLocalColumnsConfig) {
+				// use saved
+				localColumnsConfig = savedLocalColumnsConfig;
 			} else {
-				_.each(columnsConfig, (columnConfig) => {
-					if (!_.isPlainObject(columnConfig)) {
-						localColumnsConfig.push(columnConfig);
-						return;
+				// calculate new
+
+				// convert json config into actual elements
+				if (_.isEmpty(columnsConfig)) {
+					if (Repository) {
+						// create a column for the displayProperty
+						localColumnsConfig.push({
+							fieldName: Repository.schema.model.displayProperty,
+						});
+					} else {
+						localColumnsConfig.push({
+							fieldName: displayField,
+						});
 					}
+				} else {
+					_.each(columnsConfig, (columnConfig) => {
+						if (!_.isPlainObject(columnConfig)) {
+							localColumnsConfig.push(columnConfig);
+							return;
+						}
 
-					// destructure so we can set defaults
-					const {
-							header,
-							fieldName, // from @onehat/data model
-							type, // specify which column type to use (custom or built-in)
-							isEditable = false,
-							editor,
-							format,
-							renderer, // React component will render the output
-							reorderable = true,
-							resizable = true,
-							sortable = true,
-							w,
-							flex,
-							...propsToPass
-						} = columnConfig,
-
-						config = {
-							columnId: uuid(),
-							header,
-							fieldName,
-							type,
-							isEditable,
-							editor,
-							format,
-							renderer,
-							reorderable,
-							resizable,
-							sortable,
-							w,
-							flex,
-							showDragHandles: false,
-							...propsToPass,
-						};
-
-					if (!(config.w || config.width) && !config.flex) {
-						// Neither is set
-						config.w = 100; // default
-					} else if (config.flex && (config.w || config.width)) {
-						// Both are set. Width overrules flex.
-						delete config.flex;
-					}
+						// destructure so we can set defaults
+						const {
+								header,
+								fieldName, // from @onehat/data model
+								type, // specify which column type to use (custom or built-in)
+								isEditable = false,
+								editor,
+								format,
+								renderer, // React component will render the output
+								reorderable = true,
+								resizable = true,
+								sortable = true,
+								w,
+								flex,
+								...propsToPass
+							} = columnConfig,
+
+							config = {
+								columnId: uuid(),
+								header,
+								fieldName,
+								type,
+								isEditable,
+								editor,
+								format,
+								renderer,
+								reorderable,
+								resizable,
+								sortable,
+								w,
+								flex,
+								showDragHandles: false,
+								...propsToPass,
+							};
+
+						if (!(config.w || config.width) && !config.flex) {
+							// Neither is set
+							config.w = 100; // default
+						} else if (config.flex && (config.w || config.width)) {
+							// Both are set. Width overrules flex.
+							delete config.flex;
+						}
 
-					localColumnsConfig.push(config);
-				});
+						localColumnsConfig.push(config);
+					});
+				}
 			}
-			return localColumnsConfig;
-		}
-		setLocalColumnsConfig(calculateLocalColumnsConfig());
+			setLocalColumnsConfig(localColumnsConfig);
 
-		setIsReady(true);
+			setIsReady(true);
+		})();
 
 		if (!Repository) {
 			return () => {};

package/src/Components/Grid/GridRow.js

@@ -103,13 +103,17 @@ export default function GridRow(props) {
 								if (item?.properties && item.properties[config.fieldName]) {
 									const property = item.properties[config.fieldName];
 									value = property.displayValue;
+									const type = property?.viewerType?.type;
 
-									if (property?.viewerType?.type) {
-										const Element = getComponentFromType(property?.viewerType?.type);
+									if (type) {
+										const Element = getComponentFromType(type);
 										const elementProps = {};
 										if (UiGlobals.mode === UI_MODE_WEB) {
 											elementProps.textOverflow = 'ellipsis';
 										}
+										if (type.match(/(Tag|TagEditor)$/)) {
+											elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
+										}
 										return <Element
 													value={value}
 													key={key}