dtable-ui-component 0.1.79-beta → 0.1.82-beta

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

@@ -0,0 +1,79 @@
+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 _ref = data || {},
+          _ref$rate_max_number = _ref.rate_max_number,
+          rate_max_number = _ref$rate_max_number === void 0 ? 5 : _ref$rate_max_number,
+          _ref$rate_style_color = _ref.rate_style_color,
+          rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$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,55 @@
+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() {
+    var _this;
+
+    _classCallCheck(this, TextFormatter);
+
+    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.getFormattedValue = function (val) {
+      if (typeof val === 'object') {
+        return null;
+      }
+
+      if (Object.prototype.toString.call(val) === '[object Boolean]') {
+        return val + '';
+      }
+
+      return val;
+    };
+
+    return _this;
+  }
+
+  _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
+      }, this.getFormattedValue(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;

package/es/components/common/images-lazy-load.js

@@ -0,0 +1,150 @@
+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 Loading from '../loading';
+import { getImageThumbnailUrl } from '../../utils/utils';
+
+var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImagesLazyLoad, _React$Component);
+
+  var _super = _createSuper(ImagesLazyLoad);
+
+  function ImagesLazyLoad(props) {
+    var _this;
+
+    _classCallCheck(this, ImagesLazyLoad);
+
+    _this = _super.call(this, props);
+
+    _this.componentDidMount = function () {
+      var images = _this.state.images;
+
+      _this.lazyLoadImages(images);
+    };
+
+    _this.componentWillReceiveProps = function (nextProps) {
+      if (nextProps.images.toString() !== _this.props.images.toString()) {
+        _this.lazyLoadImages(nextProps.images);
+      }
+    };
+
+    _this.componentWillUnmount = function () {
+      // prevent async operation
+      _this.setState = function (state, callback) {
+        return;
+      };
+    };
+
+    _this.lazyLoadImages = function (images) {
+      if (!Array.isArray(images) || images.length === 0) {
+        return;
+      }
+
+      var server = _this.props.server.server;
+      images.forEach(function (item) {
+        var url = getImageThumbnailUrl(item, server);
+
+        _this.lazyLoadImage(url, function (image) {
+          var _this$state = _this.state,
+              loadedCount = _this$state.loadedCount,
+              loadedImages = _this$state.loadedImages;
+
+          _this.setState({
+            loadedCount: loadedCount + 1,
+            loadedImages: loadedImages.concat(image)
+          });
+        }, function () {
+          var loadedCount = _this.state.loadedCount;
+
+          _this.setState({
+            loadedCount: loadedCount + 1
+          });
+        });
+      });
+    };
+
+    _this.lazyLoadImage = function (url, resolve, reject) {
+      if (!url) {
+        reject('img path is require');
+        return;
+      }
+
+      var image = new Image();
+
+      image.onload = function () {
+        resolve(image);
+      };
+
+      image.onerror = function (e) {
+        reject(e);
+      };
+
+      image.src = url;
+    };
+
+    _this.onMouseDown = function (event) {
+      event.stopPropagation();
+    };
+
+    _this.onImageClick = function (event, index) {
+      event.stopPropagation();
+
+      _this.props.onImageClick(index);
+    };
+
+    _this.state = {
+      images: props.images,
+      loadedImages: [],
+      loadedCount: 0
+    };
+    return _this;
+  }
+
+  _createClass(ImagesLazyLoad, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state2 = this.state,
+          images = _this$state2.images,
+          loadedImages = _this$state2.loadedImages,
+          loadedCount = _this$state2.loadedCount;
+
+      if (!Array.isArray(images) || images.length === 0) {
+        return '';
+      }
+
+      if (images.length > loadedCount) {
+        var style = {
+          marginLeft: '4px'
+        };
+        return /*#__PURE__*/React.createElement("div", {
+          style: style
+        }, /*#__PURE__*/React.createElement(Loading, null));
+      }
+
+      if (images.length === loadedCount) {
+        return loadedImages.map(function (image, index) {
+          return /*#__PURE__*/React.createElement("img", {
+            key: index,
+            className: "image-item",
+            src: image.src,
+            onMouseDown: _this2.onMouseDown,
+            onClick: function onClick(event) {
+              return _this2.onImageClick(event, index);
+            },
+            alt: ""
+          });
+        });
+      }
+
+      return '';
+    }
+  }]);
+
+  return ImagesLazyLoad;
+}(React.Component);
+
+export default ImagesLazyLoad;