@voplus/morpho-workspace 4.0.0 → 4.0.2

package/es/modules/board/components/BoardColumn/index.js

@@ -1,56 +1,56 @@
-import { State } from "./state";
-import { Checkbox, Input, Spin, Tooltip } from "antd";
-import React, { useState } from "react";
-import { useBoardColumn, useBoardColumnStore } from "../../../../data/board";
-import AddDocDropdown from "@voplus/morpho-document/es/components/AddDocDropdown";
-import DocumentSelectDialog from "@voplus/morpho-document/es/components/DocumentSelectDialog";
-import { Draggable } from "react-beautiful-dnd";
-import MoreDropdownButton from "@voplus/morpho-document/es/controls/ToolBar/buttons/More";
-import NewDocumentForm from "@voplus/morpho-document/es/components/NewDocumentForm";
-import { Observer } from "mobx-react-lite";
-import { Scrollbars } from "react-custom-scrollbars";
-import SubDocument from "../SubDocument";
-import classnames from "classnames";
-import { observe } from "@voplus/morpho-ui";
-import { runInAction } from "mobx";
-import styles from "./index.less";
-import { useDocumentStore } from "@voplus/morpho-document-core";
-const BoardColumn = (props) => {
-    const { index, destination, source } = { ...props };
-    const documentStore = useDocumentStore();
-    const boardStore = useBoardColumnStore();
-    const [state] = useState(new State(boardStore, documentStore));
-    state.props = props;
-    const boardcolumn = useBoardColumn(props.id, { reload: state.reload });
-    state.update(boardcolumn);
-    return observe(() => (React.createElement(Draggable, { draggableId: state.boardcolumn.id, index: index }, (provided, snapshot) => (React.createElement(Observer, null, () => {
-        var _a;
-        return (React.createElement("div", { className: classnames(styles["board-column"], snapshot.isDragging && "action"), 
-            // eslint-disable-next-line @typescript-eslint/unbound-method
-            ref: provided.innerRef, ...provided.draggableProps },
-            React.createElement("div", { className: "content-top", style: { borderTop: ` solid 2px ${props.colorStyle}` }, ...provided.dragHandleProps, 
-                // avoid mouse down propagate to panable
-                onMouseDown: (e) => e.stopPropagation() },
-                React.createElement("div", { className: "board-name" },
-                    state.checked && (React.createElement(Checkbox, { onChange: state.onCheckAllChange, checked: state.checkAll })),
-                    state.editable ? (React.createElement(Spin, { spinning: state.loading },
-                        React.createElement(Input.TextArea, { autoSize: true, autoFocus: true, value: state.name, onBlur: () => state.save(), onChange: (e) => runInAction(() => (state.name = e.target.value)) }))) : (React.createElement("div", { className: "task-card-title", onClick: state.onEdit }, ((_a = state.boardcolumn.name) === null || _a === void 0 ? void 0 : _a.length) > 15 ? (React.createElement(Tooltip, { title: state.boardcolumn.name, placement: "topLeft" },
-                        React.createElement("span", null, state.boardcolumn.name))) : (state.boardcolumn.name))),
-                    !state.editable && React.createElement("span", { className: "board-length" }, state.documents)),
-                React.createElement("div", { className: "board-control" },
-                    React.createElement(MoreDropdownButton, { id: state.boardcolumn.id }),
-                    React.createElement(AddDocDropdown, { id: props.id, className: "board-drodown", iconColor: props.colorStyle, onItemClick: (val) => state.onItemClick(val), onCancelClick: () => state.cancel() }))),
-            React.createElement(Scrollbars, { autoHide: true },
-                React.createElement(SubDocument, { id: props.id, listType: "QUOTE", onDocumentData: state.onDocumentData, destination: destination, source: source })),
-            state.shortcut && (React.createElement(DocumentSelectDialog, { onSelect: (doc) => state.onCreateShortcut(doc) })),
-            state.addAble && (React.createElement(NewDocumentForm, { isExpand: true, className: "new-sub-doc", parentId: props.id, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)), onExpand: onExpand }))));
-    })))));
-    function onExpand() {
-        if (props.onAdd) {
-            props.onAdd(props.id, state.type, state.boardcolumn.name);
-            state.addAble = false;
-        }
-    }
-};
-export default BoardColumn;
+import { State } from "./state";
+import { Checkbox, Input, Spin, Tooltip } from "antd";
+import React, { useState } from "react";
+import { useBoardColumn, useBoardColumnStore } from "../../../../data/board";
+import AddDocDropdown from "@voplus/morpho-document/es/components/AddDocDropdown";
+import DocumentSelectDialog from "@voplus/morpho-document/es/components/DocumentSelectDialog";
+import { Draggable } from "react-beautiful-dnd";
+import MoreDropdownButton from "@voplus/morpho-document/es/controls/ToolBar/buttons/More";
+import NewDocumentForm from "@voplus/morpho-document/es/components/NewDocumentForm";
+import { Observer } from "mobx-react-lite";
+import { Scrollbars } from "react-custom-scrollbars";
+import SubDocument from "../SubDocument";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+import { runInAction } from "mobx";
+import styles from "./index.less";
+import { useDocumentStore } from "@voplus/morpho-document-core";
+const BoardColumn = (props) => {
+    const { index, destination, source } = { ...props };
+    const documentStore = useDocumentStore();
+    const boardStore = useBoardColumnStore();
+    const [state] = useState(new State(boardStore, documentStore));
+    state.props = props;
+    const boardcolumn = useBoardColumn(props.id, { reload: state.reload });
+    state.update(boardcolumn);
+    return observe(() => (React.createElement(Draggable, { draggableId: state.boardcolumn.id, index: index }, (provided, snapshot) => (React.createElement(Observer, null, () => {
+        var _a;
+        return (React.createElement("div", { className: classnames(styles["board-column"], snapshot.isDragging && "action"), 
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            ref: provided.innerRef, ...provided.draggableProps },
+            React.createElement("div", { className: "content-top", style: { borderTop: ` solid 2px ${props.colorStyle}` }, ...provided.dragHandleProps, 
+                // avoid mouse down propagate to panable
+                onMouseDown: (e) => e.stopPropagation() },
+                React.createElement("div", { className: "board-name" },
+                    state.checked && (React.createElement(Checkbox, { onChange: state.onCheckAllChange, checked: state.checkAll })),
+                    state.editable ? (React.createElement(Spin, { spinning: state.loading },
+                        React.createElement(Input.TextArea, { autoSize: true, autoFocus: true, value: state.name, onBlur: () => state.save(), onChange: (e) => runInAction(() => (state.name = e.target.value)) }))) : (React.createElement("div", { className: "task-card-title", onClick: state.onEdit }, ((_a = state.boardcolumn.name) === null || _a === void 0 ? void 0 : _a.length) > 15 ? (React.createElement(Tooltip, { title: state.boardcolumn.name, placement: "topLeft" },
+                        React.createElement("span", null, state.boardcolumn.name))) : (state.boardcolumn.name))),
+                    !state.editable && React.createElement("span", { className: "board-length" }, state.documents)),
+                React.createElement("div", { className: "board-control" },
+                    React.createElement(MoreDropdownButton, { id: state.boardcolumn.id }),
+                    React.createElement(AddDocDropdown, { id: props.id, className: "board-drodown", iconColor: props.colorStyle, onItemClick: (val) => state.onItemClick(val), onCancelClick: () => state.cancel() }))),
+            React.createElement(Scrollbars, { autoHide: true },
+                React.createElement(SubDocument, { id: props.id, listType: "QUOTE", onDocumentData: state.onDocumentData, destination: destination, source: source })),
+            state.shortcut && (React.createElement(DocumentSelectDialog, { onSelect: (doc) => state.onCreateShortcut(doc) })),
+            state.addAble && (React.createElement(NewDocumentForm, { isExpand: true, className: "new-sub-doc", parentId: props.id, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)), onExpand: onExpand }))));
+    })))));
+    function onExpand() {
+        if (props.onAdd) {
+            props.onAdd(props.id, state.type, state.boardcolumn.name);
+            state.addAble = false;
+        }
+    }
+};
+export default BoardColumn;
 //# sourceMappingURL=index.js.map

package/es/modules/board/components/BoardColumn/index.less

@@ -1,271 +1,271 @@
-.board-column {
-	min-width: 290px;
-	margin: 8px;
-	display: flex;
-	flex-direction: column;
-
-	&:global(.action) {
-		opacity: 0.5;
-	}
-
-	:global {
-		.header {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-			background-color: #e6f7ff;
-			transition: background-color 0.2s ease;
-
-			&:hover {
-				background-color: #afd3e4;
-			}
-		}
-
-		.content-top {
-			width: 290px;
-			display: flex;
-			height: 50px;
-			line-height: 50px;
-			padding: 0 15px;
-			background: #ffffff;
-			margin-bottom: 15px;
-
-			.board-name {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				font-size: 16px;
-				color: #000000;
-				overflow: hidden;
-
-				.task-card-title {
-					height: 50px;
-					display: block;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					cursor: text;
-				}
-
-				.ant-spin-container {
-					display: flex;
-				}
-
-				.ant-checkbox-wrapper {
-					margin-right: 8px;
-				}
-			}
-
-			.board-length {
-				display: inline-block;
-				height: 20px;
-				font-size: 14px;
-				text-align: center;
-				color: #888888;
-				line-height: 18px;
-				padding: 0 8px;
-				border-radius: 15px;
-				border: solid 1px #888888;
-				margin-left: 15px;
-			}
-
-			span {
-				font-size: 16px;
-				color: #000;
-			}
-
-			.board-control {
-				display: flex;
-				align-items: center;
-				margin-left: 5px;
-
-				.svg-inline--fa {
-					cursor: pointer;
-				}
-
-				.board-drodown {
-					background: #ffffff;
-					margin-left: 10px;
-				}
-			}
-		}
-
-		.addTask {
-			display: inline-block;
-			font-size: 14px;
-			color: #777171;
-			cursor: pointer;
-			padding: 0 6px;
-			margin-bottom: 15px;
-		}
-
-		.title {
-			padding: 8px;
-			transition: background-color ease 0.2s;
-			flex-grow: 1;
-			user-select: none;
-			position: relative;
-
-			&:focus {
-				outline: 2px solid #e6f7ff;
-				outline-offset: 2px;
-			}
-		}
-
-		.dropZone {
-			/* stop the list collapsing when empty */
-			// min-height: 250px;
-			height: 100%;
-
-			/*
-  not relying on the items for a margin-bottom
-  as it will collapse when the list is empty
-*/
-			// padding-bottom: 8px;
-		}
-
-		.wrapper {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			// padding: 8px;
-			border: 8px;
-			padding-bottom: 0;
-			transition: background-color 0.2s ease, opacity 0.1s ease;
-			user-select: none;
-			width: 290px;
-			height: 100%;
-			// background: #e6f7ff;
-		}
-
-		.scrollContainer {
-			overflow-x: hidden;
-			overflow-y: auto;
-			max-height: 250px;
-		}
-
-		.link-container {
-			border-radius: 2px;
-			min-height: 40px;
-			margin-bottom: 15px;
-			user-select: none;
-
-			/* anchor overrides */
-			color: #1f2021;
-
-			&:hover,
-			&:active {
-				//color: #afd3e4;
-				text-decoration: none;
-			}
-
-			&:focus {
-				outline: none;
-				// border-color: ${props => props.colors.hard};
-				box-shadow: none;
-			}
-
-			// &:last-child{
-			// 	margin-bottom: 0;
-			// }
-
-			/* flexbox */
-			display: flex;
-		}
-
-		.avatar {
-			width: 40px;
-			height: 40px;
-			border-radius: 50%;
-			margin-right: 8px;
-			flex-shrink: 0;
-			flex-grow: 0;
-		}
-
-		.cloneBadge {
-			background: #afd3e4;
-			bottom: 4px;
-			border: 2px solid #e6f7ff;
-			border-radius: 50%;
-			box-sizing: border-box;
-			font-size: 10px;
-			position: absolute;
-			right: -13px;
-			top: -13px;
-			transform: rotate(40deg);
-
-			height: 40px;
-			width: 40px;
-
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-
-		.link-content {
-			/* flex child */
-			width: 100%;
-			flex-grow: 1;
-
-			/*
-    Needed to wrap text in ie11
-    https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox
-  */
-			flex-basis: 100%;
-
-			/* flex parent */
-			display: flex;
-			flex-direction: column;
-		}
-
-		.blockQuote {
-			&::before {
-				content: open-quote;
-			}
-
-			&::after {
-				content: close-quote;
-			}
-		}
-
-		.footer {
-			display: flex;
-			margin-top: 8px;
-			align-items: center;
-		}
-
-		.author {
-			color: #333333;
-			flex-grow: 0;
-			margin: 0;
-			background-color: #eeeeee;
-			border-radius: 2px;
-			font-weight: normal;
-			padding: 4px;
-		}
-
-		.quoteId {
-			flex-grow: 1;
-			flex-shrink: 1;
-			margin: 0;
-			font-weight: normal;
-			text-overflow: ellipsis;
-			text-align: right;
-		}
-
-		.new-sub-doc {
-			width: 290px;
-			padding: 0;
-
-			.ant-form-item {
-				margin-bottom: 0;
-			}
-
-			.ant-spin-nested-loading {
-				margin: 4px 0 0 0;
-			}
-		}
-	}
+.board-column {
+	min-width: 290px;
+	margin: 8px;
+	display: flex;
+	flex-direction: column;
+
+	&:global(.action) {
+		opacity: 0.5;
+	}
+
+	:global {
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-top-left-radius: 2px;
+			border-top-right-radius: 2px;
+			background-color: #e6f7ff;
+			transition: background-color 0.2s ease;
+
+			&:hover {
+				background-color: #afd3e4;
+			}
+		}
+
+		.content-top {
+			width: 290px;
+			display: flex;
+			height: 50px;
+			line-height: 50px;
+			padding: 0 15px;
+			background: #ffffff;
+			margin-bottom: 15px;
+
+			.board-name {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				font-size: 16px;
+				color: #000000;
+				overflow: hidden;
+
+				.task-card-title {
+					height: 50px;
+					display: block;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					cursor: text;
+				}
+
+				.ant-spin-container {
+					display: flex;
+				}
+
+				.ant-checkbox-wrapper {
+					margin-right: 8px;
+				}
+			}
+
+			.board-length {
+				display: inline-block;
+				height: 20px;
+				font-size: 14px;
+				text-align: center;
+				color: #888888;
+				line-height: 18px;
+				padding: 0 8px;
+				border-radius: 15px;
+				border: solid 1px #888888;
+				margin-left: 15px;
+			}
+
+			span {
+				font-size: 16px;
+				color: #000;
+			}
+
+			.board-control {
+				display: flex;
+				align-items: center;
+				margin-left: 5px;
+
+				.svg-inline--fa {
+					cursor: pointer;
+				}
+
+				.board-drodown {
+					background: #ffffff;
+					margin-left: 10px;
+				}
+			}
+		}
+
+		.addTask {
+			display: inline-block;
+			font-size: 14px;
+			color: #777171;
+			cursor: pointer;
+			padding: 0 6px;
+			margin-bottom: 15px;
+		}
+
+		.title {
+			padding: 8px;
+			transition: background-color ease 0.2s;
+			flex-grow: 1;
+			user-select: none;
+			position: relative;
+
+			&:focus {
+				outline: 2px solid #e6f7ff;
+				outline-offset: 2px;
+			}
+		}
+
+		.dropZone {
+			/* stop the list collapsing when empty */
+			// min-height: 250px;
+			height: 100%;
+
+			/*
+  not relying on the items for a margin-bottom
+  as it will collapse when the list is empty
+*/
+			// padding-bottom: 8px;
+		}
+
+		.wrapper {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			// padding: 8px;
+			border: 8px;
+			padding-bottom: 0;
+			transition: background-color 0.2s ease, opacity 0.1s ease;
+			user-select: none;
+			width: 290px;
+			height: 100%;
+			// background: #e6f7ff;
+		}
+
+		.scrollContainer {
+			overflow-x: hidden;
+			overflow-y: auto;
+			max-height: 250px;
+		}
+
+		.link-container {
+			border-radius: 2px;
+			min-height: 40px;
+			margin-bottom: 15px;
+			user-select: none;
+
+			/* anchor overrides */
+			color: #1f2021;
+
+			&:hover,
+			&:active {
+				//color: #afd3e4;
+				text-decoration: none;
+			}
+
+			&:focus {
+				outline: none;
+				// border-color: ${props => props.colors.hard};
+				box-shadow: none;
+			}
+
+			// &:last-child{
+			// 	margin-bottom: 0;
+			// }
+
+			/* flexbox */
+			display: flex;
+		}
+
+		.avatar {
+			width: 40px;
+			height: 40px;
+			border-radius: 50%;
+			margin-right: 8px;
+			flex-shrink: 0;
+			flex-grow: 0;
+		}
+
+		.cloneBadge {
+			background: #afd3e4;
+			bottom: 4px;
+			border: 2px solid #e6f7ff;
+			border-radius: 50%;
+			box-sizing: border-box;
+			font-size: 10px;
+			position: absolute;
+			right: -13px;
+			top: -13px;
+			transform: rotate(40deg);
+
+			height: 40px;
+			width: 40px;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.link-content {
+			/* flex child */
+			width: 100%;
+			flex-grow: 1;
+
+			/*
+    Needed to wrap text in ie11
+    https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox
+  */
+			flex-basis: 100%;
+
+			/* flex parent */
+			display: flex;
+			flex-direction: column;
+		}
+
+		.blockQuote {
+			&::before {
+				content: open-quote;
+			}
+
+			&::after {
+				content: close-quote;
+			}
+		}
+
+		.footer {
+			display: flex;
+			margin-top: 8px;
+			align-items: center;
+		}
+
+		.author {
+			color: #333333;
+			flex-grow: 0;
+			margin: 0;
+			background-color: #eeeeee;
+			border-radius: 2px;
+			font-weight: normal;
+			padding: 4px;
+		}
+
+		.quoteId {
+			flex-grow: 1;
+			flex-shrink: 1;
+			margin: 0;
+			font-weight: normal;
+			text-overflow: ellipsis;
+			text-align: right;
+		}
+
+		.new-sub-doc {
+			width: 290px;
+			padding: 0;
+
+			.ant-form-item {
+				margin-bottom: 0;
+			}
+
+			.ant-spin-nested-loading {
+				margin: 4px 0 0 0;
+			}
+		}
+	}
 }