@seafile/sdoc-editor 2.0.24 → 2.0.26

package/dist/basic-sdk/extension/plugins/chart/render-elem.js

@@ -0,0 +1,154 @@
+"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 _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _seaChart = require("sea-chart");
+var _reactI18next = require("react-i18next");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu/"));
+var _chartEditDialog = _interopRequireDefault(require("./chart-edit-dialog"));
+var _context = _interopRequireDefault(require("../../../../context"));
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _helpers = require("./helpers");
+require("./render-elem.css");
+const Chart = _ref => {
+  var _window, _window$app, _window2, _window2$app, _window2$app$state;
+  let {
+    element,
+    editor,
+    attributes,
+    children,
+    isSelected,
+    t
+  } = _ref;
+  const {
+    stat_item
+  } = element;
+  const api = {
+    queryUsers: (_window = window) !== null && _window !== void 0 && (_window$app = _window.app) !== null && _window$app !== void 0 && _window$app.queryUsers ? window.app.queryUsers : () => {},
+    sqlQuery: editor.sqlQuery
+  };
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const chartRef = (0, _react.useRef)(null);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({});
+  const [isShowHoverMenu, setIsShowHoverMenu] = (0, _react.useState)(false);
+  const [isShowDialog, setIsShowDialog] = (0, _react.useState)(false);
+  const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);
+  const [isRender, setIsRender] = (0, _react.useState)(false);
+  const setPosition = (0, _react.useCallback)(() => {
+    if (chartRef.current) {
+      const {
+        top,
+        left
+      } = chartRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: top - 42,
+        left: left - 3
+      });
+    }
+  }, []);
+  const onScroll = (0, _react.useCallback)(e => {
+    setPosition();
+    // Unrendered chart scrolls into viewport for the first time
+    if (!isRender && (0, _helpers.isInViewPort)(chartRef.current)) {
+      setIsRender(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRender]);
+  const onClickChart = (0, _react.useCallback)(() => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.select(editor, [path[0]]);
+    setPosition();
+    setIsShowHoverMenu(true);
+  }, [editor, element, setPosition]);
+  const onCloseEditDialog = (0, _react.useCallback)(newStatItemData => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.setNodes(editor, {
+      stat_item: newStatItemData
+    }, {
+      at: [path[0]]
+    });
+    setIsShowDialog(false);
+  }, [editor, element]);
+
+  // Mount
+  (0, _react.useEffect)(() => {
+    if (!isRender && (0, _helpers.isInViewPort)(chartRef.current)) {
+      setIsRender(true);
+    }
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      observerRefValue.removeEventListener('scroll', onScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRender]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    id: element.id,
+    className: "sdoc-chart-container"
+  }, attributes, {
+    onClick: onClickChart
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-chart-view', {
+      'active': isSelected
+    }, {
+      'init': !isRender
+    }),
+    ref: chartRef
+  }, children, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-chart-view-content",
+    contentEditable: false
+  }, isRender && /*#__PURE__*/_react.default.createElement(_seaChart.View, {
+    chart: stat_item,
+    api: api,
+    config: _context.default.getSettings(),
+    tables: editor.tables,
+    collaborators: editor.collaborators || [],
+    departments: ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$app = _window2.app) === null || _window2$app === void 0 ? void 0 : (_window2$app$state = _window2$app.state) === null || _window2$app$state === void 0 ? void 0 : _window2$app$state.departments) || []
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-lt"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-lb"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-rt"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-chart-view-rect sdoc-chart-view-rect-rb"
+  }))), isSelected && isShowHoverMenu && !readOnly && /*#__PURE__*/_react.default.createElement(_hoverMenu.default, {
+    menuPosition: menuPosition,
+    onEditChart: () => {
+      setIsFullScreen(false);
+      setIsShowDialog(true);
+    },
+    onFullscreen: () => {
+      setIsFullScreen(true);
+      setIsShowDialog(true);
+    }
+  }), isShowDialog && /*#__PURE__*/_react.default.createElement(_chartEditDialog.default, {
+    editor: editor,
+    element: element,
+    api: api,
+    isFullScreen: isFullScreen,
+    onCloseEditDialog: onCloseEditDialog
+  }));
+};
+const SdocChart = (0, _reactI18next.withTranslation)('sdoc-editor')(Chart);
+function renderChart(props, editor) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isSelected = (0, _slateReact.useSelected)();
+  return /*#__PURE__*/_react.default.createElement(SdocChart, Object.assign({}, props, {
+    editor: editor,
+    isSelected: isSelected
+  }));
+}
+var _default = exports.default = renderChart;

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

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "CalloutPlugin", {
     return _callout.default;
   }
 });
+Object.defineProperty(exports, "ChartPlugin", {
+  enumerable: true,
+  get: function () {
+    return _chart.default;
+  }
+});
 Object.defineProperty(exports, "CheckListPlugin", {
   enumerable: true,
   get: function () {
@@ -119,6 +125,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,9 +198,11 @@ 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];
+var _chart = _interopRequireDefault(require("./chart"));
+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, _chart.default];
 const WikiPlugins = exports.WikiPlugins = [...Plugins, _wikiLink.default];
 const CommentPlugins = exports.CommentPlugins = [_markdown.default, _html.default, _paragraph.default, _textStyle.default, _list.default, _image.default, _link.default, _mention.default, _blockquote.default];
 var _default = exports.default = Plugins;

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

@@ -0,0 +1,414 @@
+.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-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;
+  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 {
+  height: 280px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 2px solid transparent;
+}
+
+.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;
+}
+
+.row-card-list .row-card-content::-webkit-scrollbar {
+  width: 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-container .row-cell-empty {
+  display: inline-block;
+  height: 8px;
+  width: 20px;
+  background-color: #f1f1f1;
+  border-radius: 4px;
+}
+
+.row-card-item-header {
+  z-index: 1;
+}
+
+.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-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;
+  align-items: center;
+  flex-shrink: 0;
+  text-align: left;
+  margin: 0 8px;
+}
+
+.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;
+}
+
+.row-card-item .row-cell-value.show-name .image-cell-value {
+  height: inherit;
+}
+
+.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-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

@@ -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;