@zjlab-fe/data-hub-ui 0.21.7 → 0.23.0

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

@@ -0,0 +1,166 @@
+import { __awaiter } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import ReactJson from 'react-json-view';
+import { ErrorBoundary } from 'react-error-boundary';
+import DataTable from '../data-table/index.js';
+import { fetchFileWithAutoCode } from '../util.js';
+
+/**
+ * 将字符串按换行符分割成数组，智能忽略引号内的换行符
+ * @param str {string} 要分割的字符串
+ * @param options {object} 可选，配置项
+ * @param options.trim {boolean} 可选，是否对每行进行trim操作，默认为true
+ * @param options.skipEmpty {boolean} 可选，是否跳过空行，默认为true
+ * @returns {string[]} 分割后的字符串数组
+ */
+function splitByLine(str, options) {
+    const { trim = true, skipEmpty = true } = {};
+    if (!str)
+        return [];
+    const result = [];
+    let currentLine = '';
+    let inQuotes = false;
+    let escapeNext = false;
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        // 处理转义字符
+        if (escapeNext) {
+            currentLine += char;
+            escapeNext = false;
+            continue;
+        }
+        // 检查是否是转义符号
+        if (char === '\\') {
+            currentLine += char;
+            escapeNext = true;
+            continue;
+        }
+        // 处理引号
+        if (char === '"') {
+            inQuotes = !inQuotes;
+            currentLine += char;
+            continue;
+        }
+        // 处理换行符，但仅在不在引号内时
+        if ((char === '\n' || char === '\r') && !inQuotes) {
+            // 跳过 \r\n 组合中的 \n
+            if (char === '\r' && i + 1 < str.length && str[i + 1] === '\n') {
+                continue;
+            }
+            // 处理当前行
+            const processedLine = trim ? currentLine.trim() : currentLine;
+            if (!skipEmpty || processedLine.length > 0) {
+                result.push(processedLine);
+            }
+            currentLine = '';
+            continue;
+        }
+        // 添加普通字符
+        currentLine += char;
+    }
+    // 处理最后一行
+    if (currentLine) {
+        const processedLine = trim ? currentLine.trim() : currentLine;
+        if (!skipEmpty || processedLine.length > 0) {
+            result.push(processedLine);
+        }
+    }
+    return result;
+}
+function JsonPreview(props) {
+    const ref = useRef(null);
+    const [json, setJson] = useState();
+    const [jsonLResult, setJsonLResult] = useState();
+    const [jsonLContainerHeight, setJsonLContainerHeight] = useState();
+    const [jsonLContainerWidth, setJsonLContainerWidth] = useState();
+    useEffect(() => {
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f;
+            try {
+                let value;
+                if (props.jsonConfig) {
+                    value = props.jsonConfig.data;
+                }
+                else {
+                    value = yield fetchFileWithAutoCode(props.filePath);
+                }
+                try {
+                    const json = typeof value === 'string' ? JSON.parse(value) : value;
+                    setJson(json);
+                }
+                catch (e) {
+                    const array = splitByLine(value);
+                    // console.log('+++ array', array);
+                    if (array.length > 0) {
+                        const data = [];
+                        let keyIndex = 0;
+                        array.forEach((item) => {
+                            try {
+                                const itemJson = JSON.parse(item);
+                                if (typeof itemJson === 'object') {
+                                    if (Array.isArray(itemJson)) {
+                                        itemJson.forEach((subItem) => {
+                                            data.push(Object.assign(Object.assign({}, subItem), { key: keyIndex.toString() }));
+                                            keyIndex++;
+                                        });
+                                    }
+                                    else {
+                                        data.push(Object.assign(Object.assign({}, itemJson), { key: keyIndex.toString() }));
+                                        keyIndex++;
+                                    }
+                                }
+                                else {
+                                    data.push({
+                                        content: item,
+                                        key: keyIndex.toString(),
+                                    });
+                                    keyIndex++;
+                                }
+                            }
+                            catch (e) {
+                                console.log('+++ e', e);
+                            }
+                        });
+                        if (data.length > 0) {
+                            const head = Object.keys(data[0]).filter((key) => key !== 'key');
+                            setJsonLResult({ head, data });
+                            setJsonLContainerHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
+                            setJsonLContainerWidth((_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
+                        }
+                        else {
+                            data.push({
+                                content: value,
+                                key: '0',
+                            });
+                            const head = Object.keys(data[0]).filter((key) => key !== 'key');
+                            setJsonLResult({ head, data });
+                            setJsonLContainerHeight((_c = ref.current) === null || _c === void 0 ? void 0 : _c.clientHeight);
+                            setJsonLContainerWidth((_d = ref.current) === null || _d === void 0 ? void 0 : _d.clientWidth);
+                        }
+                    }
+                }
+                (_e = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _e === void 0 ? void 0 : _e.call(props);
+            }
+            catch (e) {
+                (_f = props === null || props === void 0 ? void 0 : props.onError) === null || _f === void 0 ? void 0 : _f.call(props, e);
+            }
+        }))();
+    }, []);
+    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)',
+                        } }) }));
+            }
+            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 }));
+            }
+            return null;
+        })() }));
+}
+
+export { JsonPreview as default, splitByLine };

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

@@ -0,0 +1,53 @@
+import { __awaiter } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeMathjax from 'rehype-mathjax';
+import { fetchFileWithAutoCode } from '../util.js';
+import { wrap } from './index.module.scss.js';
+
+function processMarkdownImages(input) {
+    // 匹配 Markdown 图片格式的正则表达式
+    const regex = /!\[(.*?)\]\((.*?)\)/g;
+    // 使用 replace 方法替换匹配项
+    return input.replace(regex, (match, alt, url) => {
+        // 提取 URL 中的路径部分（去除查询参数和锚点）
+        if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('//')) {
+            return match;
+        }
+        else {
+            // 非绝对路径，替换为空
+            return '';
+        }
+    });
+}
+function MDPreview(props) {
+    const ref = useRef(null);
+    const [content, setContent] = useState('');
+    useEffect(() => {
+        (() => __awaiter(this, void 0, void 0, function* () {
+            // 测试vditor预览大小超过1MB的markdown文件非常耗时(超过10s)
+            var _a, _b;
+            try {
+                let result = yield fetchFileWithAutoCode(props.filePath);
+                // const start = new Date().getTime();
+                // console.log('+++ start', start);
+                result = processMarkdownImages(result);
+                // const end = new Date().getTime();
+                // console.log('+++ end', end);
+                // console.log(`processMarkdownImages time: ${end - start}ms`);
+                setContent(result);
+                (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+            catch (e) {
+                (_b = props === null || props === void 0 ? void 0 : props.onError) === null || _b === void 0 ? void 0 : _b.call(props, e);
+            }
+        }))();
+    }, []);
+    return (jsx("div", { ref: ref, style: { height: '100%', overflow: 'auto' }, className: wrap, children: content ? (jsx(ReactMarkdown, { className: "markdown-body", remarkPlugins: [remarkMath, remarkGfm], rehypePlugins: [rehypeRaw, rehypeMathjax], children: content })) : null }));
+}
+
+export { MDPreview as default };