@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/feature-card/index.js

@@ -0,0 +1,48 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import './index.css.js';
+import { cn } from '../../lib/utils.js';
+import { FeatureCardContext } from './context.js';
+import { getRootSizeClasses, getAlignClass, getTitleSizeClasses, getDescriptionSizeClasses, getIconAlignClass, getIconRoundedClass, getIconSizeClasses } from './classNames.js';
+import { Content, Description, Title, Body, Icon, Header } from './components.js';
+
+const FeatureCardRoot = React.forwardRef(function FeatureCardRoot(props, ref) {
+    const { icon, cardTitle, description, titleAs = 'h3', align = 'left', size = 'lg', iconVariant = 'default', className, classNames, children } = props, rest = __rest(props, ["icon", "cardTitle", "description", "titleAs", "align", "size", "iconVariant", "className", "classNames", "children"]);
+    const SemanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
+    const hasStructured = icon != null || cardTitle != null || description != null;
+    const alignClass = getAlignClass(align);
+    const iconAlignClass = getIconAlignClass(align);
+    const iconRoundedClass = getIconRoundedClass(iconVariant, size);
+    const iconSizeClasses = getIconSizeClasses(size);
+    const renderIcon = () => {
+        if (icon == null)
+            return null;
+        if (typeof icon === 'string') {
+            return (jsx("div", { className: cn('dhu-overflow-hidden dhu-bg-blue-500/10 dhu-text-blue-500', iconSizeClasses, iconRoundedClass, 'dhu-grid dhu-place-items-center', iconAlignClass, SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.icon), children: jsx("img", { src: icon, className: "dhu-object-contain dhu-w-full dhu-h-full", alt: "" }) }));
+        }
+        return (jsx("div", { className: cn('dhu-overflow-hidden dhu-bg-blue-500/10 dhu-text-blue-500', iconSizeClasses, iconRoundedClass, 'dhu-grid dhu-place-items-center', iconAlignClass, SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.icon), children: icon }));
+    };
+    const titleSizeClasses = getTitleSizeClasses(size);
+    const descriptionSizeClasses = getDescriptionSizeClasses(size);
+    const contextValue = {
+        size,
+        align,
+        iconVariant,
+    };
+    return (jsx(FeatureCardContext.Provider, { value: contextValue, children: jsxs("div", Object.assign({ ref: ref, className: cn('dhu-grid dhu-content-start dhu-border dhu-border-solid dhu-border-slate-100 dhu-bg-white', getRootSizeClasses(size), 'dhu-shadow-md hover:dhu-shadow-lg dhu-transition-shadow', alignClass, className, SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.root) }, rest, { children: [children, !children && hasStructured && (jsxs(Fragment, { children: [renderIcon(), (cardTitle != null || description != null) && (jsxs("div", { className: cn('dh-feature-card__body', 'dhu-grid dhu-gap-1', SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.body), children: [cardTitle != null &&
+                                    React.createElement(titleAs, {
+                                        className: cn('dhu-m-0 dhu-font-ali-75 dhu-font-semibold', titleSizeClasses, SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.title),
+                                    }, cardTitle), description != null && (jsx("div", { className: cn('dhu-font-ali-55 dhu-font-normal dhu-text-gray-500', descriptionSizeClasses, 'dhu-line-clamp-3', SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.description), children: description }))] }))] }))] })) }));
+});
+const FeatureCard = Object.assign(FeatureCardRoot, {
+    Root: FeatureCardRoot,
+    Header,
+    Icon,
+    Body,
+    Title,
+    Description,
+    Content,
+});
+
+export { FeatureCard, FeatureCard as default };

package/es/components/file-preview/data-table/index.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { Table } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import i18next from 'i18next';
+import { cell, textContent, pagination, table, downloadTip } from './index.module.scss.js';
+
+function getScrollHeight(containerHeight) {
+    if (containerHeight) {
+        // 减去表格头部高度、分页器高度、横向滚动条高度
+        return containerHeight - 55 - 64 - 16;
+    }
+    else {
+        return 55 * 10;
+    }
+}
+function getPageSize(containerHeight, maxLines = 2) {
+    if (containerHeight) {
+        const scrollHeight = getScrollHeight(containerHeight);
+        // console.log('+++ scrollHeight', scrollHeight);
+        // console.log('+++ pageSize', Math.floor(scrollHeight / (10 + 22 * maxLines)));
+        return Math.floor(scrollHeight / (10 + 22 * maxLines));
+    }
+    else {
+        return 10;
+    }
+}
+const headerTextStyle = {
+    fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
+    fontSize: '14px',
+    lineHeight: '22px',
+    letterSpacing: 0,
+};
+function getTextWidth(text, style = {}) {
+    // 创建隐藏元素
+    const span = document.createElement('span');
+    span.textContent = text;
+    // 应用样式（必须与目标文本一致）
+    Object.assign(span.style, Object.assign({ position: 'absolute', visibility: 'hidden', whiteSpace: 'nowrap' }, style));
+    // 插入文档（触发渲染）
+    document.body.appendChild(span);
+    // 获取宽度
+    const width = span.offsetWidth;
+    // 清理
+    document.body.removeChild(span);
+    return width;
+}
+function DataTable(props) {
+    const { maxLines = 5, containerWidth = window.innerWidth - 24 } = props;
+    const headerTextWidth = useRef([]);
+    const locale = i18next.resolvedLanguage || localStorage.getItem('i18nextLng') || 'zh';
+    if (headerTextWidth.current.length === 0) {
+        props.head.forEach((item) => {
+            headerTextWidth.current.push(getTextWidth(item));
+        });
+    }
+    const columns = props.head.map((item, index) => {
+        return {
+            title: (jsx("div", { title: item, style: headerTextStyle, children: item })),
+            dataIndex: item,
+            key: index,
+            render: (text) => {
+                const str = typeof text === 'object' ? JSON.stringify(text) : text;
+                return (jsx("div", { className: cell, style: {
+                        height: 22 * maxLines,
+                        maxWidth: containerWidth,
+                        minWidth: headerTextWidth.current[index],
+                    }, children: jsx("div", { className: textContent, style: {
+                            WebkitLineClamp: maxLines,
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.scrollTop = 0;
+                        }, children: str }) }));
+            },
+        };
+    });
+    const pagination$1 = {
+        className: pagination,
+        // position: ['bottomCenter'],
+        pageSize: getPageSize(props.containerHeight, maxLines),
+        showSizeChanger: false,
+        onChange: props.onPageChange,
+        showTotal: () => {
+            if (props.total && props.total > props.data.length) {
+                return (jsxs("div", { className: downloadTip, children: [jsx(InfoCircleOutlined, {}), ' ', locale === 'zh' ? '请下载查看完整内容' : 'Please download to view the full content'] }));
+            }
+            else {
+                return null;
+            }
+        },
+    };
+    return (jsx(Table, { tableLayout: "auto", className: table, columns: columns, dataSource: props.data, scroll: { x: 'max-content', y: getScrollHeight(props.containerHeight) }, pagination: pagination$1 }));
+}
+
+export { DataTable as default };

package/es/components/file-preview/data-table/index.module.scss.js

@@ -0,0 +1,54 @@
+var style = document.createElement('style');
+style.textContent = `@charset "UTF-8";
+.index-module__table___LFpqo td {
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+.index-module__table___LFpqo th.ant-table-cell {
+  height: 55px;
+  padding: 5px 16px !important;
+}
+.index-module__table___LFpqo td.ant-table-cell {
+  padding: 5px 16px !important;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0;
+}
+.index-module__table___LFpqo div {
+  scrollbar-width: thin;
+  scrollbar-color: #eaeaea transparent;
+  box-sizing: border-box;
+}
+.index-module__cell___MtAcf {
+  display: flex;
+  flex-direction: column;
+  justify-content: center; /* 垂直居中 */
+}
+.index-module__cell___MtAcf .index-module__textContent___yk5fQ {
+  /* 多行省略号 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  box-sizing: border-box;
+}
+.index-module__cell___MtAcf .index-module__textContent___yk5fQ:hover {
+  display: block;
+  overflow: auto;
+}
+.index-module__pagination___wbe3v {
+  position: relative;
+}
+.index-module__downloadTip___TI7NB {
+  position: absolute;
+  left: 16px;
+  color: #89909d;
+  font-size: 14px;
+}`;
+document.head.appendChild(style);
+
+var table = "index-module__table___LFpqo";var cell = "index-module__cell___MtAcf";var textContent = "index-module__textContent___yk5fQ";var pagination = "index-module__pagination___wbe3v";var downloadTip = "index-module__downloadTip___TI7NB";
+
+export { cell, downloadTip, pagination, table, textContent };

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

@@ -0,0 +1,132 @@
+import { __awaiter } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { appendAsset } from '../util.js';
+import { stox } from './utils.js';
+import { getFileExt } from '@zjlab-fe/util';
+import DataTable from '../data-table/index.js';
+import chardet from 'chardet';
+import { wrap } from './index.module.scss.js';
+
+function getEncoding(blob) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve) => {
+            try {
+                const reader = new FileReader();
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                reader.onload = function (e) {
+                    // console.log('+++ e', e);
+                    const newArrayBuffer = e.target.result; // 得到ArrayBuffer
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const result = chardet.detect(new Uint8Array(newArrayBuffer.slice(0, 1 * 1024)));
+                    // console.log('+++ encoding', result);
+                    resolve(result);
+                };
+                reader.readAsArrayBuffer(blob); // 开始读取
+            }
+            catch (e) {
+                console.log('+++ getEncoding error', e);
+                resolve('UTF-8');
+            }
+        });
+    });
+}
+function ExcelPreview(props) {
+    var _a;
+    const ref = useRef(null);
+    const ext = getFileExt(props.filePath);
+    const [csvData, setCsvData] = useState();
+    const [csvContainerHeight, setCsvContainerHeight] = useState();
+    const [csvContainerWidth, setCsvContainerWidth] = useState();
+    useEffect(() => {
+        appendAsset([
+            'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/x-data-spreadsheet/1.1.9/dist/xspreadsheet.js',
+            'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/x-data-spreadsheet/1.1.9/dist/xspreadsheet.css',
+            'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/xlsx/0.18.5/dist/xlsx.full.min.js',
+            'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/npm/papaparse/5.5.2/papaparse.min.js',
+        ]).then(() => __awaiter(this, void 0, void 0, function* () {
+            fetch(props.filePath)
+                .then((response) => __awaiter(this, void 0, void 0, function* () {
+                if (ext === 'csv') {
+                    const blob = yield response.blob();
+                    const file = new File([blob], 'test.csv', { type: blob.type });
+                    getEncoding(blob).then((encoding) => {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        window.Papa.parse(file, {
+                            encoding,
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            complete: (result) => {
+                                var _a, _b, _c;
+                                // console.log('+++ result', result);
+                                const head = ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a[0]) || [];
+                                const data = [];
+                                (_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.forEach((row, rowIndex) => {
+                                    if (rowIndex !== 0) {
+                                        const rowData = {
+                                            key: rowIndex.toString(),
+                                        };
+                                        head.forEach((cell, index) => {
+                                            rowData[cell] = row[index];
+                                        });
+                                        data.push(rowData);
+                                    }
+                                });
+                                // console.log('+++ head', head, data);
+                                setCsvData({
+                                    head,
+                                    data,
+                                });
+                                setCsvContainerHeight(ref.current.clientHeight);
+                                setCsvContainerWidth(ref.current.clientWidth);
+                                (_c = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _c === void 0 ? void 0 : _c.call(props);
+                            },
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            error: (e) => {
+                                var _a;
+                                console.log(e);
+                                (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                            },
+                        });
+                    });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                }
+                else {
+                    response
+                        .arrayBuffer()
+                        .then(function (buffer) {
+                        var _a;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const wb = window.XLSX.read(buffer);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const lastData = stox(wb);
+                        // console.log('+++ loadData', lastData);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        window
+                            .x_spreadsheet(ref.current, {
+                            mode: 'read',
+                            showToolbar: false,
+                            showContextmenu: false,
+                            view: {
+                                height: () => ref.current.clientHeight,
+                                width: () => ref.current.clientWidth,
+                            },
+                        })
+                            .loadData(lastData);
+                        (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
+                    })
+                        .catch((e) => {
+                        throw e;
+                    });
+                }
+            }))
+                .catch((e) => {
+                var _a;
+                console.log(e);
+                (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            });
+        }));
+    }, []);
+    return (jsx("div", { ref: ref, className: wrap, children: ext === 'csv' && csvData ? (jsx(DataTable, { head: csvData.head, data: csvData.data, containerHeight: csvContainerHeight, containerWidth: csvContainerWidth, maxLines: (_a = props.tableConfig) === null || _a === void 0 ? void 0 : _a.maxLines })) : null }));
+}
+
+export { ExcelPreview as default };

package/es/components/file-preview/excel-preview/index.module.scss.js

@@ -0,0 +1,11 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__wrap___X1wOS {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}`;
+document.head.appendChild(style);
+
+var wrap = "index-module__wrap___X1wOS";
+
+export { wrap };

package/es/components/file-preview/excel-preview/utils.js

@@ -0,0 +1,46 @@
+/* eslint-disable no-undef */
+function stox(wb) {
+    const out = [];
+    wb.SheetNames.forEach(function (name) {
+        const o = { name: name, rows: {} };
+        const ws = wb.Sheets[name];
+        if (!ws || !ws['!ref'])
+            return;
+        const range = XLSX.utils.decode_range(ws['!ref']);
+        // sheet_to_json will lost empty row and col at begin as default
+        range.s = { r: 0, c: 0 };
+        const aoa = XLSX.utils.sheet_to_json(ws, {
+            raw: false,
+            header: 1,
+            range: range,
+        });
+        aoa.forEach(function (r, i) {
+            const cells = {};
+            r.forEach(function (c, j) {
+                cells[j] = { text: c || String(c) };
+                const cellRef = XLSX.utils.encode_cell({ r: i, c: j });
+                if (ws[cellRef] != null && ws[cellRef].f != null) {
+                    cells[j].text = '=' + ws[cellRef].f;
+                }
+            });
+            o.rows[i] = { cells: cells };
+        });
+        o.rows.len = aoa.length;
+        o.merges = [];
+        (ws['!merges'] || []).forEach(function (merge, i) {
+            //Needed to support merged cells with empty content
+            if (o.rows[merge.s.r] == null) {
+                o.rows[merge.s.r] = { cells: {} };
+            }
+            if (o.rows[merge.s.r].cells[merge.s.c] == null) {
+                o.rows[merge.s.r].cells[merge.s.c] = {};
+            }
+            o.rows[merge.s.r].cells[merge.s.c].merge = [merge.e.r - merge.s.r, merge.e.c - merge.s.c];
+            o.merges[i] = XLSX.utils.encode_range(merge);
+        });
+        out.push(o);
+    });
+    return out;
+}
+
+export { stox };

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { wrap, img } from './index.module.scss.js';
+
+function ImgPreview(props) {
+    // eslint-disable-next-line
+    const onError = (e) => {
+        var _a;
+        console.log('+++ img error');
+        (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onLoad = () => {
+        var _a;
+        (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    return (jsx("div", { className: wrap, children: jsx("img", { src: props.filePath, onError: onError, onLoad: onLoad, className: img }) }));
+}
+
+export { ImgPreview as default };

package/es/components/file-preview/img-preview/index.module.scss.js

@@ -0,0 +1,17 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__wrap___qyJ-P {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.index-module__img___DXNGo {
+  max-width: 100%;
+  max-height: 100%;
+}`;
+document.head.appendChild(style);
+
+var wrap = "index-module__wrap___qyJ-P";var img = "index-module__img___DXNGo";
+
+export { img, wrap };

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

@@ -0,0 +1,124 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import PdfPreview from './pdf-preview/index.js';
+import { getFileExt } from '@zjlab-fe/util';
+import ExcelPreview from './excel-preview/index.js';
+import ImgPreview from './img-preview/index.js';
+import MDPreview from './markdown-preview/index.js';
+import TxtPreview from './txt-preview/index.js';
+import JsonPreview from './json-preview/index.js';
+import ParquetPreview from './parquet-preview/index.js';
+import TablePreview from './table-preview/index.js';
+import { Spin, Modal } from 'antd';
+import { useState, useEffect } from 'react';
+import i18next from 'i18next';
+import { wrap, spinWrap, modalWrap } from './index.module.scss.js';
+
+function InnerFilePreview(props) {
+    var _a, _b, _c;
+    const locale = i18next.resolvedLanguage || localStorage.getItem('i18nextLng') || 'zh';
+    const { filePath, tableConfig, jsonConfig } = props;
+    const [isError, setIsError] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    // eslint-disable-next-line
+    const onError = (e) => {
+        var _a;
+        setIsLoading(false);
+        setIsError(true);
+        console.log(e);
+        (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onSuccess = () => {
+        var _a;
+        setIsLoading(false);
+        (_a = props === null || props === void 0 ? void 0 : props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    let result = null;
+    if (isError) {
+        result = jsx("div", { className: wrap, children: locale === 'zh' ? '获取文件失败' : 'Failed to get file' });
+    }
+    else if (tableConfig) {
+        result = jsx(TablePreview, Object.assign({}, props, { onSuccess: onSuccess }));
+    }
+    else if (jsonConfig) {
+        result = jsx(JsonPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+    }
+    else if (filePath) {
+        const ext = getFileExt(filePath).toLowerCase();
+        const spin = (jsx("div", { className: spinWrap, children: jsx(Spin, {}) }));
+        let innerPreview = null;
+        let canPreview = true;
+        switch (ext) {
+            case 'pdf': {
+                innerPreview = jsx(PdfPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+                break;
+            }
+            case 'xlsx':
+            case 'csv': {
+                innerPreview = jsx(ExcelPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+                break;
+            }
+            case 'png':
+            case 'jpg':
+            case 'jpeg': {
+                innerPreview = jsx(ImgPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+                break;
+            }
+            case 'mmd':
+            case 'md': {
+                innerPreview = jsx(MDPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+                break;
+            }
+            case 'txt': {
+                innerPreview = jsx(TxtPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+                break;
+            }
+            case 'parquet': {
+                innerPreview = jsx(ParquetPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+                break;
+            }
+            case 'jsonl':
+            case 'json': {
+                innerPreview = jsx(JsonPreview, Object.assign({}, props, { onError: onError, onSuccess: onSuccess }));
+                break;
+            }
+            default: {
+                canPreview = false;
+            }
+        }
+        if (canPreview) {
+            result = (jsxs(Fragment, { children: [isLoading && spin, innerPreview] }));
+        }
+        else {
+            result = (jsxs("div", { className: wrap, children: [locale === 'zh' ? '暂不支持' : 'Not supported', "\u00A0", ext, "\u00A0", locale === 'zh' ? '文件预览' : 'file preview'] }));
+        }
+    }
+    if (props.openInModal) {
+        if (!((_a = props === null || props === void 0 ? void 0 : props.modalProps) === null || _a === void 0 ? void 0 : _a.show)) {
+            return null;
+        }
+        return (jsx(Modal, { open: true, title: (_b = props === null || props === void 0 ? void 0 : props.modalProps) === null || _b === void 0 ? void 0 : _b.title, className: modalWrap, centered: true, width: "100%", onCancel: (_c = props === null || props === void 0 ? void 0 : props.modalProps) === null || _c === void 0 ? void 0 : _c.onCancel, footer: null, children: result }));
+    }
+    else {
+        return result;
+    }
+}
+function FilePreview(props) {
+    const [key, setKey] = useState(0);
+    const [lastFilePath, setLastFilePath] = useState(props.filePath);
+    const [lastTableConfig, setLastTableConfig] = useState(props.tableConfig);
+    useEffect(() => {
+        if (lastFilePath !== props.filePath || lastTableConfig !== props.tableConfig) {
+            setLastFilePath(props.filePath);
+            setLastTableConfig(props.tableConfig);
+            setKey(key + 1);
+        }
+    }, [props.filePath, props.tableConfig]);
+    if (lastFilePath !== props.filePath || lastTableConfig !== props.tableConfig) {
+        return null;
+    }
+    else {
+        return jsx(InnerFilePreview, Object.assign({}, props), key);
+    }
+}
+
+export { FilePreview as default };

package/es/components/file-preview/index.module.scss.js

@@ -0,0 +1,32 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__wrap___UpLkF {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow: auto;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.index-module__spinWrap___qNaoa {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.index-module__modalWrap___CKrVC .ant-modal-body {
+  height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.index-module__modalWrap___CKrVC .ant-modal-content {
+  padding-top: 44px;
+}`;
+document.head.appendChild(style);
+
+var wrap = "index-module__wrap___UpLkF";var spinWrap = "index-module__spinWrap___qNaoa";var modalWrap = "index-module__modalWrap___CKrVC";
+
+export { modalWrap, spinWrap, wrap };