dtable-ui-component 0.1.75-beta2 → 0.1.75-beta3

package/es/ImageFormatter/index.js

@@ -0,0 +1,154 @@
+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, { Fragment } from 'react';
+import cn from 'astro-classname';
+import ImagesLazyLoad from './images-lazy-load';
+import { getImageThumbnailUrl } from '../utils/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;
+
+      _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;
+      var className = cn('dtable-ui cell-formatter-container image-formatter', containerClassName);
+      var _this$state = this.state,
+          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);
+        return /*#__PURE__*/React.createElement("div", {
+          className: className
+        }, /*#__PURE__*/React.createElement("img", {
+          className: "image-item",
+          src: url,
+          alt: ""
+        }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
+          className: "image-item-count"
+        }, "+".concat(value.length)));
+      }
+
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
+        images: value,
+        server: server,
+        onImageClick: this.onImageClick
+      })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+        imageItems: value,
+        imageIndex: previewImageIndex,
+        closeImagePopup: this.closeImagePopup,
+        moveToPrevImage: this.movePrev,
+        moveToNextImage: this.moveNext,
+        deleteImage: readOnly ? null : this.deleteImage,
+        downloadImage: this.downloadImage,
+        onRotateImage: readOnly ? null : this.onRotateImage,
+        readOnly: readOnly
+      }));
+    }
+  }]);
+
+  return ImageFormatter;
+}(React.Component);
+
+ImageFormatter.defaultProps = {
+  isSample: false,
+  isSupportPreview: false,
+  readOnly: true,
+  value: [],
+  server: '',
+  containerClassName: ''
+};
+export default ImageFormatter;

package/es/ImagePreviewerLightbox/index.css

@@ -0,0 +1,87 @@
+.dtable-ui-component.mobile-image-previewer .ril-prev-button,
+.dtable-ui-component.mobile-image-previewer .ril-next-button,
+.dtable-ui-component.mobile-image-previewer .ril-caption .ril-zoom-in,
+.dtable-ui-component.mobile-image-previewer .ril-caption .ril-zoom-out {
+  display: none;
+}
+
+.dtable-ui-component.mobile-image-previewer .ril-toolbar .ril__toolbarRightSide {
+  padding-right: 14px;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice {
+  height: 100px;
+  background-color: #000;
+  z-index: 1052;
+  padding: 0;
+  width: 100%;
+  border-radius: 2px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  bottom: 0;
+  position: absolute;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  margin: 0 20px;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon .image-footer-choice-item {
+  height: 40px;
+  width: 40px;
+  border-radius: 5px;
+  background-color: #333;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #dbdbdb;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon .image-footer-choice-item i {
+  font-size: 20px;
+}
+
+.ril__outer .ril-caption button.dtable-font {
+  height: 50px;
+  font-size: 20px;
+}
+
+.ril__outer .ril-toolbar button.dtable-font {
+  border: none;
+}
+
+.ril__outer .ril-toolbar button.dtable-font:focus {
+  outline: none;
+}
+
+.ril__outer button.dtable-font {
+  font-size: 16px;
+}
+
+.ril__outer .ril-toolbar .ril-close {
+  width: 30px;
+  height: 53px;
+}
+
+.ril__outer .ril__toolbarItem {
+  height: 50px;
+}
+
+.ril__outer .ril__toolbarItem button {
+  opacity: 0.7;
+}
+
+.ril__outer .ril__toolbarItem button:hover {
+  opacity: 1;
+}

package/es/ImagePreviewerLightbox/index.js

@@ -0,0 +1,119 @@
+import React, { Fragment } from 'react';
+import MediaQuery from 'react-responsive';
+import ModalPortal from '../ModalPortal';
+import Lightbox from '@seafile/react-image-lightbox';
+import { checkSVGImage, isInternalImg } from '../utils/utils';
+import '@seafile/react-image-lightbox/style.css';
+import './index.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/LastModifierFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/es/LastModifierFormatter/index.js

@@ -0,0 +1,87 @@
+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 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
+// 3 value is exist, typeof value is a string
+// 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;
+
+      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
+
+        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;
+      var classname = cn('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);
+
+export default LastModifierFormatter;

package/es/LinkFormatter/index.css

@@ -0,0 +1,27 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.link-formmatter {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  flex-wrap: nowrap;
+}
+
+.dtable-ui.link-formatter .link-item {
+  display: inline-flex;
+  height: 20px;
+  max-width: 230px;
+  padding: 0 8px 0 2px;
+  align-items: center;
+  font-size: 13px;
+  margin-right: 10px;
+  border-radius: 3px;
+  background: #eceff4;
+  cursor: pointer;
+}
+
+.dtable-ui.link-formatter .link-item .link-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/es/LinkFormatter/index.js

@@ -0,0 +1,144 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+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 * as CellTypes from '../constants/cell-types';
+import { getNumberDisplayString, getDateDisplayString } from '../utils/value-format-utils';
+
+// link value is  get form parant's interface
+var LinkFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(LinkFormatter, _React$Component);
+
+  var _super = _createSuper(LinkFormatter);
+
+  function LinkFormatter(props) {
+    var _this;
+
+    _classCallCheck(this, LinkFormatter);
+
+    _this = _super.call(this, props);
+
+    _this.getLinkedCellValue = function (row) {
+      if (!row) return [];
+      var _this$props = _this.props,
+          column = _this$props.column,
+          currentTableId = _this$props.currentTableId,
+          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;
+
+      _this.linkID = link_id;
+      _this.tableID = currentTableId === table_id ? table_id : other_table_id;
+      _this.otherTableID = _this.tableID === table_id ? other_table_id : table_id;
+      return linkMetaData.getLinkedCellValue(_this.linkID, _this.tableID, _this.otherTableID, row._id);
+    };
+
+    _this.expandLinkedTableRow = function (row) {
+      var _this$props2 = _this.props,
+          enableOpenLinkedRow = _this$props2.enableOpenLinkedRow,
+          linkMetaData = _this$props2.linkMetaData;
+
+      if (enableOpenLinkedRow) {
+        linkMetaData.expandLinkedTableRow(row, _this.otherTableID);
+      }
+    };
+
+    _this.getDisplayValues = function () {
+      var _this$props3 = _this.props,
+          column = _this$props3.column,
+          linkMetaData = _this$props3.linkMetaData;
+      var rowIds = _this.state.value;
+
+      if (rowIds && Array.isArray(rowIds) && rowIds.length > 0) {
+        var linkedTable = linkMetaData.getLinkedTable(_this.otherTableID);
+        var linkedRows = linkMetaData.getLinkedRows(_this.otherTableID, rowIds);
+        var result = linkedRows.map(function (row, index) {
+          var displayColumnKey = column.data.display_column_key;
+
+          var displayValue = _this.getDisplayValue(linkedTable, row, displayColumnKey);
+
+          return /*#__PURE__*/React.createElement("div", {
+            key: index,
+            className: "link-item",
+            onClick: _this.expandLinkedTableRow.bind(_assertThisInitialized(_this), row)
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "link-name"
+          }, displayValue));
+        });
+        return result;
+      }
+
+      return null;
+    };
+
+    _this.getDisplayValue = function (linkedTable, row, displayColumnKey) {
+      var value = row[displayColumnKey];
+      var linkedColumn = linkedTable.columns.find(function (column) {
+        return column.key === displayColumnKey;
+      });
+      var type = linkedColumn.type,
+          data = linkedColumn.data; // todo: improve
+
+      switch (type) {
+        case CellTypes.NUMBER:
+          {
+            return getNumberDisplayString(value, data);
+          }
+
+        case CellTypes.DATE:
+          {
+            var format = data.format;
+            return getDateDisplayString(value, format);
+          }
+
+        default:
+          return value;
+      }
+    };
+
+    _this.linkID = '';
+    _this.tableID = '';
+    _this.otherTableID = '';
+    _this.state = {
+      value: _this.getLinkedCellValue(props.row)
+    };
+    return _this;
+  }
+
+  _createClass(LinkFormatter, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var nextRow = nextProps.row;
+
+      if (nextRow._id !== this.props.row._id) {
+        this.setState({
+          value: this.getLinkedCellValue(nextRow)
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var containerClassName = this.props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container link-formatter', containerClassName);
+      var displayValues = this.getDisplayValues();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, displayValues);
+    }
+  }]);
+
+  return LinkFormatter;
+}(React.Component);
+
+LinkFormatter.defaultProps = {
+  enableOpenLinkedRow: false,
+  value: []
+};
+export default LinkFormatter;

package/es/Loading/index.css

@@ -0,0 +1,54 @@
+/** loading **/
+@-moz-keyframes loading {
+  0% {
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.loading-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #eee;
+  border-left-color: #aaa;
+  border-radius: 50%;
+  -moz-animation: loading 0.9s infinite linear;
+  -webkit-animation: loading 0.9s infinite linear;
+  animation: loading 0.9s infinite linear;
+}
+
+.loading-tip {
+  display: block;
+  margin: 0 auto;
+}

package/es/Loading/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.css';
+export default function Loading() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "loading-icon loading-tip"
+  });
+}