@seafile/sdoc-editor 2.0.17 → 2.0.18-alph-0.0.2

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;

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

@@ -0,0 +1,240 @@
+"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 _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';
+
+const EMPTY_LINK = /*#__PURE__*/_react.default.createElement("span", {
+  className: "row-cell-value-empty"
+});
+class RowCardItem extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "setDraggedCell", draggedCell => {
+      this.setState({
+        draggedCell
+      });
+    });
+    (0, _defineProperty2.default)(this, "onSelectRow", e => {
+      const {
+        rowCardType,
+        isAdditionEditorView,
+        row,
+        table,
+        closeSelect,
+        onSelectRow,
+        onExpandRow
+      } = 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;
+      }
+      // 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", () => {
+      let {
+        row,
+        formulaRow,
+        columns,
+        table,
+        rowCardType,
+        isShowColumnName
+      } = this.props;
+      const {
+        draggedCell
+      } = this.state;
+      const {
+        _id: tableId
+      } = table;
+      return columns.map(column => {
+        const {
+          key,
+          type,
+          data,
+          width,
+          name
+        } = column;
+        const draggedCellId = `${tableId}-${key}`;
+        const existedWidth = JSON.parse(localStorage.getItem(draggedCellId));
+        let columnWidth = existedWidth && rowCardType === 'link' ? existedWidth : width;
+        if (draggedCell.id === draggedCellId) {
+          columnWidth = draggedCell.width;
+        }
+        if (type === _dtableStore.CellType.LINK) {
+          const {
+            display_column_key,
+            array_type,
+            array_data
+          } = data;
+          // linked table's linked column
+          const linkedColumn = {
+            key: display_column_key,
+            type: array_type,
+            data: array_data
+          };
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: `row-cell-value text-truncate ${isShowColumnName && 'show-name'}`,
+            key: row._id + '_' + key,
+            style: {
+              width: columnWidth
+            }
+          }, isShowColumnName && /*#__PURE__*/_react.default.createElement("span", {
+            className: "column-name text-truncate"
+          }, name), /*#__PURE__*/_react.default.createElement("div", {
+            className: "links-formatter"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "formatter-show"
+          })));
+        }
+        return null;
+        // return 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 {
+        setItemScrollLeft,
+        rowIdx
+      } = this.props;
+      if (this.scrollActive) {
+        this.scrollActive = false;
+        return;
+      }
+      if (setItemScrollLeft) setItemScrollLeft(this.cardRecordsItemRef.scrollLeft, rowIdx);
+    });
+    (0, _defineProperty2.default)(this, "setScrollLeft", scrollLeft => {
+      this.scrollActive = true;
+      this.cardRecordsItemRef.scrollLeft = scrollLeft;
+    });
+    (0, _defineProperty2.default)(this, "getScrollLeft", () => {
+      return this.cardRecordsItemRef.scrollLeft;
+    });
+    (0, _defineProperty2.default)(this, "setCardRecordsItemRef", ref => {
+      this.cardRecordsItemRef = ref;
+    });
+    this.state = {
+      draggedCell: {}
+    };
+  }
+  componentDidMount() {
+    const {
+      rowIdx,
+      onRef
+    } = this.props;
+    onRef && onRef(this, rowIdx);
+    // const { eventBus } = window.app;
+    // this.unsubscribeChangeHeaderWidth = eventBus.subscribe(EventTypes.CHANGE_HEADER_WIDTH, this.setDraggedCell);
+  }
+  componentWillUnmount() {
+    this.unsubscribeChangeHeaderWidth();
+  }
+  UNSAFE_componentWillUpdate(nextProps) {
+    const {
+      onRef
+    } = this.props;
+    onRef && onRef(this, nextProps.rowIdx);
+  }
+  render() {
+    const {
+      row,
+      t,
+      matchResult,
+      isShowRemoveCardItemBtn,
+      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
+    }, /*#__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", {
+      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", {
+      className: "row-card-item-content",
+      onScroll: this.changeScroll,
+      ref: this.setCardRecordsItemRef
+    }, row._deleted ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-flex flex-fill justify-content-center error"
+    }, t('The_linked_row_has_been_deleted')) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-inline-flex"
+    }, this.getRowRecord()))));
+  }
+}
+RowCardItem.defaultProps = {
+  isShowColumnName: false,
+  unShowColumnKeyList: ['0000']
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('dtable')(RowCardItem);

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _dtableUtils = require("dtable-utils");
+var _recordContent = _interopRequireDefault(require("./record-content"));
+const SeatableTableRecord = _ref => {
+  let {
+    table
+  } = _ref;
+  console.log(1, table);
+  const renderedColumns = () => {
+    var _table$columns;
+    return table === null || table === void 0 ? void 0 : (_table$columns = table.columns) === null || _table$columns === void 0 ? void 0 : _table$columns.filter(column => {
+      if (column.type === _dtableUtils.CellType.LONG_TEXT) {
+        return false;
+      }
+      // if (['0000', ...hiddenColumns].includes(column.key)) {
+      //   return false;
+      // }
+      return true;
+    }).map(column => Object.assign({}, column, {
+      width: 100
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_recordContent.default, {
+    table: table,
+    renderedColumns: renderedColumns(),
+    columns: renderedColumns(),
+    rows: table.rows
+  }));
+};
+var _default = exports.default = SeatableTableRecord;

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

@@ -0,0 +1,134 @@
+"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 _dtableUtils = require("dtable-utils");
+var _recordItem = _interopRequireDefault(require("./record-item"));
+const SeatableTable = _ref => {
+  var _tableInfoRef$current, _tableInfoRef$current2;
+  let {
+    tableID,
+    setSelectedRowsID,
+    editor
+  } = _ref;
+  const tableInfoRef = (0, _react.useRef)(null);
+  const [shownRecords, setShownRecords] = (0, _react.useState)([]);
+  const [columns, setColumns] = (0, _react.useState)([]);
+  const headerCellRef = (0, _react.useRef)({});
+  (0, _react.useEffect)(() => {
+    async function initTableData() {
+      const table = await editor.getTableById(tableID);
+      if (!tableInfoRef.current) {
+        tableInfoRef.current = {};
+      }
+      if (!tableInfoRef.current[tableID]) {
+        tableInfoRef.current[tableID] = {
+          formulaRows: editor.getTableFormulaResults(table, table.rows),
+          idRowMap: table.rows.reduce((result, item) => {
+            result[item._id] = item;
+            return result;
+          }, {})
+        };
+      }
+      const validRecords = table.rows;
+      setShownRecords(validRecords);
+      let validColumns = table.columns;
+
+      // formatted columns
+      validColumns = validColumns.map(column => {
+        const {
+          type
+        } = column;
+        if (type === _dtableUtils.CellType.LINK) {
+          const {
+            data
+          } = column;
+          const {
+            display_column_key,
+            array_type,
+            array_data
+          } = data;
+          const display_column = {
+            key: display_column_key || '0000',
+            type: array_type || _dtableUtils.CellType.TEXT,
+            data: array_data || null
+          };
+          return {
+            ...column,
+            data: {
+              ...data,
+              display_column
+            }
+          };
+        }
+        return column;
+      });
+      setColumns(validColumns);
+    }
+    initTableData();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableID]);
+  const onClick = (0, _react.useCallback)(e => {
+    const domCell = e.target;
+    const recordId = domCell.getAttribute('data-record-id') ? domCell.getAttribute('data-record-id') : domCell.parentNode.getAttribute('data-record-id');
+    setSelectedRowsID(prevSelectedRowsID => {
+      if (!prevSelectedRowsID.includes(recordId)) {
+        var _domCell$closest;
+        (_domCell$closest = domCell.closest('tr')) === null || _domCell$closest === void 0 ? void 0 : _domCell$closest.classList.add('isSelected');
+        return [...prevSelectedRowsID, recordId];
+      } else {
+        var _domCell$closest2;
+        (_domCell$closest2 = domCell.closest('tr')) === null || _domCell$closest2 === void 0 ? void 0 : _domCell$closest2.classList.remove('isSelected');
+        return prevSelectedRowsID.filter(id => id !== recordId);
+      }
+    });
+  }, [setSelectedRowsID]);
+  const formulaRows = (tableInfoRef === null || tableInfoRef === void 0 ? void 0 : (_tableInfoRef$current = tableInfoRef.current) === null || _tableInfoRef$current === void 0 ? void 0 : (_tableInfoRef$current2 = _tableInfoRef$current[tableID]) === null || _tableInfoRef$current2 === void 0 ? void 0 : _tableInfoRef$current2.formulaRows) || {};
+  (0, _react.useEffect)(() => {
+    const seatableRowsContaniner = document.getElementById('seatable-table-rows-view');
+    seatableRowsContaniner.addEventListener('click', onClick);
+    return () => {
+      seatableRowsContaniner.removeEventListener('click', onClick);
+    };
+  }, [onClick]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "seatable-table-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("table", {
+    className: "seatable-view-records"
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
+    className: "seatable-view-column-header-row"
+  }, columns.map(column => {
+    const width = 100;
+    return /*#__PURE__*/_react.default.createElement("th", {
+      ref: ref => {
+        headerCellRef.current[column.key] = ref;
+      },
+      className: "seatable-view-column-header-cell",
+      key: column.key,
+      style: {
+        width,
+        minWidth: width
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", null, column.name));
+  }))), /*#__PURE__*/_react.default.createElement("tbody", {
+    className: "seatable-view-body-row",
+    id: "seatable-table-rows-view"
+  }, shownRecords.map((record, index) => {
+    const formulaRow = formulaRows[record._id] || {};
+    return /*#__PURE__*/_react.default.createElement(_recordItem.default, {
+      key: record._id,
+      index: index,
+      editor: editor,
+      record: record,
+      formulaRow: formulaRow,
+      columns: columns
+    });
+  }))));
+};
+var _default = exports.default = SeatableTable;