dtable-ui-component 0.2.1 → 0.2.3

package/es/components/cell-formatter/number-formatter.js

@@ -0,0 +1,46 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import cn from 'astro-classname';
+import { formatNumberToString } from '../../utils/value-format-utils';
+
+var NumberFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(NumberFormatter, _React$Component);
+
+  var _super = _createSuper(NumberFormatter);
+
+  function NumberFormatter() {
+    _classCallCheck(this, NumberFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(NumberFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          number = _this$props.value,
+          data = _this$props.data,
+          containerClassName = _this$props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container number-formatter', containerClassName);
+
+      if (number || number === 0) {
+        number = formatNumberToString(number, data);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, number);
+    }
+  }]);
+
+  return NumberFormatter;
+}(React.Component);
+
+NumberFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+export default NumberFormatter;

package/es/components/cell-formatter/rate-formatter.js

@@ -0,0 +1,74 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import cn from 'astro-classname';
+
+var RateFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(RateFormatter, _React$Component);
+
+  var _super = _createSuper(RateFormatter);
+
+  function RateFormatter() {
+    var _this;
+
+    _classCallCheck(this, RateFormatter);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.getRateList = function () {
+      var _this$props = _this.props,
+          data = _this$props.data,
+          value = _this$props.value;
+      var rate_max_number = data.rate_max_number,
+          rate_style_color = data.rate_style_color;
+      var validValue = Math.min(rate_max_number, value);
+      var rateList = [];
+
+      for (var i = 0; i < validValue; i++) {
+        rateList.push( /*#__PURE__*/React.createElement("i", {
+          key: "dtable-ui-component-rate-".concat(i),
+          className: "dtable-font dtable-icon-star",
+          style: {
+            color: rate_style_color || '#e5e5e5'
+          }
+        }));
+      }
+
+      return rateList;
+    };
+
+    return _this;
+  }
+
+  _createClass(RateFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          number = _this$props2.value,
+          containerClassName = _this$props2.containerClassName;
+      var className = cn('dtable-ui cell-formatter-container rate-formatter', containerClassName);
+      if (!number) return null;
+      var rateList = this.getRateList();
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, rateList);
+    }
+  }]);
+
+  return RateFormatter;
+}(React.Component);
+
+RateFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+RateFormatter.defaultProps = {
+  editable: true
+};
+export default RateFormatter;

package/es/components/cell-formatter/single-select-formatter.js

@@ -0,0 +1,69 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import cn from 'astro-classname';
+import SelectItem from '../common/select-item';
+
+var SingleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(SingleSelectFormatter, _React$PureComponent);
+
+  var _super = _createSuper(SingleSelectFormatter);
+
+  function SingleSelectFormatter() {
+    var _this;
+
+    _classCallCheck(this, SingleSelectFormatter);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.getOption = function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          options = _this$props.options,
+          fontSize = _this$props.fontSize;
+      var option = options.find(function (item) {
+        return item.id === value || item.name === value;
+      });
+
+      if (option) {
+        return /*#__PURE__*/React.createElement(SelectItem, {
+          option: option,
+          fontSize: fontSize
+        });
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(SingleSelectFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          containerClassName = _this$props2.containerClassName,
+          value = _this$props2.value;
+      var classname = cn('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
+
+      if (!value) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classname
+        });
+      }
+
+      var option = this.getOption();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, option);
+    }
+  }]);
+
+  return SingleSelectFormatter;
+}(React.PureComponent);
+
+export default SingleSelectFormatter;

package/es/components/cell-formatter/text-formatter.js

@@ -0,0 +1,35 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import cn from 'astro-classname';
+
+var TextFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(TextFormatter, _React$Component);
+
+  var _super = _createSuper(TextFormatter);
+
+  function TextFormatter() {
+    _classCallCheck(this, TextFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(TextFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          containerClassName = _this$props.containerClassName,
+          value = _this$props.value;
+      var classname = cn('dtable-ui cell-formatter-container text-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, value);
+    }
+  }]);
+
+  return TextFormatter;
+}(React.Component);
+
+export default TextFormatter;

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

@@ -0,0 +1,35 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import cn from 'astro-classname';
+
+var UrlFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(UrlFormatter, _React$Component);
+
+  var _super = _createSuper(UrlFormatter);
+
+  function UrlFormatter() {
+    _classCallCheck(this, UrlFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UrlFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          containerClassName = _this$props.containerClassName,
+          value = _this$props.value;
+      var classname = cn('dtable-ui cell-formatter-container url-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, value);
+    }
+  }]);
+
+  return UrlFormatter;
+}(React.Component);
+
+export default UrlFormatter;

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

@@ -0,0 +1,50 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import { getFileIconUrl } from '../../../utils/utils';
+
+var FileItemFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(FileItemFormatter, _Component);
+
+  var _super = _createSuper(FileItemFormatter);
+
+  function FileItemFormatter() {
+    var _this;
+
+    _classCallCheck(this, FileItemFormatter);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.getFileIconData = function (item) {
+      var fileIconUrl = getFileIconUrl(item.name, item.type);
+
+      var fileIconData = require('../../../' + fileIconUrl);
+
+      return fileIconData;
+    };
+
+    return _this;
+  }
+
+  _createClass(FileItemFormatter, [{
+    key: "render",
+    value: function render() {
+      var file = this.props.file;
+      return /*#__PURE__*/React.createElement("img", {
+        className: "file-item-icon",
+        src: this.getFileIconData(file),
+        alt: file.name
+      });
+    }
+  }]);
+
+  return FileItemFormatter;
+}(Component);
+
+export default FileItemFormatter;

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

@@ -0,0 +1,119 @@
+import React, { Fragment } from 'react';
+import MediaQuery from 'react-responsive';
+import ModalPortal from '../../common/modal-portal';
+import Lightbox from '@seafile/react-image-lightbox';
+import { checkSVGImage, isInternalImg } from '../../../utils/utils';
+import '@seafile/react-image-lightbox/style.css';
+import '../../../css/image-previewer-ligntbox.css';
+
+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 && !checkSVGImage(URL) && isInternalImg(URL);
+  var imageTitleEl = /*#__PURE__*/React.createElement("span", {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-truncate"
+  }, imageTitle), /*#__PURE__*/React.createElement("span", {
+    className: "flex-shrink-0"
+  }, "(", imageIndex + 1, "/", imageItemsLength, ")"));
+  var toolbarButtons = [];
+
+  if (!readOnly && deleteImage) {
+    toolbarButtons.push( /*#__PURE__*/React.createElement("button", {
+      className: "dtable-font dtable-icon-delete",
+      onClick: function onClick() {
+        deleteImage(imageIndex, 'previewer');
+      }
+    }));
+  }
+
+  if (downloadImage) {
+    toolbarButtons.push( /*#__PURE__*/React.createElement("button", {
+      className: "dtable-font dtable-icon-download",
+      onClick: function onClick() {
+        downloadImage(URL);
+      }
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
+    query: "(min-width: 767.8px)"
+  }, /*#__PURE__*/React.createElement(Lightbox, {
+    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.createElement(MediaQuery, {
+    query: "(max-width: 767.8px)"
+  }, /*#__PURE__*/React.createElement(Lightbox, {
+    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.createElement(ModalPortal, null, /*#__PURE__*/React.createElement("div", {
+    className: "image-footer-choice mobile-image-footer-choice dtable-ui-component"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "image-footer-icon"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex"
+  }, canRotateImage && /*#__PURE__*/React.createElement("span", {
+    className: "image-footer-choice-item mr-4",
+    onClick: function onClick() {
+      onRotateImage(imageIndex, 90);
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-rotate"
+  })), downloadImage && /*#__PURE__*/React.createElement("span", {
+    className: "image-footer-choice-item",
+    onClick: function onClick() {
+      downloadImage(URL);
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-download"
+  }))), !readOnly && deleteImage && /*#__PURE__*/React.createElement("span", {
+    className: "image-footer-choice-item",
+    onClick: function onClick() {
+      deleteImage(imageIndex, 'previewer');
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-delete"
+  })))))));
+}
+
+export default ImagePreviewerLightbox;

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

@@ -0,0 +1,63 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var CollaboratorItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(CollaboratorItem, _React$Component);
+
+  var _super = _createSuper(CollaboratorItem);
+
+  function CollaboratorItem() {
+    var _this;
+
+    _classCallCheck(this, CollaboratorItem);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.onDeleteCollaborator = function () {
+      var collaborator = _this.props.collaborator;
+
+      _this.props.onDeleteCollaborator(collaborator);
+    };
+
+    return _this;
+  }
+
+  _createClass(CollaboratorItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          collaborator = _this$props.collaborator,
+          enableDeleteCollaborator = _this$props.enableDeleteCollaborator;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui collaborator-item"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-avatar"
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "collaborator-avatar-icon",
+        alt: collaborator.name,
+        src: collaborator.avatar_url
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-name"
+      }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-remove",
+        onClick: this.onDeleteCollaborator
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })));
+    }
+  }]);
+
+  return CollaboratorItem;
+}(React.Component);
+
+CollaboratorItem.defaultProps = {
+  enableDelete: false
+};
+export default CollaboratorItem;

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

@@ -0,0 +1,56 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var EditEditorButton = /*#__PURE__*/function (_React$Component) {
+  _inherits(EditEditorButton, _React$Component);
+
+  var _super = _createSuper(EditEditorButton);
+
+  function EditEditorButton() {
+    var _this;
+
+    _classCallCheck(this, EditEditorButton);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _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;
+  }
+
+  _createClass(EditEditorButton, [{
+    key: "render",
+    value: function render() {
+      var text = this.props.text;
+      var style = this.getStyle();
+      return /*#__PURE__*/React.createElement("span", {
+        style: style,
+        onClick: this.props.onClick
+      }, text);
+    }
+  }]);
+
+  return EditEditorButton;
+}(React.Component);
+
+export default EditEditorButton;