@canlooks/can-ui 0.0.1

package/dist/cjs/components/upload/upload.style.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('upload', [
+    'input',
+    'files',
+    'file',
+    'icon',
+    'info',
+    'name',
+    'progress',
+    'control',
+    'images',
+    'imageWrap',
+    'image',
+    'sortable'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
+    const maskBg = (0, color_1.default)(background.card).alpha(.9).string();
+    return (0, react_1.css) `
+        position: relative;
+
+        .${exports.classes.input} {
+            position: absolute;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &[data-file-type=file] {
+            .${exports.classes.files} {
+                display: flex;
+                flex-direction: column;
+                margin-top: ${spacing[2]}px;
+
+                .${exports.classes.file} {
+                    display: flex;
+                    align-items: center;
+                    gap: ${spacing[3]}px;
+                    padding-right: ${spacing[2]}px;
+                    border-radius: ${borderRadius}px;
+
+                    .${exports.classes.icon} {
+                        color: ${text.secondary};
+                    }
+
+                    .${exports.classes.info} {
+                        min-width: 0;
+                        flex: 1;
+                        position: relative;
+                        padding: ${spacing[2]}px 0;
+
+                        .${exports.classes.name} {
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                        }
+
+                        .${exports.classes.progress} {
+                            position: absolute;
+                            inset: auto 0 0;
+                        }
+                    }
+
+                    .${exports.classes.control} {
+                        display: none;
+                        gap: ${spacing[4]}px;
+                    }
+
+                    &:hover {
+                        background-color: ${gray(mode === 'light' ? .03 : .18)};
+
+                        &:not([data-status=uploading]) {
+                            .${exports.classes.control} {
+                                display: flex;
+                            }
+                        }
+                    }
+
+                    &[data-status=error] {
+                        .${exports.classes.name} {
+                            color: ${colors.error};
+                        }
+
+                        .${exports.classes.control} {
+                            display: flex;
+                        }
+                    }
+                }
+            }
+        }
+
+        &[data-file-type=image] {
+            .${exports.classes.images} {
+                display: flex;
+                gap: ${spacing[3]}px;
+                flex-wrap: wrap;
+            }
+
+            .${exports.classes.imageWrap} {
+                width: 96px;
+                height: 96px;
+                border: 1px dashed ${divider};
+                padding: 4px;
+
+                &[data-clickable=true] {
+                    cursor: pointer;
+                    transition: border-color .2s ${easing.easeOut}, color .2s ${easing.easeOut};
+
+                    &:hover {
+                        border-color: ${colors.primary};
+                        color: ${colors.primary};
+                    }
+                }
+
+                .${exports.classes.image} {
+                    width: 100%;
+                    height: 100%;
+                    background-color: ${gray(.05)};
+                    border-radius: inherit;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .${exports.classes.progress} {
+                        background-color: ${maskBg};
+                        position: absolute;
+                        inset: 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+
+            &[data-variant=circular] {
+                .${exports.classes.imageWrap} {
+                    border-radius: 50%;
+                }
+            }
+
+            &[data-variant=square] {
+                .${exports.classes.imageWrap} {
+                    border-radius: ${borderRadius}px;
+                }
+            }
+        }
+
+        .${exports.classes.sortable}[data-dragging=true] {
+            position: relative;
+            z-index: 1;
+        }
+
+        &[data-sortable=true] {
+            .${exports.classes.file}, .${exports.classes.imageWrap} {
+                cursor: grab;
+            }
+        }
+
+        &:not([data-sortable=true]) {
+            .${exports.classes.file}, .${exports.classes.imageWrap} {
+                cursor: default;
+            }
+        }
+    `;
+});

package/dist/cjs/components/waterfall/index.d.ts

@@ -0,0 +1 @@
+export * from './waterfall';

package/dist/cjs/components/waterfall/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./waterfall"), exports);

package/dist/cjs/components/waterfall/waterfall.d.ts

@@ -0,0 +1,10 @@
+import { ResponsiveProp } from '../../../types';
+import { TransportStyleProps } from '../transportStyle';
+export interface WaterfallProps extends TransportStyleProps {
+    /** 布局列数，@default {xs: 4} */
+    columnCount?: ResponsiveProp;
+    gap?: ResponsiveProp;
+    columnGap?: ResponsiveProp;
+    rowGap?: ResponsiveProp;
+}
+export declare const Waterfall: import("react").ForwardRefExoticComponent<Omit<WaterfallProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/waterfall/waterfall.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Waterfall = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const waterfall_style_1 = require("./waterfall.style");
+const utils_1 = require("../../utils");
+exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
+    columnCount = (0, utils_1.responsiveValue)(columnCount);
+    gap = (0, utils_1.responsiveValue)(gap);
+    columnGap = (0, utils_1.responsiveValue)(columnGap) ?? gap;
+    rowGap = (0, utils_1.responsiveValue)(rowGap) ?? gap;
+    const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
+    const items = (0, react_1.useRef)([]);
+    items.current = [];
+    const [orders, setOrders] = (0, react_1.useState)();
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            const heights = Array(columnCountNum).fill(0);
+            const newOrders = [];
+            items.current.forEach(item => {
+                const order = heights.indexOf(Math.min(...heights));
+                newOrders.push(order);
+                heights[order] += item.offsetHeight;
+            });
+            setOrders(newOrders);
+            setContainerHeight(Math.max(...heights));
+        });
+        items.current.forEach(item => {
+            resizeObserver.observe(item);
+        });
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [props.children, columnCountNum]);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: react_1.Children.map(props.children, (child, i) => (0, jsx_runtime_1.jsx)("div", { ref: r => r && items.current.push(r), className: waterfall_style_1.classes.item, style: { order: orders?.[i] }, children: child }, (0, react_1.isValidElement)(child) ? child.key ?? i : i)) }));
+});

package/dist/cjs/components/waterfall/waterfall.style.d.ts

@@ -0,0 +1,11 @@
+import { ResponsiveValue } from '../../../types';
+export declare const classes: {
+    item: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ columnCount, columnGap, rowGap }: {
+    columnCount: ResponsiveValue;
+    columnGap: ResponsiveValue;
+    rowGap: ResponsiveValue;
+}): import("@emotion/react").SerializedStyles;

package/dist/cjs/components/waterfall/waterfall.style.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('waterfall', [
+    'item'
+]);
+function useStyle({ columnCount, columnGap, rowGap }) {
+    return (0, react_1.css) `
+        ${(0, utils_1.responsiveVariables)(k => `
+            ${k in columnCount ? `--waterfall-columnCount: ${columnCount[k]}` : ''};
+            ${k in columnGap ? `--waterfall-column-gap: ${columnGap[k]}px` : ''};
+            ${k in rowGap ? `--waterfall-row-gap: ${rowGap[k]}px` : ''};
+        `)}
+
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        column-gap: var(--waterfall-column-gap);
+
+        .${exports.classes.item} {
+            width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
+            padding-bottom: var(--waterfall-row-gap);
+
+            > img {
+                width: 100%;
+                display: flex;
+            }
+        }
+    `;
+}

package/dist/cjs/extensions/curd/curd.d.ts

@@ -0,0 +1,68 @@
+import { ComponentClass, ReactNode } from 'react';
+import { CurdBaseProps, CurdColumn } from '../../components/curd';
+import { DataGridProps, RowType } from '../../components/dataGrid';
+import { FormValue } from '../../components/form';
+import { Id } from '../../../types';
+/**
+ * -------------------------------------------------------------------
+ * 类修饰器
+ */
+export declare function CURD<R extends RowType, F extends FormValue = FormValue>(props?: CurdBaseProps<R, F>): <T extends ComponentClass>(target: T) => T;
+export declare namespace CURD {
+    var Column: typeof import("./curd").Column;
+    var Reqeust: typeof import("./curd").Reqeust;
+    var OnReload: typeof import("./curd").OnReload;
+    var OnFilter: typeof import("./curd").OnFilter;
+    var OnCreate: typeof import("./curd").OnCreate;
+    var OnUpdate: typeof import("./curd").OnUpdate;
+    var OnDelete: typeof import("./curd").OnDelete;
+    var PostData: typeof import("./curd").PostData;
+}
+export declare function DATA_GRID<R extends RowType, V extends Id = Id>(props?: DataGridProps<R, V>): <T extends ComponentClass>(target: T) => T;
+export declare namespace DATA_GRID {
+    var Column: typeof import("./curd").Column;
+    var Reqeust: typeof import("./curd").Reqeust;
+    var OnReload: typeof import("./curd").OnReload;
+    var OnFilter: typeof import("./curd").OnFilter;
+    var OnCreate: typeof import("./curd").OnCreate;
+    var OnUpdate: typeof import("./curd").OnUpdate;
+    var OnDelete: typeof import("./curd").OnDelete;
+    var PostData: typeof import("./curd").PostData;
+}
+type ColumnDecorator = (prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>) => void;
+export declare function Column(title: ReactNode): ColumnDecorator;
+export declare function Column(params?: CurdColumn): ColumnDecorator;
+export declare namespace Column {
+    var Hide: typeof import("./curd").Hide;
+    var Sort: typeof import("./curd").Sort;
+    var Filter: typeof import("./curd").Filter;
+    var Form: typeof import("./curd").Form;
+}
+export declare function Hide(): ColumnDecorator;
+export declare function Hide(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+export declare function Sort<R extends RowType>(compareFn?: (a: R, b: R) => number): ColumnDecorator;
+export declare function Sort(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+export declare function Filter(config?: CurdColumn['filter']): ColumnDecorator;
+export declare function Filter(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+export declare function Form(config?: CurdColumn['form']): ColumnDecorator;
+export declare function Form(prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>): void;
+/**
+ * -------------------------------------------------------------------
+ * 方法修饰器
+ */
+type MethodDecorator = (prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>) => void;
+export declare function Reqeust(): MethodDecorator;
+export declare function Reqeust(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnReload(): MethodDecorator;
+export declare function OnReload(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnFilter(): MethodDecorator;
+export declare function OnFilter(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnCreate(): MethodDecorator;
+export declare function OnCreate(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnUpdate(): MethodDecorator;
+export declare function OnUpdate(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function OnDelete(): MethodDecorator;
+export declare function OnDelete(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function PostData(): MethodDecorator;
+export declare function PostData(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export {};

package/dist/cjs/extensions/curd/curd.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CURD = CURD;
+exports.DATA_GRID = DATA_GRID;
+exports.Column = Column;
+exports.Hide = Hide;
+exports.Sort = Sort;
+exports.Filter = Filter;
+exports.Form = Form;
+exports.Reqeust = Reqeust;
+exports.OnReload = OnReload;
+exports.OnFilter = OnFilter;
+exports.OnCreate = OnCreate;
+exports.OnUpdate = OnUpdate;
+exports.OnDelete = OnDelete;
+exports.PostData = PostData;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const curd_1 = require("../../components/curd");
+const dataGrid_1 = require("../../components/dataGrid");
+/**
+ * -------------------------------------------------------------------
+ * 类修饰器
+ */
+function CURD(props) {
+    return commonClassDecorator(curd_1.Curd, props);
+}
+function DATA_GRID(props) {
+    return commonClassDecorator(dataGrid_1.DataGrid, props);
+}
+function commonClassDecorator(Component, props) {
+    return (target) => {
+        return class extends target {
+            _columns = [];
+            _methods;
+            constructor(props) {
+                super(props);
+                const property_columnConfig = prototype_property_columnConfig.get(target.prototype);
+                if (property_columnConfig) {
+                    for (const [, columnConfig] of property_columnConfig) {
+                        this._columns.push(columnConfig);
+                    }
+                }
+                this._methods = prototype_methods.get(target.prototype);
+                if (this._methods) {
+                    for (const key in this._methods) {
+                        this._methods[key] = this._methods[key].bind(this);
+                    }
+                }
+            }
+            render() {
+                return ((0, jsx_runtime_1.jsx)(Component, { columns: this._columns, ...props, ...this._methods, ...this.props }));
+            }
+        };
+    };
+}
+/**
+ * -------------------------------------------------------------------
+ * 属性修饰器 - columns
+ */
+const prototype_property_columnConfig = new WeakMap();
+CURD.Column = DATA_GRID.Column = Column;
+function Column(a) {
+    return (prototype, property, descriptor) => {
+        const params = a && typeof a === 'object' ? a : { title: a };
+        const columnConfig = Object.assign(setColumnConfig(prototype, property), params);
+        if (typeof descriptor?.value === 'function') {
+            columnConfig.render = descriptor.value;
+        }
+    };
+}
+/**
+ * 对应CurdColumn['hideInTable']属性
+ */
+Column.Hide = Hide;
+function Hide(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('hideInTable')
+        : setColumnConfigValue('hideInTable')(a, b);
+}
+Column.Sort = Sort;
+function Sort(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('sorter', a)
+        : setColumnConfigValue('sorter')(a, b);
+}
+Column.Filter = Filter;
+function Filter(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('filter', a)
+        : setColumnConfigValue('filter')(a, b);
+}
+Column.Form = Form;
+function Form(a, b) {
+    return typeof b === 'undefined'
+        ? setColumnConfigValue('form', a)
+        : setColumnConfigValue('form')(a, b);
+}
+/**
+ * 通用设置prototype_property_columnConfig的方法
+ * @param prototype
+ * @param property
+ */
+function setColumnConfig(prototype, property) {
+    let property_columnConfig = prototype_property_columnConfig.get(prototype);
+    !property_columnConfig && prototype_property_columnConfig.set(prototype, property_columnConfig = new Map());
+    let columnConfig = property_columnConfig.get(property);
+    !columnConfig && property_columnConfig.set(property, columnConfig = { field: property });
+    return columnConfig;
+}
+/**
+ * 设置单个columnConfig的值
+ * @param key
+ * @param value
+ */
+function setColumnConfigValue(key, value = true) {
+    return (prototype, property) => {
+        const columnConfig = setColumnConfig(prototype, property);
+        columnConfig[key] = value;
+    };
+}
+const prototype_methods = new WeakMap();
+CURD.Reqeust = DATA_GRID.Reqeust = Reqeust;
+function Reqeust(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('loadRows')
+        : setMethods('loadRows')(a, b, c);
+}
+CURD.OnReload = DATA_GRID.OnReload = OnReload;
+function OnReload(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onReload')
+        : setMethods('onReload')(a, b, c);
+}
+CURD.OnFilter = DATA_GRID.OnFilter = OnFilter;
+function OnFilter(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onFilter')
+        : setMethods('onFilter')(a, b, c);
+}
+CURD.OnCreate = DATA_GRID.OnCreate = OnCreate;
+function OnCreate(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onCreate')
+        : setMethods('onCreate')(a, b, c);
+}
+CURD.OnUpdate = DATA_GRID.OnUpdate = OnUpdate;
+function OnUpdate(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onUpdate')
+        : setMethods('onUpdate')(a, b, c);
+}
+CURD.OnDelete = DATA_GRID.OnDelete = OnDelete;
+function OnDelete(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('onDelete')
+        : setMethods('onDelete')(a, b, c);
+}
+CURD.PostData = DATA_GRID.PostData = PostData;
+function PostData(a, b, c) {
+    return typeof c === 'undefined'
+        ? setMethods('postData')
+        : setMethods('postData')(a, b, c);
+}
+/**
+ * 通用设置prototype_methods的方法
+ * @param key
+ */
+function setMethods(key) {
+    return (prototype, property, descriptor) => {
+        let methods = prototype_methods.get(prototype);
+        !methods && prototype_methods.set(prototype, methods = {});
+        methods[key] = descriptor.value;
+    };
+}

package/dist/cjs/extensions/curd/index.d.ts

@@ -0,0 +1 @@
+export * from './curd';

package/dist/cjs/extensions/curd/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./curd"), exports);

package/dist/cjs/extensions/documentViewer/documentViewer.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { SvgViewer } from './svgViewer';
+import { PdfViewer } from './pdfViewer';
+export type DocumentViewerBaseProps = {
+    src?: string;
+    filename?: string;
+    onError?(e: any): void;
+    /** 是否将文件名设置成页面的标题，@default true */
+    setDocumentTitle?: boolean;
+};
+export interface DocumentViewerProps extends DocumentViewerBaseProps {
+    /** mimeType与后缀名至少提供一个 */
+    type?: string;
+    extension?: string;
+}
+export declare const DocumentViewer: {
+    (props: DocumentViewerProps): ReactElement;
+    Svg: typeof SvgViewer;
+    Pdf: typeof PdfViewer;
+};
+/**
+ * 将文件名同步至页面标题
+ */
+export declare function useDocumentTitle({ filename, setDocumentTitle }: Pick<DocumentViewerBaseProps, 'filename' | 'setDocumentTitle'>): void;
+/**
+ * 获取文件内容
+ * @param param0
+ */
+export declare function useBlob({ src, onError }: DocumentViewerBaseProps): {
+    blob: Blob | undefined;
+    loading: boolean;
+};

package/dist/cjs/extensions/documentViewer/documentViewer.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentViewer = void 0;
+exports.useDocumentTitle = useDocumentTitle;
+exports.useBlob = useBlob;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const svgViewer_1 = require("./svgViewer");
+const mime_1 = tslib_1.__importDefault(require("mime"));
+const placeholder_1 = require("../../components/placeholder");
+const button_1 = require("../../components/button");
+const icons_1 = require("@ant-design/icons");
+const documentViewer_style_1 = require("./documentViewer.style");
+const utils_1 = require("../../utils");
+const pdfViewer_1 = require("./pdfViewer");
+const imagePreview_1 = require("../../components/image/imagePreview");
+exports.DocumentViewer = (0, react_1.memo)((0, react_1.forwardRef)(({ src, filename, onError, type, extension, setDocumentTitle = true }, ref) => {
+    const mimeType = (0, react_1.useMemo)(() => {
+        if (!src) {
+            return null;
+        }
+        if (type) {
+            return type;
+        }
+        if (extension) {
+            return mime_1.default.getType(extension);
+        }
+        if (filename) {
+            const [ext] = filename.match(/\.([^\\/\.])+$/) || [null];
+            return ext && mime_1.default.getType(ext);
+        }
+        return null;
+    }, [src, type, extension]);
+    const downloadHandler = () => {
+        if (src) {
+            const a = document.createElement('a');
+            a.href = src;
+            a.download = filename || 'download';
+            a.click();
+        }
+    };
+    const empty = ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { description: "\u8BE5\u6587\u4EF6\u6682\u4E0D\u652F\u6301\u9884\u89C8", extra: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icons_1.DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" }) }));
+    if (!mimeType) {
+        return empty;
+    }
+    const childProps = { src, filename, onError, setDocumentTitle };
+    // pdf
+    if (mimeType === 'application/pdf') {
+        return (0, jsx_runtime_1.jsx)(pdfViewer_1.PdfViewer, { ...childProps });
+    }
+    // office文档
+    if (mimeType.includes('officedocument')
+        || {
+            'application/msword': true,
+            'application/vnd.ms-powerpoint': true,
+            'application/vnd.ms-excel': true
+        }[mimeType]) {
+        return (0, jsx_runtime_1.jsx)("iframe", { css: documentViewer_style_1.iframeStyle, src: 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(src) });
+    }
+    // svg
+    if (mimeType === 'image/svg+xml') {
+        return (0, jsx_runtime_1.jsx)(svgViewer_1.SvgViewer, { ...childProps });
+    }
+    // image
+    if (mimeType.includes('image/')) {
+        return (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: src, open: true, closable: false });
+    }
+    return empty;
+}));
+exports.DocumentViewer.Svg = svgViewer_1.SvgViewer;
+exports.DocumentViewer.Pdf = pdfViewer_1.PdfViewer;
+/**
+ * 将文件名同步至页面标题
+ */
+function useDocumentTitle({ filename, setDocumentTitle }) {
+    (0, react_1.useEffect)(() => {
+        if (filename && setDocumentTitle) {
+            document.title = filename;
+        }
+    }, [filename, setDocumentTitle]);
+}
+/**
+ * 获取文件内容
+ * @param param0
+ */
+function useBlob({ src, onError }) {
+    // src改变会清空data
+    const [blob, setBlob] = (0, utils_1.useDerivedState)(void 0, [src]);
+    const [loading, getBlob] = (0, utils_1.useLoading)(async () => {
+        try {
+            const res = await fetch(src);
+            if (!res.ok) {
+                onError?.(res);
+                return;
+            }
+            setBlob(await res.blob());
+        }
+        catch (e) {
+            onError?.(e);
+        }
+    }, true);
+    (0, react_1.useEffect)(() => {
+        src && getBlob();
+    }, [src]);
+    return { blob: blob.current, loading: loading.current };
+}

package/dist/cjs/extensions/documentViewer/documentViewer.style.d.ts

@@ -0,0 +1,15 @@
+export declare const classes: {
+    object: string;
+    svgViewer: string;
+    svgToolbar: string;
+    svgTitle: string;
+    svgIcon: string;
+    svgToolbarRight: string;
+    svgDivider: string;
+    svgContainer: string;
+    svgContent: string;
+} & {
+    root: string;
+};
+export declare const iframeStyle: import("@emotion/react").SerializedStyles;
+export declare const svgStyle: () => import("@emotion/react").SerializedStyles;