@seafile/sdoc-editor 2.0.18-alph-0.0.4 → 2.0.18-alph-0.0.6

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/resize-handle/ResizeHandle.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _draggable = _interopRequireDefault(require("../../../../seatable-tables/draggable"));
+require("./index.css");
+const style = {
+  position: 'absolute',
+  top: 0,
+  width: 5,
+  borderRadius: '3px',
+  margin: '3px 0',
+  height: '80%'
+};
+class ResizeHandle extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "setResizeHandleLeft", left => {
+      this.draggable.setDraggableLeft(left);
+    });
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_draggable.default, Object.assign({}, this.props, {
+      ref: ref => this.draggable = ref,
+      className: "react-grid-HeaderCell__resizeHandle",
+      style: {
+        ...this.props.style,
+        ...style
+      }
+    }));
+  }
+}
+var _default = exports.default = ResizeHandle;

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/resize-handle/index.css

@@ -0,0 +1,384 @@
+.react-grid-Header {
+  background: #f9f9f9;
+}
+
+.react-grid-Header--resizing {
+  cursor: ew-resize;
+}
+
+.react-grid-HeaderRow {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+  justify-content: space-between;
+}
+
+.dtable-header-setting {
+  height: 100%;
+  width: 30px;
+  float: right;
+  display: flex;
+  align-items: center;
+  color: #666666;
+}
+
+.dtable-header-setting::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.dtable-header-setting:hover {
+  color: #444;
+  cursor: pointer;
+}
+
+.dtable-header-setting-submenu .dtable-dropdown-menu {
+  top: -12px !important;
+  left: -10px !important;
+}
+
+.dtable-dropdown-menu .dtable-header-setting-submenu:hover .dtable-dropdown-menu .item-icon {
+  color: #8c8c8c;
+}
+
+.dtable-dropdown-menu .dtable-header-setting-submenu:hover .dropdown-item:hover .item-icon {
+  color: #fff;
+}
+
+.react-grid-HeaderCell {
+  user-select: none;
+  background: #f9f9f9;
+  padding: 8px;
+  font-weight: normal;
+  border-right: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
+  font-size: 14px;
+}
+
+.react-grid-HeaderCell.rdg-row-actions-cell {
+  z-index: 3;
+}
+
+.react-grid-HeaderCell__value {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.react-grid-HeaderCell__resizeHandle {
+  cursor: ew-resize;
+}
+
+.react-grid-HeaderCell__resizeHandle:hover {
+  background: #dddddd;
+}
+
+.react-grid-HeaderCell--frozen:last-of-type {
+  box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
+}
+
+.react-grid-HeaderCell--resizing .react-grid-HeaderCell__resizeHandle {
+  background: #dddddd;
+}
+
+.react-grid-HeaderCell__draggable {
+  cursor: col-resize;
+}
+
+.react-grid-HeaderCell__draggable:hover {
+  background-color: #2d7ff9;
+}
+
+.rdg-can-drop > .react-grid-HeaderCell {
+  background: #ececec;
+}
+
+.react-grid-HeaderCell .Select {
+  max-height: 30px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.react-grid-HeaderCell .Select-control {
+  max-height: 30px;
+  border: 1px solid #cccccc;
+  color: #555;
+  border-radius: 3px;
+}
+
+.react-grid-HeaderCell .is-focused:not(.is-open) > .Select-control {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+
+.react-grid-HeaderCell .Select-control .Select-placeholder {
+  line-height: 20px;
+  color: #999;
+  padding: 4px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-input {
+  max-height: 28px;
+  padding: 4px;
+  margin-left: 0px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-input input {
+  padding: 0px;
+  height: 100%;
+}
+
+.react-grid-HeaderCell .Select-control .Select-arrow-zone .Select-arrow {
+  border-color: gray transparent transparent;
+  border-width: 4px 4px 2.5px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-value {
+  padding: 4px;
+  line-height: 20px !important;
+}
+
+.react-grid-HeaderCell .Select--multi .Select-control .Select-value {
+  padding: 0px;
+  line-height: 16px !important;
+  max-height: 20px;
+}
+
+.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-icon {
+  max-height: 20px;
+}
+
+.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-label {
+  max-height: 20px;
+}
+
+.react-grid-HeaderCell .Select-control .Select-value .Select-value-label {
+  color: #555555 !important;
+}
+
+.react-grid-HeaderCell .Select-menu-outer {
+  z-index: 2;
+}
+
+.react-grid-HeaderCell .Select-menu-outer .Select-option {
+  padding: 4px;
+  line-height: 20px;
+}
+
+.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-selected {
+  color: #555555;
+}
+
+.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-focused {
+  color: #555555;
+}
+
+/* custom */
+.header-cell-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.header-cell-container > div {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 30px;
+}
+
+.header-cell-container .header-cell-left {
+  width: calc(100% - 20px);
+  display: flex;
+}
+
+.header-cell-container .header-uneditable-cell-left {
+  width: calc(100% - 34px);
+}
+
+.header-cell-container .header-uneditable-description-cell-left {
+  width: calc(100% - 50px);
+}
+
+.header-cell-container .dtable-dropdown-menu {
+  width: 20px;
+  padding: 0 5px;
+}
+
+.header-icon {
+  display: inline-block;
+  padding: 0 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.header-cell-container .header-icon {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon:hover {
+  cursor: default;
+}
+
+.header-icon .dtable-font {
+  font-size: 14px;
+  color: #aaa;
+  cursor: default;
+}
+
+.header-icon .dtable-font.dtable-icon-use-help {
+  color: #bdbdbd;
+}
+
+.header-icon .dtable-font.dtable-icon-use-help:hover {
+  color: #888;
+}
+
+.bs-tooltip-bottom .arrow::before,
+.bs-tooltip-auto[x-placement^='bottom'] .arrow::before {
+  border-bottom-color: #303133;
+}
+
+.bs-tooltip-auto[x-placement^='right'] .arrow::before {
+  border-right-color: #303133;
+}
+
+.bs-tooltip-auto[x-placement^='left'] .arrow::before {
+  border-left-color: #303133;
+}
+
+.tooltip-inner {
+  max-width: 242px;
+  font-weight: lighter;
+  text-align: start;
+  background-color: #303133;
+}
+
+.help-icon-tooltip-inner {
+  position: relative;
+  overflow: hidden;
+}
+
+.help-icon-tooltip-btn {
+  float: right;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.help-icon-tooltip-btn:hover {
+  color: rgba(255, 255, 255, 1);
+}
+
+.expand-row-icon {
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+.expand-row-icon .dtable-font {
+  font-size: 14px;
+  color: #535354;
+}
+
+.header-name {
+  margin-left: 3px;
+  overflow: hidden;
+}
+
+.header-cell-container .header-name {
+  align-items: center;
+}
+
+.header-dropdown {
+  position: unset;
+  display: inline-block;
+  margin-left: auto;
+  z-index: 1;
+  cursor: pointer !important;
+}
+
+.header-dropdown:hover {
+  cursor: pointer;
+}
+
+.header-dropdown > span {
+  display: inline-block;
+  padding: 0 6px;
+}
+
+.header-dropdown .dtable-icon-drop-down {
+  display: inline-block;
+  font-size: 12px;
+  color: #999;
+  transform: scale(0.8);
+  transition: all 0.1s;
+}
+
+.header-dropdown:hover .dtable-icon-drop-down {
+  color: #aaa;
+}
+
+.header-dropdown .dropdown-item:hover {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.dtable-dropdown-menu .header-dropdown .grid-header-dropdown-item {
+  padding: 0 1rem !important;
+}
+
+.header-dropdown .grid-header-dropdown-item .item-icon {
+  line-height: 32px;
+}
+
+.dtable-dropdown-menu .grid-header-dropdown-item.formula-date-format-item {
+  padding-left: 15px;
+}
+
+.react-grid-HeaderCell.add-column-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.react-grid-HeaderCell.add-column-icon .dtable-font {
+  font-size: 15px;
+}
+
+.react-grid-HeaderCell-default .header-cell-container .widget-HeaderCell__value {
+  line-height: 24px;
+}
+
+.react-grid-HeaderCell-default .header-name .header-name-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.react-grid-HeaderCell-double .header-cell-container .header-cell-left {
+  height: 100%;
+}
+
+.react-grid-HeaderCell-double .header-name .header-name-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: initial;
+  max-height: 46px;
+  height: fit-content;
+}

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/row-card-header-cell.js

@@ -9,9 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _classnames = _interopRequireDefault(require("classnames"));
-// import { EventTypes } from '../../lib/constants';
-// import ResizeHandle from '../../lib/third-support/resize-handle/ResizeHandle';
-
+var _ResizeHandle = _interopRequireDefault(require("./resize-handle/ResizeHandle"));
+var _constants = require("../../../../../../constants");
 class RowCardHeaderCell extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -47,17 +46,30 @@ class RowCardHeaderCell extends _react.default.Component {
         resizing: true
       });
     });
-    // onDragEnd = (e) => {
-    //   const { column, table } = this.props;
-    //   const columnKey = column.key;
-    //   const { _id: tableId } = table;
-    //   const draggedCellId = `${tableId}-${columnKey}`;
-    //   let width = this.getWidthFromMouseEvent(e);
-    //   this.setState({ resizing: false });
-    //   const { eventBus } = window.app;
-    //   eventBus.dispatch(EventTypes.CHANGE_HEADER_WIDTH, { id: draggedCellId, width });
-    //   localStorage.setItem(draggedCellId, width);
-    // };
+    (0, _defineProperty2.default)(this, "onDragEnd", e => {
+      const {
+        column,
+        table
+      } = this.props;
+      const columnKey = column.key;
+      const {
+        _id: tableId
+      } = table;
+      const draggedCellId = `${tableId}-${columnKey}`;
+      let width = this.getWidthFromMouseEvent(e);
+      width = 100;
+      this.setState({
+        resizing: false
+      });
+      const {
+        eventBus
+      } = window.app;
+      eventBus.dispatch(_constants.EXTERNAL_EVENT.CHANGE_HEADER_WIDTH, {
+        id: draggedCellId,
+        width
+      });
+      localStorage.setItem(draggedCellId, width);
+    });
     (0, _defineProperty2.default)(this, "getWidthFromMouseEvent", e => {
       let right = e.pageX || e.touches && e.touches[0] && e.touches[0].pageX || e.changedTouches && e.changedTouches[e.changedTouches.length - 1].pageX;
       if (e.pageX === 0) {
@@ -102,7 +114,14 @@ class RowCardHeaderCell extends _react.default.Component {
       title: name
     }, /*#__PURE__*/_react.default.createElement("span", {
       title: name
-    }, name)));
+    }, name)), isDraggable && /*#__PURE__*/_react.default.createElement(_ResizeHandle.default, {
+      style: {
+        right: 0
+      },
+      onDrag: this.onDrag,
+      onDragStart: this.onDragStart,
+      onDragEnd: this.onDragEnd
+    }));
   }
 }
 var _default = exports.default = RowCardHeaderCell;

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/row-card-item.js

@@ -10,12 +10,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 var _react = _interopRequireWildcard(require("react"));
 var _dtableStore = require("dtable-store");
 var _reactI18next = require("react-i18next");
-var _classnames = _interopRequireDefault(require("classnames"));
-// import { getFormattedCell, getRowRecord } from '../../utils/row-record-utils';
-// import Highlighter from '../highlighter';
-// import LinkContent from '../../lib/formatters/widgets/link-content';
-// import { EventTypes } from '../../lib/constants';
-
+var _helpers = require("./helpers");
+var _linkContent = _interopRequireDefault(require("./link-content"));
+var _constants = require("../../../../../../constants");
 const EMPTY_LINK = /*#__PURE__*/_react.default.createElement("span", {
   className: "row-cell-value-empty"
 });
@@ -27,59 +24,21 @@ class RowCardItem extends _react.PureComponent {
         draggedCell
       });
     });
-    (0, _defineProperty2.default)(this, "onSelectRow", e => {
-      const {
-        rowCardType,
-        isAdditionEditorView,
+    (0, _defineProperty2.default)(this, "getRowRecord", () => {
+      let {
         row,
+        columns,
         table,
-        closeSelect,
-        onSelectRow,
-        onExpandRow
+        rowCardType,
+        unShowColumnKeyList,
+        matchResult
       } = this.props;
-
-      // 1. row card opened by other module(statistic, search)
-      if (rowCardType !== 'link') {
-        window.app.expandRow(row, table);
-        return;
-      }
-
-      // 2. row card opened by link module
-      // 2.1 mobile
-      if (window.isMobile) {
-        // add link
-        if (isAdditionEditorView) {
-          onSelectRow && onSelectRow(row);
-        } else {
-          // preview link
-          if (!row._deleted && onExpandRow) {
-            onExpandRow(row, table);
-          }
-        }
-        return;
-      }
-
-      // 2.2 pc: add link | preview link
-      const expandedRowPosition = e.target.getBoundingClientRect();
-      window.app.setExpandRowPosition(expandedRowPosition);
-      closeSelect && closeSelect();
-      // add link
-      if (isAdditionEditorView) {
-        e.nativeEvent.stopImmediatePropagation();
-        e.stopPropagation();
-        onSelectRow && onSelectRow(row, e);
-        return;
+      let {
+        _id: tableId
+      } = table;
+      if (rowCardType === 'search') {
+        return (0, _helpers.getRowRecord)(tableId, row, columns, unShowColumnKeyList, matchResult);
       }
-      // preview link
-      if (row._deleted) return; // the linked row has been deleted, can not be expand row's detail
-      onExpandRow && onExpandRow(row, table);
-    });
-    (0, _defineProperty2.default)(this, "getRowRecord", () => {
-      // let { row, table, columns, rowCardType, unShowColumnKeyList, matchResult } = this.props;
-      // let { _id: tableId } = table;
-      // if (rowCardType === 'search') {
-      // return getRowRecord(tableId, row, columns, unShowColumnKeyList, matchResult);
-      // }
       return this.linkRowRecord();
     });
     (0, _defineProperty2.default)(this, "linkRowRecord", () => {
@@ -135,22 +94,19 @@ class RowCardItem extends _react.PureComponent {
             className: "links-formatter"
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: "formatter-show"
-          })));
+          }, /*#__PURE__*/_react.default.createElement(_linkContent.default, {
+            key: `link-formatter-${row._id}-${key}`,
+            linkedColumn: linkedColumn,
+            computedValue: formulaRow[key],
+            Empty: EMPTY_LINK
+          }))));
         }
-        return null;
-        // return getFormattedCell(column, row, { formulaRow, tableId }, columnWidth, isShowColumnName);
+        return (0, _helpers.getFormattedCell)(column, row, {
+          formulaRow,
+          tableId
+        }, columnWidth, isShowColumnName);
       });
     });
-    (0, _defineProperty2.default)(this, "removeCardItem", e => {
-      e.stopPropagation();
-      let {
-        row,
-        removeCardItem,
-        closeSelect
-      } = this.props;
-      closeSelect && closeSelect();
-      removeCardItem && removeCardItem(row._id);
-    });
     (0, _defineProperty2.default)(this, "changeScroll", event => {
       event.stopPropagation();
       const {
@@ -174,7 +130,8 @@ class RowCardItem extends _react.PureComponent {
       this.cardRecordsItemRef = ref;
     });
     this.state = {
-      draggedCell: {}
+      draggedCell: {},
+      isShowTick: false
     };
   }
   componentDidMount() {
@@ -183,11 +140,13 @@ class RowCardItem extends _react.PureComponent {
       onRef
     } = this.props;
     onRef && onRef(this, rowIdx);
-    // const { eventBus } = window.app;
-    // this.unsubscribeChangeHeaderWidth = eventBus.subscribe(EventTypes.CHANGE_HEADER_WIDTH, this.setDraggedCell);
+    const {
+      eventBus
+    } = window.app;
+    this.unsubscribeChangeHeaderWidth = eventBus.subscribe(_constants.EXTERNAL_EVENT.CHANGE_HEADER_WIDTH, this.setDraggedCell);
   }
   componentWillUnmount() {
-    // this.unsubscribeChangeHeaderWidth();
+    this.unsubscribeChangeHeaderWidth();
   }
   UNSAFE_componentWillUpdate(nextProps) {
     const {
@@ -199,30 +158,24 @@ class RowCardItem extends _react.PureComponent {
     const {
       row,
       t,
-      matchResult,
-      isShowRemoveCardItemBtn,
+      isSelected,
+      onRowClick,
       displayRowName
     } = this.props;
-    const cardItemClass = (0, _classnames.default)('row-card-item', {
-      'row-card-item-highlight': this.props.isHighlightRow
-    });
     return /*#__PURE__*/_react.default.createElement("div", {
       tabIndex: 0,
       "aria-label": displayRowName,
-      className: cardItemClass,
-      onClick: this.onSelectRow
+      className: "row-card-item",
+      onClick: onRowClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "row-card-item-container"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "row-card-item-header"
-    }, row.isShowTick && /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "row-card-item-name seatable-row-card-name"
+    }, displayRowName), isSelected && /*#__PURE__*/_react.default.createElement("span", {
       className: "row-card-item-check dtable-font dtable-icon-check-circle"
-    }), isShowRemoveCardItemBtn && /*#__PURE__*/_react.default.createElement("span", {
-      className: "row-card-item-remove d-print-none",
-      onClick: this.removeCardItem
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "row-card-remove-icon dtable-font dtable-icon-x-"
-    }))), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/_react.default.createElement("div", {
       className: "row-card-item-content",
       onScroll: this.changeScroll,
       ref: this.setCardRecordsItemRef
@@ -237,4 +190,4 @@ RowCardItem.defaultProps = {
   isShowColumnName: false,
   unShowColumnKeyList: ['0000']
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('dtable')(RowCardItem);
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(RowCardItem);