dtable-ui-component 0.1.79-beta → 0.1.82-beta

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

@@ -0,0 +1,91 @@
+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 '../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 value is exist, typeof value is array
+var CollaboratorFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(CollaboratorFormatter, _React$PureComponent);
+
+  var _super = _createSuper(CollaboratorFormatter);
+
+  function CollaboratorFormatter() {
+    var _this;
+
+    _classCallCheck(this, CollaboratorFormatter);
+
+    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,
+          enableDeleteCollaborator = _this$props.enableDeleteCollaborator,
+          onDeleteCollaborator = _this$props.onDeleteCollaborator;
+
+      if (!Array.isArray(value)) {
+        value = [value];
+      }
+
+      return value.map(function (item, index) {
+        var collaborator = collaborators.find(function (collaborator) {
+          return collaborator.email === item;
+        });
+
+        if (!collaborator) {
+          collaborator = {
+            name: item,
+            avatar_url: DefaultAvatar
+          };
+        }
+
+        ;
+        return /*#__PURE__*/React.createElement(CollaboratorItem, {
+          key: index,
+          collaborator: collaborator,
+          enableDeleteCollaborator: enableDeleteCollaborator,
+          onDeleteCollaborator: onDeleteCollaborator
+        });
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(CollaboratorFormatter, [{
+    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 collaborator-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 CollaboratorFormatter;
+}(React.PureComponent);
+
+export default CollaboratorFormatter;

package/es/components/cell-formatter/creator-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 CollaboratorItem 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 value is exist, typeof value is array
+var CreatorFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(CreatorFormatter, _React$PureComponent);
+
+  var _super = _createSuper(CreatorFormatter);
+
+  function CreatorFormatter() {
+    var _this;
+
+    _classCallCheck(this, CreatorFormatter);
+
+    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 created by third app
+
+        if (!collaborator) {
+          collaborator = {
+            name: item,
+            avatar_url: DefaultAvatar
+          };
+        }
+
+        ;
+        return /*#__PURE__*/React.createElement(CollaboratorItem, {
+          key: index,
+          collaborator: collaborator
+        });
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(CreatorFormatter, [{
+    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 creator-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 CreatorFormatter;
+}(React.PureComponent);
+
+export default CreatorFormatter;

package/es/components/cell-formatter/ctime-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 CTimeFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(CTimeFormatter, _React$Component);
+
+  var _super = _createSuper(CTimeFormatter);
+
+  function CTimeFormatter() {
+    var _this;
+
+    _classCallCheck(this, CTimeFormatter);
+
+    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(CTimeFormatter, [{
+    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 CTimeFormatter;
+}(React.Component);
+
+CTimeFormatter.defaultProps = {
+  value: '',
+  containerClassName: ''
+};
+export default CTimeFormatter;

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

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

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

@@ -0,0 +1,37 @@
+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 { getDurationDisplayString } from '../../utils/value-format-utils';
+
+var DurationFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(DurationFormatter, _React$Component);
+
+  var _super = _createSuper(DurationFormatter);
+
+  function DurationFormatter() {
+    _classCallCheck(this, DurationFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(DurationFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          containerClassName = _this$props.containerClassName,
+          format = _this$props.format;
+      var classname = cn('dtable-ui cell-formatter-container duration-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, getDurationDisplayString(value, format));
+    }
+  }]);
+
+  return DurationFormatter;
+}(React.Component);
+
+export default DurationFormatter;

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

@@ -0,0 +1,35 @@
+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 EmailFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(EmailFormatter, _React$Component);
+
+  var _super = _createSuper(EmailFormatter);
+
+  function EmailFormatter() {
+    _classCallCheck(this, EmailFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(EmailFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          containerClassName = _this$props.containerClassName,
+          value = _this$props.value;
+      var classname = cn('dtable-ui cell-formatter-container email-formatter', containerClassName);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, value);
+    }
+  }]);
+
+  return EmailFormatter;
+}(React.Component);
+
+export default EmailFormatter;

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

@@ -0,0 +1,63 @@
+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 FileItemFormatter from './widgets/file-item-formatter';
+
+var FileFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(FileFormatter, _React$PureComponent);
+
+  var _super = _createSuper(FileFormatter);
+
+  function FileFormatter() {
+    _classCallCheck(this, FileFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(FileFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          isSample = _this$props.isSample,
+          value = _this$props.value,
+          containerClassName = _this$props.containerClassName;
+      var className = cn('dtable-ui cell-formatter-container file-formatter', containerClassName);
+
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+
+      if (isSample) {
+        var item = value[0];
+        return /*#__PURE__*/React.createElement("div", {
+          className: className
+        }, /*#__PURE__*/React.createElement(FileItemFormatter, {
+          file: item
+        }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
+          className: "file-item-count"
+        }, "+".concat(value.length)));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, value.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(FileItemFormatter, {
+          file: item,
+          key: index
+        });
+      }));
+    }
+  }]);
+
+  return FileFormatter;
+}(React.PureComponent);
+
+FileFormatter.defaultProps = {
+  isSample: false,
+  value: [],
+  containerClassName: ''
+};
+export default FileFormatter;

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

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var _FormatterConfig;
+
+import React from 'react';
+import * as CellTypes from '../../constants/cell-types';
+import CheckboxFormatter from './checkbox-formatter';
+import ImageFormatter from './image-formatter';
+import LongTextFormatter from './long-text-formatter';
+import TextCellFormatter from './text-formatter';
+import SingleSelectFormatter from './single-select-formatter';
+import MultipleSelectFormatter from './multiple-select-formatter';
+import FileFormatter from './file-formatter';
+import LinkFormatter from './link-formatter';
+import CollaboratorFormatter from './collaborator-formatter';
+import NumberFormatter from './number-formatter';
+import DateFormatter from './date-formatter';
+import CreatorFormatter from './creator-formatter';
+import CTimeFormatter from './ctime-formatter';
+import LastModifierFormatter from './last-modifier-formatter';
+import MTimeFormatter from './mtime-formatter';
+import GeolocationFormatter from './geolocation-formatter';
+import FormulaFormatter from './formula-formatter';
+import AutoNumberFormatter from './auto-number-formatter';
+import UrlFormatter from './url-formatter';
+import EmailFormatter from './email-formatter';
+import DurationFormatter from './duration-formatter';
+import RateFormatter from './rate-formatter';
+import ButtonFormatter from './button-formatter';
+var FormatterConfig = (_FormatterConfig = {}, _defineProperty(_FormatterConfig, CellTypes.DEFAULT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.TEXT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.CHECKBOX, /*#__PURE__*/React.createElement(CheckboxFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.LONG_TEXT, /*#__PURE__*/React.createElement(LongTextFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.SINGLE_SELECT, /*#__PURE__*/React.createElement(SingleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.IMAGE, /*#__PURE__*/React.createElement(ImageFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.FILE, /*#__PURE__*/React.createElement(FileFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.MULTIPLE_SELECT, /*#__PURE__*/React.createElement(MultipleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.COLLABORATOR, /*#__PURE__*/React.createElement(CollaboratorFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.NUMBER, /*#__PURE__*/React.createElement(NumberFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.DATE, /*#__PURE__*/React.createElement(DateFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.LINK, /*#__PURE__*/React.createElement(LinkFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.CREATOR, /*#__PURE__*/React.createElement(CreatorFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.CTIME, /*#__PURE__*/React.createElement(CTimeFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.LAST_MODIFIER, /*#__PURE__*/React.createElement(LastModifierFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.MTIME, /*#__PURE__*/React.createElement(MTimeFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.GEOLOCATION, /*#__PURE__*/React.createElement(GeolocationFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.FORMULA, /*#__PURE__*/React.createElement(FormulaFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.AUTO_NUMBER, /*#__PURE__*/React.createElement(AutoNumberFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.URL, /*#__PURE__*/React.createElement(UrlFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.EMAIL, /*#__PURE__*/React.createElement(EmailFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.DURATION, /*#__PURE__*/React.createElement(DurationFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.RATE, /*#__PURE__*/React.createElement(RateFormatter, null)), _defineProperty(_FormatterConfig, CellTypes.BUTTON, /*#__PURE__*/React.createElement(ButtonFormatter, null)), _FormatterConfig);
+export default FormatterConfig;

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

@@ -0,0 +1,164 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 { FORMULA_RESULT_TYPE } from '../../constants';
+import cellFormatterFactory from '../cell-factory/cell-formatter-factory';
+import * as CellType from '../../constants/cell-types';
+import { isFunction } from '../../utils/utils';
+import TextFormatter from './text-formatter';
+import { isArrayFormalColumn, isSimpleCellFormatter } from '../../utils/column-utils';
+import cellValueValidator from '../../utils/cell-value-validator';
+import { getFormulaDisplayString } from '../../utils/value-format-utils';
+
+var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
+  _inherits(FormulaFormatter, _React$Component);
+
+  var _super = _createSuper(FormulaFormatter);
+
+  function FormulaFormatter() {
+    var _this;
+
+    _classCallCheck(this, FormulaFormatter);
+
+    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.getGridCellClassName = function (resultType) {
+      switch (resultType) {
+        case FORMULA_RESULT_TYPE.NUMBER:
+          {
+            return 'text-right';
+          }
+
+        default:
+          {
+            return '';
+          }
+      }
+    };
+
+    _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.createFormatter(array_type);
+
+      var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
+
+      if (isArrayFormalColumn(array_type)) {
+        formatterProps.value = value;
+        return _this.createColumnFormatter(Formatter, formatterProps);
+      }
+
+      var _isSimpleCellFormatterColumn = isSimpleCellFormatter(array_type);
+
+      var cellValue = value;
+
+      if (!Array.isArray(value)) {
+        cellValue = cellValueValidator(value, array_type) ? [value] : [];
+      }
+
+      var contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui formula-formatter multiple"
+      }, cellValue.map(function (v, index) {
+        formatterProps.value = v;
+        return /*#__PURE__*/React.createElement("div", {
+          className: contentItemClassName,
+          key: "formula-formatter-content-item-".concat(index)
+        }, _this.createColumnFormatter(Formatter, formatterProps));
+      }));
+    };
+
+    _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;
+  }
+
+  _createClass(FormulaFormatter, [{
+    key: "createColumnFormatter",
+    value: function createColumnFormatter(Formatter, formatterProps) {
+      if (React.isValidElement(Formatter)) {
+        return React.cloneElement(Formatter, _objectSpread({}, formatterProps));
+      } else if (isFunction(Formatter)) {
+        return /*#__PURE__*/React.createElement(Formatter, formatterProps);
+      }
+
+      return /*#__PURE__*/React.createElement(TextFormatter, formatterProps);
+    }
+  }, {
+    key: "render",
+    value: 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 === FORMULA_RESULT_TYPE.ARRAY) {
+        return this.renderOtherColumnFormatter();
+      }
+
+      if (typeof value === 'object') {
+        return null;
+      }
+
+      var gridCellClassName = this.getGridCellClassName(resultType);
+      var formattedValue = getFormulaDisplayString(value, columnData, {
+        collaborators: collaborators
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(gridCellClassName),
+        title: formattedValue,
+        "aria-label": formattedValue
+      }, formattedValue);
+    }
+  }]);
+
+  return FormulaFormatter;
+}(React.Component);
+
+export default FormulaFormatter;

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

@@ -0,0 +1,52 @@
+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 { getGeolocationDisplayString } from '../../utils/value-format-utils';
+
+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,
+          data = _this$props.data,
+          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
+      }, getGeolocationDisplayString(value, data));
+    }
+  }]);
+
+  return GeolocationFormatter;
+}(React.Component);
+
+GeolocationFormatter.defaultProps = {
+  value: {
+    province: '',
+    city: '',
+    district: '',
+    detail: ''
+  },
+  data: {},
+  containerClassName: ''
+};
+export default GeolocationFormatter;