@seafile/sdoc-editor 2.0.18-alph-1.0.2 → 2.0.18-alph-2.0.0

package/dist/basic-sdk/comment/components/comment-participants-editor/index.js

@@ -23,6 +23,7 @@ const CommentParticipantsEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref
   const {
     collaborators
   } = (0, _hooks.useCollaborators)();
+  console.log(2, collaborators);
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');

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/multi-column/plugin.js

@@ -8,7 +8,6 @@ var _slate = require("@seafile/slate");
 var _core = require("../../core");
 var _constants = require("../../constants");
 var _helper = require("./helper");
-var _unwrapList = require("../list/transforms/unwrap-list");
 const withMultiColumn = editor => {
   const {
     normalizeNode,
@@ -58,30 +57,6 @@ const withMultiColumn = editor => {
 
     // When selection is at start of the only one existed child nodes in current column node, delete column node
     if (isOnlyOneChild && isAtStart) {
-      // Transform non-paragraph elements without callout element to paragraph elements
-      const currentNodeInColumn = currentColumnEntry[0].children[0];
-      if (currentNodeInColumn.type !== _constants.PARAGRAPH) {
-        var _currentNodeInColumn$;
-        const currentNodePathInColumn = (0, _core.findPath)(editor, currentNodeInColumn);
-        // Unwrap list if list-item exists in the current column node
-        if ([_constants.UNORDERED_LIST, _constants.ORDERED_LIST].includes(currentNodeInColumn.type)) {
-          (0, _unwrapList.unwrapList)(editor);
-          return;
-        }
-        if ([_constants.UNORDERED_LIST, _constants.ORDERED_LIST].includes(currentNodeInColumn === null || currentNodeInColumn === void 0 ? void 0 : (_currentNodeInColumn$ = currentNodeInColumn.children[0]) === null || _currentNodeInColumn$ === void 0 ? void 0 : _currentNodeInColumn$.type)) {
-          _slate.Transforms.unwrapNodes(editor, {
-            at: currentNodePathInColumn
-          });
-        } else {
-          _slate.Transforms.setNodes(editor, {
-            type: _constants.PARAGRAPH
-          }, {
-            at: currentNodePathInColumn
-          });
-        }
-        return;
-      }
-
       // Delete multi_column and column wrap when only one child column node exists
       if (childColumn.length <= 2) {
         deleteBackward();

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NEED_FORMATTER = exports.LINK_NOT_SUPPORT_TYPES = exports.DELETED_OPTION_BACKGROUND_COLOR = void 0;
+var _dtableUtils = require("dtable-utils");
+const LINK_NOT_SUPPORT_TYPES = exports.LINK_NOT_SUPPORT_TYPES = [_dtableUtils.CellType.CHECKBOX, _dtableUtils.CellType.RATE, _dtableUtils.CellType.LONG_TEXT, _dtableUtils.CellType.IMAGE, _dtableUtils.CellType.FILE, _dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.MULTIPLE_SELECT, _dtableUtils.CellType.GEOLOCATION, _dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.BUTTON, _dtableUtils.CellType.LINK, _dtableUtils.CellType.DIGITAL_SIGN];
+const NEED_FORMATTER = exports.NEED_FORMATTER = [_dtableUtils.CellType.CREATOR, _dtableUtils.CellType.LAST_MODIFIER, _dtableUtils.CellType.SINGLE_SELECT];
+const DELETED_OPTION_BACKGROUND_COLOR = exports.DELETED_OPTION_BACKGROUND_COLOR = '#eaeaea';

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

@@ -0,0 +1,111 @@
+"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 _rateItem = _interopRequireDefault(require("./widget/rate-item"));
+require("./rate-formatter.css");
+class RateFormatter extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onMouseEnterRateItem", index => {
+      this.setState({
+        enterRateItemIndex: index
+      });
+    });
+    (0, _defineProperty2.default)(this, "onMouseLeaveRateItem", () => {
+      this.setState({
+        enterRateItemIndex: -1
+      });
+    });
+    (0, _defineProperty2.default)(this, "onChangeRateNumber", index => {
+      const {
+        value
+      } = this.state;
+      let {
+        column,
+        onCommit,
+        row
+      } = this.props;
+      let updated;
+      if (value === index) {
+        this.setState({
+          value: ''
+        });
+        updated = {
+          [column === null || column === void 0 ? void 0 : column.key]: ''
+        };
+      } else {
+        this.setState({
+          value: index
+        });
+        updated = {
+          [column === null || column === void 0 ? void 0 : column.key]: index
+        };
+      }
+      onCommit({
+        rowId: row ? row._id : '',
+        cellKey: column === null || column === void 0 ? void 0 : column.key,
+        updated
+      });
+    });
+    (0, _defineProperty2.default)(this, "getRateMaxStar", () => {
+      const {
+        column,
+        value,
+        isCellSelected,
+        readOnly
+      } = this.props;
+      const {
+        enterRateItemIndex
+      } = this.state;
+      const {
+        rate_max_number
+      } = column.data || {};
+      const editable = !readOnly && this.props.editable;
+      let rateList = [];
+      if (value || isCellSelected) {
+        for (let i = 0; i < rate_max_number; i++) {
+          let rateItem = /*#__PURE__*/_react.default.createElement(_rateItem.default, {
+            key: i,
+            enterRateItemIndex: enterRateItemIndex,
+            rateItemIndex: i + 1,
+            onMouseEnterRateItem: this.onMouseEnterRateItem,
+            onMouseLeaveRateItem: this.onMouseLeaveRateItem,
+            value: value,
+            column: column,
+            isShowRateItem: isCellSelected && editable,
+            onChangeRateNumber: this.onChangeRateNumber,
+            editable: editable
+          });
+          rateList.push(rateItem);
+        }
+      }
+      return rateList;
+    });
+    this.state = {
+      value: props.value || 0,
+      enterRateItemIndex: -1
+    };
+  }
+  render() {
+    const {
+      value
+    } = this.props;
+    let rateList = this.getRateMaxStar();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-flex rate-formatter",
+      title: value,
+      role: "button",
+      "aria-label": `${value}${this.props.cellAriaLabel || ''}`
+    }, rateList);
+  }
+}
+RateFormatter.defaultProps = {
+  editable: true
+};
+var _default = exports.default = RateFormatter;

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

@@ -0,0 +1,41 @@
+"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"));
+class SimpleCellFormatter extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "getFormattedValue", val => {
+      let formattedValue = val;
+      if (Object.prototype.toString.call(val) === '[object Boolean]') {
+        formattedValue += '';
+      }
+      return formattedValue;
+    });
+  }
+  shouldComponentUpdate(nextProps) {
+    return nextProps.value !== this.props.value;
+  }
+  render() {
+    const {
+      value,
+      type,
+      cellAriaLabel = ''
+    } = this.props;
+    if (typeof value === 'object') {
+      return null;
+    }
+    let formattedValue = this.getFormattedValue(value);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: type ? `grid-cell-type-${type}` : 'grid-cell-type-default',
+      title: formattedValue,
+      "aria-label": `${formattedValue}${cellAriaLabel}`
+    }, formattedValue);
+  }
+}
+var _default = exports.default = SimpleCellFormatter;

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

@@ -0,0 +1,65 @@
+"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 _constants = require("../../../constants");
+var _helpers = require("../helpers");
+class SingleSelectOption extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "getCurrentOption", () => {
+      let {
+        value,
+        column
+      } = this.props;
+      let options = (0, _helpers.getSelectColumnOptions)(column);
+      return options.find(item => item.id === value);
+    });
+    (0, _defineProperty2.default)(this, "getStyle", option => {
+      let style = {
+        display: 'inline-block',
+        padding: '0px 10px',
+        height: '20px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        borderRadius: '10px',
+        fontSize: '13px'
+      };
+      if (option) {
+        style.backgroundColor = option.color;
+        style.color = option.textColor || null;
+      } else {
+        style.backgroundColor = _constants.DELETED_OPTION_BACKGROUND_COLOR;
+      }
+      return style;
+    });
+  }
+  render() {
+    const {
+      value,
+      column,
+      cellAriaLabel = ''
+    } = this.props;
+    if (!value) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "w-100 h-100",
+        "aria-label": cellAriaLabel
+      });
+    }
+    const currentOption = this.getCurrentOption();
+    const name = currentOption ? currentOption.name : null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      // If parent node is FormulaFormatter, column is {data: array_data}, so column.type is undefined
+      className: 'grid-cell-type-' + (column.type || ''),
+      style: this.getStyle(currentOption),
+      title: name,
+      "aria-label": `${name}${cellAriaLabel}`
+    }, name);
+  }
+}
+var _default = exports.default = SingleSelectOption;

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/formatters/rate-formatter.css

@@ -0,0 +1,23 @@
+.rate-formatter {
+  height: fit-content;
+}
+
+.rate-formatter .rate-item {
+  cursor: pointer;
+}
+
+.rate-item-active {
+  opacity: 1 !important;
+}
+
+@media (max-width: 767px) {
+  .mobile-row-expand-rate-container .rate-item,
+  .mobile-row-expand-rate-container .rate-item-active {
+    margin-right: 0.25rem;
+  }
+
+  .mobile-row-expand-rate-container .rate-item .dtable-font,
+  .mobile-row-expand-rate-container .rate-item-active .dtable-font {
+    font-size: 24px;
+  }
+}

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/formatters/widget/rate-item.js

@@ -0,0 +1,78 @@
+"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 _reactstrap = require("reactstrap");
+class RateItem extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onMouseEnterRateItem", () => {
+      const {
+        rateItemIndex
+      } = this.props;
+      this.props.onMouseEnterRateItem(rateItemIndex);
+    });
+    (0, _defineProperty2.default)(this, "onMouseLeaveRateItem", () => {
+      this.props.onMouseLeaveRateItem();
+    });
+    (0, _defineProperty2.default)(this, "onChangeRateNumber", () => {
+      const {
+        onChangeRateNumber,
+        rateItemIndex,
+        editable
+      } = this.props;
+      if (onChangeRateNumber && editable) {
+        onChangeRateNumber(rateItemIndex);
+      }
+    });
+    this.tooltipRef = /*#__PURE__*/_react.default.createRef();
+  }
+  render() {
+    const {
+      enterRateItemIndex,
+      rateItemIndex,
+      value,
+      column,
+      isShowRateItem,
+      editable
+    } = this.props;
+    const {
+      rate_style_color,
+      rate_style_type
+    } = column.data || {};
+    const rateShowType = rate_style_type ? rate_style_type : 'dtable-icon-rate';
+    if (!isShowRateItem && rateItemIndex > value) return null;
+    let style = {
+      color: value >= rateItemIndex ? rate_style_color : '#e5e5e5'
+    };
+    if (enterRateItemIndex >= rateItemIndex) {
+      style = {
+        color: rate_style_color,
+        opacity: value >= rateItemIndex ? 1 : 0.4
+      };
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onMouseEnter: this.onMouseEnterRateItem,
+      onMouseLeave: this.onMouseLeaveRateItem,
+      style: {
+        cursor: editable ? 'pointer' : 'default'
+      },
+      onClick: this.onChangeRateNumber,
+      className: `rate-item ${value >= rateItemIndex ? 'rate-item-active' : ''}`
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: `dtable-font ${rateShowType}`,
+      ref: this.tooltipRef,
+      style: style,
+      "aria-hidden": "true"
+    }), editable && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+      placement: "bottom",
+      target: this.tooltipRef
+    }, rateItemIndex));
+  }
+}
+var _default = exports.default = RateItem;