dtable-ui-component 0.1.75-beta → 0.1.75-beta1

package/lib/components/cell-formatter/url-formatter.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var propTypes = {
+  value: _propTypes.default.string,
+  containerClassName: _propTypes.default.string
+};
+
+var UrlFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(UrlFormatter, _React$Component);
+
+  function UrlFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = UrlFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        containerClassName = _this$props.containerClassName,
+        value = _this$props.value;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container url-formatter', containerClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, value);
+  };
+
+  return UrlFormatter;
+}(_react.default.Component);
+
+UrlFormatter.propTypes = propTypes;
+var _default = UrlFormatter;
+exports.default = _default;

package/lib/components/cell-formatter/widgets/file-item-formatter.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../../../utils/utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FileItemFormatter = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2.default)(FileItemFormatter, _Component);
+
+  function FileItemFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFileIconData", function (item) {
+      var fileIconUrl = (0, _utils.getFileIconUrl)(item.name, item.type);
+
+      var fileIconData = require('../../../' + fileIconUrl);
+
+      return fileIconData;
+    });
+    return _this;
+  }
+
+  var _proto = FileItemFormatter.prototype;
+
+  _proto.render = function render() {
+    var file = this.props.file;
+    return /*#__PURE__*/_react.default.createElement("img", {
+      className: "file-item-icon",
+      src: this.getFileIconData(file),
+      alt: file.name
+    });
+  };
+
+  return FileItemFormatter;
+}(_react.Component);
+
+FileItemFormatter.propTypes = {
+  file: _propTypes.default.string.isRequired
+};
+var _default = FileItemFormatter;
+exports.default = _default;

package/lib/components/cell-formatter/widgets/image-previewer-lightbox.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+
+var _modalPortal = _interopRequireDefault(require("../../common/modal-portal"));
+
+var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
+
+var _utils = require("../../../utils/utils");
+
+require("@seafile/react-image-lightbox/style.css");
+
+require("../../../css/image-previewer-ligntbox.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ImagePreviewerLightbox(props) {
+  var imageItems = props.imageItems,
+      imageIndex = props.imageIndex,
+      deleteImage = props.deleteImage,
+      downloadImage = props.downloadImage,
+      onRotateImage = props.onRotateImage,
+      readOnly = props.readOnly;
+  var imageItemsLength = imageItems.length;
+  var URL = imageItems[imageIndex];
+  var imageTitle = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : ''; // svg image is vectorgraph and can't rotate, external image can't rotate
+
+  var canRotateImage = onRotateImage && !readOnly && !(0, _utils.checkSVGImage)(URL) && (0, _utils.isInternalImg)(URL);
+
+  var imageTitleEl = /*#__PURE__*/_react.default.createElement("span", {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "text-truncate"
+  }, imageTitle), /*#__PURE__*/_react.default.createElement("span", {
+    className: "flex-shrink-0"
+  }, "(", imageIndex + 1, "/", imageItemsLength, ")"));
+
+  var toolbarButtons = [];
+
+  if (!readOnly && deleteImage) {
+    toolbarButtons.push( /*#__PURE__*/_react.default.createElement("button", {
+      className: "dtable-font dtable-icon-delete",
+      onClick: function onClick() {
+        deleteImage(imageIndex, 'previewer');
+      }
+    }));
+  }
+
+  if (downloadImage) {
+    toolbarButtons.push( /*#__PURE__*/_react.default.createElement("button", {
+      className: "dtable-font dtable-icon-download",
+      onClick: function onClick() {
+        downloadImage(URL);
+      }
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 767.8px)"
+  }, /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
+    wrapperClassName: "PC-image-previewer",
+    imageTitle: imageTitleEl,
+    toolbarButtons: toolbarButtons,
+    mainSrc: imageItems[imageIndex],
+    nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
+    prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+    onCloseRequest: props.closeImagePopup,
+    onMovePrevRequest: props.moveToPrevImage,
+    onMoveNextRequest: props.moveToNextImage,
+    onRotateImage: canRotateImage ? function (deg) {
+      onRotateImage(imageIndex, deg);
+    } : null,
+    imagePadding: 70,
+    reactModalStyle: {
+      overlay: {
+        zIndex: 1051
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 767.8px)"
+  }, /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
+    isDesktop: false,
+    wrapperClassName: "mobile-image-previewer dtable-ui-component",
+    mainSrc: imageItems[imageIndex],
+    nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
+    prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+    onCloseRequest: props.closeImagePopup,
+    onMovePrevRequest: props.moveToPrevImage,
+    onMoveNextRequest: props.moveToNextImage,
+    imagePadding: 0,
+    animationDisabled: true,
+    imageTitle: imageTitleEl,
+    reactModalStyle: {
+      overlay: {
+        zIndex: 1051,
+        backgroundColor: '#000'
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-footer-choice mobile-image-footer-choice dtable-ui-component"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-footer-icon"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex"
+  }, canRotateImage && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-footer-choice-item mr-4",
+    onClick: function onClick() {
+      onRotateImage(imageIndex, 90);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-rotate"
+  })), downloadImage && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-footer-choice-item",
+    onClick: function onClick() {
+      downloadImage(URL);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-download"
+  }))), !readOnly && deleteImage && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-footer-choice-item",
+    onClick: function onClick() {
+      deleteImage(imageIndex, 'previewer');
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-delete"
+  })))))));
+}
+
+ImagePreviewerLightbox.propTypes = {
+  imageItems: _propTypes.default.array.isRequired,
+  imageIndex: _propTypes.default.number.isRequired,
+  closeImagePopup: _propTypes.default.func.isRequired,
+  moveToPrevImage: _propTypes.default.func.isRequired,
+  moveToNextImage: _propTypes.default.func.isRequired,
+  downloadImage: _propTypes.default.func,
+  deleteImage: _propTypes.default.func,
+  onRotateImage: _propTypes.default.func,
+  readOnly: _propTypes.default.bool
+};
+var _default = ImagePreviewerLightbox;
+exports.default = _default;

package/lib/components/cell-formatter/widgets/long-text-formatter/html-long-text-formatter.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _markdown2html = require("../../../../utils/markdown2html");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2.default)(HtmlLongTextFormatter, _Component);
+
+  function HtmlLongTextFormatter(_props) {
+    var _this;
+
+    _this = _Component.call(this, _props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "translateValue", function (props) {
+      var value = props.value;
+
+      if (!value) {
+        _this.setState({
+          innerHtml: null
+        });
+
+        return;
+      }
+
+      var valueType = Object.prototype.toString.call(value);
+
+      if (valueType === '[object String]') {
+        _this.convertMarkdown(value);
+
+        return;
+      }
+
+      if (valueType === '[object Object]') {
+        _this.convertMarkdown(value.text);
+
+        return;
+      }
+
+      return;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "convertMarkdown", function (mdFile) {
+      _markdown2html.processor.process(mdFile).then(function (result) {
+        var innerHtml = String(result).replace(/<a /ig, '<a target="_blank" ');
+
+        _this.setState({
+          innerHtml: innerHtml
+        });
+      });
+    });
+    _this.state = {
+      innerHtml: null
+    };
+    return _this;
+  }
+
+  var _proto = HtmlLongTextFormatter.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.translateValue(this.props);
+  };
+
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    var value = this.props.value;
+
+    if (nextProps.value !== value) {
+      this.translateValue(nextProps);
+    }
+  };
+
+  _proto.render = function render() {
+    var innerHtml = this.state.innerHtml;
+    var className = this.props.className;
+    if (!innerHtml) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className + " article",
+      dangerouslySetInnerHTML: {
+        __html: innerHtml
+      }
+    });
+  };
+
+  return HtmlLongTextFormatter;
+}(_react.Component);
+
+HtmlLongTextFormatter.propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  className: _propTypes.default.string
+};
+var _default = HtmlLongTextFormatter;
+exports.default = _default;

package/lib/components/cell-formatter/widgets/long-text-formatter/simple-long-text-formatter.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _normalizeLongTextValue = _interopRequireDefault(require("../../../../utils/normalize-long-text-value"));
+
+var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(SimpleLongTextFormatter, _React$Component);
+
+  function SimpleLongTextFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderLinks", function (value) {
+      var links = value.links;
+      if (!Array.isArray(links) || links.length === 0) return null;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-links"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-url"
+      }), links.length);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCheckList", function (value) {
+      var checkList = value.checklist;
+      if (!checkList || checkList.total === 0) return null;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-check-list"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-square-solid " + (checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
+      }), checkList.completed + "/" + checkList.total);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderImages", function (value) {
+      var images = value.images;
+      if (!Array.isArray(images) || images.length === 0) return null;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-images"
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: images[0],
+        alt: ""
+      }), /*#__PURE__*/_react.default.createElement("i", {
+        className: "image-number"
+      }, images.length > 1 ? '+' + images.length : null));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderContent", function (value) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-content"
+      }, value.preview);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "translateValue", function () {
+      var value = _this.props.value;
+      if (!value) return {};
+      var valueType = Object.prototype.toString.call(value);
+
+      if (valueType === '[object String]') {
+        return (0, _normalizeLongTextValue.default)(value);
+      }
+
+      if (valueType === '[object Object]') {
+        return value;
+      }
+
+      return {};
+    });
+    return _this;
+  }
+
+  var _proto = SimpleLongTextFormatter.prototype;
+
+  _proto.render = function render() {
+    var className = this.props.className;
+    var value = this.translateValue();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value));
+  };
+
+  return SimpleLongTextFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(SimpleLongTextFormatter, "defaultProps", {
+  value: {
+    text: '',
+    images: [],
+    links: [],
+    preview: ''
+  }
+});
+SimpleLongTextFormatter.propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  className: _propTypes.default.string
+};
+var _default = SimpleLongTextFormatter;
+exports.default = _default;

package/lib/components/common/collaborator-item.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  collaborator: _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    avatar_url: _propTypes.default.string.isRequired,
+    email: _propTypes.default.string
+  }),
+  enableDeleteCollaborator: _propTypes.default.bool,
+  onDeleteCollaborator: _propTypes.default.func
+};
+
+var CollaboratorItem = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(CollaboratorItem, _React$Component);
+
+  function CollaboratorItem() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDeleteCollaborator", function () {
+      var collaborator = _this.props.collaborator;
+
+      _this.props.onDeleteCollaborator(collaborator);
+    });
+    return _this;
+  }
+
+  var _proto = CollaboratorItem.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        collaborator = _this$props.collaborator,
+        enableDeleteCollaborator = _this$props.enableDeleteCollaborator;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui collaborator-item"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "collaborator-avatar"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      className: "collaborator-avatar-icon",
+      alt: collaborator.name,
+      src: collaborator.avatar_url
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "collaborator-name"
+    }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/_react.default.createElement("span", {
+      className: "collaborator-remove",
+      onClick: this.onDeleteCollaborator
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number"
+    })));
+  };
+
+  return CollaboratorItem;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(CollaboratorItem, "defaultProps", {
+  enableDelete: false
+});
+CollaboratorItem.propTypes = propTypes;
+var _default = CollaboratorItem;
+exports.default = _default;

package/lib/components/common/edit-editor-button.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  text: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func
+};
+
+var EditEditorButton = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(EditEditorButton, _React$Component);
+
+  function EditEditorButton() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getStyle", function () {
+      return {
+        display: 'inline-block',
+        padding: '0 12px',
+        height: '28px',
+        lineHeight: '28px',
+        fontSize: '14px',
+        backgroundColor: '#f0f0f0',
+        color: '#8f8f8f',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        userSelect: 'none'
+      };
+    });
+    return _this;
+  }
+
+  var _proto = EditEditorButton.prototype;
+
+  _proto.render = function render() {
+    var text = this.props.text;
+    var style = this.getStyle();
+    return /*#__PURE__*/_react.default.createElement("span", {
+      style: style,
+      onClick: this.props.onClick
+    }, text);
+  };
+
+  return EditEditorButton;
+}(_react.default.Component);
+
+EditEditorButton.propTypes = propTypes;
+var _default = EditEditorButton;
+exports.default = _default;