dtable-ui-component 0.2.1 → 0.2.3

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

@@ -0,0 +1,49 @@
+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 GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(GeolocationFormatter, _React$Component);
+
+  var _super = _createSuper(GeolocationFormatter);
+
+  function GeolocationFormatter() {
+    _classCallCheck(this, GeolocationFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(GeolocationFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          containerClassName = _this$props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
+
+      if (typeof value !== 'object') {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, "".concat(value.province || '', " ").concat(value.city || '', " ").concat(value.district || '', " ").concat(value.detail || ''));
+    }
+  }]);
+
+  return GeolocationFormatter;
+}(React.Component);
+
+GeolocationFormatter.defaultProps = {
+  value: {
+    province: '',
+    city: '',
+    district: '',
+    detail: ''
+  },
+  containerClassName: ''
+};
+export default GeolocationFormatter;

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

@@ -0,0 +1,153 @@
+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 '../common/images-lazy-load';
+import { getImageThumbnailUrl } from '../../utils/utils';
+import ImagePreviewerLightbox from './widgets/image-previewer-lightbox';
+
+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/components/cell-formatter/index.js

@@ -0,0 +1,26 @@
+import '../../css/cell-formatter.css';
+export { default as TextFormatter } from './text-formatter';
+export { default as NumberFormatter } from './number-formatter';
+export { default as DateFormatter } from './date-formatter';
+export { default as CheckboxFormatter } from './checkbox-formatter';
+export { default as CollaboratorFormatter } from './collaborator-formatter';
+export { default as SingleSelectFormatter } from './single-select-formatter';
+export { default as MultipleSelectFormatter } from './multiple-select-formatter';
+export { default as LongTextFormatter } from './long-text-formatter';
+export { default as FileFormatter } from './file-formatter';
+export { default as ImageFormatter } from './image-formatter';
+export { default as GeolocationFormatter } from './geolocation-formatter';
+export { default as CTimeFormatter } from './ctime-formatter';
+export { default as CreatorFormatter } from './creator-formatter';
+export { default as LastModifierFormatter } from './last-modifier-formatter';
+export { default as MTimeFormatter } from './mtime-formatter';
+export { default as FormulaFormatter } from './formula-formatter';
+export { default as LinkFormatter } from './link-formatter';
+export { default as AutoNumberFormatter } from './auto-number-formatter';
+export { default as UrlFormatter } from './url-formatter';
+export { default as EmailFormatter } from './email-formatter';
+export { default as DurationFormatter } from './duration-formatter';
+export { default as RateFormatter } from './rate-formatter';
+export { default as ButtonFormatter } from './button-formatter';
+export { default as FileItemFormatter } from './widgets/file-item-formatter';
+export { default as ImagePreviewerLightbox } from './widgets/image-previewer-lightbox';

package/es/components/cell-formatter/last-modifier-formatter.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 ColloboratorItem from '../common/collaborator-item';
+import DefaultAvatar from '../../assets/images/avatar/default_avatar.png';
+
+// 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 vlaue 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, beacuse the row modified by third app
+
+        if (!collaborator) {
+          collaborator = {
+            name: item,
+            avatar_url: DefaultAvatar
+          };
+        }
+
+        ;
+        return /*#__PURE__*/React.createElement(ColloboratorItem, {
+          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/components/cell-formatter/link-formatter.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 '../../utils/cell-types';
+import { formatNumberToString, formatDateToString } 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 formatNumberToString(value, data);
+          }
+
+        case CellTypes.DATE:
+          {
+            var format = data.format;
+            return formatDateToString(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/components/cell-formatter/long-text-formatter.js

@@ -0,0 +1,106 @@
+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 getPreviewContent from '../../utils/normalize-long-text-value';
+
+var LongTextFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(LongTextFormatter, _React$Component);
+
+  var _super = _createSuper(LongTextFormatter);
+
+  function LongTextFormatter() {
+    var _this;
+
+    _classCallCheck(this, LongTextFormatter);
+
+    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.renderLinks = function (value) {
+      var links = value.links;
+      if (!Array.isArray(links) || links.length === 0) return null;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-links"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-url"
+      }), links.length);
+    };
+
+    _this.renderCheckList = function (value) {
+      var checkList = value.checklist;
+      if (!checkList || checkList.total === 0) return null;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-check-list"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-check-square-solid ".concat(checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
+      }), "".concat(checkList.completed, "/").concat(checkList.total));
+    };
+
+    _this.renderImages = function (value) {
+      var images = value.images;
+      if (!Array.isArray(images) || images.length === 0) return null;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-images"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: images[0],
+        alt: ""
+      }), /*#__PURE__*/React.createElement("i", {
+        className: "image-number"
+      }, images.length > 1 ? '+' + images.length : null));
+    };
+
+    _this.renderContent = function (value) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "long-text-content"
+      }, value.preview);
+    };
+
+    _this.translateValue = function () {
+      var value = _this.props.value;
+      if (!value) return {};
+      var valueType = Object.prototype.toString.call(value);
+
+      if (valueType === '[object String]') {
+        return getPreviewContent(value);
+      }
+
+      if (valueType === '[object Object]') {
+        return value;
+      }
+
+      return {};
+    };
+
+    return _this;
+  }
+
+  _createClass(LongTextFormatter, [{
+    key: "render",
+    value: function render() {
+      var containerClassName = this.props.containerClassName;
+      var className = cn('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
+      var value = this.translateValue();
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value));
+    }
+  }]);
+
+  return LongTextFormatter;
+}(React.Component);
+
+LongTextFormatter.defaultProps = {
+  value: {
+    text: '',
+    images: [],
+    links: [],
+    preview: ''
+  }
+};
+export default LongTextFormatter;

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

@@ -0,0 +1,57 @@
+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 moment from 'moment';
+
+var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(MTimeFormatter, _React$Component);
+
+  var _super = _createSuper(MTimeFormatter);
+
+  function MTimeFormatter() {
+    var _this;
+
+    _classCallCheck(this, MTimeFormatter);
+
+    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.formatDate = function (date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+    };
+
+    return _this;
+  }
+
+  _createClass(MTimeFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          date = _this$props.value,
+          containerClassName = _this$props.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+
+      if (date !== '') {
+        date = this.formatDate(date);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, date);
+    }
+  }]);
+
+  return MTimeFormatter;
+}(React.Component);
+
+MTimeFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+export default MTimeFormatter;

package/es/components/cell-formatter/multiple-select-formatter.js

@@ -0,0 +1,70 @@
+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 MultipleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(MultipleSelectFormatter, _React$PureComponent);
+
+  var _super = _createSuper(MultipleSelectFormatter);
+
+  function MultipleSelectFormatter() {
+    var _this;
+
+    _classCallCheck(this, MultipleSelectFormatter);
+
+    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.getOptions = function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          options = _this$props.options;
+      return value.map(function (item) {
+        var option = options.find(function (option) {
+          return option.id === item || option.name === item;
+        });
+
+        if (option) {
+          return /*#__PURE__*/React.createElement(SelectItem, {
+            key: item,
+            option: option
+          });
+        }
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(MultipleSelectFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          value = _this$props2.value,
+          containerClassName = _this$props2.containerClassName;
+      var classname = cn('dtable-ui cell-formatter-container multiple-select-formatter', containerClassName);
+
+      if (!value || Array.isArray(value) && value.length === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classname
+        });
+      }
+
+      var options = this.getOptions();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, options);
+    }
+  }]);
+
+  return MultipleSelectFormatter;
+}(React.PureComponent);
+
+export default MultipleSelectFormatter;