@onehat/ui 0.3.315 → 0.3.317

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.315",
+	"version": "0.3.317",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -52,6 +52,8 @@
 		"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": "*",

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

@@ -0,0 +1,79 @@
+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,
+			isEditable = true,
+			tooltipPlacement = 'bottom',
+			testID,
+
+			// withComponent
+			self,
+
+			// withValue
+			value,
+			setValue,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles,
+		JsonEditor = getComponentFromType('JsonEditor'),
+		JsonViewer = getComponentFromType('JsonViewer');
+		
+	let assembledComponents = null;
+	
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		const src = JSON.parse(value);
+
+		if (isEditable) {
+			assembledComponents = 
+				<JsonEditor
+					// {...propsToPass}
+					src={src}
+					enableClipboard={false}
+					collapsed={true}
+					editable={isEditable}
+					onEdit={(obj) => {
+						setValue(JSON.stringify(obj.updated_src));
+					}}
+					isDisabled={isDisabled}
+				/>;
+		} else {
+			assembledComponents = 
+				<JsonViewer
+					// {...propsToPass}
+					data={src}
+				/>;
+		}
+
+	}
+	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/Grid.js

@@ -225,7 +225,7 @@ function GridComponent(props) {
 					const usedIds = [];
 					_.each(localConfig, (column, ix) => {
 						if (!column.id || inArray(column.id, usedIds)) {
-							throw Error('When using unserializable columns, each column must have a unique id. First invalid column: ' + JSON.stringify(column));
+							throw Error('When using unserializable columns, each column must have a unique id. ' + localColumnsConfigKey);
 						}
 						usedIds.push(column.id);
 						localConfig[ix] = {

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,8 @@ 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 JsonViewer from '../PlatformImports/Web/JsonViewer.js';
 import useWindowSize from '../PlatformImports/Web/useWindowSize.js';
 import _ from 'lodash';
 
@@ -14,6 +16,8 @@ export default function registerWebComponents() {
 		Datetime,
 		Draggable,
 		File,
+		JsonEditor,
+		JsonViewer,
 		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,3 @@
+import ReactJson from 'react-json-view'; // https://www.npmjs.com/package/react-json-view
+
+export default ReactJson.default || ReactJson;

package/src/PlatformImports/Web/JsonViewer.js

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