@onehat/ui 0.4.68 → 0.4.69

package/package.json

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

package/src/Components/Accordion/Accordion.js

@@ -84,7 +84,7 @@ export default function Accordion(props) {
 									if (isActive) {
 										newActiveSections = _.without(activeSections, ix);
 									} else {
-										newActiveSections = _.clone(activeSections);
+										newActiveSections = [...activeSections]; // clone
 										newActiveSections.push(ix);
 									}
 								}

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

@@ -144,7 +144,7 @@ function TagComponent(props) {
 
 
 			// add new value
-			const newValue = _.clone(value); // so we trigger a re-render
+			const newValue = [...value]; // clone, so we trigger a re-render
 			newValue.push({
 				id,
 				text: displayValue,
@@ -165,7 +165,7 @@ function TagComponent(props) {
 			const
 				entity = selection[0],
 				id = entity.id,
-				newValue = _.clone(valueRef.current);
+				newValue = [...valueRef.current]; // clone
 			newValue.push({
 				id,
 				text: entity.displayValue,
@@ -190,7 +190,7 @@ function TagComponent(props) {
 				return;
 			}
 			
-			const newValue = _.clone(valueRef.current);
+			const newValue = [...valueRef.current]; // clone
 			newValue[ix] = {
 				id,
 				text: entity.displayValue,

package/src/Components/Grid/Grid.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
 import {
 	Box,
 	FlatList,
@@ -266,7 +266,7 @@ function GridComponent(props) {
 		},
 		setLocalColumnsConfig = (config) => {
 			if (localColumnsConfigKey) {
-				const localConfig = _.clone(config); // clone it so we don't alter the original
+				const localConfig = [...config]; // clone it so we don't alter the original
 				if (hasUnserializableColumns) {
 					// just save the data needed to later reconstruct the columns
 					const usedIds = [];
@@ -1166,7 +1166,7 @@ function GridComponent(props) {
 
 	// Actual data to show in the grid
 	const entities = Repository ? (Repository.isRemote ? Repository.entities : Repository.getEntitiesOnPage()) : data;
-	let rowData = _.clone(entities); // don't use the original array, make a new one so alterations to it are temporary
+	let rowData = [...entities]; // don't use the original array, make a new one so alterations to it are temporary
 	if (showHeaders) {
 		rowData.unshift({ id: 'headerRow' });
 	}

package/src/Components/Grid/GridHeaderRow.js

@@ -86,7 +86,7 @@ export default function GridHeaderRow(props) {
 			if (isDragging) {
 				return;
 			}
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 			columnsConfig[ix].isOver = true;
 			setLocalColumnsConfig(columnsConfig);
 		},
@@ -94,7 +94,7 @@ export default function GridHeaderRow(props) {
 			if (isDragging) {
 				return;
 			}
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 			columnsConfig[ix].isOver = false;
 			setLocalColumnsConfig(columnsConfig);
 		},
@@ -240,7 +240,7 @@ export default function GridHeaderRow(props) {
 			setDragColumnSlot({ ix: newIx, marker, });
 		},
 		onColumnReorderDragStop = (delta, e, config) => {
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 
 			 _.pull(columnsConfig, config);
 
@@ -256,7 +256,7 @@ export default function GridHeaderRow(props) {
 			setDragColumnSlot(null);
 		},
 		onColumnResize = (delta, e, node, config) => {
-			const columnsConfig = _.clone(localColumnsConfig); // work with a copy, so that setter forces rerender
+			const columnsConfig = [...localColumnsConfig]; // work with a copy, so that setter forces rerender
 			if (config.w) {
 				config.w = Math.round(config.w + delta);
 			} else if (config.flex) {

package/src/Components/Grid/GridRow.js

@@ -11,7 +11,6 @@ import {
 	UI_MODE_NATIVE,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import * as colourMixer from '@k-renwick/colour-mixer';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -22,6 +21,16 @@ import RowDragHandle from './RowDragHandle.js';
 import RowSelectHandle from './RowSelectHandle.js';
 import _ from 'lodash';
 
+// Conditional import for web only
+let getEmptyImage;
+if (CURRENT_MODE === UI_MODE_WEB) {
+	import('react-dnd-html5-backend').then((module) => {
+		getEmptyImage = module.getEmptyImage;
+	}).catch(() => {
+		getEmptyImage = null;
+	});
+}
+
 // This was broken out from Grid simply so we can memoize it
 
 function GridRow(props) {

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -169,7 +169,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (secondaryDefaultValues) {
 						_.merge(defaultValuesToUse, secondaryDefaultValues);
 					}
-					addValues = _.clone(defaultValuesToUse);
+					addValues = [...defaultValuesToUse];
 				}
 
 				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {

package/src/Components/Hoc/Secondary/withSecondarySelection.js

@@ -111,7 +111,7 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			secondaryAddToSelection = (item) => {
-				const newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
+				const newSelection = [...secondaryGetSelection()]; // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				secondarySetSelection(newSelection);
 			},
@@ -175,7 +175,7 @@ export default function withSelection(WrappedComponent) {
 				const
 					currentSelectionLength = secondaryGetSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
+				let newSelection = [...secondaryGetSelection()]; // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();

package/src/Components/Hoc/withEditor.js

@@ -179,7 +179,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (defaultValues) {
 						_.merge(defaultValuesToUse, defaultValues);
 					}
-					addValues = _.clone(defaultValuesToUse);
+					addValues = [...defaultValuesToUse];
 				}
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {

package/src/Components/Hoc/withFilters.js

@@ -228,7 +228,7 @@ export default function withFilters(WrappedComponent) {
 			filterById = (id, cb) => {
 				onClearFilters();
 				filterCallbackRef.current = cb; // store the callback, so we can call it the next time this HOC renders with new filters
-				const newFilters = _.clone(filters);
+				const newFilters = [...filters];
 				_.remove(newFilters, (filter) => {
 					return filter.field === 'q';
 				});
@@ -410,8 +410,8 @@ export default function withFilters(WrappedComponent) {
 						data,
 						onChange: (value) => {
 							const
-								newFilters = _.clone(modalFilters),
-								newSlots = _.clone(modalSlots),
+								newFilters = [...modalFilters],
+								newSlots = [...modalSlots],
 								i = ix;//searchAllText ? ixPlusOne : ix; // compensate for 'q' filter's possible presence
 
 							newFilters[i] = getFormattedFilter(value);
@@ -447,7 +447,7 @@ export default function withFilters(WrappedComponent) {
 							if (!canAddSlot) {
 								return;
 							}
-							const newSlots = _.clone(modalSlots);
+							const newSlots = [...modalSlots];
 							newSlots.push(null);
 							rebuildModalBody(modalFilters, newSlots);
 						},
@@ -456,8 +456,8 @@ export default function withFilters(WrappedComponent) {
 								return;
 							}
 							const
-								newFilters = _.clone(modalFilters),
-								newSlots = _.clone(modalSlots);
+								newFilters = [...modalFilters],
+								newSlots = [...modalSlots];
 							newFilters.pop();
 							newSlots.pop();
 							rebuildModalBody(newFilters, newSlots);

package/src/Components/Hoc/withSelection.js

@@ -109,7 +109,7 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			addToSelection = (item) => {
-				const newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
+				const newSelection = [...getSelection()]; // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				setSelection(newSelection);
 			},
@@ -175,7 +175,7 @@ export default function withSelection(WrappedComponent) {
 				const
 					currentSelectionLength = getSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
+				let newSelection = [...getSelection()]; // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();

package/src/Components/Tab/TabBar.js

@@ -244,7 +244,7 @@ function TabBar(props) {
 				const
 					isCurrentTab = ix === getCurrentTab(),
 					useIconTab = (isCollapsed || !tab.title),
-					tabIcon = tab._icon ? _.clone(tab._icon) : {};
+					tabIcon = tab._icon ? [...tab._icon] : {};
 				if (tabIcon.as && _.isString(tabIcon.as)) {
 					const Type = getComponentFromType(tabIcon.as);
 					if (Type) {
@@ -307,7 +307,7 @@ function TabBar(props) {
 
 					const
 						useIconTab = (isCollapsed || !additionalButton.text),
-						additionalButtonIcon = _.clone(additionalButton._icon);
+						additionalButtonIcon = [...additionalButton._icon];
 
 					if (additionalButtonIcon.as && _.isString(additionalButtonIcon.as)) {
 						const Type = getComponentFromType(additionalButtonIcon.as);

package/src/Components/Tree/Tree.js

@@ -384,13 +384,13 @@ function TreeComponent(props) {
 			forceUpdate();
 		},
 		onCollapseAll = () => {
-			const newTreeNodeData = _.clone(getTreeNodeData());
+			const newTreeNodeData = [...getTreeNodeData()];
 			collapseNodes(newTreeNodeData);
 			setTreeNodeData(newTreeNodeData);
 		},
 		onExpandAll = () => {
 			confirm('Are you sure you want to expand the whole tree? This may take a while.', async () => {
-				const newTreeNodeData = _.clone(getTreeNodeData());
+				const newTreeNodeData = [...getTreeNodeData()];
 				await expandNodes(newTreeNodeData);
 				setTreeNodeData(newTreeNodeData);
 			});
@@ -678,7 +678,7 @@ function TreeComponent(props) {
 			// NOTE: This is only for 'data', not for Repositories!
 			// 'data' is essentially an Adjacency List, not a ClosureTable.
 
-			const clonedData = _.clone(data);
+			const clonedData = [...data];
 
 			// Reset all parent/child relationships
 			_.each(clonedData, (treeNode) => {
@@ -831,7 +831,7 @@ function TreeComponent(props) {
 		},
 		expandPath = async (cPath, highlight = true) => {
 			// First, close the whole tree.
-			let newTreeNodeData = _.clone(getTreeNodeData());
+			let newTreeNodeData = [...getTreeNodeData()];
 			collapseNodes(newTreeNodeData);
 
 			// As it navigates down, it will expand the appropriate branches,

package/src/Components/Tree/TreeNode.js

@@ -11,7 +11,6 @@ import {
 	UI_MODE_WEB,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -22,6 +21,16 @@ import ChevronRight from '../Icons/ChevronRight.js';
 import ChevronDown from '../Icons/ChevronDown.js';
 import _ from 'lodash';
 
+// Conditional import for web only
+let getEmptyImage;
+if (CURRENT_MODE === UI_MODE_WEB) {
+	import('react-dnd-html5-backend').then((module) => {
+		getEmptyImage = module.getEmptyImage;
+	}).catch(() => {
+		getEmptyImage = null;
+	});
+}
+
 // This was broken out from Tree simply so we can memoize it
 
 export default function TreeNode(props) {