dtable-ui-component 0.1.75-beta → 0.1.75-beta1

package/lib/components/cell-formatter/formula-formatter.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("../../constants");
+
+var _cellFormatterFactory = _interopRequireDefault(require("../cell-factory/cell-formatter-factory"));
+
+var CellType = _interopRequireWildcard(require("../../constants/cell-types"));
+
+var _utils = require("../../utils/utils");
+
+var _textFormatter = _interopRequireDefault(require("./text-formatter"));
+
+var _columnUtils = require("../../utils/column-utils");
+
+var _cellValueValidator = _interopRequireDefault(require("../../utils/cell-value-validator"));
+
+var _valueFormatUtils = require("../../utils/value-format-utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.bool]),
+  column: _propTypes.default.Object,
+  containerClassName: _propTypes.default.string,
+  collaborators: _propTypes.default.array
+};
+
+var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(FormulaFormatter, _React$Component);
+
+  function FormulaFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getGridCellClassName", function (resultType) {
+      switch (resultType) {
+        case _constants.FORMULA_RESULT_TYPE.NUMBER:
+          {
+            return 'text-right';
+          }
+
+        default:
+          {
+            return '';
+          }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOtherColumnFormatter", function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          column = _this$props.column,
+          collaborators = _this$props.collaborators;
+      var columnData = column.data;
+      var array_type = columnData.array_type,
+          array_data = columnData.array_data;
+
+      if (!array_type || array_type === CellType.LINK) {
+        return null;
+      }
+
+      var Formatter = _cellFormatterFactory.default.createFormatter(array_type);
+
+      var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
+
+      if ((0, _columnUtils.isArrayFormalColumn)(array_type)) {
+        formatterProps.value = value;
+        return _this.createColumnFormatter(Formatter, formatterProps);
+      }
+
+      var _isSimpleCellFormatterColumn = (0, _columnUtils.isSimpleCellFormatter)(array_type);
+
+      var cellValue = value;
+
+      if (!Array.isArray(value)) {
+        cellValue = (0, _cellValueValidator.default)(value, array_type) ? [value] : [];
+      }
+
+      var contentItemClassName = "formula-formatter-content-item " + (_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui formula-formatter multiple"
+      }, cellValue.map(function (v, index) {
+        formatterProps.value = v;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: contentItemClassName,
+          key: "formula-formatter-content-item-" + index
+        }, _this.createColumnFormatter(Formatter, formatterProps));
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFormatterProps", function (array_type, array_data, collaborators) {
+      switch (array_type) {
+        case CellType.DURATION:
+          {
+            var duration_format = array_data.duration_format;
+            return {
+              format: duration_format
+            };
+          }
+
+        case CellType.NUMBER:
+        case CellType.RATE:
+        case CellType.GEOLOCATION:
+          {
+            return {
+              data: array_data
+            };
+          }
+
+        default:
+          {
+            return _objectSpread(_objectSpread({}, array_data), {}, {
+              collaborators: collaborators
+            });
+          }
+      }
+    });
+    return _this;
+  }
+
+  var _proto = FormulaFormatter.prototype;
+
+  _proto.createColumnFormatter = function createColumnFormatter(Formatter, formatterProps) {
+    if ( /*#__PURE__*/_react.default.isValidElement(Formatter)) {
+      return /*#__PURE__*/_react.default.cloneElement(Formatter, _objectSpread({}, formatterProps));
+    } else if ((0, _utils.isFunction)(Formatter)) {
+      return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_textFormatter.default, formatterProps);
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        value = _this$props2.value,
+        containerClassName = _this$props2.containerClassName,
+        column = _this$props2.column,
+        collaborators = _this$props2.collaborators;
+    var columnData = column.data;
+    var resultType = columnData.result_type;
+
+    if (resultType === _constants.FORMULA_RESULT_TYPE.ARRAY) {
+      return this.renderOtherColumnFormatter();
+    }
+
+    if (typeof value === 'object') {
+      return null;
+    }
+
+    var gridCellClassName = this.getGridCellClassName(resultType);
+    var formattedValue = (0, _valueFormatUtils.getFormulaDisplayString)(value, columnData, {
+      collaborators: collaborators
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui cell-formatter-container formula-formatter " + containerClassName + " " + gridCellClassName,
+      title: formattedValue,
+      "aria-label": formattedValue
+    }, formattedValue);
+  };
+
+  return FormulaFormatter;
+}(_react.default.Component);
+
+FormulaFormatter.propTypes = propTypes;
+var _default = FormulaFormatter;
+exports.default = _default;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _valueFormatUtils = require("../../utils/value-format-utils");
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  data: _propTypes.default.object,
+  containerClassName: _propTypes.default.string
+};
+
+var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(GeolocationFormatter, _React$Component);
+
+  function GeolocationFormatter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = GeolocationFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        value = _this$props.value,
+        data = _this$props.data,
+        containerClassName = _this$props.containerClassName;
+    var className = (0, _astroClassname.default)('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
+
+    if (typeof value !== 'object') {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, (0, _valueFormatUtils.getGeolocationDisplayString)(value, data));
+  };
+
+  return GeolocationFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(GeolocationFormatter, "defaultProps", {
+  value: {
+    province: '',
+    city: '',
+    district: '',
+    detail: ''
+  },
+  data: {},
+  containerClassName: ''
+});
+GeolocationFormatter.propTypes = propTypes;
+var _default = GeolocationFormatter;
+exports.default = _default;

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

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _imagesLazyLoad = _interopRequireDefault(require("../common/images-lazy-load"));
+
+var _utils = require("../../utils/utils");
+
+var _imagePreviewerLightbox = _interopRequireDefault(require("./widgets/image-previewer-lightbox"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ImageFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ImageFormatter, _React$Component);
+
+  function ImageFormatter(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageClick", function (index) {
+      if (!_this.props.isSupportPreview) return;
+
+      _this.setState({
+        isPreviewImage: true,
+        previewImageIndex: index
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeImagePopup", function () {
+      if (!_this.props.isSupportPreview) return;
+
+      _this.setState({
+        isPreviewImage: false,
+        previewImageIndex: -1
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "movePrev", function () {
+      var images = _this.props.value;
+
+      _this.setState(function (prevState) {
+        return {
+          previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
+        };
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "moveNext", function () {
+      var images = _this.props.value;
+
+      _this.setState(function (prevState) {
+        return {
+          previewImageIndex: (prevState.previewImageIndex + 1) % images.length
+        };
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downloadImage", function (imageItemUrl) {
+      if (!_this.props.downloadImage) return;
+
+      _this.props.downloadImage(imageItemUrl);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "deleteImage", function (index) {
+      var readOnly = _this.props.readOnly;
+      if (readOnly) return;
+      if (!_this.props.deleteImage) return;
+
+      _this.props.deleteImage(index);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+  }
+
+  var _proto = ImageFormatter.prototype;
+
+  _proto.render = 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 = (0, _astroClassname.default)('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 = (0, _utils.getImageThumbnailUrl)(item, server);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        className: "image-item",
+        src: url,
+        alt: ""
+      }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
+        className: "image-item-count"
+      }, "+" + value.length));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, /*#__PURE__*/_react.default.createElement(_imagesLazyLoad.default, {
+      images: value,
+      server: server,
+      onImageClick: this.onImageClick
+    })), isPreviewImage && /*#__PURE__*/_react.default.createElement(_imagePreviewerLightbox.default, {
+      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.default.Component);
+
+(0, _defineProperty2.default)(ImageFormatter, "defaultProps", {
+  isSample: false,
+  isSupportPreview: false,
+  readOnly: true,
+  value: [],
+  server: '',
+  containerClassName: ''
+});
+ImageFormatter.propTypes = {
+  isSample: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  isSupportPreview: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  server: _propTypes.default.string,
+  containerClassName: _propTypes.default.string,
+  deleteImage: _propTypes.default.func,
+  downloadImage: _propTypes.default.func,
+  rotateImage: _propTypes.default.func
+};
+var _default = ImageFormatter;
+exports.default = _default;

package/lib/components/cell-formatter/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.UrlFormatter = exports.TextFormatter = exports.SingleSelectFormatter = exports.RateFormatter = exports.NumberFormatter = exports.MultipleSelectFormatter = exports.MTimeFormatter = exports.LongTextFormatter = exports.LinkFormatter = exports.LastModifierFormatter = exports.ImagePreviewerLightbox = exports.ImageFormatter = exports.GeolocationFormatter = exports.FormulaFormatter = exports.FileItemFormatter = exports.FileFormatter = exports.EmailFormatter = exports.DurationFormatter = exports.DateFormatter = exports.CreatorFormatter = exports.CollaboratorItem = exports.CollaboratorFormatter = exports.CheckboxFormatter = exports.CTimeFormatter = exports.ButtonFormatter = exports.AutoNumberFormatter = void 0;
+
+require("../../css/cell-formatter.css");
+
+var _textFormatter = _interopRequireDefault(require("./text-formatter"));
+
+exports.TextFormatter = _textFormatter.default;
+
+var _numberFormatter = _interopRequireDefault(require("./number-formatter"));
+
+exports.NumberFormatter = _numberFormatter.default;
+
+var _dateFormatter = _interopRequireDefault(require("./date-formatter"));
+
+exports.DateFormatter = _dateFormatter.default;
+
+var _checkboxFormatter = _interopRequireDefault(require("./checkbox-formatter"));
+
+exports.CheckboxFormatter = _checkboxFormatter.default;
+
+var _collaboratorFormatter = _interopRequireDefault(require("./collaborator-formatter"));
+
+exports.CollaboratorFormatter = _collaboratorFormatter.default;
+
+var _singleSelectFormatter = _interopRequireDefault(require("./single-select-formatter"));
+
+exports.SingleSelectFormatter = _singleSelectFormatter.default;
+
+var _multipleSelectFormatter = _interopRequireDefault(require("./multiple-select-formatter"));
+
+exports.MultipleSelectFormatter = _multipleSelectFormatter.default;
+
+var _longTextFormatter = _interopRequireDefault(require("./long-text-formatter"));
+
+exports.LongTextFormatter = _longTextFormatter.default;
+
+var _fileFormatter = _interopRequireDefault(require("./file-formatter"));
+
+exports.FileFormatter = _fileFormatter.default;
+
+var _imageFormatter = _interopRequireDefault(require("./image-formatter"));
+
+exports.ImageFormatter = _imageFormatter.default;
+
+var _geolocationFormatter = _interopRequireDefault(require("./geolocation-formatter"));
+
+exports.GeolocationFormatter = _geolocationFormatter.default;
+
+var _ctimeFormatter = _interopRequireDefault(require("./ctime-formatter"));
+
+exports.CTimeFormatter = _ctimeFormatter.default;
+
+var _creatorFormatter = _interopRequireDefault(require("./creator-formatter"));
+
+exports.CreatorFormatter = _creatorFormatter.default;
+
+var _lastModifierFormatter = _interopRequireDefault(require("./last-modifier-formatter"));
+
+exports.LastModifierFormatter = _lastModifierFormatter.default;
+
+var _mtimeFormatter = _interopRequireDefault(require("./mtime-formatter"));
+
+exports.MTimeFormatter = _mtimeFormatter.default;
+
+var _formulaFormatter = _interopRequireDefault(require("./formula-formatter"));
+
+exports.FormulaFormatter = _formulaFormatter.default;
+
+var _linkFormatter = _interopRequireDefault(require("./link-formatter"));
+
+exports.LinkFormatter = _linkFormatter.default;
+
+var _autoNumberFormatter = _interopRequireDefault(require("./auto-number-formatter"));
+
+exports.AutoNumberFormatter = _autoNumberFormatter.default;
+
+var _urlFormatter = _interopRequireDefault(require("./url-formatter"));
+
+exports.UrlFormatter = _urlFormatter.default;
+
+var _emailFormatter = _interopRequireDefault(require("./email-formatter"));
+
+exports.EmailFormatter = _emailFormatter.default;
+
+var _durationFormatter = _interopRequireDefault(require("./duration-formatter"));
+
+exports.DurationFormatter = _durationFormatter.default;
+
+var _rateFormatter = _interopRequireDefault(require("./rate-formatter"));
+
+exports.RateFormatter = _rateFormatter.default;
+
+var _buttonFormatter = _interopRequireDefault(require("./button-formatter"));
+
+exports.ButtonFormatter = _buttonFormatter.default;
+
+var _fileItemFormatter = _interopRequireDefault(require("./widgets/file-item-formatter"));
+
+exports.FileItemFormatter = _fileItemFormatter.default;
+
+var _imagePreviewerLightbox = _interopRequireDefault(require("./widgets/image-previewer-lightbox"));
+
+exports.ImagePreviewerLightbox = _imagePreviewerLightbox.default;
+
+var _collaboratorItem = _interopRequireDefault(require("../common/collaborator-item"));
+
+exports.CollaboratorItem = _collaboratorItem.default;

package/lib/components/cell-formatter/last-modifier-formatter.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _collaboratorItem = _interopRequireDefault(require("../common/collaborator-item"));
+
+var _default_avatar = _interopRequireDefault(require("../../assets/images/avatar/default_avatar.png"));
+
+var propTypes = {
+  containerClassName: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]).isRequired,
+  collaborators: _propTypes.default.arrayOf(_propTypes.default.exact({
+    email: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    contact_email: _propTypes.default.string.isRequired,
+    avatar_url: _propTypes.default.string.isRequired
+  }))
+}; // 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) {
+  (0, _inheritsLoose2.default)(LastModifierFormatter, _React$PureComponent);
+
+  function LastModifierFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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: _default_avatar.default
+          };
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_collaboratorItem.default, {
+          key: index,
+          collaborator: collaborator
+        });
+      });
+    });
+    return _this;
+  }
+
+  var _proto = LastModifierFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        containerClassName = _this$props2.containerClassName,
+        value = _this$props2.value;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container last-modified-formatter', containerClassName);
+
+    if (!value || Array.isArray(value) && value.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classname
+      });
+    }
+
+    var collaborators = this.getCollaborators();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, collaborators);
+  };
+
+  return LastModifierFormatter;
+}(_react.default.PureComponent);
+
+LastModifierFormatter.propTypes = propTypes;
+var _default = LastModifierFormatter;
+exports.default = _default;