dtable-ui-component 0.1.75-beta3 → 0.1.75-beta7

package/es/ImagePreviewerLightbox/index.js

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

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

package/es/LastModifierFormatter/index.js

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

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

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

@@ -1,54 +0,0 @@
-/** 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

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

package/es/LongTextFormatter/html-long-text-formatter.js

@@ -1,96 +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, { Component } from 'react';
-import { processor } from '../utils/markdown2html';
-
-var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
-  _inherits(HtmlLongTextFormatter, _Component);
-
-  var _super = _createSuper(HtmlLongTextFormatter);
-
-  function HtmlLongTextFormatter(_props) {
-    var _this;
-
-    _classCallCheck(this, HtmlLongTextFormatter);
-
-    _this = _super.call(this, _props);
-
-    _this.translateValue = function (props) {
-      var value = props.value;
-
-      if (!value) {
-        _this.setState({
-          innerHtml: null
-        });
-
-        return;
-      }
-
-      var valueType = Object.prototype.toString.call(value);
-
-      if (valueType === '[object String]') {
-        _this.convertMarkdown(value);
-
-        return;
-      }
-
-      if (valueType === '[object Object]') {
-        _this.convertMarkdown(value.text);
-
-        return;
-      }
-
-      return;
-    };
-
-    _this.convertMarkdown = function (mdFile) {
-      processor.process(mdFile).then(function (result) {
-        var innerHtml = String(result).replace(/<a /ig, '<a target="_blank" ');
-
-        _this.setState({
-          innerHtml: innerHtml
-        });
-      });
-    };
-
-    _this.state = {
-      innerHtml: null
-    };
-    return _this;
-  }
-
-  _createClass(HtmlLongTextFormatter, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.translateValue(this.props);
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var value = this.props.value;
-
-      if (nextProps.value !== value) {
-        this.translateValue(nextProps);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var innerHtml = this.state.innerHtml;
-      var className = this.props.className;
-      if (!innerHtml) return null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(className, " article"),
-        dangerouslySetInnerHTML: {
-          __html: innerHtml
-        }
-      });
-    }
-  }]);
-
-  return HtmlLongTextFormatter;
-}(Component);
-
-export default HtmlLongTextFormatter;

package/es/LongTextFormatter/index.css

@@ -1,63 +0,0 @@
-@import url('../css/cell-formatter.css');
-
-.dtable-ui.long-text-formatter {
-  display: flex;
-  align-items: center;
-  height: 28px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dtable-ui.long-text-formatter.article {
-  display: block;
-  height: auto;
-  overflow: auto;
-}
-
-.dtable-ui.long-text-formatter .long-text-links,
-.dtable-ui.long-text-formatter .long-text-check-list {
-  display: inline-block;
-  height: 20px;
-  padding: 2px;
-  margin: 4px;
-  color: #9c9c9c;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  line-height: 16px;
-}
-
-.dtable-ui.long-text-formatter .long-text-check-list .dtable-font,
-.dtable-ui.long-text-formatter .long-text-links .dtable-font {
-  margin-right: 4px;
-  font-size: 12px;
-}
-
-.dtable-ui.long-text-formatter .long-text-check-list .long-text-check-list-completed {
-  color: #61BD4F;
-}
-
-.dtable-ui.long-text-formatter .long-text-images {
-  margin-right: -10px;
-}
-
-.dtable-ui.long-text-formatter .long-text-images img {
-  max-width: 28px;
-  max-height: 28px;
-  border: 1px solid #f0f0f0;
-  box-sizing: border-box;
-  border-radius: 3px;
-}
-
-.dtable-ui.long-text-formatter .long-text-images .image-number {
-  display: inline-block;
-  min-width: 14px;
-  padding: 0 3px;
-  line-height: 14px;
-  font-style: normal;
-  font-size: 12px;
-  border-radius: 6px;
-  background-color: #999;
-  color: #fff;
-  transform: translate(-50%, 9px) scale(0.8);
-}

package/es/LongTextFormatter/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import cn from 'astro-classname';
-import HtmlLongTextFormatter from './html-long-text-formatter';
-import SimpleLongTextFormatter from './simple-long-text-formatter';
-import './index.css';
-
-function LongTextFormatter(props) {
-  var isSample = props.isSample,
-      value = props.value,
-      containerClassName = props.containerClassName;
-  var className = cn('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
-
-  if (isSample) {
-    return /*#__PURE__*/React.createElement(SimpleLongTextFormatter, {
-      value: value,
-      className: className
-    });
-  }
-
-  return /*#__PURE__*/React.createElement(HtmlLongTextFormatter, {
-    value: value,
-    className: className
-  });
-}
-
-LongTextFormatter.defaultProps = {
-  isSample: true
-};
-export default LongTextFormatter;