@seafile/sdoc-editor 2.0.16 → 2.0.18-alph-0.0.1

package/dist/basic-sdk/assets/css/dropdown-menu.css

@@ -6,9 +6,10 @@
 .sdoc-dropdown-menu .sdoc-seatable-selected-table-list-wrapper {
   position: absolute;
   background-color: #ffff;
-  max-height: 300px;
+  max-height: 370px;
   max-width: 200px;
   padding: 8px 0px;
+  left: -8px;
 }
 
 .sdoc-dropdown-menu .sdoc-seatable-selected-table-list-wrapper .sdoc-seatable-list-search-wrapper {
@@ -21,7 +22,7 @@
 }
 
 .sdoc-dropdown-menu .sdoc-seatable-selected-table-list-wrapper .sdoc-seatable-list-wrapper {
-  max-height: 230px;
+  max-height: 300px;
   overflow-y: auto;
 }
 

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -24,6 +24,7 @@ var _index5 = require("../../plugins/video/constants/index.js");
 var _constants3 = require("../../../../basic-sdk/constants");
 var _index6 = _interopRequireDefault(require("../../plugins/ai/ai-module/index.js"));
 var _index7 = _interopRequireDefault(require("../../plugins/video/dialog/add-video-link-dialog/index.js"));
+var _index8 = _interopRequireDefault(require("../../plugins/seatable-row/dialog/add-seatable-row-dialog/index.js"));
 const InsertElementDialog = _ref => {
   let {
     editor
@@ -37,6 +38,7 @@ const InsertElementDialog = _ref => {
   const [validEditor, setValidEditor] = (0, _react.useState)(editor);
   const [linkTitle, setLinkTitle] = (0, _react.useState)('');
   const [handleSubmit, setHandleSubmit] = (0, _react.useState)(() => void 0);
+  const [data, setData] = (0, _react.useState)({});
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
@@ -96,7 +98,8 @@ const InsertElementDialog = _ref => {
       editor: paramEditor,
       linkTitle,
       // link shortcut wrapping link
-      handleSubmit
+      handleSubmit,
+      data
     } = _ref2;
     setInsertPosition(insertPosition);
     setSlateNode(slateNode);
@@ -113,6 +116,7 @@ const InsertElementDialog = _ref => {
     setHandleSubmit(handleSubmit);
     // Apply for comment editor, as it has a different editor instance
     setValidEditor(paramEditor || editor);
+    setData(data);
     if (type === _constants2.LOCAL_IMAGE) {
       setTimeout(() => {
         uploadLocalImageInputRef.current && uploadLocalImageInputRef.current.click();
@@ -133,6 +137,7 @@ const InsertElementDialog = _ref => {
     setInsertVideoCallback(null);
     setValidEditor(null);
     setLinkTitle('');
+    setData('');
   }, []);
   const props = {
     insertPosition,
@@ -141,7 +146,8 @@ const InsertElementDialog = _ref => {
     element,
     closeDialog,
     linkTitle,
-    handleSubmit
+    handleSubmit,
+    data
   };
   switch (dialogType) {
     case _constants2.ELEMENT_TYPE.TABLE:
@@ -240,6 +246,10 @@ const InsertElementDialog = _ref => {
           closeModule: closeDialog
         });
       }
+    case _constants2.ELEMENT_TYPE.SEATABLE_ROW:
+      {
+        return /*#__PURE__*/_react.default.createElement(_index8.default, props);
+      }
     default:
       {
         return null;

package/dist/basic-sdk/extension/constants/element-type.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_ROW = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -44,6 +44,7 @@ const FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK_INSET_INPUT_TEMP = 'file_li
 const QUICK_INSERT = exports.QUICK_INSERT = 'quick_insert';
 const VIDEO_LINK = exports.VIDEO_LINK = 'video_link';
 const SEATABLE_COLUMN = exports.SEATABLE_COLUMN = 'seatable_column';
+const SEATABLE_ROW = exports.SEATABLE_ROW = 'seatable_row';
 const SEATABLE_TABLE = exports.SEATABLE_TABLE = 'seatable_table';
 const ASK_AI = exports.ASK_AI = 'ask_ai';
 

package/dist/basic-sdk/extension/constants/index.js

@@ -344,6 +344,12 @@ Object.defineProperty(exports, "SEATABLE_COLUMN", {
     return _elementType.SEATABLE_COLUMN;
   }
 });
+Object.defineProperty(exports, "SEATABLE_ROW", {
+  enumerable: true,
+  get: function () {
+    return _elementType.SEATABLE_ROW;
+  }
+});
 Object.defineProperty(exports, "SEATABLE_TABLE", {
   enumerable: true,
   get: function () {
@@ -537,7 +543,7 @@ const FILE_TYPE = exports.FILE_TYPE = {
   [_elementType.SDOC_LINK]: 'sdoc',
   [_elementType.VIDEO]: 'video'
 };
-const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.MULTI_COLUMN];
+const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.MULTI_COLUMN, _elementType.SEATABLE_ROW];
 const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [_elementType.PARAGRAPH]: [_elementType.CALL_OUT],
   [_elementType.TITLE]: [_elementType.CALL_OUT],
@@ -555,4 +561,4 @@ const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP =
   [_elementType.HEADER6]: [_elementType.CALL_OUT],
   [_elementType.CALL_OUT]: [_elementType.CALL_OUT]
 };
-const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE];
+const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.SEATABLE_ROW];

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -223,6 +223,11 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-find-replace',
     text: 'Search_and_replace'
   },
+  [_elementType.SEATABLE_ROW]: {
+    id: `sdoc_${_elementType.SEATABLE_ROW}`,
+    iconClass: 'sdocfont sdoc-seatable-row',
+    text: 'SeaTable_row'
+  },
   [_elementType.SEATABLE_COLUMN]: {
     id: `sdoc_${_elementType.SEATABLE_COLUMN}`,
     iconClass: 'sdocfont sdoc-choose-column',

package/dist/basic-sdk/extension/plugins/index.js

@@ -119,6 +119,12 @@ Object.defineProperty(exports, "SeaTableColumnPlugin", {
     return _seatableColumn.default;
   }
 });
+Object.defineProperty(exports, "SeaTableRowPlugin", {
+  enumerable: true,
+  get: function () {
+    return _seatableRow.default;
+  }
+});
 Object.defineProperty(exports, "SeaTableViewsPlugin", {
   enumerable: true,
   get: function () {
@@ -186,6 +192,7 @@ var _mention = _interopRequireDefault(require("./mention"));
 var _quickInsert = _interopRequireDefault(require("./quick-insert"));
 var _wikiLink = _interopRequireDefault(require("./wiki-link"));
 var _seatableColumn = _interopRequireDefault(require("./seatable-column"));
+var _seatableRow = _interopRequireDefault(require("./seatable-row"));
 var _seatableTables = _interopRequireDefault(require("./seatable-tables"));
 var _group = _interopRequireDefault(require("./group"));
 const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default, _group.default];

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

@@ -18,7 +18,8 @@ const SeaTableColumnMenu = _ref => {
     readonly,
     insertPosition,
     toggle,
-    isHidden = false
+    isHidden = false,
+    container
   } = _ref;
   const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
   const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.ELEMENT_TYPE.SEATABLE_COLUMN];
@@ -30,17 +31,18 @@ const SeaTableColumnMenu = _ref => {
     })
   }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
-  })), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+  }), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
     target: menuConfig.id,
     hideArrow: true,
     trigger: "hover",
     fade: false,
-    popperClassName: "seatable-column-popover"
+    popperClassName: "seatable-column-popover",
+    container: container || menuConfig.id
   }, /*#__PURE__*/_react.default.createElement(_columnListMenu.default, {
     editor: editor,
     readonly: readonly,
     insertPosition: insertPosition,
     toggle: toggle
-  })));
+  }))));
 };
 var _default = exports.default = SeaTableColumnMenu;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRowName = void 0;
+var _dtableUtils = require("dtable-utils");
+const getRowName = (columns, row, formula_rows) => {
+  if (!row) return '';
+  const displayColumn = columns.find(column => column.key === '0000');
+  if (!displayColumn) return '';
+  const {
+    type,
+    key,
+    data
+  } = displayColumn;
+  let formulaRows;
+  if (formula_rows) {
+    formulaRows = formula_rows;
+  } else {
+    const view = window.app.getSelectedView();
+    formulaRows = view.formula_rows || {};
+  }
+  const tables = window.app.state.value.tables;
+  const departments = window.app.state;
+  const collaborators = window.app.state.collaboratorsWithAppUsers;
+  return (0, _dtableUtils.getCellValueDisplayString)(row, type, key, {
+    formulaRows,
+    data,
+    tables,
+    collaborators,
+    departments
+  });
+};
+exports.getRowName = getRowName;

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

@@ -0,0 +1,106 @@
+.seatable-rows-select-dialog {
+  max-width: 520px;
+}
+
+.seatable-rows-select-dialog .sdoc-seatable-rows-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+.seatable-rows-select-dialog .modal-header-container {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 57px;
+  padding: 16px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.seatable-rows-select-dialog .modal-title-container {
+  flex: 1;
+  white-space: nowrap;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: auto;
+}
+
+.seatable-rows-close-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+}
+
+.modal-header-container .sdoc-close1 {
+  font-size: 16px;
+  color: #666666;
+}
+
+.modal-header-container .sdoc-close1:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+  height: 28px;
+  width: 28px;
+}
+
+.seatable-rows-select-dialog .seatable-table-wrapper {
+  max-height: 207px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 2px solid transparent;
+}
+
+.seatable-rows-select-dialog .seatable-table-wrapper table td,
+.seatable-rows-select-dialog .seatable-table-wrapper table th {
+  border-width: 0 1px 1px 0;
+  border-style: solid;
+  border-color: #ccc;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.seatable-rows-select-dialog .seatable-view-records {
+  width: max-content;
+  border-top: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  border-collapse: collapse;
+  border-spacing: 2px;
+}
+
+.seatable-rows-select-dialog .seatable-view-column-header-row {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.seatable-rows-select-dialog .seatable-view-column-header-row th {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: unset !important;
+}
+
+.seatable-rows-select-dialog .seatable-view-body-row {
+  display: block;
+  height: calc(100% - 32px);
+  max-height: 170px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.seatable-rows-select-dialog tbody td,
+.seatable-rows-select-dialog thead th {
+  height: 32px;
+  padding: 0 8px;
+}
+
+.seatable-rows-select-dialog .seatable-view-body-column-row.isSelected {
+  background-color: rgb(222, 232, 254);
+}

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _helpers = require("../../helpers");
+var _seatableTable = _interopRequireDefault(require("./seatable-table"));
+require("./index.css");
+const AddSeatableRowDialog = _ref => {
+  let {
+    editor,
+    closeDialog,
+    handleSubmit,
+    data
+  } = _ref;
+  const {
+    tableID,
+    tableName
+  } = data;
+  const [rowRecordsErrorMessage, setRowRecordsErrorMessage] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [selectedRowsID, setSelectedRowsID] = (0, _react.useState)([]);
+  const submit = (0, _react.useCallback)(() => {
+    setRowRecordsErrorMessage('');
+    if (selectedRowsID.length === 0) {
+      setRowRecordsErrorMessage(t('Select_at_least_one_row_record'));
+      return;
+    }
+    if (selectedRowsID.length > 10) {
+      setRowRecordsErrorMessage(t('Selected_row_records_cannot_exceed_10_rows'));
+      return;
+    }
+    if (selectedRowsID.length <= 10) {
+      (0, _helpers.insertSeaTableRow)(editor, tableID, selectedRowsID, 'after');
+    }
+    handleSubmit && handleSubmit();
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, selectedRowsID]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    autoFocus: false,
+    toggle: closeDialog,
+    className: "seatable-rows-select-dialog",
+    zIndex: 1071,
+    returnFocusAfterClose: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-header-container"
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "modal-title-container"
+  }, t('Select_seatable_rows')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-close1 seatable-rows-close-dialog",
+    onClick: closeDialog
+  })), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, tableName), /*#__PURE__*/_react.default.createElement(_seatableTable.default, {
+    tableID: tableID,
+    setSelectedRowsID: setSelectedRowsID,
+    editor: editor
+  }), rowRecordsErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(rowRecordsErrorMessage))))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, {
+    className: "sdoc-seatable-rows-select-footer"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    disabled: false,
+    onClick: submit
+  }, t('Add_rows_record'))));
+};
+var _default = exports.default = AddSeatableRowDialog;

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
+    }));
+  }));
+}