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

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

@@ -31,6 +31,16 @@
   margin: auto;
 }
 
+.seatable-rows-select-dialog .modal-body {
+  padding: 0 !important;
+}
+
+.seatable-rows-select-dialog .modal-body .form-label {
+  margin: 1rem 1rem 0;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e2e2e2;
+}
+
 .seatable-rows-close-dialog {
   display: flex;
   align-items: center;
@@ -51,56 +61,365 @@
 }
 
 .seatable-rows-select-dialog .seatable-table-wrapper {
-  max-height: 207px;
+  height: 280px;
   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 .row-card-container {
+  height: 100%;
+  width: 100%;
+}
+
+.row-card-container::-webkit-scrollbar {
+  display: none;
+}
+
+.records-column-names {
+  padding: 12px 32px;
+  min-width: 100%;
+  background-color: #fff;
+  box-shadow: -1px 0 2px 0 #ccc;
+  display: flex;
+  align-items: center;
+}
+
+.row-card-header .row-card-column-names {
+  padding: 8px 32px;
+  width: 100%;
+  position: relative;
+  min-width: 100%;
+  background-color: #fff;
+  box-shadow: -1px 0 2px 0 #ccc;
+  display: flex;
+  align-items: center;
+}
+
+.row-card-header .row-card-column-names .link-scroll-prev {
+  left: 4px;
+}
+
+.row-card-header .row-card-column-names .row-card-scroll {
+  color: #999;
+  font-size: 14px;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  line-height: 24px;
+  position: absolute;
+  top: 10px;
+  background-color: #fff;
+}
+
+.row-card-header .row-card-column-names .scroll-active {
+  color: #000;
+  cursor: pointer;
+}
+
+.row-card-header .row-card-column-names .link-scroll-next {
+  right: 4px;
+}
+
+.row-card-header .row-card-column-names .scroll-active:hover {
+  background: #efefef;
+  border-radius: 4px;
+}
+
+.row-card-header .row-card-columns-container {
+  width: 100%;
+  overflow: hidden;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+
+.row-card-header .row-card-columns-container .row-card-column-name:first-child,
+.mobile-link-records-container .link-records-column-name:first-child {
+  margin: 0 8px 0 0;
+}
+
+.row-card-header .row-card-columns-container .row-card-column-name {
+  flex-shrink: 0;
+  margin: 0 8px;
+  font-size: 14px;
+  color: #666666;
+  height: 30px;
+  line-height: 30px;
+  cursor: default;
+}
+
+.row-card-header .row-card-columns-container::-webkit-scrollbar {
+  display: none;
+}
+
+.seatable-rows-select-dialog .row-card-container .row-card-list {
+  height: calc(100% - 40px);
+  width: 100%;
+  min-width: 100%;
+  padding: 10px 20px;
+  overflow-y: auto;
+  margin-top: 3px;
+}
+
+.row-card-list .no-records-tips {
+  color: #666666;
+  text-align: center;
+}
+
+.row-card-list .no-views-tips {
+  color: #666666;
+  text-align: center;
+}
+
+.row-card-list .row-card-content {
+  padding: 0;
+  height: auto;
+  overflow-y: unset;
 }
 
-.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;
+.row-card-list .row-card-content::-webkit-scrollbar {
+  width: 0;
 }
 
-.seatable-rows-select-dialog .seatable-view-column-header-row {
-  position: sticky;
-  top: 0;
+.row-card-item {
+  height: 88px;
+  margin-top: 10px;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  position: relative;
+}
+
+.row-card-item:first-child {
+  margin-top: 0;
+}
+
+.row-card-item:last-child {
+  margin-bottom: 10px;
+}
+
+.row-card-item:hover {
+  cursor: pointer;
+  border-color: rgba(0, 0, 0, 0.3);
+}
+
+.row-card-item.row-card-item-highlight {
+  border-color: rgba(0, 0, 0, 0.3);
+}
+
+.row-card-item .row-card-item-container {
+  width: 100%;
+  overflow: hidden;
+  padding: 12px;
+}
+
+.row-card-item-header {
   z-index: 1;
 }
 
-.seatable-rows-select-dialog .seatable-view-column-header-row th {
+.row-card-item .row-card-item-header {
+  width: 100%;
+  height: 24px;
   display: inline-flex;
+  justify-content: space-between;
   align-items: center;
+}
+
+.row-card-item .row-card-item-name {
+  height: 100%;
+  flex: 1 1;
+  font-weight: 400;
+}
+
+.row-card-item .row-card-item-check {
+  color: #59cb74;
+}
+
+.row-card-item .row-card-item-remove {
+  height: 24px;
+  width: 24px;
+  text-align: center;
+}
+
+.row-card-item .row-card-remove-icon {
+  font-size: 16px;
+  color: #aaa;
+}
+
+.row-card-item-remove:hover .row-card-remove-icon {
+  color: #666666;
+}
+
+.row-card-item .row-card-item-content {
+  display: flex;
+  width: 100%;
+  overflow-x: scroll;
+  height: 40px;
+}
+
+.row-card-item .row-card-item-content::-webkit-scrollbar {
+  display: none;
+}
+
+.row-card-item .row-cell-value {
+  display: flex;
   justify-content: flex-start;
-  flex: unset !important;
+  align-items: center;
+  flex-shrink: 0;
+  text-align: left;
+  margin: 0 8px;
 }
 
-.seatable-rows-select-dialog .seatable-view-body-row {
-  display: block;
-  height: calc(100% - 32px);
-  max-height: 170px;
-  box-sizing: border-box;
-  overflow-y: auto;
+.row-card-item .row-cell-value.show-name {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center !important;
+}
+
+.row-card-item .row-cell-value.show-name .row-cell-value-content {
+  max-height: 20px;
+}
+
+.row-card-item .row-cell-value.show-name .column-name {
+  margin: 0.25rem 0;
+  font-size: 12px;
+  color: #666;
+  max-width: 100px;
+}
+
+.row-card-item .row-cell-value.show-name .links-formatter .formatter-show {
+  display: inline-block;
 }
 
-.seatable-rows-select-dialog tbody td,
-.seatable-rows-select-dialog thead th {
-  height: 32px;
-  padding: 0 8px;
+.row-card-item .row-cell-value.show-name .image-cell-value {
+  height: inherit;
 }
 
-.seatable-rows-select-dialog .seatable-view-body-column-row.isSelected {
-  background-color: rgb(222, 232, 254);
-}
+.row-card-item .row-cell-value:first-child {
+  justify-content: flex-start;
+  margin: 0 8px 0 0;
+}
+
+.row-card-item .row-cell-value-empty {
+  display: inline-block;
+  height: 8px;
+  width: 20px;
+  background-color: #f1f1f1;
+  border-radius: 4px;
+}
+
+.row-card-item-content .collaborators-formatter {
+  width: 100%;
+  overflow: hidden;
+}
+
+.row-card-item-content .collaborators-formatter .formatter-show {
+  align-items: center;
+}
+
+.row-card-item-content .multiple-select-formatter {
+  width: 100%;
+  overflow: hidden;
+  display: inline-flex;
+}
+
+.multiple-select-formatter .grid_cell_type_multiple-select {
+  margin-right: 10px;
+}
+
+.multiple-select-formatter .grid_cell_type_multiple-select:last-child {
+  margin-right: 0;
+}
+
+.row-card-item-content .cell-value-ellipsis {
+  display: inline-block;
+  height: auto;
+  width: 100%;
+}
+
+.row-card-item-content .image-cell-value {
+  height: 30px;
+  width: 40px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.row-card-item-content .image-cell-value img {
+  display: inline-block;
+  max-height: 30px;
+  max-width: 40px;
+  border-radius: 3px;
+}
+
+.image-cell-value .cell-value-size {
+  position: absolute;
+  bottom: -2px;
+  right: -4px;
+  display: inline-block;
+  height: 12px;
+  padding: 0 4px;
+  border-radius: 6px;
+  text-align: center;
+  background-color: #999;
+  font-size: 10px;
+  line-height: 12px;
+  color: #fff;
+}
+
+.row-card-item .number-formatter {
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+
+.row-card-item .geolocation-formatter {
+  width: 100%;
+}
+
+.row-card-item .geolocation-formatter div {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row-card-content .row-card-item .row-card-item-container {
+  padding: 0;
+  position: relative;
+}
+
+.row-card-item .row-card-item-header {
+  position: absolute;
+  top: 12px;
+  padding: 0 12px;
+  pointer-events: none;
+}
+
+.row-card-item .row-card-item-name {
+  pointer-events: none;
+}
+
+.row-card-item .row-card-item-remove {
+  pointer-events: all;
+}
+
+.row-card-item .row-card-item-container .row-card-item-content {
+  height: 88px;
+  padding: 24px 12px 0;
+}
+
+.row-card-column--resizing {
+  background-color: #f5f5f5;
+}
+
+.row-card-draggable:hover {
+  background-color: #f5f5f5;
+}

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

@@ -10,9 +10,8 @@ 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");
 var _seatableTableRecord = _interopRequireDefault(require("./seatable-table-record"));
+require("./index.css");
 const AddSeatableRowDialog = _ref => {
   let {
     editor,
@@ -23,30 +22,24 @@ const AddSeatableRowDialog = _ref => {
   const {
     table
   } = data;
-  console.log(1, table);
   const [rowRecordsErrorMessage, setRowRecordsErrorMessage] = (0, _react.useState)('');
+  const [selectedRow, setSelectedRow] = (0, _react.useState)(null);
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  // const [table, setTable] = useState({});
-  const [selectedRowsID, setSelectedRowsID] = (0, _react.useState)([]);
   const submit = (0, _react.useCallback)(() => {
     setRowRecordsErrorMessage('');
-    if (selectedRowsID.length === 0) {
-      setRowRecordsErrorMessage(t('Select_one_row_record'));
-      return;
-    }
-    if (selectedRowsID.length > 1) {
-      setRowRecordsErrorMessage(t('Selected_row_records_cannot_exceed_1_rows'));
+    if (!selectedRow) {
+      setRowRecordsErrorMessage(t('Please_select_one_row_record'));
       return;
     }
-    if (selectedRowsID.length === 1) {
-      (0, _helpers.insertSeaTableRow)(editor, table._id, selectedRowsID, 'after');
+    if (selectedRow) {
+      (0, _helpers.insertSeaTableRow)(editor, table._id, selectedRow, 'after');
     }
     handleSubmit && handleSubmit();
     closeDialog();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, selectedRowsID]);
+  }, [editor, selectedRow]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
     isOpen: true,
     autoFocus: false,
@@ -64,7 +57,8 @@ const AddSeatableRowDialog = _ref => {
   })), /*#__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
+    table: table,
+    setSelectedRow: setSelectedRow
   }), rowRecordsErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
     color: "danger",
     className: "mt-2"

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

@@ -0,0 +1,134 @@
+"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 _helpers = require("./helpers");
+var _SimpleCellFormatter = _interopRequireDefault(require("./formatters/SimpleCellFormatter"));
+var _constants = require("../../constants");
+const DEFAULT_MAX_DISPLAY_LINKS = 40;
+class LinkContent extends _react.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "getFormatterContent", shownLinks => {
+      const {
+        linkedColumn
+      } = this.props;
+      const {
+        type
+      } = linkedColumn;
+      // let Formatter = cellFormatterFactory.createFormatter(type);
+      let formatterProps = {
+        column: linkedColumn,
+        isCellSelected: false,
+        readOnly: true
+      };
+      const className = `link formatter-item ${type === _dtableStore.CellType.SINGLE_SELECT ? 'mr-1' : ''}`;
+      return shownLinks.map(link => {
+        if (!link) return null;
+        const {
+          row_id,
+          display_value
+        } = link;
+        if (!Array.isArray(display_value)) {
+          formatterProps['value'] = display_value;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: `link-record-item-${row_id}`,
+            className: className
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: "row-cell-value-empty"
+          }));
+        }
+        return display_value.map((item, index) => {
+          formatterProps['value'] = item;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: `link-record-item-${row_id}-${index}`,
+            className: className
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: "row-cell-value-empty"
+          }));
+        });
+      });
+    });
+    (0, _defineProperty2.default)(this, "renderLinks", () => {
+      const {
+        linkedColumn,
+        computedValue,
+        maxDisplayLinks
+      } = this.props;
+      const {
+        key,
+        type
+      } = linkedColumn;
+      if (!Array.isArray(computedValue) || computedValue.length === 0) {
+        return [];
+      }
+      const shownLinks = computedValue.length > maxDisplayLinks ? computedValue.slice(0, 40) : computedValue;
+      if (_constants.NEED_FORMATTER.includes(type)) {
+        return this.getFormatterContent(shownLinks);
+      }
+      const {
+        collaborators,
+        departments
+      } = window.app.state;
+      return shownLinks.map((link, index) => {
+        const {
+          row_id,
+          display_value
+        } = link;
+        const linkedValue = _constants.LINK_NOT_SUPPORT_TYPES.includes(type) ? null : display_value;
+        const row = {
+          _id: row_id,
+          [key]: linkedValue
+        };
+        const formulaRows = type === _dtableStore.CellType.FORMULA ? {
+          [row_id]: row
+        } : null;
+        const cellValue = (0, _dtableStore.getCellValueStringResult)(row, linkedColumn, {
+          formulaRows,
+          collaborators,
+          departments
+        });
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: `link-item-${index}`,
+          className: "link"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "link-name pr-1",
+          title: cellValue
+        }, cellValue));
+      });
+    });
+  }
+  createColumnFormatter(Formatter, formatterProps) {
+    if ( /*#__PURE__*/_react.default.isValidElement(Formatter)) {
+      return /*#__PURE__*/_react.default.cloneElement(Formatter, {
+        ...formatterProps
+      });
+    } else if ((0, _helpers.isFunction)(Formatter)) {
+      return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
+    }
+    return /*#__PURE__*/_react.default.createElement(_SimpleCellFormatter.default, formatterProps);
+  }
+  render() {
+    const {
+      linkedColumn,
+      computedValue,
+      Empty
+    } = this.props;
+    if (!linkedColumn || !Array.isArray(computedValue) || computedValue.length === 0) {
+      return Empty;
+    }
+    return this.renderLinks();
+  }
+}
+(0, _defineProperty2.default)(LinkContent, "defaultProps", {
+  maxDisplayLinks: DEFAULT_MAX_DISPLAY_LINKS,
+  Empty: null
+});
+var _default = exports.default = LinkContent;

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 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"));
@@ -87,10 +86,28 @@ class RecordContent extends _react.Component {
     (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
+      scrollLeft: 0,
+      selectedRowId: null
     };
     this.shownLength = 10;
     this.recordsList = null;
@@ -134,26 +151,24 @@ class RecordContent extends _react.Component {
     const {
       table,
       isAdditionEditorView,
-      highlightRowIndex,
       noCardItemTip,
       rowCardType,
       columns,
       renderedColumns,
-      unShowColumnKeyList,
       showScrollBtn,
-      isShowRowCardHeader,
-      isShowRemoveCardItemBtn,
       cardListClassName,
       formulaRows,
-      createBtn,
       cardHeaderClassName
     } = this.props;
     const {
       displayRows,
-      scrollLeft
+      scrollLeft,
+      selectedRowId
     } = this.state;
     const rowCardListClass = `row-card-list ${cardListClassName ? cardListClassName : ''}`;
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    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,
@@ -163,7 +178,9 @@ class RecordContent extends _react.Component {
       showScrollBtn: showScrollBtn,
       scrollLeft: scrollLeft,
       setScrollLeft: this.setScrollLeft,
-      ref: ref => this.rowCardHeaderRef = ref
+      rowCardType: rowCardType,
+      ref: ref => this.rowCardHeaderRef = ref,
+      table: table
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: rowCardListClass,
       ref: this.setRecordsListRef,
@@ -185,15 +202,11 @@ class RecordContent extends _react.Component {
         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
+        isSelected: selectedRowId === row._id,
+        onRowClick: () => this.handleRowClick(row._id)
       });
     })))));
   }