dtable-ui-component 0.3.4 → 0.3.6-beta.1

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/DateEditor/index.js

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 import dayjs from 'dayjs';
-import { getDateDisplayString } from '../utils/value-format-utils';
+import { getDateDisplayString } from '@seafile/dtable-utils';
 import PCDateEditorPopover from './pc-date-editor-popover';
 import MBDateEditorPopover from './mb-date-editor-popover';
 import './index.css';

package/lib/DateFormatter/index.js

@@ -3,8 +3,8 @@ 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';
+import classnames from 'classnames';
+import { getDateDisplayString } from '@seafile/dtable-utils';
 import './index.css';
 
 var DateFormatter = /*#__PURE__*/function (_React$Component) {
@@ -13,21 +13,9 @@ var DateFormatter = /*#__PURE__*/function (_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;
+    return _super.apply(this, arguments);
   }
 
   _createClass(DateFormatter, [{
@@ -37,10 +25,10 @@ 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);
+        date = getDateDisplayString(date, format);
       }
 
       return /*#__PURE__*/React.createElement("div", {

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,8 +3,8 @@ 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';
+import classnames from 'classnames';
+import { getDurationDisplayString } from '@seafile/dtable-utils';
 import './index.css';
 
 var DurationFormatter = /*#__PURE__*/function (_React$Component) {
@@ -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

@@ -4,12 +4,11 @@ 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, CellType } from '../constants';
+import { CellType, FORMULA_RESULT_TYPE, getFormulaDisplayString } from '@seafile/dtable-utils';
 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';
 
 var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
@@ -130,12 +129,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 +164,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,8 +3,8 @@ 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';
+import classnames from 'classnames';
+import { getGeolocationDisplayString } from '@seafile/dtable-utils';
 import './index.css';
 
 var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
@@ -24,8 +24,9 @@ var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
       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);
+          containerClassName = _this$props.containerClassName,
+          isBaiduMap = _this$props.isBaiduMap;
+      var className = classnames('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
 
       if (typeof value !== 'object') {
         return null;
@@ -33,7 +34,10 @@ var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement("div", {
         className: className
-      }, getGeolocationDisplayString(value, data));
+      }, getGeolocationDisplayString(value, data, {
+        isBaiduMap: isBaiduMap,
+        hyphen: ' '
+      }));
     }
   }]);
 
@@ -48,6 +52,7 @@ GeolocationFormatter.defaultProps = {
     detail: ''
   },
   data: {},
-  containerClassName: ''
+  containerClassName: '',
+  isBaiduMap: false
 };
 export default GeolocationFormatter;

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/LinkEditor/index.js

@@ -4,9 +4,9 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
+import { getNumberDisplayString, getDateDisplayString } from '@seafile/dtable-utils';
 import { getLocale } from '../lang';
 import { CellType } from '../constants';
-import { getNumberDisplayString, getDateDisplayString } from '../utils/value-format-utils';
 import EditEditorButton from '../EditEditorButton';
 import LinkEditorOption from './link-editor-option';
 import PCLinkEditorPopover from './pc-link-editor-popover';

package/lib/LinkFormatter/index.js

@@ -4,9 +4,8 @@ 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 * as CellTypes from '../constants/cell-types';
-import { getNumberDisplayString, getDateDisplayString } from '../utils/value-format-utils';
+import classnames from 'classnames';
+import { CellType, getNumberDisplayString, getDateDisplayString } from '@seafile/dtable-utils';
 
 // link value is  get form parant's interface
 var LinkFormatter = /*#__PURE__*/function (_React$Component) {
@@ -87,12 +86,12 @@ var LinkFormatter = /*#__PURE__*/function (_React$Component) {
           data = linkedColumn.data; // todo: improve
 
       switch (type) {
-        case CellTypes.NUMBER:
+        case CellType.NUMBER:
           {
             return getNumberDisplayString(value, data);
           }
 
-        case CellTypes.DATE:
+        case CellType.DATE:
           {
             var format = data.format;
             return getDateDisplayString(value, format);
@@ -113,8 +112,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 +126,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);