dtable-ui-component 0.2.7 → 0.2.8-beta

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

@@ -1,119 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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 ImagesLazyLoad;
-}(React.Component);
-
-export default ImagesLazyLoad;

package/es/components/common/link-editor-option.js

@@ -1,113 +0,0 @@
-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 LinkEditorOption = /*#__PURE__*/function (_React$Component) {
-  _inherits(LinkEditorOption, _React$Component);
-
-  var _super = _createSuper(LinkEditorOption);
-
-  function LinkEditorOption() {
-    var _this;
-
-    _classCallCheck(this, LinkEditorOption);
-
-    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.onDeleteOption = function (event) {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-
-      _this.props.onDeleteLinkOption(_this.props.option);
-    };
-
-    _this.getContainerStyle = function () {
-      return {
-        display: 'inline-flex',
-        marginRight: '10px',
-        padding: '0px 5px',
-        height: '20px',
-        borderRadius: '2px',
-        fontSize: '13px',
-        background: '#eceff4',
-        cursor: 'pointer'
-      };
-    };
-
-    _this.getOptionStyle = function () {
-      return {
-        flex: 1,
-        display: 'flex',
-        alignContent: 'center',
-        margin: '0 4px 0 2px'
-      };
-    };
-
-    _this.getOptionNameStyle = function () {
-      return {
-        maxWidth: '230px',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
-      };
-    };
-
-    _this.getOperationStyle = function () {
-      return {
-        height: '20px',
-        width: '16px',
-        cursor: 'pointer',
-        color: '#909090',
-        transform: 'scale(.8)'
-      };
-    };
-
-    return _this;
-  }
-
-  _createClass(LinkEditorOption, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          option = _this$props.option,
-          isShowRemoveIcon = _this$props.isShowRemoveIcon;
-      var containerStyle = this.getContainerStyle();
-      var optionStyle = this.getOptionStyle();
-      var optionNameStyle = this.getOptionNameStyle();
-      var operationStyle = this.getOperationStyle();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui link-option-item",
-        style: containerStyle
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "option-info",
-        style: optionStyle
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "option-name",
-        style: optionNameStyle
-      }, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
-        className: "option-remove",
-        style: operationStyle,
-        onClick: this.onDeleteOption
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-fork-number",
-        style: {
-          fontSize: '12px',
-          lineHeight: '20px'
-        }
-      })));
-    }
-  }]);
-
-  return LinkEditorOption;
-}(React.Component);
-
-LinkEditorOption.defaultProps = {
-  isShowRemoveIcon: false
-};
-export default LinkEditorOption;

package/es/components/common/mobile/mb-editor-header.js

@@ -1,48 +0,0 @@
-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 MBEditorHeader = /*#__PURE__*/function (_React$Component) {
-  _inherits(MBEditorHeader, _React$Component);
-
-  var _super = _createSuper(MBEditorHeader);
-
-  function MBEditorHeader() {
-    _classCallCheck(this, MBEditorHeader);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(MBEditorHeader, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          title = _this$props.title,
-          titleClass = _this$props.titleClass,
-          leftContent = _this$props.leftContent,
-          rightContent = _this$props.rightContent,
-          onLeftClick = _this$props.onLeftClick,
-          onRightClick = _this$props.onRightClick;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui-mb-editor-header ".concat(titleClass ? titleClass : '')
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "editor-header-left-content",
-        onClick: onLeftClick
-      }, leftContent), /*#__PURE__*/React.createElement("span", {
-        className: "editor-header-title"
-      }, title), /*#__PURE__*/React.createElement("span", {
-        className: "editor-header-right-content",
-        onClick: onRightClick,
-        style: {
-          color: '#f09f3f'
-        }
-      }, rightContent));
-    }
-  }]);
-
-  return MBEditorHeader;
-}(React.Component);
-
-export default MBEditorHeader;

package/es/components/common/modal-portal.js

@@ -1,44 +0,0 @@
-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 ReactDOM from 'react-dom';
-var modalRoot = document.getElementById('modal-wrapper');
-
-var ModalPortal = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalPortal, _React$Component);
-
-  var _super = _createSuper(ModalPortal);
-
-  function ModalPortal(props) {
-    var _this;
-
-    _classCallCheck(this, ModalPortal);
-
-    _this = _super.call(this, props);
-    _this.el = document.createElement('div');
-    return _this;
-  }
-
-  _createClass(ModalPortal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      modalRoot.appendChild(this.el);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      modalRoot.removeChild(this.el);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return ReactDOM.createPortal(this.props.children, this.el);
-    }
-  }]);
-
-  return ModalPortal;
-}(React.Component);
-
-export default ModalPortal;

package/es/components/common/select-editor-option.js

@@ -1,106 +0,0 @@
-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 SelectEditorOption = /*#__PURE__*/function (_React$Component) {
-  _inherits(SelectEditorOption, _React$Component);
-
-  var _super = _createSuper(SelectEditorOption);
-
-  function SelectEditorOption() {
-    var _this;
-
-    _classCallCheck(this, SelectEditorOption);
-
-    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.onDeleteOption = function (event) {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-
-      _this.props.onDeleteSelectOption(_this.props.option);
-    };
-
-    _this.getContainerStyle = function () {
-      var option = _this.props.option;
-      return {
-        display: 'inline-flex',
-        justifyContent: 'center',
-        marginRight: '10px',
-        padding: '0px 10px',
-        height: '20px',
-        borderRadius: '10px',
-        fontSize: '13px',
-        backgroundColor: option.color
-      };
-    };
-
-    _this.getOptionStyle = function (option) {
-      var textColor = option.textColor || null;
-      return {
-        flex: 1,
-        display: 'flex',
-        alignContent: 'center',
-        margin: '0 4px 0 2px',
-        color: textColor
-      };
-    };
-
-    _this.getOperationStyle = function (option) {
-      var textColor = option.textColor || null;
-      return {
-        height: '20px',
-        width: '16px',
-        cursor: 'pointer',
-        color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090',
-        transform: 'scale(.8)'
-      };
-    };
-
-    return _this;
-  }
-
-  _createClass(SelectEditorOption, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          option = _this$props.option,
-          isShowRemoveIcon = _this$props.isShowRemoveIcon;
-      var containerStyle = this.getContainerStyle();
-      var optionStyle = this.getOptionStyle(option);
-      var operationStyle = this.getOperationStyle(option);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui select-option-item",
-        style: containerStyle
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "option-info",
-        style: optionStyle
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "option-name"
-      }, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
-        className: "option-remove",
-        style: operationStyle,
-        onClick: this.onDeleteOption
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-fork-number",
-        style: {
-          fontSize: '12px',
-          lineHeight: '20px'
-        }
-      })));
-    }
-  }]);
-
-  return SelectEditorOption;
-}(React.Component);
-
-SelectEditorOption.defaultProps = {
-  isShowRemoveIcon: false
-};
-export default SelectEditorOption;