@seafile/sdoc-editor 1.0.219 → 1.0.221-alph-0.0.1

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/record-content.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _rowCardHeader = _interopRequireDefault(require("./row-card-header"));
+var _helpers = require("./helpers");
+var _rowCardItem = _interopRequireDefault(require("./row-card-item"));
+// 98: row-card-item height + margin top = 88 + 10 = 98
+const CARD_RECORD_ITEM_HEIGHT = 98;
+class RecordContent extends _react.Component {
+  constructor(_props) {
+    super(_props);
+    (0, _defineProperty2.default)(this, "initState", props => {
+      const {
+        rows
+      } = props;
+      this.recordItem = [];
+      this.currentDisplayRowMinIndex = 0;
+      this.currentDisplayRowMaxIndex = Math.floor((0 + this.recordsList.offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
+      const displayRows = rows.slice(0, this.shownLength);
+      const isHasMore = rows.length === this.shownLength;
+      this.setState({
+        displayRows,
+        isHasMore
+      });
+    });
+    (0, _defineProperty2.default)(this, "scrollToMore", e => {
+      e.stopPropagation();
+      const {
+        clientHeight,
+        scrollTop,
+        scrollHeight
+      } = this.recordsList;
+      this.currentDisplayRowMinIndex = Math.floor(scrollTop / CARD_RECORD_ITEM_HEIGHT);
+      this.currentDisplayRowMaxIndex = Math.floor(scrollHeight / CARD_RECORD_ITEM_HEIGHT);
+      const {
+        scrollLeft,
+        isHasMore
+      } = this.state;
+      if (scrollLeft >= 0) {
+        this.setItemScrollLeft(scrollLeft, -1);
+      }
+      if (!isHasMore || this.isLoadingMore) return;
+      if (clientHeight + scrollTop >= scrollHeight) {
+        const offset = this.shownLength;
+        this.isLoadingMore = true;
+        this.shownLength = offset + 10;
+        this.props.onLoadMore(offset);
+      }
+    });
+    (0, _defineProperty2.default)(this, "onRef", (ref, rowIdx) => {
+      this.recordItem[rowIdx] = ref;
+    });
+    (0, _defineProperty2.default)(this, "getCurrentDisplayRowMaxIndex", () => {
+      if (this.recordsList) {
+        this.currentDisplayRowMaxIndex = Math.floor((0 + this.recordsList.offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
+      }
+    });
+    (0, _defineProperty2.default)(this, "setScrollLeft", scrollLeft => {
+      this.setState({
+        scrollLeft
+      });
+    });
+    (0, _defineProperty2.default)(this, "setItemScrollLeft", (scrollLeft, currentRecordIdx) => {
+      const {
+        isShowRowCardHeader
+      } = this.props;
+      if (isShowRowCardHeader) this.rowCardHeaderRef.setHeaderScrollLeft(scrollLeft);
+      const start = window.isMobile ? 0 : this.currentDisplayRowMinIndex;
+      const end = window.isMobile ? this.recordItem.length : this.currentDisplayRowMaxIndex;
+      for (let i = start; i <= end; i++) {
+        if (i !== currentRecordIdx && this.recordItem[i]) {
+          let cardRecordScrollLeft = this.recordItem[i].getScrollLeft();
+          if (cardRecordScrollLeft !== scrollLeft) {
+            this.recordItem[i].setScrollLeft(scrollLeft);
+          }
+        }
+      }
+    });
+    (0, _defineProperty2.default)(this, "setRecordsListRef", ref => {
+      this.recordsList = ref;
+    });
+    this.state = {
+      isHasMore: false,
+      displayRows: [],
+      scrollLeft: 0
+    };
+    this.shownLength = 10;
+    this.recordsList = null;
+    this.recordsContainer = null;
+    this.recordItem = [];
+    this.currentDisplayRowMinIndex = 0;
+    this.currentDisplayRowMaxIndex = 0;
+    this.isLoadingMore = false;
+  }
+  componentDidMount() {
+    this.initState(this.props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      rows
+    } = nextProps;
+    if (this.shownLength === 10) {
+      this.isLoadingMore = false;
+      this.initState(nextProps);
+      return;
+    }
+    this.isLoadingMore = false;
+    const displayRows = rows.slice(0, this.shownLength);
+    const isHasMore = rows.length === this.shownLength;
+    this.setState({
+      displayRows,
+      isHasMore
+    });
+    if (this.props.isAdditionEditorView !== nextProps.isAdditionEditorView) {
+      this.recordsList.scrollTop = 0;
+    }
+  }
+  componentWillUnmount() {
+    this.recordsList = null;
+    this.recordsContainer = null;
+    this.recordItem = [];
+    this.currentDisplayRowMinIndex = 0;
+    this.currentDisplayRowMaxIndex = 0;
+  }
+  render() {
+    const {
+      table,
+      isAdditionEditorView,
+      highlightRowIndex,
+      noCardItemTip,
+      rowCardType,
+      columns,
+      renderedColumns,
+      unShowColumnKeyList,
+      showScrollBtn,
+      isShowRowCardHeader,
+      isShowRemoveCardItemBtn,
+      cardListClassName,
+      formulaRows,
+      createBtn,
+      cardHeaderClassName
+    } = this.props;
+    const {
+      displayRows,
+      scrollLeft
+    } = this.state;
+    const rowCardListClass = `row-card-list ${cardListClassName ? cardListClassName : ''}`;
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "row-card-container"
+    }, /*#__PURE__*/_react.default.createElement(_rowCardHeader.default, {
+      cardHeaderClassName: cardHeaderClassName,
+      setItemScrollLeft: this.setItemScrollLeft,
+      renderedColumns: renderedColumns,
+      getCurrentDisplayRowMaxIndex: this.getCurrentDisplayRowMaxIndex,
+      showScrollBtn: showScrollBtn,
+      scrollLeft: scrollLeft,
+      setScrollLeft: this.setScrollLeft,
+      ref: ref => this.rowCardHeaderRef = ref
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: rowCardListClass,
+      ref: this.setRecordsListRef,
+      onScroll: this.scrollToMore
+    }, displayRows.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "no-records-tips"
+    }, noCardItemTip), displayRows.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "row-card-content",
+      ref: ref => this.recordsContent = ref
+    }, displayRows.map((row, rowIdx) => {
+      const formulaRow = formulaRows && formulaRows[row._id] || {};
+      const displayRowName = (0, _helpers.getRowName)(table.columns, row);
+      return /*#__PURE__*/_react.default.createElement(_rowCardItem.default, {
+        key: `row-card-${rowIdx}`,
+        displayRowName: displayRowName,
+        setItemScrollLeft: this.setItemScrollLeft,
+        onRef: this.onRef,
+        rowCardType: rowCardType,
+        table: table,
+        row: row,
+        isAdditionEditorView: isAdditionEditorView,
+        isHighlightRow: highlightRowIndex === rowIdx,
+        formulaRow: formulaRow,
+        rowIdx: rowIdx,
+        columns: columns,
+        unShowColumnKeyList: unShowColumnKeyList,
+        isShowRemoveCardItemBtn: isShowRemoveCardItemBtn,
+        onSelectRow: this.props.onSelectRow,
+        onExpandRow: this.props.onExpandRow,
+        removeCardItem: this.props.removeCardItem
+      });
+    })))));
+  }
+}
+var _default = exports.default = RecordContent;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RecordItem;
+var _react = _interopRequireDefault(require("react"));
+var _dtableUtils = require("dtable-utils");
+var _formatter = _interopRequireDefault(require("../../../seatable-tables/formatter"));
+function RecordItem(_ref) {
+  let {
+    record,
+    formulaRow,
+    columns,
+    editor
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("tr", {
+    className: "seatable-view-body-column-row"
+  }, columns.map(column => {
+    const width = 100;
+    let cellValue = record[column.key];
+    if ([_dtableUtils.CellType.LINK, _dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.FORMULA].includes(column.type)) {
+      cellValue = formulaRow[column.key];
+    }
+    return /*#__PURE__*/_react.default.createElement("td", {
+      className: "seatable-view-body-column-cell",
+      key: record._id + '_' + column.key,
+      "data-record-id": record._id,
+      style: {
+        width,
+        minWidth: width
+      }
+    }, /*#__PURE__*/_react.default.createElement(_formatter.default, {
+      isSample: true,
+      column: column,
+      cellValue: cellValue,
+      collaborators: editor.collaborators
+    }));
+  }));
+}

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

@@ -0,0 +1,108 @@
+"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 _reactDom = _interopRequireDefault(require("react-dom"));
+var _classnames = _interopRequireDefault(require("classnames"));
+// import { EventTypes } from '../../lib/constants';
+// import ResizeHandle from '../../lib/third-support/resize-handle/ResizeHandle';
+
+class RowCardHeaderCell extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "getHeaderCellWidth", () => {
+      const {
+        column,
+        rowCardType,
+        table
+      } = this.props;
+      const {
+        key,
+        width
+      } = column;
+      let headerCellWidth = width;
+      if (rowCardType === 'link') {
+        const tableId = table._id;
+        const draggedCellId = `${tableId}-${key}`;
+        const existedWidth = JSON.parse(localStorage.getItem(draggedCellId));
+        if (existedWidth) {
+          headerCellWidth = existedWidth;
+        }
+      }
+      return headerCellWidth;
+    });
+    (0, _defineProperty2.default)(this, "onDrag", e => {
+      const headerCellWidth = this.getWidthFromMouseEvent(e);
+      this.setState({
+        headerCellWidth
+      });
+    });
+    (0, _defineProperty2.default)(this, "onDragStart", e => {
+      this.setState({
+        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, "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) {
+        right = 0;
+      }
+      const left = _reactDom.default.findDOMNode(this.headerCell).getBoundingClientRect().left;
+      // add 5px is ResizeHandle component DOM width, and the draggable column minimum width is 50px
+      return Math.max(right - left + 5, 50);
+    });
+    this.state = {
+      resizing: false,
+      headerCellWidth: this.getHeaderCellWidth(),
+      isDraggable: props.rowCardType === 'link'
+    };
+  }
+  render() {
+    const {
+      column
+    } = this.props;
+    const {
+      headerCellWidth,
+      resizing,
+      isDraggable
+    } = this.state;
+    const {
+      name,
+      key
+    } = column;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('row-card-column-name text-truncate position-relative', {
+        'row-card-column--resizing': resizing
+      }, {
+        'row-card-draggable': isDraggable
+      })
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.headerCell = ref,
+      className: "row-card-column-name-item position-relative",
+      style: {
+        width: headerCellWidth
+      },
+      key: key,
+      title: name
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      title: name
+    }, name)));
+  }
+}
+var _default = exports.default = RowCardHeaderCell;

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

@@ -0,0 +1,143 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _rowCardHeaderCell = _interopRequireDefault(require("./row-card-header-cell"));
+class RowCardHeader extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onScrollControlClick", type => {
+      const tablesNav = this.linkRecordsHeader;
+      const {
+        offsetWidth,
+        scrollWidth,
+        scrollLeft
+      } = tablesNav;
+      let targetScrollLeft;
+      if (type === 'prev') {
+        if (scrollLeft === 0) {
+          return;
+        }
+        targetScrollLeft = scrollLeft - offsetWidth;
+        targetScrollLeft = targetScrollLeft > 0 ? targetScrollLeft : 0;
+      }
+      if (type === 'next') {
+        if (scrollLeft + offsetWidth === scrollWidth) {
+          return;
+        }
+        targetScrollLeft = scrollLeft + offsetWidth;
+        targetScrollLeft = targetScrollLeft > scrollWidth - offsetWidth ? scrollWidth - offsetWidth : targetScrollLeft;
+      }
+      if (this.state.canCardHeaderScroll) {
+        this.setState({
+          canCardHeaderScroll: false
+        });
+        let timer = null;
+        let step = (targetScrollLeft - scrollLeft) / 10;
+        step = step > 0 ? Math.ceil(step) : Math.floor(step);
+        timer = setInterval(() => {
+          tablesNav.scrollLeft = tablesNav.scrollLeft + step;
+          if (Math.abs(targetScrollLeft - tablesNav.scrollLeft) <= Math.abs(step)) {
+            tablesNav.scrollLeft = targetScrollLeft;
+            clearInterval(timer);
+            this.setState({
+              canCardHeaderScroll: true
+            });
+          }
+        }, 30);
+      }
+    });
+    (0, _defineProperty2.default)(this, "onScrollHeader", () => {
+      let {
+        scrollLeft
+      } = this.linkRecordsHeader;
+      this.props.setItemScrollLeft(scrollLeft, -1);
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(() => {
+        this.props.setScrollLeft(scrollLeft);
+      }, 60);
+    });
+    (0, _defineProperty2.default)(this, "setHeaderScrollLeft", scrollLeft => {
+      this.linkRecordsHeader.scrollLeft = scrollLeft;
+    });
+    (0, _defineProperty2.default)(this, "getCardHeaderCells", () => {
+      const cardHeaderCells = [];
+      const {
+        renderedColumns,
+        rowCardType,
+        table
+      } = this.props;
+      for (let i = 0; i < renderedColumns.length; i++) {
+        const renderedColumn = renderedColumns[i];
+        cardHeaderCells.push( /*#__PURE__*/_react.default.createElement(_rowCardHeaderCell.default, {
+          key: renderedColumn.key,
+          column: renderedColumn,
+          rowCardType: rowCardType,
+          table: table
+        }));
+      }
+      return cardHeaderCells;
+    });
+    this.state = {
+      canCardHeaderScroll: true,
+      linkRecordsNavScrollWidth: 0,
+      linkRecordsNavWidth: 0
+    };
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      offsetWidth,
+      scrollWidth
+    } = this.linkRecordsHeader;
+    if (prevState.linkRecordsNavScrollWidth !== scrollWidth || prevState.linkRecordsNavWidth !== offsetWidth) {
+      this.props.getCurrentDisplayRowMaxIndex();
+      this.setState({
+        linkRecordsNavScrollWidth: scrollWidth,
+        linkRecordsNavWidth: offsetWidth
+      });
+    }
+  }
+  render() {
+    const {
+      showScrollBtn,
+      scrollLeft,
+      cardHeaderClassName
+    } = this.props;
+    const {
+      linkRecordsNavWidth,
+      linkRecordsNavScrollWidth
+    } = this.state;
+    const cardHeaderCells = this.getCardHeaderCells();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: `row-card-header ${cardHeaderClassName ? cardHeaderClassName : ''}`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "row-card-column-names records-column-names",
+      ref: ref => this.recordItemRef = ref
+    }, showScrollBtn && /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('dtable-font', 'dtable-icon-left', 'row-card-scroll', 'link-scroll-prev', {
+        'scroll-active': scrollLeft > 0
+      }),
+      onClick: this.onScrollControlClick.bind(this, 'prev')
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "row-card-columns-container",
+      onScroll: this.onScrollHeader,
+      ref: ref => this.linkRecordsHeader = ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-inline-flex"
+    }, cardHeaderCells)), showScrollBtn && /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('dtable-font', 'dtable-icon-right', 'row-card-scroll', 'link-scroll-next', {
+        'scroll-active': scrollLeft + linkRecordsNavWidth < linkRecordsNavScrollWidth
+      }),
+      onClick: this.onScrollControlClick.bind(this, 'next')
+    })));
+  }
+}
+var _default = exports.default = RowCardHeader;