@onehat/ui 0.3.113 → 0.3.115

package/package.json

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

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/GridHeaderRow.js

@@ -342,7 +342,7 @@ export default function GridHeaderRow(props) {
 									if (isBlocked.current) { // withDraggable initiates block
 										return;
 									}
-									if (canColumnsSort) {
+									if (sortable && canColumnsSort) {
 										onSort(config, e);
 									}
 								}}

package/src/Components/Icons/SortDown.js

@@ -6,7 +6,7 @@ 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="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32v301.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
+		<Path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32v301.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z" />
 		</Icon>
 	)
 }

package/src/Components/Icons/SortDownAlt.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="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32v301.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/Icons/SortUp.js

@@ -5,12 +5,8 @@ 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="M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3V448c0 17.7 14.3 32 32 32s32-14.3 32-32V146.3l32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 480h32c17.7 0 32-14.3 32-32s-14.3-32-32-32h-32c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h160c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h224c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32s14.3 32 32 32z" />
+		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props}>
+		<Path d="M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3V448c0 17.7 14.3 32 32 32s32-14.3 32-32V146.3l32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 480h32c17.7 0 32-14.3 32-32s-14.3-32-32-32h-32c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h160c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h224c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32s14.3 32 32 32z" />
 		</Icon>
 	)
 }

package/src/Components/Icons/SortUpAlt.js

@@ -0,0 +1,18 @@
+// 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="M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3V448c0 17.7 14.3 32 32 32s32-14.3 32-32V146.3l32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 480h32c17.7 0 32-14.3 32-32s-14.3-32-32-32h-32c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h160c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128h224c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32s14.3 32 32 32z" />
+		</Icon>
+	)
+}
+
+export default SvgComponent

package/src/Components/index.js

@@ -151,7 +151,9 @@ import Scroll from '../Components/Icons/Scroll.js';
 import Share from '../Components/Icons/Share.js';
 import Shop from '../Components/Icons/Shop.js';
 import SideBySide from '../Components/Icons/SideBySide.js';
+import SortDownAlt from '../Components/Icons/SortDownAlt.js';
 import SortDown from '../Components/Icons/SortDown.js';
+import SortUpAlt from '../Components/Icons/SortUpAlt.js';
 import SortUp from '../Components/Icons/SortUp.js';
 import Square from '../Components/Icons/Square.js';
 import SquareCheck from '../Components/Icons/SquareCheck.js';
@@ -376,7 +378,9 @@ const components = {
 	Share,
 	Shop,
 	SideBySide,
+	SortDownAlt,
 	SortDown,
+	SortUpAlt,
 	SortUp,
 	Square,
 	SquareCheck,