@voplus/morpho-document 1.4.93 → 1.4.95

package/es/components/DocumentHeader/index.js

@@ -1,177 +1,177 @@
-import "./index.less";
-import { useDocument, useDocumentStore } from "@voplus/morpho-document-core";
-import { Input, Skeleton } from "@voplus/antd";
-import { Open, Restore, Versions } from "../../controls/ToolBar/buttons";
-import React, { useEffect, useState } from "react";
-import { observe, useAsideContentContext } from "@voplus/morpho-ui";
-import { DescriptionDataIcon } from "../../controls/data-icons";
-import DocumentDataIconBar from "../../controls/DocumentDataIconBar";
-import DocumentQuickViewDialog from "../DocumentQuickViewDialog";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import FlagIcon from "../../controls/data-icons/FlagIcon";
-import PropertiesView from "../PropertiesView";
-import { State } from "./state";
-import TagView from "../TagView";
-import ToolBar from "../../controls/ToolBar/ToolBar2";
-import classnames from "classnames";
-import { clone } from "lodash-es";
-import { faLock } from "@fortawesome/pro-light-svg-icons";
-import { runInAction } from "mobx";
-import { useDocumentListContext } from "../../data/contexts/DocumentListContext";
-import { useFrame } from "../ViewFrame/ViewFrameContext";
-import { useLayout } from "@voplus/morpho-data";
-import { useMetaStore } from "../../data";
-import { useViewContext } from "@voplus/morpho-document-core/es/data/context/ViewContext";
-const DocumentHeader = (props) => {
-    const { id, pre, preVisible, tagsVisible, flagVisible, statusVisible, status, size, quickDataBar, quickDataBarAlign, tools, quickVisible, quickDataBarVisible, editMode, skeletonVisible, descriptionVisible, className, itemHover, onChange, toolBarProps, } = props;
-    const asideContext = useAsideContentContext();
-    const context = useDocumentListContext();
-    const documentStore = useDocumentStore();
-    const view = useViewContext();
-    const frame = useFrame();
-    const document = useDocument(id, {
-        reload: (d) => !d.tags,
-        includes: "tags,versions",
-    });
-    const meta = useMetaStore();
-    const layout = useLayout();
-    const [state] = useState(new State(documentStore));
-    state.props = props;
-    useEffect(() => {
-        runInAction(() => {
-            state.name = document.name;
-            if (editMode !== undefined)
-                state.editVisible = editMode;
-        });
-    }, [editMode, document.name]);
-    const DocumentToolBar = (React.createElement(ToolBar, { id: id, moreProps: {
-            buttonProps: { size: itemHover ? "middle" : "small" },
-            closeAside: !(toolBarProps === null || toolBarProps === void 0 ? void 0 : toolBarProps.closeAside),
-        } },
-        React.createElement(Open, { size: itemHover ? "middle" : "small", url: !(toolBarProps === null || toolBarProps === void 0 ? void 0 : toolBarProps.onOpen) ? meta.getRoute(document) : "", action: toolBarProps === null || toolBarProps === void 0 ? void 0 : toolBarProps.onOpen }),
-        document.status === "Archived" && React.createElement(Restore, { size: itemHover ? "middle" : "small" }),
-        React.createElement(Versions, { size: itemHover ? "middle" : "small" })));
-    const Content = observe(() => (React.createElement(React.Fragment, null,
-        !document.readonly && state.editVisible ? (React.createElement(Input, { autoFocus: true, disabled: state.loading, defaultValue: document.name, value: state.name, onChange: (e) => {
-                runInAction(() => (state.name = e.target.value));
-                onChange && onChange(e.target.value);
-            }, onBlur: () => state.tryHideEditor(document.name) })) : (React.createElement("span", { className: "document-name", onClick: handleClickName }, document.name)),
-        !state.editVisible && (React.createElement(React.Fragment, null,
-            props.subtitleVisible && document.subtitle && (React.createElement("span", { className: "file-subtitle" }, document.subtitle)),
-            flagVisible && React.createElement(FlagIcon, { id: id, flag: document.flag, editable: !document.readonly }),
-            statusVisible &&
-                (status ? (React.createElement("span", { className: "file-draft" }, status)) : (document.status === "Draft" && React.createElement("span", { className: "file-draft" }, "draft"))),
-            statusVisible && document.status === "Readonly" && (React.createElement(FAIcon, { className: "file-lock", icon: faLock })),
-            descriptionVisible && React.createElement(DescriptionDataIcon, { id: props.id, className: "file-lock" }),
-            tagsVisible && React.createElement(TagView, { id: id, tags: document.tags, editable: !document.readonly }))))));
-    const QuickDataBar = quickDataBarVisible === true ? (React.createElement("div", { className: "quick-data-bar" }, quickDataBar || React.createElement(DocumentDataIconBar, { id: id }))) : null;
-    const headerClassName = {};
-    headerClassName[`document-header-${size}`] = size !== "normal";
-    return observe(() => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: classnames("document-header-default", headerClassName, `bar-align-${quickDataBarAlign}`, { "document-header-hover": !!itemHover }, className), onClick: openView, onMouseLeave: () => state.onMouse(false), style: props.style }, skeletonVisible && document.loaded !== true ? (React.createElement(Skeleton, { active: true })) : (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "document-header-content", onMouseOver: () => state.onMouse(true) },
-                React.createElement("div", { className: "document-name-content" },
-                    preVisible &&
-                        (pre ? (React.createElement("div", { className: "document-pre" }, pre)) : document.type ? (React.createElement("div", { className: "document-pre" }, meta.getIcon(document))) : ("")),
-                    React.createElement("div", { className: "document-header-target", style: { flex: 1 } },
-                        Content,
-                        quickDataBarAlign === "title" && QuickDataBar)),
-                quickDataBarAlign === "left" && QuickDataBar),
-            props.toolsVisible
-                ? tools || (React.createElement("div", { className: classnames("tools-bar", { show: state.isHover }) }, DocumentToolBar))
-                : null))),
-        React.createElement("div", { onDoubleClick: (e) => e.stopPropagation() },
-            React.createElement(DocumentQuickViewDialog, { id: id, visible: state.quickViewVisible, onCancel: toggleQuickView })))));
-    /** Quick View */
-    function toggleQuickView() {
-        runInAction(() => {
-            var _a, _b;
-            if (context === null || context === void 0 ? void 0 : context.onDocumentSelected) {
-                return (_a = context === null || context === void 0 ? void 0 : context.onDocumentSelected) === null || _a === void 0 ? void 0 : _a.call(context, id);
-            }
-            if (quickVisible) {
-                /* 手机模式 */
-                if (layout.ui.mobile) {
-                    const element = asideContext === null || asideContext === void 0 ? void 0 : asideContext.asideContent;
-                    asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement("div", { style: {
-                            width: "100%",
-                            height: "100%",
-                            background: "#fff",
-                            position: "absolute",
-                            top: "0",
-                        } },
-                        React.createElement(DocumentQuickViewDialog, { id: id, visible: true, onCancel: () => {
-                                if (asideContext === null || asideContext === void 0 ? void 0 : asideContext.asideContent)
-                                    asideContext.closeAside();
-                                asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(element, { span: 12 });
-                            } })), { span: 12 });
-                }
-                else {
-                    state.quickViewVisible = !state.quickViewVisible;
-                    (_b = props.onShowQuickView) === null || _b === void 0 ? void 0 : _b.call(props, state.quickViewVisible);
-                }
-            }
-        });
-    }
-    /** Handler for click event on document name.**/
-    function handleClickName(e) {
-        runInAction(() => {
-            var _a;
-            if (props.clickNameEffect === "nothing" || props.onClickName) {
-                (_a = props.onClickName) === null || _a === void 0 ? void 0 : _a.call(props);
-                return;
-            }
-            if (props.clickNameEffect === "edit") {
-                if (document.readonly)
-                    return;
-                state.name = document.name;
-                state.editVisible = true;
-            }
-            else if (props.clickNameEffect === "default") {
-                if ((view === null || view === void 0 ? void 0 : view.Type) === "PropertiesView" || (view === null || view === void 0 ? void 0 : view.Type) === "QuickView") {
-                    toggleQuickView();
-                }
-                else {
-                    const path = clone(e.nativeEvent.path);
-                    const visible = path.some((item) => item.className === "document-list-view");
-                    asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: id }), {
-                        span: frame && ((frame === null || frame === void 0 ? void 0 : frame.view) === "default" || !(frame === null || frame === void 0 ? void 0 : frame.view)) && !visible
-                            ? 9
-                            : 12,
-                    });
-                }
-            }
-        });
-    }
-    function openView(e) {
-        if (props.clickNameEffect === "default" &&
-            (e.target.className === "document-header-target" || e.target.className === "quick-data-bar")) {
-            if ((view === null || view === void 0 ? void 0 : view.Type) === "PropertiesView" || (view === null || view === void 0 ? void 0 : view.Type) === "QuickView") {
-                toggleQuickView();
-            }
-            else {
-                const path = clone(e.nativeEvent.path);
-                const visible = path.some((item) => item.className === "document-list-view");
-                asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: id }), {
-                    span: frame && ((frame === null || frame === void 0 ? void 0 : frame.view) === "default" || !(frame === null || frame === void 0 ? void 0 : frame.view)) && !visible ? 9 : 12,
-                });
-            }
-        }
-    }
-};
-DocumentHeader.defaultProps = {
-    clickNameEffect: "nothing",
-    preVisible: true,
-    tagsVisible: true,
-    flagVisible: true,
-    size: "normal",
-    quickDataBarAlign: "title",
-    quickVisible: true,
-    statusVisible: true,
-    skeletonVisible: true,
-    quickDataBarVisible: true,
-    toolsVisible: true,
-    descriptionVisible: true,
-};
-export default DocumentHeader;
+import "./index.less";
+import { useDocument, useDocumentStore } from "@voplus/morpho-document-core";
+import { Input, Skeleton } from "@voplus/antd";
+import { Open, Restore, Versions } from "../../controls/ToolBar/buttons";
+import React, { useEffect, useState } from "react";
+import { observe, useAsideContentContext } from "@voplus/morpho-ui";
+import { DescriptionDataIcon } from "../../controls/data-icons";
+import DocumentDataIconBar from "../../controls/DocumentDataIconBar";
+import DocumentQuickViewDialog from "../DocumentQuickViewDialog";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import FlagIcon from "../../controls/data-icons/FlagIcon";
+import PropertiesView from "../PropertiesView";
+import { State } from "./state";
+import TagView from "../TagView";
+import ToolBar from "../../controls/ToolBar/ToolBar2";
+import classnames from "classnames";
+import { clone } from "lodash-es";
+import { faLock } from "@fortawesome/pro-light-svg-icons";
+import { runInAction } from "mobx";
+import { useDocumentListContext } from "../../data/contexts/DocumentListContext";
+import { useFrame } from "../ViewFrame/ViewFrameContext";
+import { useLayout } from "@voplus/morpho-data";
+import { useMetaStore } from "../../data";
+import { useViewContext } from "@voplus/morpho-document-core/es/data/context/ViewContext";
+const DocumentHeader = (props) => {
+    const { id, pre, preVisible, tagsVisible, flagVisible, statusVisible, status, size, quickDataBar, quickDataBarAlign, tools, quickVisible, quickDataBarVisible, editMode, skeletonVisible, descriptionVisible, className, itemHover, onChange, toolBarProps, } = props;
+    const asideContext = useAsideContentContext();
+    const context = useDocumentListContext();
+    const documentStore = useDocumentStore();
+    const view = useViewContext();
+    const frame = useFrame();
+    const document = useDocument(id, {
+        reload: (d) => !d.tags,
+        includes: "tags,versions",
+    });
+    const meta = useMetaStore();
+    const layout = useLayout();
+    const [state] = useState(new State(documentStore));
+    state.props = props;
+    useEffect(() => {
+        runInAction(() => {
+            state.name = document.name;
+            if (editMode !== undefined)
+                state.editVisible = editMode;
+        });
+    }, [editMode, document.name]);
+    const DocumentToolBar = (React.createElement(ToolBar, { id: id, moreProps: {
+            buttonProps: { size: itemHover ? "middle" : "small" },
+            closeAside: !(toolBarProps === null || toolBarProps === void 0 ? void 0 : toolBarProps.closeAside),
+        } },
+        React.createElement(Open, { size: itemHover ? "middle" : "small", url: !(toolBarProps === null || toolBarProps === void 0 ? void 0 : toolBarProps.onOpen) ? meta.getRoute(document) : "", action: toolBarProps === null || toolBarProps === void 0 ? void 0 : toolBarProps.onOpen }),
+        document.status === "Archived" && React.createElement(Restore, { size: itemHover ? "middle" : "small" }),
+        React.createElement(Versions, { size: itemHover ? "middle" : "small" })));
+    const Content = observe(() => (React.createElement(React.Fragment, null,
+        !document.readonly && state.editVisible ? (React.createElement(Input, { autoFocus: true, disabled: state.loading, defaultValue: document.name, value: state.name, onChange: (e) => {
+                runInAction(() => (state.name = e.target.value));
+                onChange && onChange(e.target.value);
+            }, onBlur: () => state.tryHideEditor(document.name) })) : (React.createElement("span", { className: "document-name", onClick: handleClickName }, document.name)),
+        !state.editVisible && (React.createElement(React.Fragment, null,
+            props.subtitleVisible && document.subtitle && (React.createElement("span", { className: "file-subtitle" }, document.subtitle)),
+            flagVisible && React.createElement(FlagIcon, { id: id, flag: document.flag, editable: !document.readonly }),
+            statusVisible &&
+                (status ? (React.createElement("span", { className: "file-draft" }, status)) : (document.status === "Draft" && React.createElement("span", { className: "file-draft" }, "draft"))),
+            statusVisible && document.status === "Readonly" && (React.createElement(FAIcon, { className: "file-lock", icon: faLock })),
+            descriptionVisible && React.createElement(DescriptionDataIcon, { id: props.id, className: "file-lock" }),
+            tagsVisible && React.createElement(TagView, { id: id, tags: document.tags, editable: !document.readonly }))))));
+    const QuickDataBar = quickDataBarVisible === true ? (React.createElement("div", { className: "quick-data-bar" }, quickDataBar || React.createElement(DocumentDataIconBar, { id: id }))) : null;
+    const headerClassName = {};
+    headerClassName[`document-header-${size}`] = size !== "normal";
+    return observe(() => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classnames("document-header-default", headerClassName, `bar-align-${quickDataBarAlign}`, { "document-header-hover": !!itemHover }, className), onClick: openView, onMouseLeave: () => state.onMouse(false), style: props.style }, skeletonVisible && document.loaded !== true ? (React.createElement(Skeleton, { active: true })) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "document-header-content", onMouseOver: () => state.onMouse(true) },
+                React.createElement("div", { className: "document-name-content" },
+                    preVisible &&
+                        (pre ? (React.createElement("div", { className: "document-pre" }, pre)) : document.type ? (React.createElement("div", { className: "document-pre" }, meta.getIcon(document))) : ("")),
+                    React.createElement("div", { className: "document-header-target", style: { flex: 1 } },
+                        Content,
+                        quickDataBarAlign === "title" && QuickDataBar)),
+                quickDataBarAlign === "left" && QuickDataBar),
+            props.toolsVisible
+                ? tools || (React.createElement("div", { className: classnames("tools-bar", { show: state.isHover }) }, DocumentToolBar))
+                : null))),
+        React.createElement("div", { onDoubleClick: (e) => e.stopPropagation() },
+            React.createElement(DocumentQuickViewDialog, { id: id, visible: state.quickViewVisible, onCancel: toggleQuickView })))));
+    /** Quick View */
+    function toggleQuickView() {
+        runInAction(() => {
+            var _a, _b;
+            if (context === null || context === void 0 ? void 0 : context.onDocumentSelected) {
+                return (_a = context === null || context === void 0 ? void 0 : context.onDocumentSelected) === null || _a === void 0 ? void 0 : _a.call(context, id);
+            }
+            if (quickVisible) {
+                /* 手机模式 */
+                if (layout.ui.mobile) {
+                    const element = asideContext === null || asideContext === void 0 ? void 0 : asideContext.asideContent;
+                    asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement("div", { style: {
+                            width: "100%",
+                            height: "100%",
+                            background: "#fff",
+                            position: "absolute",
+                            top: "0",
+                        } },
+                        React.createElement(DocumentQuickViewDialog, { id: id, visible: true, onCancel: () => {
+                                if (asideContext === null || asideContext === void 0 ? void 0 : asideContext.asideContent)
+                                    asideContext.closeAside();
+                                asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(element, { span: 12 });
+                            } })), { span: 12 });
+                }
+                else {
+                    state.quickViewVisible = !state.quickViewVisible;
+                    (_b = props.onShowQuickView) === null || _b === void 0 ? void 0 : _b.call(props, state.quickViewVisible);
+                }
+            }
+        });
+    }
+    /** Handler for click event on document name.**/
+    function handleClickName(e) {
+        runInAction(() => {
+            var _a;
+            if (props.clickNameEffect === "nothing" || props.onClickName) {
+                (_a = props.onClickName) === null || _a === void 0 ? void 0 : _a.call(props);
+                return;
+            }
+            if (props.clickNameEffect === "edit") {
+                if (document.readonly)
+                    return;
+                state.name = document.name;
+                state.editVisible = true;
+            }
+            else if (props.clickNameEffect === "default") {
+                if ((view === null || view === void 0 ? void 0 : view.Type) === "PropertiesView" || (view === null || view === void 0 ? void 0 : view.Type) === "QuickView") {
+                    toggleQuickView();
+                }
+                else {
+                    const path = clone(e.nativeEvent.path);
+                    const visible = path.some((item) => item.className === "document-list-view");
+                    asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: id }), {
+                        span: frame && ((frame === null || frame === void 0 ? void 0 : frame.view) === "default" || !(frame === null || frame === void 0 ? void 0 : frame.view)) && !visible
+                            ? 9
+                            : 12,
+                    });
+                }
+            }
+        });
+    }
+    function openView(e) {
+        if (props.clickNameEffect === "default" &&
+            (e.target.className === "document-header-target" || e.target.className === "quick-data-bar")) {
+            if ((view === null || view === void 0 ? void 0 : view.Type) === "PropertiesView" || (view === null || view === void 0 ? void 0 : view.Type) === "QuickView") {
+                toggleQuickView();
+            }
+            else {
+                const path = clone(e.nativeEvent.path);
+                const visible = path.some((item) => item.className === "document-list-view");
+                asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: id }), {
+                    span: frame && ((frame === null || frame === void 0 ? void 0 : frame.view) === "default" || !(frame === null || frame === void 0 ? void 0 : frame.view)) && !visible ? 9 : 12,
+                });
+            }
+        }
+    }
+};
+DocumentHeader.defaultProps = {
+    clickNameEffect: "nothing",
+    preVisible: true,
+    tagsVisible: true,
+    flagVisible: true,
+    size: "normal",
+    quickDataBarAlign: "title",
+    quickVisible: true,
+    statusVisible: true,
+    skeletonVisible: true,
+    quickDataBarVisible: true,
+    toolsVisible: true,
+    descriptionVisible: true,
+};
+export default DocumentHeader;
 //# sourceMappingURL=index.js.map

package/es/components/DocumentHeader/state.d.ts

@@ -1,24 +1,24 @@
-import { DocumentHeaderProps, DocumentStore } from "@voplus/morpho-document-core";
-export declare class State {
-    private store;
-    props: DocumentHeaderProps;
-    /** Name of document */
-    name: string;
-    /** Visible of Edit name */
-    editVisible: boolean;
-    /** Visible of quickView */
-    quickViewVisible: boolean;
-    /** isHover ? onMouseOver : onMouseLeave */
-    isHover: boolean;
-    /** Loading of save name */
-    loading: boolean;
-    constructor(store: DocumentStore);
-    /**move document*/
-    onMove: () => void;
-    /**paste document*/
-    onPaste: () => void;
-    /** hide the editor and try to auto save name if changed. */
-    tryHideEditor: (existingName: string) => Promise<void>;
-    onMouse(over: boolean): void;
-    get id(): string;
-}
+import { DocumentHeaderProps, DocumentStore } from "@voplus/morpho-document-core";
+export declare class State {
+    private store;
+    props: DocumentHeaderProps;
+    /** Name of document */
+    name: string;
+    /** Visible of Edit name */
+    editVisible: boolean;
+    /** Visible of quickView */
+    quickViewVisible: boolean;
+    /** isHover ? onMouseOver : onMouseLeave */
+    isHover: boolean;
+    /** Loading of save name */
+    loading: boolean;
+    constructor(store: DocumentStore);
+    /**move document*/
+    onMove: () => void;
+    /**paste document*/
+    onPaste: () => void;
+    /** hide the editor and try to auto save name if changed. */
+    tryHideEditor: (existingName: string) => Promise<void>;
+    onMouse(over: boolean): void;
+    get id(): string;
+}