dtable-ui-component 0.3.20 → 0.3.21

package/lib/ImageFormatter/images-lazy-load.js

@@ -5,43 +5,32 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import Loading from '../Loading';
 import { getImageThumbnailUrl } from './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 () {
       _this.lazyLoadImages(_this.props);
     };
-
     _this.UNSAFE_componentWillReceiveProps = function (nextProps) {
       if (nextProps.images.toString() !== _this.props.images.toString()) {
         _this.lazyLoadImages(nextProps);
       }
     };
-
     _this.componentWillUnmount = function () {
       // prevent async operation
       _this.setState = function (state, callback) {
         return;
       };
     };
-
     _this.lazyLoadImages = function (props) {
       var images = props.images;
-
       if (!Array.isArray(images) || images.length === 0) {
         return;
       }
-
       _this.setState({
         images: images,
         loadedImages: [],
@@ -50,21 +39,18 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
         var server = _this.props.server;
         images.forEach(function (item, index) {
           var url = getImageThumbnailUrl(item, server);
-
           _this.lazyLoadImage(url, function (image) {
             var _this$state = _this.state,
-                loadedCount = _this$state.loadedCount,
-                loadedImages = _this$state.loadedImages;
+              loadedCount = _this$state.loadedCount,
+              loadedImages = _this$state.loadedImages;
             var newImageList = loadedImages.slice(0);
             newImageList[index] = image;
-
             _this.setState({
               loadedCount: loadedCount + 1,
               loadedImages: newImageList
             });
           }, function () {
             var loadedCount = _this.state.loadedCount;
-
             _this.setState({
               loadedCount: loadedCount + 1
             });
@@ -72,36 +58,27 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
         });
       });
     };
-
     _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: [],
@@ -109,21 +86,17 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
     };
     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;
-
+        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'
@@ -133,7 +106,6 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
           className: "d-flex align-items-center"
         }, /*#__PURE__*/React.createElement(Loading, null));
       }
-
       return loadedImages.map(function (image, index) {
         return /*#__PURE__*/React.createElement("img", {
           key: index,
@@ -148,8 +120,6 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
       });
     }
   }]);
-
   return ImagesLazyLoad;
 }(React.Component);
-
 export default ImagesLazyLoad;

package/lib/ImageFormatter/index.js

@@ -8,108 +8,84 @@ import ImagesLazyLoad from './images-lazy-load';
 import { getImageThumbnailUrl } from './utils';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
 import './index.css';
-
 var ImageFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(ImageFormatter, _React$Component);
-
   var _super = _createSuper(ImageFormatter);
-
   function ImageFormatter(props) {
     var _this;
-
     _classCallCheck(this, ImageFormatter);
-
     _this = _super.call(this, props);
-
     _this.onImageClick = function (index) {
       if (!_this.props.isSupportPreview) return;
-
       _this.setState({
         isPreviewImage: true,
         previewImageIndex: index
       });
     };
-
     _this.closeImagePopup = function () {
       if (!_this.props.isSupportPreview) return;
-
       if (_this.props.onCloseCallback) {
         _this.props.onCloseCallback();
       }
-
       _this.setState({
         isPreviewImage: false,
         previewImageIndex: -1
       });
     };
-
     _this.movePrev = function () {
       var images = _this.props.value;
-
       _this.setState(function (prevState) {
         return {
           previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
         };
       });
     };
-
     _this.moveNext = function () {
       var images = _this.props.value;
-
       _this.setState(function (prevState) {
         return {
           previewImageIndex: (prevState.previewImageIndex + 1) % images.length
         };
       });
     };
-
     _this.downloadImage = function (imageItemUrl) {
       if (!_this.props.downloadImage) return;
-
       _this.props.downloadImage(imageItemUrl);
     };
-
     _this.deleteImage = function (index) {
       var readOnly = _this.props.readOnly;
       if (readOnly) return;
       if (!_this.props.deleteImage) return;
-
       _this.props.deleteImage(index);
     };
-
     _this.onRotateImage = function (index, degree) {
       var readOnly = _this.props.readOnly;
       if (readOnly) return;
       if (!_this.props.rotateImage) return;
-
       _this.props.rotateImage(index, degree);
     };
-
     _this.state = {
       isPreviewImage: false,
       previewImageIndex: -1
     };
     return _this;
   }
-
   _createClass(ImageFormatter, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          isSample = _this$props.isSample,
-          value = _this$props.value,
-          server = _this$props.server,
-          containerClassName = _this$props.containerClassName,
-          readOnly = _this$props.readOnly;
+        isSample = _this$props.isSample,
+        value = _this$props.value,
+        server = _this$props.server,
+        containerClassName = _this$props.containerClassName,
+        readOnly = _this$props.readOnly;
       var className = classnames('dtable-ui cell-formatter-container image-formatter', containerClassName);
       var _this$state = this.state,
-          isPreviewImage = _this$state.isPreviewImage,
-          previewImageIndex = _this$state.previewImageIndex;
-
+        isPreviewImage = _this$state.isPreviewImage,
+        previewImageIndex = _this$state.previewImageIndex;
       if (!Array.isArray(value) || value.length === 0) {
         return null;
       }
-
       if (isSample) {
         var item = value[0];
         var url = getImageThumbnailUrl(item, server);
@@ -123,7 +99,6 @@ var ImageFormatter = /*#__PURE__*/function (_React$Component) {
           className: "image-item-count"
         }, "+".concat(value.length)));
       }
-
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: className
       }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
@@ -146,10 +121,8 @@ var ImageFormatter = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return ImageFormatter;
 }(React.Component);
-
 ImageFormatter.defaultProps = {
   isSample: false,
   isSupportPreview: false,

package/lib/ImageFormatter/utils.js

@@ -2,6 +2,5 @@ export var getImageThumbnailUrl = function getImageThumbnailUrl(url, server) {
   if (server && url.indexOf(server) > -1) {
     return url.replace('/workspace', '/thumbnail/workspace') + '?size=256';
   }
-
   return url;
 };

package/lib/ImagePreviewerLightbox/index.js

@@ -3,22 +3,21 @@ import classnames from 'classnames';
 import Lightbox from '@seafile/react-image-lightbox';
 import { checkSVGImage, isInternalImg } from './utils';
 import '@seafile/react-image-lightbox/style.css';
-
 function ImagePreviewerLightbox(props) {
   var imageItems = props.imageItems,
-      imageIndex = props.imageIndex,
-      deleteImage = props.deleteImage,
-      downloadImage = props.downloadImage,
-      onRotateImage = props.onRotateImage,
-      readOnly = props.readOnly,
-      server = props.server,
-      moveToPrevRowImage = props.moveToPrevRowImage,
-      moveToNextRowImage = props.moveToNextRowImage,
-      className = props.className;
+    imageIndex = props.imageIndex,
+    deleteImage = props.deleteImage,
+    downloadImage = props.downloadImage,
+    onRotateImage = props.onRotateImage,
+    readOnly = props.readOnly,
+    server = props.server,
+    moveToPrevRowImage = props.moveToPrevRowImage,
+    moveToNextRowImage = props.moveToNextRowImage,
+    className = props.className;
   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 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, server);
   var imageTitleEl = /*#__PURE__*/React.createElement("span", {
     className: "d-flex"
@@ -49,5 +48,4 @@ function ImagePreviewerLightbox(props) {
     } : null
   });
 }
-
 export default ImagePreviewerLightbox;

package/lib/LastModifierFormatter/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 import CollaboratorItem from '../CollaboratorItem';
 import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
 import './index.css';
-
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0
 // 2 value is exist, but can't find in collaborators
@@ -15,75 +14,60 @@ import './index.css';
 // 4 value is exist, typeof value is array
 var LastModifierFormatter = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(LastModifierFormatter, _React$PureComponent);
-
   var _super = _createSuper(LastModifierFormatter);
-
   function LastModifierFormatter() {
     var _this;
-
     _classCallCheck(this, LastModifierFormatter);
-
     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.getCollaborators = function () {
       var _this$props = _this.props,
-          value = _this$props.value,
-          collaborators = _this$props.collaborators;
-
+        value = _this$props.value,
+        collaborators = _this$props.collaborators;
       if (!Array.isArray(value)) {
         value = [value];
       }
-
       return value.map(function (item, index) {
         var collaborator = collaborators.find(function (collaborator) {
           return collaborator.email === item;
-        }); // the collaborator can be not exist, because the row modified by third app
-
+        });
+        // the collaborator can be not exist, because the row modified by third app
         if (!collaborator) {
           collaborator = {
             name: item,
             avatar_url: DefaultAvatar
           };
         }
-
         return /*#__PURE__*/React.createElement(CollaboratorItem, {
           key: index,
           collaborator: collaborator
         });
       });
     };
-
     return _this;
   }
-
   _createClass(LastModifierFormatter, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          containerClassName = _this$props2.containerClassName,
-          value = _this$props2.value;
+        containerClassName = _this$props2.containerClassName,
+        value = _this$props2.value;
       var classname = classnames('dtable-ui cell-formatter-container last-modified-formatter', containerClassName);
-
       if (!value || Array.isArray(value) && value.length === 0) {
         return /*#__PURE__*/React.createElement("div", {
           className: classname
         });
       }
-
       var collaborators = this.getCollaborators();
       return /*#__PURE__*/React.createElement("div", {
         className: classname
       }, collaborators);
     }
   }]);
-
   return LastModifierFormatter;
 }(React.PureComponent);
-
 LastModifierFormatter.defaultProps = {
   value: ''
 };

package/lib/LinkEditor/index.js

@@ -12,95 +12,77 @@ import LinkEditorOption from './link-editor-option';
 import PCLinkEditorPopover from './pc-link-editor-popover';
 import MBLinkEditorPopover from './mb-link-editor-popover';
 import './index.css';
-
 var LinkEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(LinkEditor, _React$Component);
-
   var _super = _createSuper(LinkEditor);
-
   function LinkEditor(props) {
     var _this;
-
     _classCallCheck(this, LinkEditor);
-
     _this = _super.call(this, props);
-
     _this.onDocumentToggle = function (e) {
       if (_this.editorContainer !== e.target && !_this.editorContainer.contains(e.target)) {
         _this.onClosePopover();
       }
     };
-
     _this.getLinkedCellValue = function () {
       var _this$props = _this.props,
-          row = _this$props.row,
-          column = _this$props.column,
-          linkMetaData = _this$props.linkMetaData;
-
+        row = _this$props.row,
+        column = _this$props.column,
+        linkMetaData = _this$props.linkMetaData;
       var _ref = column.data || {},
-          link_id = _ref.link_id,
-          table_id = _ref.table_id,
-          other_table_id = _ref.other_table_id;
-
+        link_id = _ref.link_id,
+        table_id = _ref.table_id,
+        other_table_id = _ref.other_table_id;
       _this.linkId = link_id;
       _this.tableId = table_id;
       _this.otherTableId = other_table_id;
       return linkMetaData.getLinkedCellValue(_this.linkId, _this.tableId, _this.otherTableId, row._id);
     };
-
     _this.formatLinkedValuesToOptions = function () {
       var _this$props2 = _this.props,
-          column = _this$props2.column,
-          linkMetaData = _this$props2.linkMetaData;
+        column = _this$props2.column,
+        linkMetaData = _this$props2.linkMetaData;
       var rowIds = _this.state.newValue;
-
       if (rowIds && Array.isArray(rowIds) && rowIds.length > 0) {
         var linkedRows = linkMetaData.getLinkedRows(_this.otherTableId, rowIds);
         var linkedTable = linkMetaData.getLinkedTable(_this.otherTableId);
         return linkedRows.map(function (linkedRow) {
-          var displayColumnKey = column.data.display_column_key; // format value to display
-
+          var displayColumnKey = column.data.display_column_key;
+          // format value to display
           var displayValue = _this.getDisplayValue(linkedTable, linkedRow, displayColumnKey);
-
           return {
             id: linkedRow._id,
             name: displayValue
           };
         });
       }
-
       return [];
     };
-
     _this.getDisplayValue = function (linkedTable, linkedRow, displayColumnKey) {
       var value = linkedRow[displayColumnKey];
       var linkedColumn = linkedTable.columns.find(function (column) {
         return column.key === displayColumnKey;
       });
       var type = linkedColumn.type,
-          data = linkedColumn.data;
-
+        data = linkedColumn.data;
       switch (type) {
         case CellType.NUMBER:
           {
             return getNumberDisplayString(value, data);
           }
-
         case CellType.DATE:
           {
             var format = data.format;
             return getDateDisplayString(value, format);
           }
-
         default:
           return value;
       }
     };
-
     _this.getAvailableLinkedOptions = function () {
       var _this$props3 = _this.props,
-          column = _this$props3.column,
-          linkMetaData = _this$props3.linkMetaData;
+        column = _this$props3.column,
+        linkMetaData = _this$props3.linkMetaData;
       var displayColumnKey = column.data.display_column_key;
       var linkedTable = linkMetaData.getLinkedTable(_this.otherTableId);
       var availableRows = linkedTable.rows.filter(function (row) {
@@ -108,7 +90,6 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
       });
       var availableOptions = availableRows.map(function (row) {
         var displayValue = _this.getDisplayValue(linkedTable, row, displayColumnKey);
-
         return {
           id: row._id,
           name: displayValue
@@ -116,23 +97,18 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
       });
       return availableOptions;
     };
-
-    _this.onCommit = function (newValue) {// nothing todo
+    _this.onCommit = function (newValue) {
+      // nothing todo
     };
-
     _this.onAddOptionToggle = function (event) {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
-
       if (_this.props.isReadOnly) {
         return;
       }
-
       var isPopoverShow = !_this.state.isPopoverShow;
-
       if (isPopoverShow) {
         var popoverPosition = _this.caculatePopoverPosition();
-
         _this.setState({
           isPopoverShow: isPopoverShow,
           popoverPosition: popoverPosition
@@ -143,18 +119,14 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
-
     _this.onOptionItemToggle = function (option) {
       var _this$props4 = _this.props,
-          row = _this$props4.row,
-          linkMetaData = _this$props4.linkMetaData;
-
+        row = _this$props4.row,
+        linkMetaData = _this$props4.linkMetaData;
       var newValue = _this.state.newValue.slice();
-
       var optionIndex = newValue.findIndex(function (option_id) {
         return option_id === option.id;
       });
-
       if (optionIndex !== -1) {
         newValue.splice(optionIndex, 1);
         linkMetaData.removeLink(_this.linkId, _this.tableId, _this.otherTableId, row._id, option.id);
@@ -162,45 +134,36 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
         newValue.push(option.id);
         linkMetaData.addLink(_this.linkId, _this.tableId, _this.otherTableId, row._id, option.id);
       }
-
       _this.setState({
         newValue: newValue
       });
     };
-
     _this.onDeleteOption = function (option) {
       var _this$props5 = _this.props,
-          row = _this$props5.row,
-          linkMetaData = _this$props5.linkMetaData;
-
+        row = _this$props5.row,
+        linkMetaData = _this$props5.linkMetaData;
       var newValue = _this.state.newValue.slice();
-
       var optionIndex = newValue.findIndex(function (option_id) {
         return option_id === option.id;
       });
       newValue.splice(optionIndex, 1);
-
       _this.setState({
         newValue: newValue
       }, function () {
         linkMetaData.removeLink(_this.linkId, _this.tableId, _this.otherTableId, row._id, option.id);
       });
     };
-
     _this.caculatePopoverPosition = function () {
       var POPOVER_MAX_HEIGHT = 200;
       var innerHeight = window.innerHeight;
-
       var _this$editor$getClien = _this.editor.getClientRects()[0],
-          top = _this$editor$getClien.top,
-          height = _this$editor$getClien.height;
-
+        top = _this$editor$getClien.top,
+        height = _this$editor$getClien.height;
       var isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
       var position = {
         top: height + 1,
         left: 0
       };
-
       if (!isBelow) {
         var bottom = height + 1;
         position = {
@@ -208,24 +171,19 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
           left: 0
         };
       }
-
       return position;
     };
-
     _this.onClosePopover = function () {
       _this.setState({
         isPopoverShow: false
       });
     };
-
     _this.setEditorContainerRef = function (editorContainer) {
       _this.editorContainer = editorContainer;
     };
-
     _this.setEditorRef = function (editor) {
       _this.editor = editor;
     };
-
     _this.linkId = '';
     _this.tableId = '';
     _this.otherTableId = '';
@@ -236,7 +194,6 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
   _createClass(LinkEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -251,11 +208,10 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var isReadOnly = this.props.isReadOnly;
       var _this$state = this.state,
-          isPopoverShow = _this$state.isPopoverShow,
-          popoverPosition = _this$state.popoverPosition;
+        isPopoverShow = _this$state.isPopoverShow,
+        popoverPosition = _this$state.popoverPosition;
       var options = this.getAvailableLinkedOptions();
       var selectedOptions = this.formatLinkedValuesToOptions();
       var isShowRemoveIcon = !isReadOnly;
@@ -294,10 +250,8 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
       }))));
     }
   }]);
-
   return LinkEditor;
 }(React.Component);
-
 LinkEditor.defaultProps = {
   isReadOnly: false
 };