@voplus/morpho-document 1.4.96 → 1.4.97

package/es/modules/page/components/PageItemHeader/state.js

@@ -1,28 +1,28 @@
-import { __decorate } from "tslib";
-import { makeObservable, observable } from "mobx";
-export class State {
-    constructor() {
-        /** collapse PageTextItem */
-        Object.defineProperty(this, "collapse", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        /** over of MouseOver */
-        Object.defineProperty(this, "over", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        makeObservable(this);
-    }
-}
-__decorate([
-    observable
-], State.prototype, "collapse", void 0);
-__decorate([
-    observable
-], State.prototype, "over", void 0);
+import { __decorate } from "tslib";
+import { makeObservable, observable } from "mobx";
+export class State {
+    constructor() {
+        /** collapse PageTextItem */
+        Object.defineProperty(this, "collapse", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** over of MouseOver */
+        Object.defineProperty(this, "over", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        makeObservable(this);
+    }
+}
+__decorate([
+    observable
+], State.prototype, "collapse", void 0);
+__decorate([
+    observable
+], State.prototype, "over", void 0);
 //# sourceMappingURL=state.js.map

package/es/modules/page/components/PageItems/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import "./index.less";
-declare const PageItems: (props: {
-    id: string;
-    readonly?: boolean;
-    print?: boolean;
-}) => JSX.Element;
-export default PageItems;
+/// <reference types="react" />
+import "./index.less";
+declare const PageItems: (props: {
+    id: string;
+    readonly?: boolean;
+    print?: boolean;
+}) => JSX.Element;
+export default PageItems;

package/es/modules/page/components/PageItems/index.js

@@ -1,72 +1,72 @@
-import "./index.less";
-import { Card, useRenderOnChange } from "@voplus/morpho-ui";
-import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data";
-import React, { useState } from "react";
-import { useAutoUpdateListData, useDocumentListEffect, useDocumentStore, } from "@voplus/morpho-document-core";
-import DocumentSelectDialog from "../../../../components/DocumentSelectDialog";
-import ListView from "@voplus/morpho-ui/es/components/layout/ListView/ListView2";
-import { Menu } from "@voplus/antd";
-import NewDocumentForm from "../../../../components/NewDocumentForm";
-import PageItem from "../PageItem";
-import PlusDropDown from "../PlusDropDown";
-import { State } from "./state";
-import classnames from "classnames";
-import { observe } from "@voplus/morpho-ui";
-import { useMetaStore } from "../../../../data/DocumentMetaStore";
-const PageItems = (props) => {
-    const { id, readonly } = props;
-    const meta = useMetaStore();
-    const [state] = useState(new State());
-    const documentStore = useDocumentStore();
-    const data = useCreateListDataState({
-        filterDefaults: {
-            includes: "tags",
-            filters: [{ c: "ParentNodeId", o: "=", l: "And", v1: id }],
-        },
-    }, [id]);
-    useRenderOnChange(() => data.filters.options);
-    useDocumentListEffect(data, (result) => data.union(result), data.filters.options);
-    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
-    useAutoUpdateListData(data, (d) => (d.type === "Text" || d.type === "Graph" || d.type === "Document" || d.type === "Shortcut") &&
-        d.parentId === id);
-    return observe(() => (React.createElement(ListDataContext.Provider, { value: data },
-        React.createElement(ListView, { className: "page-items-view", headerProps: {
-                header: React.createElement("span", null),
-                sortable: false,
-                addAble: false,
-            }, renderItem: ({ item, index, connectDragSource }) => (React.createElement(React.Fragment, null,
-                React.createElement(Card, { className: classnames("page-item-card", { "page-item-card_zero": index === 0 }) },
-                    React.createElement(PageItem, { id: item.id, connectDragSource: connectDragSource })))), moveAfter: moveAfter, dragDropContainerClassName: "page-dd-item-container", infiniteScrollViewProps: {
-                className: "page-scroll-view",
-                customScroll: props.print ? false : true,
-            } }),
-        React.createElement(NewDocumentForm, { parentId: id, type: state.type, placeholder: `Add a ${state.type} to this page`, className: classnames("new-page-item-form", { show: state.addAble }), onCancel: () => (state.addAble = false) }),
-        React.createElement(PlusDropDown, { className: classnames("plus-icon-position", { hide: state.addAble || !!readonly }), menu: React.createElement(Menu, { onClick: state.selectType },
-                React.createElement(Menu.Item, { key: "Text", style: { fontSize: "15px" } },
-                    meta.getIcon({ type: "Text" }),
-                    " Text"),
-                React.createElement(Menu.Item, { key: "Graph", style: { fontSize: "15px" } },
-                    meta.getIcon({ type: "Graph" }),
-                    " Graph"),
-                React.createElement(Menu.Item, { key: "Document", style: { fontSize: "15px" } },
-                    meta.getIcon({ type: "Folder" }),
-                    " Folder"),
-                React.createElement(Menu.Item, { key: "Shortcut", style: { fontSize: "15px" } },
-                    meta.getIcon({ type: "Folder" }),
-                    " Link Existing Document")) }),
-        state.addLink && React.createElement(DocumentSelectDialog, { onSelect: onCreateShortcut }))));
-    /** document sort */
-    async function moveAfter(id, afterId, list) {
-        await documentStore.moveAfter(id, afterId);
-    }
-    function onCreateShortcut(doc) {
-        const shortcuts = [];
-        doc.map((item) => {
-            shortcuts.push({ TargetId: item.id, ParentId: id, Name: "" });
-        });
-        documentStore.createShortcuts({ data: shortcuts, error: "message" });
-        state.addLink = false;
-    }
-};
-export default PageItems;
+import "./index.less";
+import { Card, useRenderOnChange } from "@voplus/morpho-ui";
+import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data";
+import React, { useState } from "react";
+import { useAutoUpdateListData, useDocumentListEffect, useDocumentStore, } from "@voplus/morpho-document-core";
+import DocumentSelectDialog from "../../../../components/DocumentSelectDialog";
+import ListView from "@voplus/morpho-ui/es/components/layout/ListView/ListView2";
+import { Menu } from "@voplus/antd";
+import NewDocumentForm from "../../../../components/NewDocumentForm";
+import PageItem from "../PageItem";
+import PlusDropDown from "../PlusDropDown";
+import { State } from "./state";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+import { useMetaStore } from "../../../../data/DocumentMetaStore";
+const PageItems = (props) => {
+    const { id, readonly } = props;
+    const meta = useMetaStore();
+    const [state] = useState(new State());
+    const documentStore = useDocumentStore();
+    const data = useCreateListDataState({
+        filterDefaults: {
+            includes: "tags",
+            filters: [{ c: "ParentNodeId", o: "=", l: "And", v1: id }],
+        },
+    }, [id]);
+    useRenderOnChange(() => data.filters.options);
+    useDocumentListEffect(data, (result) => data.union(result), data.filters.options);
+    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
+    useAutoUpdateListData(data, (d) => (d.type === "Text" || d.type === "Graph" || d.type === "Document" || d.type === "Shortcut") &&
+        d.parentId === id);
+    return observe(() => (React.createElement(ListDataContext.Provider, { value: data },
+        React.createElement(ListView, { className: "page-items-view", headerProps: {
+                header: React.createElement("span", null),
+                sortable: false,
+                addAble: false,
+            }, renderItem: ({ item, index, connectDragSource }) => (React.createElement(React.Fragment, null,
+                React.createElement(Card, { className: classnames("page-item-card", { "page-item-card_zero": index === 0 }) },
+                    React.createElement(PageItem, { id: item.id, connectDragSource: connectDragSource })))), moveAfter: moveAfter, dragDropContainerClassName: "page-dd-item-container", infiniteScrollViewProps: {
+                className: "page-scroll-view",
+                customScroll: props.print ? false : true,
+            } }),
+        React.createElement(NewDocumentForm, { parentId: id, type: state.type, placeholder: `Add a ${state.type} to this page`, className: classnames("new-page-item-form", { show: state.addAble }), onCancel: () => (state.addAble = false) }),
+        React.createElement(PlusDropDown, { className: classnames("plus-icon-position", { hide: state.addAble || !!readonly }), menu: React.createElement(Menu, { onClick: state.selectType },
+                React.createElement(Menu.Item, { key: "Text", style: { fontSize: "15px" } },
+                    meta.getIcon({ type: "Text" }),
+                    " Text"),
+                React.createElement(Menu.Item, { key: "Graph", style: { fontSize: "15px" } },
+                    meta.getIcon({ type: "Graph" }),
+                    " Graph"),
+                React.createElement(Menu.Item, { key: "Document", style: { fontSize: "15px" } },
+                    meta.getIcon({ type: "Folder" }),
+                    " Folder"),
+                React.createElement(Menu.Item, { key: "Shortcut", style: { fontSize: "15px" } },
+                    meta.getIcon({ type: "Folder" }),
+                    " Link Existing Document")) }),
+        state.addLink && React.createElement(DocumentSelectDialog, { onSelect: onCreateShortcut }))));
+    /** document sort */
+    async function moveAfter(id, afterId, list) {
+        await documentStore.moveAfter(id, afterId);
+    }
+    function onCreateShortcut(doc) {
+        const shortcuts = [];
+        doc.map((item) => {
+            shortcuts.push({ TargetId: item.id, ParentId: id, Name: "" });
+        });
+        documentStore.createShortcuts({ data: shortcuts, error: "message" });
+        state.addLink = false;
+    }
+};
+export default PageItems;
 //# sourceMappingURL=index.js.map

package/es/modules/page/components/PageItems/index.less

@@ -0,0 +1,78 @@
+@import "~@voplus/antd/es/style/themes/index.less";
+:global {
+	.page-items-view {
+		background: unset;
+		.list-view-header {
+			display: none;
+		}
+
+		// set height
+		.page-scroll-view {
+			height: 100%;
+			> div {
+				height: 100%;
+				background-color: @background-color-base;
+			}
+			.page-dd-item-container {
+				background-color: @background-color-base;
+			}
+		}
+
+		// end ugly code to set items height
+
+		.page-item-card {
+			max-width: 70rem;
+			margin-left: auto;
+			margin-right: auto;
+			padding: 0 1rem 0 1rem;
+			background-color: @background-color-base;
+			&.page-item-card_zero {
+				padding-top: 1rem;
+			}
+			.page-item-header {
+				padding: 10px 0;
+				margin: 0 20px;
+				border-bottom: 1px solid #eee;
+			}
+		}
+	}
+	.new-page-item-form {
+		width: 100%;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+		background-color: #fff;
+		border-top: 0 @border-style-base @border-color-split;
+		transition: height 0.3s, opacity 0.2s ease-out, border-color 0.1s;
+		&.show {
+			opacity: 1;
+			height: auto;
+			border-top-width: @border-width-base;
+			.ant-input {
+				padding: 4px 0;
+				border: none;
+				box-shadow: none;
+			}
+		}
+		.detailed {
+			display: none;
+		}
+	}
+	.plus-icon.plus-icon-position {
+		position: absolute;
+		bottom: 20px;
+		right: 20px;
+		width: 26px;
+		height: 26px;
+		line-height: 26px;
+		font-size: 18px;
+		border-radius: 2px;
+		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+			0 9px 28px 8px rgba(0, 0, 0, 0.05);
+		transition: width 0.3s, opacity 0.2s ease-out, color 0.3s;
+		&.hide {
+			width: 0;
+			opacity: 0;
+		}
+	}
+}

package/es/modules/page/components/PageItems/state.d.ts

@@ -1,12 +1,12 @@
-import { MenuInfo } from "rc-menu/es/interface";
-import { docType } from "../../../../data";
-export declare class State {
-    /** Enable of new Text  */
-    addAble: boolean;
-    /** type of document */
-    type: docType;
-    /**  */
-    addLink: boolean;
-    constructor();
-    selectType: ({ key }: MenuInfo) => void;
-}
+import { MenuInfo } from "rc-menu/es/interface";
+import { docType } from "../../../../data";
+export declare class State {
+    /** Enable of new Text  */
+    addAble: boolean;
+    /** type of document */
+    type: docType;
+    /**  */
+    addLink: boolean;
+    constructor();
+    selectType: ({ key }: MenuInfo) => void;
+}

package/es/modules/page/components/PageItems/state.js

@@ -1,55 +1,55 @@
-import { __decorate } from "tslib";
-import { action, makeObservable, observable } from "mobx";
-export class State {
-    constructor() {
-        /** Enable of new Text  */
-        Object.defineProperty(this, "addAble", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        /** type of document */
-        Object.defineProperty(this, "type", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        /**  */
-        Object.defineProperty(this, "addLink", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "selectType", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ({ key }) => {
-                this.type = key;
-                if (key === "Shortcut") {
-                    this.addLink = true;
-                }
-                else {
-                    this.addAble = true;
-                }
-            }
-        });
-        makeObservable(this);
-    }
-}
-__decorate([
-    observable
-], State.prototype, "addAble", void 0);
-__decorate([
-    observable
-], State.prototype, "type", void 0);
-__decorate([
-    observable
-], State.prototype, "addLink", void 0);
-__decorate([
-    action
-], State.prototype, "selectType", void 0);
+import { __decorate } from "tslib";
+import { action, makeObservable, observable } from "mobx";
+export class State {
+    constructor() {
+        /** Enable of new Text  */
+        Object.defineProperty(this, "addAble", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** type of document */
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**  */
+        Object.defineProperty(this, "addLink", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "selectType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ({ key }) => {
+                this.type = key;
+                if (key === "Shortcut") {
+                    this.addLink = true;
+                }
+                else {
+                    this.addAble = true;
+                }
+            }
+        });
+        makeObservable(this);
+    }
+}
+__decorate([
+    observable
+], State.prototype, "addAble", void 0);
+__decorate([
+    observable
+], State.prototype, "type", void 0);
+__decorate([
+    observable
+], State.prototype, "addLink", void 0);
+__decorate([
+    action
+], State.prototype, "selectType", void 0);
 //# sourceMappingURL=state.js.map

package/es/modules/page/components/PlusDropDown/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import "./index.less";
-declare const PlusDropDown: (props: {
-    className?: string;
-    menu?: JSX.Element;
-}) => JSX.Element;
-export default PlusDropDown;
+/// <reference types="react" />
+import "./index.less";
+declare const PlusDropDown: (props: {
+    className?: string;
+    menu?: JSX.Element;
+}) => JSX.Element;
+export default PlusDropDown;

package/es/modules/page/components/PlusDropDown/index.js

@@ -1,14 +1,14 @@
-import "./index.less";
-import { Dropdown } from "@voplus/antd";
-import { PlusOutlined } from "@ant-design/icons";
-import React from "react";
-import classnames from "classnames";
-import { observe } from "@voplus/morpho-ui";
-const PlusDropDown = (props) => {
-    const { className, menu } = props;
-    const PlusIcon = (React.createElement("span", { className: classnames("plus-icon", className) },
-        React.createElement(PlusOutlined, null)));
-    return observe(() => menu ? (React.createElement(Dropdown, { overlay: menu, placement: "topCenter" }, PlusIcon)) : (PlusIcon));
-};
-export default PlusDropDown;
+import "./index.less";
+import { Dropdown } from "@voplus/antd";
+import { PlusOutlined } from "@ant-design/icons";
+import React from "react";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+const PlusDropDown = (props) => {
+    const { className, menu } = props;
+    const PlusIcon = (React.createElement("span", { className: classnames("plus-icon", className) },
+        React.createElement(PlusOutlined, null)));
+    return observe(() => menu ? (React.createElement(Dropdown, { overlay: menu, placement: "topCenter" }, PlusIcon)) : (PlusIcon));
+};
+export default PlusDropDown;
 //# sourceMappingURL=index.js.map

package/es/modules/page/components/PlusDropDown/index.less

@@ -0,0 +1,11 @@
+:global {
+	.plus-icon {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		background: #1abc9c;
+		color: #fff;
+		text-align: center;
+		cursor: pointer;
+	}
+}

package/es/modules/page/components/ShortcutItem/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-declare const ShortCutItem: (props: {
-    /** doucment id */
-    id: string;
-    /** shortcut id */
-    shortcutId: string;
-    connectDragSource?: any;
-}) => JSX.Element;
-export default ShortCutItem;
+/// <reference types="react" />
+declare const ShortCutItem: (props: {
+    /** doucment id */
+    id: string;
+    /** shortcut id */
+    shortcutId: string;
+    connectDragSource?: any;
+}) => JSX.Element;
+export default ShortCutItem;

package/es/modules/page/components/ShortcutItem/index.js

@@ -1,39 +1,39 @@
-import React, { useEffect, useState } from "react";
-import { autorun, runInAction } from "mobx";
-import DocumentList from "../../../../components/DocumentList";
-import FileViewer from "../../../../components/FileViewer";
-import PageItemHeader from "../PageItemHeader";
-import { State } from "./state";
-import TextEditor2 from "@voplus/morpho-text/es/components/TextEditor2";
-import classnames from "classnames";
-import { observe } from "@voplus/morpho-ui";
-import { useDocument } from "@voplus/morpho-document-core";
-import { usePageContext } from "../../data";
-const ShortCutItem = (props) => {
-    const { id, shortcutId, connectDragSource } = props;
-    const document = useDocument(id);
-    const context = usePageContext();
-    const [textOnly, setTextOnly] = useState(true);
-    const state = context.getState(id, () => new State());
-    useEffect(() => autorun(() => context.setCollapse(id, state.collapse)), [id]);
-    useEffect(() => {
-        runInAction(() => {
-            context._data.map((i) => {
-                if (i.id === id)
-                    state.collapse = i.collapse;
-            });
-        });
-    }, [context.collapsed]);
-    return observe(() => (React.createElement("div", { id: id, className: "page-item page-text-item" },
-        React.createElement(PageItemHeader, { id: shortcutId, iconVisible: true, collapse: state.collapse, connectDragSource: connectDragSource, changeCollapse: state.changeCollapse }),
-        !state.collapse && (React.createElement(React.Fragment, null, document.type === "Text" ? (React.createElement(TextEditor2, { id: id, proseMirrorProps: {
-                className: classnames("padding-top-10"),
-                readonly: textOnly || document.readonly,
-                onClick: () => setTextOnly(document.readonly || false),
-                onBlur: () => setTextOnly(true),
-                showNoContent: true,
-                scroll: false,
-            } })) : document.type === "File" ? (React.createElement(FileViewer, { id: props.id, style: { width: "100%", height: "100%", textAlign: "center" } })) : (React.createElement(DocumentList, { id: id, header: true, className: "folder-document-list" })))))));
-};
-export default ShortCutItem;
+import React, { useEffect, useState } from "react";
+import { autorun, runInAction } from "mobx";
+import DocumentList from "../../../../components/DocumentList";
+import FileViewer from "../../../../components/FileViewer";
+import PageItemHeader from "../PageItemHeader";
+import { State } from "./state";
+import TextEditor2 from "@voplus/morpho-text/es/components/TextEditor2";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+import { useDocument } from "@voplus/morpho-document-core";
+import { usePageContext } from "../../data";
+const ShortCutItem = (props) => {
+    const { id, shortcutId, connectDragSource } = props;
+    const document = useDocument(id);
+    const context = usePageContext();
+    const [textOnly, setTextOnly] = useState(true);
+    const state = context.getState(id, () => new State());
+    useEffect(() => autorun(() => context.setCollapse(id, state.collapse)), [id]);
+    useEffect(() => {
+        runInAction(() => {
+            context._data.map((i) => {
+                if (i.id === id)
+                    state.collapse = i.collapse;
+            });
+        });
+    }, [context.collapsed]);
+    return observe(() => (React.createElement("div", { id: id, className: "page-item page-text-item" },
+        React.createElement(PageItemHeader, { id: shortcutId, iconVisible: true, collapse: state.collapse, connectDragSource: connectDragSource, changeCollapse: state.changeCollapse }),
+        !state.collapse && (React.createElement(React.Fragment, null, document.type === "Text" ? (React.createElement(TextEditor2, { id: id, proseMirrorProps: {
+                className: classnames("padding-top-10"),
+                readonly: textOnly || document.readonly,
+                onClick: () => setTextOnly(document.readonly || false),
+                onBlur: () => setTextOnly(true),
+                showNoContent: true,
+                scroll: false,
+            } })) : document.type === "File" ? (React.createElement(FileViewer, { id: props.id, style: { width: "100%", height: "100%", textAlign: "center" } })) : (React.createElement(DocumentList, { id: id, header: true, className: "folder-document-list" })))))));
+};
+export default ShortCutItem;
 //# sourceMappingURL=index.js.map

package/es/modules/page/components/ShortcutItem/state.d.ts

@@ -1,7 +1,7 @@
-import { IPageItemState } from "../../data/IPageItemState";
-export declare class State implements IPageItemState {
-    /** collapse PageTextItem */
-    collapse: boolean;
-    constructor();
-    changeCollapse: (collapse: boolean) => void;
-}
+import { IPageItemState } from "../../data/IPageItemState";
+export declare class State implements IPageItemState {
+    /** collapse PageTextItem */
+    collapse: boolean;
+    constructor();
+    changeCollapse: (collapse: boolean) => void;
+}