dtable-ui-component 0.2.0 → 0.2.2

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 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 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(ColloboratorItem, {
+          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 { formatDateToString } 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 formatDateToString(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 '../../utils/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,173 @@
+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 cn from 'astro-classname';
+import { FORMULA_RESULT_TYPE } from '../../utils/constants';
+import cellFormatterFactory from '../cell-factory/cell-formatter-factory';
+import * as CellTypes from '../../utils/cell-types';
+import { formatNumberToString, formatDateToString } from '../../utils/value-format-utils';
+import { isFunction } from '../../utils/utils';
+import TextFormatter from './text-formatter';
+var SIMPLE_CELL_FORMATTER_COLUMNS = [CellTypes.TEXT, CellTypes.NUMBER, CellTypes.DATE, CellTypes.CTIME, CellTypes.MTIME, CellTypes.GEOLOCATION, CellTypes.AUTO_NUMBER, CellTypes.URL, CellTypes.EMAIL, CellTypes.DURATION];
+var ARRAY_FORMAL_COLUMNS = [CellTypes.IMAGE, CellTypes.FILE, CellTypes.MULTIPLE_SELECT, CellTypes.COLLABORATOR];
+
+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.getOtherColumnFormatter = function (value, column) {
+      var collaborators = _this.props.collaborators;
+      var formatterProps = {
+        value: value
+      };
+      var columnType = column.type;
+      var Formatter = cellFormatterFactory.createFormatter(columnType);
+
+      switch (columnType) {
+        case CellTypes.NUMBER:
+          {
+            formatterProps.data = column.data;
+            break;
+          }
+
+        case CellTypes.DATE:
+          {
+            formatterProps.format = column.format;
+            break;
+          }
+
+        case CellTypes.SINGLE_SELECT:
+        case CellTypes.MULTIPLE_SELECT:
+          {
+            formatterProps.options = column.data.options;
+            break;
+          }
+
+        case CellTypes.COLLABORATOR:
+          {
+            formatterProps.collaborators = collaborators;
+            break;
+          }
+
+        case CellTypes.FORMULA:
+        case CellTypes.LINK_FORMULA:
+          {
+            formatterProps.column = column;
+            Formatter = FormulaFormatter;
+          }
+      }
+
+      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);
+    };
+
+    _this.renderOtherColumnFormatter = function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          column = _this$props.column,
+          tables = _this$props.tables;
+      var columnData = column.data;
+
+      var _ref = columnData || {},
+          display_column_key = _ref.display_column_key,
+          linked_table_id = _ref.linked_table_id;
+
+      var linkedTable = tables.find(function (table) {
+        return table._id === linked_table_id;
+      });
+      if (!linkedTable) return null;
+      var linkedColumn = linkedTable.columns.find(function (column) {
+        return column.key === display_column_key;
+      });
+      if (!linkedColumn) return null;
+      var linkedColumnType = linkedColumn.type;
+
+      if (!ARRAY_FORMAL_COLUMNS.includes(linkedColumnType) && Object.prototype.toString.call(value) === '[object Array]') {
+        var contentItemClassName = cn('formula-formatter-content-item', {
+          'simple-cell-formatter': SIMPLE_CELL_FORMATTER_COLUMNS.includes(linkedColumnType)
+        });
+        return /*#__PURE__*/React.createElement("div", {
+          className: "dtable-ui formula-formatter multiple"
+        }, value.map(function (v, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: contentItemClassName,
+            key: "formula-formatter-content-item-".concat(index)
+          }, _this.getOtherColumnFormatter(v, linkedColumn));
+        }));
+      }
+
+      return _this.getOtherColumnFormatter(value, linkedColumn);
+    };
+
+    _this.getFormattedValue = function (cellValue, columnData) {
+      if (!columnData) return '';
+      var result_type = columnData.result_type;
+
+      if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
+        cellValue = parseFloat(cellValue);
+        return formatNumberToString(cellValue, columnData);
+      } else if (result_type === FORMULA_RESULT_TYPE.DATE) {
+        var format = columnData.format;
+        return formatDateToString(cellValue, format);
+      }
+
+      var formattedValue = Object.prototype.toString.call(cellValue) === '[object Boolean]' ? cellValue + '' : cellValue;
+      return formattedValue;
+    };
+
+    return _this;
+  }
+
+  _createClass(FormulaFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          value = _this$props2.value,
+          containerClassName = _this$props2.containerClassName,
+          column = _this$props2.column;
+      var columnData = column.data;
+      var resultType = columnData.result_type;
+
+      if (resultType === FORMULA_RESULT_TYPE.COLUMN) {
+        return this.renderOtherColumnFormatter();
+      }
+
+      if (typeof value === 'object') {
+        return null;
+      }
+
+      var isNumber = resultType === FORMULA_RESULT_TYPE.NUMBER;
+      var classname = cn('dtable-ui cell-formatter-container formula-formatter', containerClassName, {
+        "text-right": isNumber
+      });
+      var formattedValue = this.getFormattedValue(value, columnData);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname
+      }, formattedValue);
+    }
+  }]);
+
+  return FormulaFormatter;
+}(React.Component);
+
+export default FormulaFormatter;