@zjlab-fe/data-hub-ui 0.33.3 → 0.35.0

package/dist/types/components/json-editor/demo/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+declare const Demo: React.FC;
+export default Demo;

package/dist/types/components/json-editor/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.scss';
+export interface JsonEditorProps {
+    /** 初始值 */
+    defaultValue?: string;
+    /** 是否只读, 默认可编辑 */
+    readOnly?: boolean;
+}
+export type JsonEditorPath = Array<string | number>;
+export type JsonEditorErrorLevel = 'error' | 'warning' | 'info' | 'hint';
+export interface JsonEditorError {
+    path: JsonEditorPath;
+    message: string;
+    level: JsonEditorErrorLevel;
+}
+export interface JsonEditorRef {
+    setValue: (value: string) => void;
+    getValue: () => string;
+    showError: (errors: JsonEditorError[]) => void;
+}
+declare const JsonEditor: React.ForwardRefExoticComponent<JsonEditorProps & React.RefAttributes<JsonEditorRef>>;
+export default JsonEditor;

package/dist/types/index.d.ts

@@ -50,3 +50,5 @@ export type { IConfirmParam, IFieldOption, IDatasetBatchActionParams, } from './
 export { EDatasetBatchType } from './components/dataset-batch-action';
 export { DataHubProvider } from './locale';
 export type { DataHubProviderProps, DataHubAntdMode, DataHubTheme, DataHubThemeToken, DataHubLang, } from './locale';
+export { default as JsonEditor } from './components/json-editor';
+export type { JsonEditorProps, JsonEditorRef, JsonEditorError, JsonEditorErrorLevel, JsonEditorPath, } from './components/json-editor';

package/es/components/file-preview/json-preview/index.js

@@ -1,7 +1,7 @@
 import { __awaiter } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import ReactJson from 'react-json-view';
+import JsonEditor from '../../json-editor/index.js';
 import { ErrorBoundary } from 'react-error-boundary';
 import DataTable from '../data-table/index.js';
 import { fetchFileWithAutoCode } from '../util.js';
@@ -150,11 +150,7 @@ function JsonPreview(props) {
     return (jsx("div", { style: { height: '100%', overflow: 'auto', wordBreak: 'break-all' }, ref: ref, children: (() => {
             var _a;
             if (json) {
-                return (jsx(ErrorBoundary, { fallback: JSON.stringify(json), children: jsx(ReactJson, { name: false, src: json, iconStyle: "triangle", collapsed: 2, enableClipboard: false, displayObjectSize: false, displayDataTypes: false, collapseStringsAfterLength: 140, style: {
-                            fontFamily: 'Monaco, Menlo, Consolas, monospace',
-                            backgroundColor: 'rgba(0, 0, 0, 0)',
-                            color: 'rgb(155, 12, 121)',
-                        } }) }));
+                return (jsx(ErrorBoundary, { fallback: JSON.stringify(json), children: jsx(JsonEditor, { defaultValue: JSON.stringify(json), readOnly: true }) }));
             }
             else if (jsonLResult) {
                 return (jsx(DataTable, { head: jsonLResult.head, data: jsonLResult.data, containerHeight: jsonLContainerHeight, containerWidth: jsonLContainerWidth, maxLines: (_a = props.tableConfig) === null || _a === void 0 ? void 0 : _a.maxLines }));

package/es/components/json-editor/index.js

@@ -0,0 +1,317 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import useStyle from './index.scss.js';
+import Editor, { loader } from '@monaco-editor/react';
+
+useStyle();
+loader.config({
+    paths: {
+        vs: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/monaco-editor/0.56.0/min/vs',
+    },
+    'vs/nls': {
+        availableLanguages: {
+            '*': 'zh-cn',
+        },
+    },
+});
+const MARKER_OWNER = 'data-hub-ui-json-editor';
+const isChangeInRange = (changeStart, changeLength, rangeStart, rangeEnd) => {
+    if (changeLength === 0) {
+        return changeStart >= rangeStart && changeStart <= rangeEnd;
+    }
+    const changeEnd = changeStart + changeLength;
+    return changeStart < rangeEnd && changeEnd > rangeStart;
+};
+const formatJson = (value) => {
+    if (value === undefined) {
+        return value;
+    }
+    try {
+        return JSON.stringify(JSON.parse(value), null, 2);
+    }
+    catch (_a) {
+        return value;
+    }
+};
+const compactJson = (value) => {
+    try {
+        return JSON.stringify(JSON.parse(value));
+    }
+    catch (_a) {
+        return value;
+    }
+};
+const findJsonNode = (value, path) => {
+    var _a, _b;
+    let offset = 0;
+    const skipWhitespace = () => {
+        var _a;
+        while (/\s/.test((_a = value[offset]) !== null && _a !== void 0 ? _a : '')) {
+            offset += 1;
+        }
+    };
+    const parseString = () => {
+        const start = offset;
+        offset += 1;
+        while (offset < value.length) {
+            if (value[offset] === '\\') {
+                offset += 2;
+            }
+            else if (value[offset] === '"') {
+                offset += 1;
+                return { start, end: offset };
+            }
+            else {
+                offset += 1;
+            }
+        }
+        throw new Error('Invalid JSON string');
+    };
+    const parseValue = () => {
+        skipWhitespace();
+        const start = offset;
+        const character = value[offset];
+        if (character === '{') {
+            offset += 1;
+            const properties = new Map();
+            skipWhitespace();
+            while (value[offset] !== '}') {
+                const key = parseString();
+                const propertyName = JSON.parse(value.slice(key.start, key.end));
+                if (typeof propertyName !== 'string') {
+                    throw new Error('Invalid JSON object key');
+                }
+                skipWhitespace();
+                if (value[offset] !== ':') {
+                    throw new Error('Invalid JSON object');
+                }
+                offset += 1;
+                const property = parseValue();
+                property.keyStart = key.start;
+                property.keyEnd = key.end;
+                properties.set(propertyName, property);
+                skipWhitespace();
+                if (value[offset] === ',') {
+                    offset += 1;
+                    skipWhitespace();
+                }
+                else if (value[offset] !== '}') {
+                    throw new Error('Invalid JSON object');
+                }
+            }
+            offset += 1;
+            return { start, end: offset, properties };
+        }
+        if (character === '[') {
+            offset += 1;
+            const items = [];
+            skipWhitespace();
+            while (value[offset] !== ']') {
+                items.push(parseValue());
+                skipWhitespace();
+                if (value[offset] === ',') {
+                    offset += 1;
+                    skipWhitespace();
+                }
+                else if (value[offset] !== ']') {
+                    throw new Error('Invalid JSON array');
+                }
+            }
+            offset += 1;
+            return { start, end: offset, items };
+        }
+        if (character === '"') {
+            const string = parseString();
+            return string;
+        }
+        while (offset < value.length && !/[\s,}\]]/.test(value[offset])) {
+            offset += 1;
+        }
+        if (start === offset) {
+            throw new Error('Invalid JSON value');
+        }
+        return { start, end: offset };
+    };
+    try {
+        let node = parseValue();
+        for (const [index, segment] of path.entries()) {
+            if (!node) {
+                return undefined;
+            }
+            const nextNode = typeof segment === 'number' ? (_a = node.items) === null || _a === void 0 ? void 0 : _a[segment] : (_b = node.properties) === null || _b === void 0 ? void 0 : _b.get(segment);
+            if (!nextNode) {
+                if (index === path.length - 1 && typeof segment === 'string' && node.properties) {
+                    return { node, isMissingProperty: true };
+                }
+                return undefined;
+            }
+            node = nextNode;
+        }
+        return node ? { node, isMissingProperty: false } : undefined;
+    }
+    catch (_c) {
+        return undefined;
+    }
+};
+const JsonEditor = forwardRef((props, ref) => {
+    const { defaultValue, readOnly = false } = props;
+    const [mounted, setMounted] = useState(false);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const [isFindWidgetVisible, setIsFindWidgetVisible] = useState(false);
+    const containerRef = useRef(null);
+    const editorRef = useRef(null);
+    const monacoRef = useRef(null);
+    const initialValueRef = useRef(formatJson(defaultValue));
+    const pendingValueRef = useRef(undefined);
+    const pendingErrorsRef = useRef(null);
+    const displayedErrorsRef = useRef([]);
+    const contentChangeDisposableRef = useRef(null);
+    const findWidgetObserverRef = useRef(null);
+    const applyErrors = (errors, shouldFocusFirstError = true) => {
+        const editor = editorRef.current;
+        const monaco = monacoRef.current;
+        if (!editor || !monaco) {
+            pendingErrorsRef.current = errors;
+            return;
+        }
+        const model = editor.getModel();
+        if (!model) {
+            return;
+        }
+        const errorsWithPositions = errors.flatMap((error) => {
+            var _a, _b, _c;
+            const location = findJsonNode(model.getValue(), error.path);
+            if (!location) {
+                return [];
+            }
+            const startOffset = location.isMissingProperty
+                ? location.node.start
+                : ((_a = location.node.keyStart) !== null && _a !== void 0 ? _a : location.node.start);
+            const endOffset = location.isMissingProperty
+                ? location.node.start + 1
+                : ((_b = location.node.keyEnd) !== null && _b !== void 0 ? _b : location.node.end);
+            const affectedStart = location.isMissingProperty
+                ? location.node.start
+                : Math.min((_c = location.node.keyStart) !== null && _c !== void 0 ? _c : location.node.start, location.node.start);
+            const affectedEnd = location.node.end;
+            const startPosition = model.getPositionAt(startOffset);
+            const endPosition = model.getPositionAt(Math.max(startOffset, endOffset));
+            const severity = {
+                error: monaco.MarkerSeverity.Error,
+                warning: monaco.MarkerSeverity.Warning,
+                info: monaco.MarkerSeverity.Info,
+                hint: monaco.MarkerSeverity.Hint,
+            }[error.level];
+            return [{ error, startPosition, endPosition, severity, affectedStart, affectedEnd }];
+        });
+        displayedErrorsRef.current = errorsWithPositions.map(({ error, affectedStart, affectedEnd }) => ({
+            error,
+            affectedStart,
+            affectedEnd,
+        }));
+        monaco.editor.setModelMarkers(model, MARKER_OWNER, errorsWithPositions.map(({ error, startPosition, endPosition, severity }) => ({
+            startLineNumber: startPosition.lineNumber,
+            startColumn: startPosition.column,
+            endLineNumber: endPosition.lineNumber,
+            endColumn: endPosition.column,
+            message: error.message,
+            severity,
+        })));
+        const firstError = errorsWithPositions[0];
+        if (!firstError || !shouldFocusFirstError) {
+            return;
+        }
+        void (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            yield ((_a = editor.getAction('editor.unfold')) === null || _a === void 0 ? void 0 : _a.run({
+                levels: Number.MAX_SAFE_INTEGER,
+                direction: 'up',
+                selectionLines: [firstError.startPosition.lineNumber - 1],
+            }));
+            editor.setPosition(firstError.startPosition);
+            editor.revealPositionInCenterIfOutsideViewport(firstError.startPosition);
+            yield ((_b = editor.getAction('editor.action.marker.next')) === null || _b === void 0 ? void 0 : _b.run());
+        }))();
+    };
+    useImperativeHandle(ref, () => ({
+        setValue: (value) => {
+            var _a, _b;
+            const formattedValue = (_a = formatJson(value)) !== null && _a !== void 0 ? _a : value;
+            pendingValueRef.current = formattedValue;
+            (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.setValue(formattedValue);
+        },
+        getValue: () => {
+            var _a, _b, _c, _d;
+            return compactJson((_d = (_c = (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : pendingValueRef.current) !== null && _c !== void 0 ? _c : initialValueRef.current) !== null && _d !== void 0 ? _d : '');
+        },
+        showError: applyErrors,
+    }), []);
+    const handleMount = (editor, monaco) => {
+        editorRef.current = editor;
+        monacoRef.current = monaco;
+        contentChangeDisposableRef.current = editor.onDidChangeModelContent((event) => {
+            const remainingErrors = displayedErrorsRef.current.filter(({ affectedStart, affectedEnd }) => event.changes.every(({ rangeOffset, rangeLength }) => !isChangeInRange(rangeOffset, rangeLength, affectedStart, affectedEnd)));
+            if (remainingErrors.length !== displayedErrorsRef.current.length) {
+                editor.trigger('json-editor', 'closeMarkersNavigation', undefined);
+                applyErrors(remainingErrors.map(({ error }) => error), false);
+            }
+        });
+        const editorDomNode = editor.getDomNode();
+        if (editorDomNode) {
+            const updateFindWidgetVisibility = () => {
+                var _a, _b;
+                setIsFindWidgetVisible((_b = (_a = editorDomNode.querySelector('.find-widget')) === null || _a === void 0 ? void 0 : _a.classList.contains('visible')) !== null && _b !== void 0 ? _b : false);
+            };
+            findWidgetObserverRef.current = new MutationObserver(updateFindWidgetVisibility);
+            findWidgetObserverRef.current.observe(editorDomNode, {
+                attributes: true,
+                attributeFilter: ['class'],
+                subtree: true,
+            });
+            updateFindWidgetVisibility();
+        }
+        if (pendingValueRef.current !== undefined) {
+            editor.setValue(pendingValueRef.current);
+        }
+        if (pendingErrorsRef.current !== null) {
+            const pendingErrors = pendingErrorsRef.current;
+            pendingErrorsRef.current = null;
+            applyErrors(pendingErrors);
+        }
+    };
+    const handleOpenFindWidget = () => {
+        var _a, _b;
+        void ((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getAction('actions.find')) === null || _b === void 0 ? void 0 : _b.run());
+    };
+    useEffect(() => {
+        setMounted(true);
+        setContainerHeight(containerRef.current.clientHeight);
+        return () => {
+            var _a, _b;
+            (_a = contentChangeDisposableRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+            contentChangeDisposableRef.current = null;
+            (_b = findWidgetObserverRef.current) === null || _b === void 0 ? void 0 : _b.disconnect();
+            findWidgetObserverRef.current = null;
+            displayedErrorsRef.current = [];
+            editorRef.current = null;
+            monacoRef.current = null;
+        };
+    }, []);
+    console.log('++++ render');
+    return (jsxs("div", { className: "data-hub-ui-json-editor-container", ref: containerRef, children: [!isFindWidgetVisible && (jsx(Button, { "aria-label": "\u641C\u7D22", className: "data-hub-ui-json-editor-search-button", icon: jsx(SearchOutlined, {}), type: "text", onClick: handleOpenFindWidget })), mounted && (jsx(Editor, { height: containerHeight, language: "json", defaultValue: initialValueRef.current, onMount: handleMount, options: {
+                    folding: true,
+                    readOnly,
+                    minimap: {
+                        enabled: false,
+                    },
+                    stickyScroll: {
+                        enabled: false,
+                    },
+                } }))] }));
+});
+JsonEditor.displayName = 'JsonEditor';
+
+export { JsonEditor as default };

package/es/components/json-editor/index.scss.js

@@ -0,0 +1,22 @@
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.data-hub-ui-json-editor-container {
+  position: relative;
+  height: 100%;
+  min-height: 100px;
+}
+.data-hub-ui-json-editor-container .data-hub-ui-json-editor-search-button {
+  position: absolute;
+  z-index: 1;
+  top: 8px;
+  right: 8px;
+  color: #87909e;
+}
+.data-hub-ui-json-editor-container .monaco-editor .find-widget.visible {
+  top: 20px !important;
+  right: 48px !important;
+}`;
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/index.js

@@ -41,4 +41,5 @@ export { default as TagGroupFilter } from './components/tag-group-filter/index.j
 export { default as LimitCreditModal, useLimitCreditModal } from './components/limit-credit-modal/index.js';
 export { default as DatasetBatchAction, EDatasetBatchType } from './components/dataset-batch-action/index.js';
 export { DataHubProvider } from './locale/index.js';
+export { default as JsonEditor } from './components/json-editor/index.js';
 export { default as UploadDrawerUploadStoreProvider } from './components/uploadDrawer/UploadStoreProvider.js';