@onehat/ui 0.3.317 → 0.3.319

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.317",
+	"version": "0.3.319",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,6 +25,7 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
+		"@gluestack-style/animation-resolver": "^1.0.4",
 		"@gluestack-style/react": "^1.0.56",
 		"@gluestack-ui/config": "^1.1.18",
 		"@gluestack-ui/themed": "^1.1.26",
@@ -52,11 +53,10 @@
 		"react-dnd-html5-backend": "^16.0.1",
 		"react-dnd-touch-backend":"16.0.1",
 		"react-draggable": "^4.4.5",
-		"react-json-view": "^1.21.3",
-		"react-json-view-lite": "^1.4.0",
 		"react-native": "*",
 		"react-native-draggable": "^3.3.0",
 		"react-native-svg": "*",
+		"react18-json-view": "^0.2.8",
 		"use-file-picker": "^2.1.1"
 	},
 	"devDependencies": {

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

@@ -46,6 +46,7 @@ export function ComboComponent(props) {
 			showEyeButton = false,
 			viewerProps = {}, // popup for eyeButton
 			_input = {},
+			_editor = {},
 			isEditor = false,
 			isDisabled = false,
 			isInTag = false,
@@ -817,6 +818,7 @@ export function ComboComponent(props) {
 							onInputFocus();
 						}
 					}}
+					{..._editor}
 				/>;
 		if (UiGlobals.mode === UI_MODE_WEB) {
 			dropdownMenu = <Popover

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

@@ -7,12 +7,12 @@ import {
 import {
 	UI_MODE_REACT_NATIVE,
 	UI_MODE_WEB,
-} from '../../../constants/UiModes.js';
+} from '../../../Constants/UiModes.js';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
-import testProps from '../../../functions/testProps.js';
-import getComponentFromType from '../../../functions/getComponentFromType.js';
+import testProps from '../../../Functions/testProps.js';
+import getComponentFromType from '../../../Functions/getComponentFromType.js';
 import _ from 'lodash';
 
 
@@ -21,7 +21,7 @@ export function JsonElement(props) {
 			tooltipRef = null,
 			tooltip = null,
 			isDisabled = false,
-			isEditable = true,
+			isViewOnly = false,
 			tooltipPlacement = 'bottom',
 			testID,
 
@@ -34,34 +34,29 @@ export function JsonElement(props) {
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
-		JsonEditor = getComponentFromType('JsonEditor'),
-		JsonViewer = getComponentFromType('JsonViewer');
-		
+		JsonEditor = getComponentFromType('JsonEditor');
+
 	let assembledComponents = null;
 	
 	if (UiGlobals.mode === UI_MODE_WEB) {
 		const src = JSON.parse(value);
-
-		if (isEditable) {
-			assembledComponents = 
+		assembledComponents = 
+			<Row
+				flex={1}
+				{...propsToPass}
+				justifyContent="flex-start"
+			>
 				<JsonEditor
-					// {...propsToPass}
+					width="100%"
+					editable={!isViewOnly}
 					src={src}
 					enableClipboard={false}
 					collapsed={true}
-					editable={isEditable}
 					onEdit={(obj) => {
 						setValue(JSON.stringify(obj.updated_src));
 					}}
-					isDisabled={isDisabled}
-				/>;
-		} else {
-			assembledComponents = 
-				<JsonViewer
-					// {...propsToPass}
-					data={src}
-				/>;
-		}
+				/>
+			</Row>;
 
 	}
 	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {

package/src/Components/Grid/GridRow.js

@@ -122,7 +122,7 @@ function GridRow(props) {
 									if (UiGlobals.mode === UI_MODE_WEB) {
 										elementProps.textOverflow = 'ellipsis';
 									}
-									if (type.match(/(Tag|TagEditor)$/)) {
+									if (type.match(/(Tag|TagEditor|Json)$/)) {
 										elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
 									}
 									if (config.getCellProps) {

package/src/Functions/registerWebComponents.js

@@ -5,7 +5,6 @@ import Datetime from '../PlatformImports/Web/Datetime.js';
 import Draggable from '../PlatformImports/Web/Draggable.js';
 import File from '../PlatformImports/Web/File.js';
 import JsonEditor from '../PlatformImports/Web/JsonEditor.js';
-import JsonViewer from '../PlatformImports/Web/JsonViewer.js';
 import useWindowSize from '../PlatformImports/Web/useWindowSize.js';
 import _ from 'lodash';
 
@@ -17,7 +16,6 @@ export default function registerWebComponents() {
 		Draggable,
 		File,
 		JsonEditor,
-		JsonViewer,
 		useWindowSize,
 	});
 }

package/src/PlatformImports/Web/JsonEditor.js

@@ -1,3 +1,4 @@
-import ReactJson from 'react-json-view'; // https://www.npmjs.com/package/react-json-view
+import ReactJson from 'react18-json-view'; // https://www.npmjs.com/package/react18-json-view
+import 'react18-json-view/src/style.css'
 
 export default ReactJson.default || ReactJson;

package/src/PlatformImports/Web/JsonViewer.js

@@ -1,4 +0,0 @@
-import { JsonView, allExpanded, darkStyles, defaultStyles } from 'react-json-view-lite'; // https://www.npmjs.com/package/react-json-view-lite
-import 'react-json-view-lite/dist/index.css';
-
-export default JsonView;