@seafile/sdoc-editor 2.0.24 → 2.0.25-alph-0.0.1

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

@@ -0,0 +1,76 @@
+"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 _seatableTableRecord = _interopRequireDefault(require("./seatable-table-record"));
+require("./index.css");
+const AddSeatableRowDialog = _ref => {
+  let {
+    editor,
+    closeDialog,
+    handleSubmit,
+    data
+  } = _ref;
+  const {
+    table
+  } = data;
+  const [rowRecordsErrorMessage, setRowRecordsErrorMessage] = (0, _react.useState)('');
+  const [selectedRow, setSelectedRow] = (0, _react.useState)(null);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const submit = (0, _react.useCallback)(() => {
+    setRowRecordsErrorMessage('');
+    if (!selectedRow) {
+      setRowRecordsErrorMessage(t('Please_select_one_row_record'));
+      return;
+    }
+    if (selectedRow) {
+      (0, _helpers.insertSeaTableRow)(editor, table._id, selectedRow, 'after');
+    }
+    handleSubmit && handleSubmit();
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, selectedRow]);
+  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, table.name), /*#__PURE__*/_react.default.createElement(_seatableTableRecord.default, {
+    table: table,
+    setSelectedRow: setSelectedRow
+  }), 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_row_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,209 @@
+"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 _rowCardHeader = _interopRequireDefault(require("./row-card-header"));
+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;
+    });
+    (0, _defineProperty2.default)(this, "handleRowClick", rowId => {
+      const {
+        setSelectedRow
+      } = this.props;
+
+      // Select one row, then make other selected one unselected
+      // Select one row to make itself toggled state
+      this.setState(prevState => {
+        const newSelectedRowId = prevState.selectedRowId === rowId ? null : rowId;
+        setTimeout(() => {
+          setSelectedRow(newSelectedRowId ? rowId : '');
+        }, 0);
+        return {
+          selectedRowId: newSelectedRowId
+        };
+      });
+    });
+    this.state = {
+      isHasMore: false,
+      displayRows: [],
+      scrollLeft: 0,
+      selectedRowId: null
+    };
+    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,
+      noCardItemTip,
+      rowCardType,
+      columns,
+      renderedColumns,
+      showScrollBtn,
+      cardListClassName,
+      formulaRows,
+      cardHeaderClassName
+    } = this.props;
+    const {
+      displayRows,
+      scrollLeft,
+      selectedRowId
+    } = this.state;
+    const rowCardListClass = `row-card-list ${cardListClassName ? cardListClassName : ''}`;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "seatable-table-wrapper"
+    }, /*#__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,
+      rowCardType: rowCardType,
+      ref: ref => this.rowCardHeaderRef = ref,
+      table: table
+    }), /*#__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] || {};
+      return /*#__PURE__*/_react.default.createElement(_rowCardItem.default, {
+        key: `row-card-${rowIdx}`,
+        setItemScrollLeft: this.setItemScrollLeft,
+        onRef: this.onRef,
+        rowCardType: rowCardType,
+        table: table,
+        row: row,
+        formulaRow: formulaRow,
+        rowIdx: rowIdx,
+        columns: columns,
+        isSelected: selectedRowId === row._id,
+        onRowClick: () => this.handleRowClick(row._id)
+      });
+    })))));
+  }
+}
+var _default = exports.default = RecordContent;

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