@seafile/sdoc-editor 2.0.60 → 2.0.61

package/dist/basic-sdk/extension/plugins/seatable-column/model.js

@@ -11,7 +11,8 @@ class Column {
     this.children = [(0, _core.generateDefaultText)()];
     this.data = {
       key: option.value,
-      name: option.label
+      name: option.label,
+      icon_class: option.iconClass
     };
   }
 }

package/dist/basic-sdk/extension/plugins/seatable-column/render-elem.css

@@ -0,0 +1,36 @@
+.sdoc-seatable-column-label-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: fit-content;
+  max-width: 250px;
+}
+
+.sdoc-seatable-column-label-container .label-container {
+  height: 36px;
+  width: 100%;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-seatable-column-label-container .label-container .control-icon {
+  cursor: default;
+  margin-right: 5px;
+  flex-shrink: 0;
+  font-size: 12px;
+  color: #444;
+}
+
+.sdoc-seatable-column-label-container .label-container .control-label {
+  white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    font-size: 14px;
+}

package/dist/basic-sdk/extension/plugins/seatable-column/render-elem.js

@@ -9,6 +9,10 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("@seafile/slate-react");
 var _mdToHtml = _interopRequireDefault(require("../../../../slate-convert/md-to-html"));
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _utils = require("../../utils");
+var _commons = require("../../commons");
+require("./render-elem.css");
 const Column = _ref => {
   let {
     props,
@@ -20,7 +24,13 @@ const Column = _ref => {
     children
   } = props;
   const isReadOnly = (0, _slateReact.useReadOnly)();
-  const isSelected = (0, _slateReact.useSelected)();
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const seaTableColumnRef = (0, _react.useRef)(null);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({
+    top: '',
+    left: ''
+  });
+  const [isShowLabel, setIsShowLabel] = (0, _react.useState)(false);
   const [columnValue, setColumnValue] = (0, _react.useState)('');
   const data = element.data || {};
   const {
@@ -49,14 +59,24 @@ const Column = _ref => {
       });
     }
   }, [editor, element.data, isLongTextColumn, editor.currentRowIdx]);
-  const [isClicked, setIsClicked] = (0, _react.useState)(false);
+  const handleScroll = (0, _react.useCallback)(e => {
+    if (isReadOnly) return;
+    if (e.currentTarget.scrollTop) {
+      const menuPosition = (0, _utils.getMenuPosition)(seaTableColumnRef.current, editor);
+      setMenuPosition(menuPosition);
+    }
+  }, [editor, isReadOnly]);
   (0, _react.useEffect)(() => {
-    if (isSelected && !isReadOnly) {
-      setIsClicked(true);
-    } else {
-      setIsClicked(false);
+    if (isReadOnly) return;
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
     }
-  }, [isSelected, isReadOnly]);
+    return () => {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, isReadOnly, scrollRef]);
   const {
     font_size = null,
     font = null,
@@ -72,8 +92,8 @@ const Column = _ref => {
     border: '1px solid transparent',
     userSelect: 'none',
     display: 'inline-block',
-    ...(isClicked && {
-      border: '1px solid red'
+    ...(isShowLabel && {
+      border: '1px solid #007bff'
     }),
     ...(font_size && {
       fontSize: font_size
@@ -100,16 +120,60 @@ const Column = _ref => {
       textDecoration: 'line-through'
     })
   };
+  const onColumnClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    if (isReadOnly || isShowLabel) return;
+    const {
+      top,
+      left
+    } = seaTableColumnRef.current.getBoundingClientRect();
+    const menuTop = top - 42; // top = top distance - menu height
+    const newMenuPosition = {
+      top: menuTop,
+      left: left // left = callout left distance
+    };
+    // 201 is distance with browser top
+    if (menuTop <= 201) {
+      newMenuPosition['display'] = 'none';
+    }
+    setMenuPosition(newMenuPosition);
+    setIsShowLabel(true);
+  }, [isReadOnly, isShowLabel]);
+  (0, _react.useEffect)(() => {
+    const onHideColumnLabel = event => {
+      if (seaTableColumnRef.current && !seaTableColumnRef.current.contains(event.target)) {
+        setIsShowLabel(false);
+      }
+    };
+    document.addEventListener('click', onHideColumnLabel, true);
+    return () => {
+      document.removeEventListener('click', onHideColumnLabel, true);
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
-    style: style
-  }), !isLongTextColumn && columnValue, isLongTextColumn && /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    ref: seaTableColumnRef,
+    onClick: onColumnClick
+  }), /*#__PURE__*/_react.default.createElement("span", null, !isLongTextColumn && columnValue, isLongTextColumn && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       padding: '10px'
     },
     dangerouslySetInnerHTML: {
       __html: columnValue
     }
-  }), children);
+  }), children), isShowLabel && /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-seatable-column-label-container",
+    style: menuPosition,
+    contentEditable: false,
+    "data-slate-node": null,
+    "data-slate-editor": false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "label-container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: `control-icon ${data.icon_class}`
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "control-label"
+  }, data.name)))));
 };
 const renderColumn = (props, editor) => {
   return /*#__PURE__*/_react.default.createElement(Column, {

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/index.css

@@ -21,7 +21,7 @@
 }
 
 .seatable-view-container.selected {
-  box-shadow: 0 0 0 2px #0aba45;
+  box-shadow: 0 0 0 2px #007bff;
 }
 
 .seatable-view-container .seatable-view-records {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.60",
+  "version": "2.0.61",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",