dtable-ui-component 0.3.4 → 0.3.5

package/lib/AutoNumberFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import './index.css';
 
 var AutoNumberFormatter = /*#__PURE__*/function (_React$Component) {
@@ -23,7 +23,7 @@ var AutoNumberFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           containerClassName = _this$props.containerClassName,
           value = _this$props.value;
-      var classname = cn('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
       return /*#__PURE__*/React.createElement("div", {
         className: classname
       }, value);

package/lib/ButtonFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import './index.css';
 
 var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
@@ -56,7 +56,7 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
         color: colorOption.TEXT_COLOR
       };
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-        className: cn('dtable-ui cell-formatter-container button-formatter', containerClassName),
+        className: classnames('dtable-ui cell-formatter-container button-formatter', containerClassName),
         style: btnStyle,
         onClick: this.handleClick
       }, button_name));

package/lib/CTimeFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import dayjs from 'dayjs';
 import './index.css';
 
@@ -36,7 +36,7 @@ var CTimeFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           date = _this$props.value,
           containerClassName = _this$props.containerClassName;
-      var classname = cn('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
 
       if (date !== '') {
         date = this.formatDate(date);

package/lib/CheckboxFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import './index.css';
 
 var CheckboxFormatter = /*#__PURE__*/function (_React$PureComponent) {
@@ -24,7 +24,7 @@ var CheckboxFormatter = /*#__PURE__*/function (_React$PureComponent) {
           value = _this$props.value,
           containerClassName = _this$props.containerClassName;
       value = value === true ? true : false;
-      var classname = cn('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
 
       if (value) {
         return /*#__PURE__*/React.createElement("div", {

package/lib/CollaboratorFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import CollaboratorItem from '../CollaboratorItem';
 import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
 import './index.css';
@@ -70,7 +70,7 @@ var CollaboratorFormatter = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = this.props,
           containerClassName = _this$props2.containerClassName,
           value = _this$props2.value;
-      var classname = cn('dtable-ui cell-formatter-container collaborator-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container collaborator-formatter', containerClassName);
 
       if (!value || Array.isArray(value) && value.length === 0) {
         return /*#__PURE__*/React.createElement("div", {

package/lib/CreatorFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import CollaboratorItem from '../CollaboratorItem';
 import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
 import './index.css';
@@ -66,7 +66,7 @@ var CreatorFormatter = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = this.props,
           containerClassName = _this$props2.containerClassName,
           value = _this$props2.value;
-      var classname = cn('dtable-ui cell-formatter-container creator-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container creator-formatter', containerClassName);
 
       if (!value || Array.isArray(value) && value.length === 0) {
         return /*#__PURE__*/React.createElement("div", {

package/lib/DTableSearchInput/index.js

@@ -103,8 +103,8 @@ var DtableSearchInput = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(DtableSearchInput, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.value !== this.props.value) {
         this.setState({
           searchValue: nextProps.value

package/lib/DateFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import { getDateDisplayString } from '../utils/value-format-utils';
 import './index.css';
 
@@ -37,7 +37,7 @@ var DateFormatter = /*#__PURE__*/function (_React$Component) {
           date = _this$props.value,
           format = _this$props.format,
           containerClassName = _this$props.containerClassName;
-      var classname = cn('dtable-ui cell-formatter-container date-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container date-formatter', containerClassName);
 
       if (date !== '') {
         date = this.formatDate(date, format);

package/lib/DigitalSignFormatter/index.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
-import cn from 'astro-classname';
+import classnames from 'classnames';
 import ImagesLazyLoad from '../ImageFormatter/images-lazy-load';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
 import { getDigitalSignImageUrl } from './utils';
@@ -79,7 +79,7 @@ var DigitalSignFormatter = /*#__PURE__*/function (_Component) {
           readOnly = _this$props2.readOnly,
           config = _this$props2.config,
           isSample = _this$props2.isSample;
-      var className = cn('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName);
+      var className = classnames('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName);
       var signImages = this.getSignImages();
       if (signImages.length === 0) return null;
       var _this$state = this.state,

package/lib/DurationFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import { getDurationDisplayString } from '../utils/value-format-utils';
 import './index.css';
 
@@ -25,7 +25,7 @@ var DurationFormatter = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value,
           containerClassName = _this$props.containerClassName,
           format = _this$props.format;
-      var classname = cn('dtable-ui cell-formatter-container duration-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container duration-formatter', containerClassName);
       return /*#__PURE__*/React.createElement("div", {
         className: classname
       }, getDurationDisplayString(value, {

package/lib/EmailFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import './index.css';
 
 var EmailFormatter = /*#__PURE__*/function (_React$Component) {
@@ -23,7 +23,7 @@ var EmailFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           containerClassName = _this$props.containerClassName,
           value = _this$props.value;
-      var classname = cn('dtable-ui cell-formatter-container email-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container email-formatter', containerClassName);
       return /*#__PURE__*/React.createElement("div", {
         className: classname
       }, value);

package/lib/FileFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import FileItemFormatter from '../FileItemFormatter';
 import './index.css';
 
@@ -30,7 +30,7 @@ var FileFormatter = /*#__PURE__*/function (_React$PureComponent) {
         return null;
       }
 
-      var className = cn('dtable-ui cell-formatter-container file-formatter', containerClassName);
+      var className = classnames('dtable-ui cell-formatter-container file-formatter', containerClassName);
 
       if (isSample) {
         var item = value[0];

package/lib/FormulaFormatter/index.js

@@ -7,7 +7,7 @@ import React from 'react';
 import { FORMULA_RESULT_TYPE, CellType } from '../constants';
 import BaseFormatterConfig from '../formatterConfig/base-formatter-config';
 import TextFormatter from '../TextFormatter';
-import { isArrayFormalColumn, isSimpleCellFormatter, isFunction } from './utils';
+import { isArrayFormalColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from './utils';
 import cellValueValidator from './cell-value-validator';
 import { getFormulaDisplayString } from '../utils/value-format-utils';
 import './index.css';
@@ -130,12 +130,31 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
     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;
+      var data = column.data;
+      var array_type = data.array_type,
+          resultType = data.result_type;
+      var value = this.props.value;
+
+      if (Array.isArray(value)) {
+        value = getFormulaArrayValue(value);
+
+        if (array_type === CellType.DATE || resultType === FORMULA_RESULT_TYPE.DATE) {
+          value = value.map(function (item) {
+            return item.replace('T', ' ').replace('Z', '');
+          });
+        } else if (array_type === CellType.LONG_TEXT) {
+          value = value.map(function (item) {
+            return convertValueToDtableLongTextValue(item);
+          });
+        }
+      } else {
+        if (resultType === FORMULA_RESULT_TYPE.DATE) {
+          value = value.replace('T', ' ').replace('Z', '');
+        }
+      }
 
       if (resultType === FORMULA_RESULT_TYPE.ARRAY) {
         return this.renderOtherColumnFormatter();
@@ -146,7 +165,7 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
       }
 
       var gridCellClassName = this.getGridCellClassName(resultType);
-      var formattedValue = getFormulaDisplayString(value, columnData, {
+      var formattedValue = getFormulaDisplayString(value, data, {
         collaborators: collaborators
       });
       return /*#__PURE__*/React.createElement("div", {

package/lib/FormulaFormatter/utils.js

@@ -1,4 +1,5 @@
 import { ARRAY_FORMAL_COLUMNS, SIMPLE_CELL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS } from '../constants';
+import getPreviewContent from '../SimpleLongTextFormatter/normalize-long-text-value';
 export function isSimpleCellFormatter(type) {
   return SIMPLE_CELL_COLUMNS.includes(type) || SIMPLE_CELL_FORMULA_RESULTS.includes(type);
 }
@@ -8,4 +9,94 @@ export function isArrayFormalColumn(columnType) {
 export var isFunction = function isFunction(functionToCheck) {
   var getType = {};
   return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};
+export var isValidCellValue = function isValidCellValue(value) {
+  if (value === undefined) return false;
+  if (value === null) return false;
+  if (value === '') return false;
+  if (JSON.stringify(value) === '{}') return false;
+  if (JSON.stringify(value) === '[]') return false;
+  return true;
+};
+export var getFormulaArrayValue = function getFormulaArrayValue(value) {
+  var isFlat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  if (!isFlat) {
+    return getTwoDimensionArrayValue(value);
+  }
+
+  return value.map(function (item) {
+    if (Object.prototype.toString.call(item) !== '[object Object]' || !Object.prototype.hasOwnProperty.call(item, 'display_value')) {
+      return item;
+    }
+
+    var display_value = item.display_value;
+
+    if (!Array.isArray(display_value) || display_value.length === 0) {
+      return display_value;
+    }
+
+    return display_value.map(function (i) {
+      if (Object.prototype.toString.call(i) === '[object Object]') {
+        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) {
+          return i;
+        }
+
+        var _display_value = i.display_value;
+        return _display_value;
+      }
+
+      return i;
+    });
+  }).flat().filter(function (item) {
+    return isValidCellValue(item);
+  });
+};
+export var getTwoDimensionArrayValue = function getTwoDimensionArrayValue(value) {
+  if (!Array.isArray(value)) return [];
+  return value.map(function (item) {
+    if (Object.prototype.toString.call(item) !== '[object Object]') {
+      return item;
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) {
+      return item;
+    }
+
+    var display_value = item.display_value;
+
+    if (!Array.isArray(display_value) || display_value.length === 0) {
+      return display_value;
+    }
+
+    return display_value.map(function (i) {
+      if (Object.prototype.toString.call(i) === '[object Object]') {
+        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) {
+          return i;
+        }
+
+        var _display_value2 = i.display_value;
+        return _display_value2;
+      }
+
+      return i;
+    });
+  });
+};
+export var convertValueToDtableLongTextValue = function convertValueToDtableLongTextValue(value) {
+  var valueType = Object.prototype.toString.call(value);
+
+  if (value && valueType === '[object String]') {
+    return getPreviewContent(value);
+  }
+
+  if (valueType === '[object Object]') {
+    return value;
+  }
+
+  return '';
 };

package/lib/GeolocationFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import { getGeolocationDisplayString } from '../utils/value-format-utils';
 import './index.css';
 
@@ -25,7 +25,7 @@ var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value,
           data = _this$props.data,
           containerClassName = _this$props.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
+      var className = classnames('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
 
       if (typeof value !== 'object') {
         return null;

package/lib/HtmlLongTextFormatter/index.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
-import cn from 'astro-classname';
+import classnames from 'classnames';
 import { processor } from './markdown2html';
 import './index.css';
 
@@ -82,7 +82,7 @@ var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
     value: function render() {
       var innerHtml = this.state.innerHtml;
       var containerClassName = this.props.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
+      var className = classnames('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
       if (!innerHtml) return null;
       return /*#__PURE__*/React.createElement("div", {
         className: "".concat(className, " article"),

package/lib/ImageFormatter/images-lazy-load.js

@@ -22,7 +22,7 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
       _this.lazyLoadImages(_this.props);
     };
 
-    _this.componentWillReceiveProps = function (nextProps) {
+    _this.UNSAFE_componentWillReceiveProps = function (nextProps) {
       if (nextProps.images.toString() !== _this.props.images.toString()) {
         _this.lazyLoadImages(nextProps);
       }

package/lib/ImageFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import ImagesLazyLoad from './images-lazy-load';
 import { getImageThumbnailUrl } from './utils';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
@@ -101,7 +101,7 @@ var ImageFormatter = /*#__PURE__*/function (_React$Component) {
           server = _this$props.server,
           containerClassName = _this$props.containerClassName,
           readOnly = _this$props.readOnly;
-      var className = cn('dtable-ui cell-formatter-container image-formatter', containerClassName);
+      var className = classnames('dtable-ui cell-formatter-container image-formatter', containerClassName);
       var _this$state = this.state,
           isPreviewImage = _this$state.isPreviewImage,
           previewImageIndex = _this$state.previewImageIndex;

package/lib/ImagePreviewerLightbox/index.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
-import cn from 'astro-classname';
+import classnames from 'classnames';
 import ModalPortal from '../ModalPortal';
 import Lightbox from '@seafile/react-image-lightbox';
 import { checkSVGImage, isInternalImg } from './utils';
@@ -71,7 +71,7 @@ function ImagePreviewerLightbox(props) {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
     query: "(min-width: 767.8px)"
   }, /*#__PURE__*/React.createElement(Lightbox, {
-    wrapperClassName: cn('PC-image-previewer', className),
+    wrapperClassName: classnames('PC-image-previewer', className),
     imageTitle: imageTitleEl,
     toolbarButtons: toolbarButtons,
     mainSrc: imageItems[imageIndex],
@@ -93,7 +93,7 @@ function ImagePreviewerLightbox(props) {
     query: "(max-width: 767.8px)"
   }, /*#__PURE__*/React.createElement(Lightbox, {
     isDesktop: false,
-    wrapperClassName: cn('mobile-image-previewer dtable-ui-component', className),
+    wrapperClassName: classnames('mobile-image-previewer dtable-ui-component', className),
     mainSrc: imageItems[imageIndex],
     nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
     prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],

package/lib/LastModifierFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import CollaboratorItem from '../CollaboratorItem';
 import DefaultAvatar from '../assets/images/avatar/default_avatar.png';
 import './index.css';
@@ -66,7 +66,7 @@ var LastModifierFormatter = /*#__PURE__*/function (_React$PureComponent) {
       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);
+      var classname = classnames('dtable-ui cell-formatter-container last-modified-formatter', containerClassName);
 
       if (!value || Array.isArray(value) && value.length === 0) {
         return /*#__PURE__*/React.createElement("div", {

package/lib/LinkFormatter/index.js

@@ -4,7 +4,7 @@ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitial
 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 classnames from 'classnames';
 import * as CellTypes from '../constants/cell-types';
 import { getNumberDisplayString, getDateDisplayString } from '../utils/value-format-utils';
 
@@ -113,8 +113,8 @@ var LinkFormatter = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(LinkFormatter, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var nextRow = nextProps.row;
 
       if (nextRow._id !== this.props.row._id) {
@@ -127,7 +127,7 @@ var LinkFormatter = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var containerClassName = this.props.containerClassName;
-      var classname = cn('dtable-ui cell-formatter-container link-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container link-formatter', containerClassName);
       var displayValues = this.getDisplayValues();
       return /*#__PURE__*/React.createElement("div", {
         className: classname

package/lib/MTimeFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import dayjs from 'dayjs';
 import './index.css';
 
@@ -36,7 +36,7 @@ var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           date = _this$props.value,
           containerClassName = _this$props.containerClassName;
-      var classname = cn('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
 
       if (date !== '') {
         date = this.formatDate(date);

package/lib/MultipleSelectFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import SelectItem from '../SelectItem';
 import './index.css';
 
@@ -49,7 +49,7 @@ var MultipleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
       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);
+      var classname = classnames('dtable-ui cell-formatter-container multiple-select-formatter', containerClassName);
 
       if (!value || Array.isArray(value) && value.length === 0) {
         return /*#__PURE__*/React.createElement("div", {

package/lib/NumberFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import { getNumberDisplayString } from '../utils/value-format-utils';
 import './index.css';
 
@@ -25,7 +25,7 @@ var NumberFormatter = /*#__PURE__*/function (_React$Component) {
           number = _this$props.value,
           data = _this$props.data,
           containerClassName = _this$props.containerClassName;
-      var classname = cn('dtable-ui cell-formatter-container number-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container number-formatter', containerClassName);
 
       if (number || number === 0) {
         number = getNumberDisplayString(number, data);

package/lib/RateFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import './index.css';
 
 var RateFormatter = /*#__PURE__*/function (_React$Component) {
@@ -60,7 +60,7 @@ var RateFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           number = _this$props2.value,
           containerClassName = _this$props2.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container rate-formatter', containerClassName);
+      var className = classnames('dtable-ui cell-formatter-container rate-formatter', containerClassName);
       if (!number) return null;
       var rateList = this.getRateList();
       return /*#__PURE__*/React.createElement("div", {

package/lib/RowExpandFormatter/index.js

@@ -9,7 +9,7 @@ var _emptyTypeMap;
 
 import React from 'react';
 import classnames from 'classnames';
-import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter, DigitalSignFormatter } from '../index';
+import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter, DigitalSignFormatter, FormulaFormatter } from '../index';
 import { CellType } from '../constants';
 import './index.css';
 var emptyTypeMap = (_emptyTypeMap = {}, _defineProperty(_emptyTypeMap, CellType.TEXT, true), _defineProperty(_emptyTypeMap, CellType.LONG_TEXT, true), _defineProperty(_emptyTypeMap, CellType.GEOLOCATION, true), _defineProperty(_emptyTypeMap, CellType.SINGLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.MULTIPLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.CTIME, true), _defineProperty(_emptyTypeMap, CellType.MTIME, true), _defineProperty(_emptyTypeMap, CellType.DATE, true), _defineProperty(_emptyTypeMap, CellType.AUTO_NUMBER, true), _defineProperty(_emptyTypeMap, CellType.URL, true), _defineProperty(_emptyTypeMap, CellType.EMAIL, true), _defineProperty(_emptyTypeMap, CellType.IMAGE, true), _defineProperty(_emptyTypeMap, CellType.FILE, true), _defineProperty(_emptyTypeMap, CellType.CREATOR, true), _defineProperty(_emptyTypeMap, CellType.LAST_MODIFIER, true), _emptyTypeMap);
@@ -274,12 +274,14 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
         case CellType.FORMULA:
         case CellType.LINK_FORMULA:
           {
-            if (!cellValue && cellValue !== 0) {
+            if (!cellValue && cellValue !== 0 && cellValue !== false) {
               return _this.renderEmpty();
             }
 
-            return /*#__PURE__*/React.createElement(TextFormatter, {
+            return /*#__PURE__*/React.createElement(FormulaFormatter, {
               value: cellValue,
+              column: column,
+              collaborators: collaborators,
               containerClassName: containerClassName
             });
           }
@@ -411,8 +413,8 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       this.calculateCollaboratorData(nextProps);
     }
   }, {

package/lib/SimpleLongTextFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import getPreviewContent from './normalize-long-text-value';
 import LongTextPreview from './widgets/LongTextPreview';
 import ModalPortal from '../ModalPortal';
@@ -133,7 +133,7 @@ var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
 
       var isPreview = this.state.isPreview;
       var containerClassName = this.props.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
+      var className = classnames('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
       var value = this.translateValue();
       return /*#__PURE__*/React.createElement("div", {
         className: className,

package/lib/SingleSelectFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import SelectItem from '../SelectItem';
 import './index.css';
 
@@ -49,7 +49,7 @@ var SingleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = this.props,
           containerClassName = _this$props2.containerClassName,
           value = _this$props2.value;
-      var classname = cn('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
       return /*#__PURE__*/React.createElement("div", {
         className: classname
       }, value ? this.getOption() : '');

package/lib/TextFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import './index.css';
 
 var TextFormatter = /*#__PURE__*/function (_React$Component) {
@@ -43,7 +43,7 @@ var TextFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           containerClassName = _this$props.containerClassName,
           value = _this$props.value;
-      var classname = cn('dtable-ui cell-formatter-container text-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container text-formatter', containerClassName);
       var formattedValue = this.getFormattedValue(value);
       return /*#__PURE__*/React.createElement("div", {
         className: classname,

package/lib/UrlFormatter/index.js

@@ -3,7 +3,7 @@ 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 classnames from 'classnames';
 import './index.css';
 
 var UrlFormatter = /*#__PURE__*/function (_React$Component) {
@@ -23,7 +23,7 @@ var UrlFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           containerClassName = _this$props.containerClassName,
           value = _this$props.value;
-      var classname = cn('dtable-ui cell-formatter-container url-formatter', containerClassName);
+      var classname = classnames('dtable-ui cell-formatter-container url-formatter', containerClassName);
       return /*#__PURE__*/React.createElement("div", {
         className: classname
       }, value);

package/package.json

@@ -1,19 +1,16 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",
     "@seafile/seafile-calendar": "0.0.24",
     "@seafile/seafile-editor": "0.3.121",
     "antd-mobile": "^2.3.3",
-    "astro-classname": "^2.1.0",
     "bail": "1.0.5",
     "classnames": "^2.3.2",
     "dayjs": "1.10.7",
     "deepmerge": "^2.1.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "glamor": "^2.20.40",
     "hast-util-sanitize": "^1.1.2",
     "hast-util-to-html": "3.1.0",
@@ -107,6 +104,8 @@
     "css-loader": "3.4.2",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.6.0",
     "eslint-config-react-app": "^5.2.0",
     "eslint-loader": "3.0.3",