@onehat/ui 0.3.316 → 0.3.318

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.316",
+	"version": "0.3.318",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -55,6 +55,7 @@
 		"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/Json.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Row,
+	Text,
+	Tooltip,
+} from 'native-base';
+import {
+	UI_MODE_REACT_NATIVE,
+	UI_MODE_WEB,
+} 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 _ from 'lodash';
+
+
+export function JsonElement(props) {
+	const {
+			tooltipRef = null,
+			tooltip = null,
+			isDisabled = false,
+			isViewOnly = false,
+			tooltipPlacement = 'bottom',
+			testID,
+
+			// withComponent
+			self,
+
+			// withValue
+			value,
+			setValue,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		JsonEditor = getComponentFromType('JsonEditor');
+
+	let assembledComponents = null;
+	
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		const src = JSON.parse(value);
+		assembledComponents = 
+			<Row
+				flex={1}
+				{...propsToPass}
+				justifyContent="flex-start"
+			>
+				<JsonEditor
+					width="100%"
+					editable={!isViewOnly}
+					src={src}
+					enableClipboard={false}
+					collapsed={true}
+					onEdit={(obj) => {
+						setValue(JSON.stringify(obj.updated_src));
+					}}
+				/>
+			</Row>;
+
+	}
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+		throw new Error('JsonElement not yet implemented for React Native');
+	}
+	
+	if (tooltip) {
+		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+								{assembledComponents}
+							</Tooltip>;
+	}
+	return assembledComponents;
+};
+
+export default withComponent(withValue(JsonElement));

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/Components/index.js

@@ -214,6 +214,7 @@ import GridPanel from './Panel/GridPanel.js';
 import IconButton from './Buttons/IconButton.js';
 import Input from './Form/Field/Input.js';
 import IntervalsCombo from './Form/Field/Combo/IntervalsCombo.js';
+import Json from './Form/Field/Json.js';
 import Label from './Form/Label.js';
 import MonthsCombo from './Form/Field/Combo/MonthsCombo.js';
 import Number from './Form/Field/Number.js';
@@ -450,6 +451,7 @@ const components = {
 	IconButton,
 	Input,
 	IntervalsCombo,
+	Json,
 	Label,
 	MonthsCombo,
 	Number,

package/src/Functions/jsonValidator.js

@@ -0,0 +1,16 @@
+import * as yup from 'yup';
+
+export default function json() {
+	return yup.mixed().test(
+		'is-json',
+		'${path} is not valid JSON',
+		value => {
+			try {
+				JSON.parse(value);
+				return true; // Valid JSON
+			} catch (error) {
+				return false; // Invalid JSON
+			}
+		}
+	);
+}

package/src/Functions/registerReactNativeComponents.js

@@ -1,6 +1,7 @@
 import UiGlobals from '../UiGlobals.js';
 import Datetime from '../PlatformImports/ReactNative/Datetime';
 import Draggable from '../PlatformImports/ReactNative/Draggable';
+import JsonEditor from '../PlatformImports/ReactNative/JsonEditor.js';
 import ScreenContainer from '../Components/Container/ScreenContainer';
 import useWindowSize from '../PlatformImports/ReactNative/useWindowSize.js';
 import _ from 'lodash';
@@ -9,6 +10,7 @@ export default function registerReactNativeComponents() {
 	_.merge(UiGlobals.components, {
 		Datetime,
 		Draggable,
+		JsonEditor,
 		ScreenContainer,
 		useWindowSize,
 	});

package/src/Functions/registerWebComponents.js

@@ -4,6 +4,7 @@ import Attachments from '../PlatformImports/Web/Attachments.js';
 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 useWindowSize from '../PlatformImports/Web/useWindowSize.js';
 import _ from 'lodash';
 
@@ -14,6 +15,7 @@ export default function registerWebComponents() {
 		Datetime,
 		Draggable,
 		File,
+		JsonEditor,
 		useWindowSize,
 	});
 }

package/src/PlatformImports/ReactNative/JsonEditor.js

@@ -0,0 +1,3 @@
+import JSONTree from 'react-native-json-tree'; // https://www.npmjs.com/package/react-native-json-tree
+
+export default JSONTree.default || JSONTree;

package/src/PlatformImports/Web/JsonEditor.js

@@ -0,0 +1,4 @@
+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;