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

package/es/utils/value-format-utils.js

@@ -0,0 +1,495 @@
+import moment from 'moment';
+import NP from './number-precision';
+import { NUMBER_TYPES, DEFAULT_NUMBER_FORMAT, DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS, FORMULA_RESULT_TYPE, COLLABORATOR_COLUMN_TYPES, ARRAY_FORMAL_COLUMNS_TYPES, DEFAULT_DATE_FORMAT } from '../constants';
+import * as CellType from '../constants/cell-types';
+NP.enableBoundaryChecking(false);
+var _separatorMap = {
+  'comma': ',',
+  'dot': '.',
+  'no': '',
+  'space': ' '
+};
+
+var _toThousands = function _toThousands(num, isCurrency, formatData) {
+  var _ref = formatData || {},
+      _ref$decimal = _ref.decimal,
+      decimal = _ref$decimal === void 0 ? 'dot' : _ref$decimal,
+      _ref$thousands = _ref.thousands,
+      thousands = _ref$thousands === void 0 ? 'no' : _ref$thousands,
+      _ref$precision = _ref.precision,
+      precision = _ref$precision === void 0 ? 2 : _ref$precision,
+      _ref$enable_precision = _ref.enable_precision,
+      enable_precision = _ref$enable_precision === void 0 ? false : _ref$enable_precision;
+
+  var decimalString = _separatorMap[decimal];
+  var thousandsString = _separatorMap[thousands];
+  var decimalDigits = enable_precision ? precision : _getDecimalDigits(num);
+  var value = parseFloat(num.toFixed(decimalDigits));
+  var integer = Math.trunc(value);
+  var decimalValue = String(Math.abs(NP.minus(value, integer)).toFixed(decimalDigits)).slice(1);
+
+  if (isCurrency) {
+    if (decimalValue.length === 2) {
+      decimalValue = decimalValue.padEnd(3, '0');
+    } else {
+      decimalValue = (decimalValue.substring(0, 3) || '.').padEnd(3, '0');
+    }
+
+    if (enable_precision) {
+      decimalValue = precision === 0 ? '' : decimalValue.slice(0, precision + 1);
+    }
+  }
+
+  decimalValue = decimalValue.replace(/./, decimalString);
+  var result = [],
+      counter = 0;
+  integer = Object.is(integer, -0) ? ['-', '0'] : integer.toString().split('');
+
+  for (var i = integer.length - 1; i >= 0; i--) {
+    counter++;
+    result.unshift(integer[i]);
+
+    if (!(counter % 3) && i !== 0) {
+      result.unshift(thousandsString);
+    }
+  }
+
+  return result.join('') + decimalValue;
+};
+
+var _getDecimalDigits = function _getDecimalDigits(num) {
+  if (Number.isInteger(num)) {
+    return 0;
+  }
+
+  var valueArr = (num + '').split('.');
+  var digitsLength = valueArr[1] ? valueArr[1].length : 8;
+  return digitsLength > 8 ? 8 : digitsLength;
+};
+
+export var getNumberDisplayString = function getNumberDisplayString(value, formatData) {
+  // formatData: old version maybe 'null'
+  var type = Object.prototype.toString.call(value);
+
+  if (type !== '[object Number]') {
+    if (type === '[object String]' && value.startsWith('#')) {
+      return value;
+    }
+
+    return null;
+  }
+
+  if (isNaN(value) || value === Infinity || value === -Infinity || (value + '').indexOf('e') > -1) return value + '';
+
+  var _ref2 = formatData || {},
+      _ref2$format = _ref2.format,
+      format = _ref2$format === void 0 ? DEFAULT_NUMBER_FORMAT : _ref2$format;
+
+  switch (format) {
+    case 'number':
+      return _toThousands(value, false, formatData);
+
+    case 'percent':
+      {
+        return "".concat(_toThousands(Number.parseFloat((value * 100).toFixed(8)), false, formatData), "%");
+      }
+
+    case 'yuan':
+      return "\uFFE5".concat(_toThousands(value, true, formatData));
+
+    case 'dollar':
+      return "$".concat(_toThousands(value, true, formatData));
+
+    case 'euro':
+      return "\u20AC".concat(_toThousands(value, true, formatData));
+
+    case 'duration':
+      {
+        return getDurationDisplayString(value, formatData.duration_format);
+      }
+
+    default:
+      return '' + value;
+  }
+};
+export var formatStringToNumber = function formatStringToNumber(value) {
+  var isIncludePercent = value.indexOf('%') > -1;
+  var newData = parseFloat(value.replace(/[^.-\d]/g, ''));
+
+  if (isIncludePercent && !isNaN(newData)) {
+    return newData / 100;
+  }
+
+  return isNaN(newData) ? '' : newData;
+};
+export var formatNumberString = function formatNumberString(value, format) {
+  var formattedValue = '';
+
+  switch (format) {
+    case NUMBER_TYPES.NUMBER:
+    case NUMBER_TYPES.NUMBER_WITH_COMMAS:
+      formattedValue = value.replace(/[^.-\d,]/g, '');
+      break;
+
+    case NUMBER_TYPES.PERCENT:
+      formattedValue = value.replace(/[^.-\d,%]/g, '');
+      break;
+
+    case NUMBER_TYPES.YUAN:
+      formattedValue = value.replace(/[^.-\d￥,]/g, '');
+      break;
+
+    case NUMBER_TYPES.DOLLAR:
+      formattedValue = value.replace(/[^.-\d$,]/g, '');
+      break;
+
+    case NUMBER_TYPES.EURO:
+      formattedValue = value.replace(/[^.-\d€,]/g, '');
+      break;
+
+    default:
+      formattedValue = value.replace(/[^.-\d,]/g, '');
+  }
+
+  return formattedValue;
+};
+export var getDateDisplayString = function getDateDisplayString(value, format) {
+  var formattedValue = '';
+
+  if (!value) {
+    // value === '', value === undefine, value === null
+    return formattedValue;
+  }
+
+  var date = moment(value);
+  if (!date.isValid()) return value;
+
+  switch (format) {
+    case 'D/M/YYYY':
+    case 'DD/MM/YYYY':
+      var formatValue = date.format('YYYY-MM-DD');
+      var formatValueList = formatValue.split('-');
+      return "".concat(formatValueList[2], "/").concat(formatValueList[1], "/").concat(formatValueList[0]);
+
+    case 'D/M/YYYY HH:mm':
+    case 'DD/MM/YYYY HH:mm':
+      var formatValues = date.format('YYYY-MM-DD HH:mm');
+      var formatValuesList = formatValues.split(' ');
+      var formatDateList = formatValuesList[0].split('-');
+      return "".concat(formatDateList[2], "/").concat(formatDateList[1], "/").concat(formatDateList[0], " ").concat(formatValuesList[1]);
+
+    case 'M/D/YYYY':
+      return date.format('M/D/YYYY');
+
+    case 'M/D/YYYY HH:mm':
+      return date.format('M/D/YYYY HH:mm');
+
+    case 'YYYY-MM-DD':
+      return date.format('YYYY-MM-DD');
+
+    case 'YYYY-MM-DD HH:mm':
+      return date.format('YYYY-MM-DD HH:mm');
+
+    default:
+      return value;
+  }
+};
+export var getDurationDisplayString = function getDurationDisplayString(value, duration_format) {
+  if (!value && value !== 0) return '';
+  duration_format = duration_format || DURATION_FORMATS_MAP.H_MM;
+
+  if (DURATION_FORMATS.findIndex(function (format) {
+    return format.type === duration_format;
+  }) < 0) {
+    return '';
+  }
+
+  if (value === 0) {
+    return DURATION_ZERO_DISPLAY[duration_format];
+  }
+
+  var includeDecimal = duration_format.indexOf('.') > -1;
+  var positiveValue = Math.abs(value);
+
+  if (!includeDecimal) {
+    positiveValue = Math.round(positiveValue);
+  }
+
+  positiveValue = getMathRoundedDuration(positiveValue, duration_format);
+  var decimalParts = (positiveValue + '').split('.');
+  var decimalPartsLen = decimalParts.length;
+  var decimal = 0;
+
+  if (decimalPartsLen > 1) {
+    decimal = decimalParts[decimalPartsLen - 1];
+    decimal = decimal ? decimal - 0 : 0;
+  }
+
+  var decimalDigits = DURATION_DECIMAL_DIGITS[duration_format];
+  var decimalSuffix = getDurationDecimalSuffix(duration_format, decimal);
+  var displayString = value < 0 ? '-' : '';
+  var hours = parseInt(positiveValue / 3600);
+  var minutes = parseInt((positiveValue - hours * 3600) / 60);
+
+  if (duration_format === DURATION_FORMATS_MAP.H_MM) {
+    displayString += "".concat(hours, ":").concat(minutes > 9 ? minutes : '0' + minutes);
+    return displayString;
+  }
+
+  var seconds = Number.parseFloat((positiveValue - hours * 3600 - minutes * 60).toFixed(decimalDigits));
+
+  if (hours > 0) {
+    displayString += "".concat(hours, ":");
+    minutes = minutes > 9 ? minutes : "0".concat(minutes);
+  }
+
+  seconds = seconds > 9 ? seconds : "0".concat(seconds);
+  displayString += "".concat(minutes, ":").concat(seconds).concat(decimalSuffix);
+  return displayString;
+};
+
+var getMathRoundedDuration = function getMathRoundedDuration(num, duration_format) {
+  var decimalDigits = DURATION_DECIMAL_DIGITS[duration_format];
+
+  if (decimalDigits < 1) {
+    return num;
+  }
+
+  var ratio = Math.pow(10, decimalDigits);
+  return Math.round(num * ratio) / ratio;
+};
+
+var getDurationDecimalSuffix = function getDurationDecimalSuffix(duration_format, decimal) {
+  if (duration_format === DURATION_FORMATS_MAP.H_MM_SS_S) {
+    return decimal === 0 ? '.0' : '';
+  } else if (duration_format === DURATION_FORMATS_MAP.H_MM_SS_SS) {
+    if (decimal === 0) {
+      return '.00';
+    } else if (decimal < 10) {
+      return '0';
+    }
+  } else if (duration_format === DURATION_FORMATS_MAP.H_MM_SS_SSS) {
+    if (decimal === 0) {
+      return '.000';
+    } else if (decimal < 10) {
+      return '00';
+    } else if (decimal < 100) {
+      return '0';
+    }
+  }
+
+  return '';
+};
+
+export var getOptionName = function getOptionName(options, targetOptionID) {
+  if (!targetOptionID || !options || !Array.isArray(options)) return null;
+  var option = options.find(function (option) {
+    return option.id === targetOptionID;
+  });
+  return option ? option.name : null;
+};
+export var getMultipleOptionName = function getMultipleOptionName(options, cellVal) {
+  if (!cellVal || !options || !Array.isArray(options)) return null;
+  var selectedOptions = options.filter(function (option) {
+    return cellVal.includes(option.id);
+  });
+  if (selectedOptions.length === 0) return null;
+  return selectedOptions.map(function (option) {
+    return option.name;
+  }).join(', ');
+};
+export var getLongtextDisplayString = function getLongtextDisplayString(value) {
+  var _ref3 = value || {},
+      text = _ref3.text;
+
+  if (!text) {
+    return null;
+  }
+
+  return text;
+};
+export var getCollaboratorsName = function getCollaboratorsName(collaborators, cellVal) {
+  if (cellVal) {
+    var collaboratorsName = [];
+    cellVal.forEach(function (v) {
+      var collaborator = collaborators.find(function (c) {
+        return c.email === v;
+      });
+
+      if (collaborator) {
+        collaboratorsName.push(collaborator.name);
+      }
+    });
+
+    if (collaboratorsName.length === 0) {
+      return null;
+    }
+
+    return collaboratorsName.join(', ');
+  }
+
+  return null;
+};
+export var getGeolocationDisplayString = function getGeolocationDisplayString(value, columnData) {
+  var _ref4 = columnData || {},
+      geo_format = _ref4.geo_format;
+
+  var cellValue = value || {};
+
+  if (!value) {
+    return null;
+  }
+
+  if (geo_format === 'lng_lat' && value.lng && value.lat) {
+    return "".concat(cellValue.lng, ", ").concat(cellValue.lat);
+  }
+
+  if (geo_format === 'country_region' && cellValue.country_region) {
+    return value.country_region || '';
+  }
+
+  var province = cellValue.province,
+      city = cellValue.city,
+      district = cellValue.district,
+      detail = cellValue.detail;
+
+  if (geo_format === 'province') {
+    return "".concat(province || '');
+  }
+
+  if (geo_format === 'province_city') {
+    return "".concat(province || '').concat(city || '');
+  }
+
+  return "".concat(province || '').concat(city || '').concat(district || '').concat(detail || '');
+};
+export var getFormulaDisplayString = function getFormulaDisplayString(cellValue, columnData) {
+  var _ref5 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      _ref5$collaborators = _ref5.collaborators,
+      collaborators = _ref5$collaborators === void 0 ? [] : _ref5$collaborators;
+
+  if (!columnData) {
+    return null;
+  }
+
+  var result_type = columnData.result_type;
+
+  if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
+    return getNumberDisplayString(cellValue, columnData);
+  }
+
+  if (result_type === FORMULA_RESULT_TYPE.DATE) {
+    var format = columnData.format;
+    return getDateDisplayString(cellValue, format);
+  }
+
+  if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+    var array_type = columnData.array_type,
+        array_data = columnData.array_data;
+
+    if (!array_type) {
+      return null;
+    }
+
+    if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+      return cellValue;
+    }
+
+    if (ARRAY_FORMAL_COLUMNS_TYPES.indexOf(array_type) < 0 && Array.isArray(cellValue)) {
+      return cellValue.map(function (val) {
+        return getCellValueDisplayString(val, array_type, {
+          data: array_data,
+          collaborators: collaborators
+        });
+      }).join(', ');
+    }
+
+    return getCellValueDisplayString(cellValue, array_type, {
+      data: array_data,
+      collaborators: collaborators
+    });
+  }
+
+  if (Object.prototype.toString.call(cellValue) === '[object Boolean]') {
+    return cellValue + '';
+  }
+
+  return cellValue;
+};
+export function getCellValueDisplayString(cellValue, type) {
+  var _ref6 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      data = _ref6.data,
+      _ref6$collaborators = _ref6.collaborators,
+      collaborators = _ref6$collaborators === void 0 ? [] : _ref6$collaborators;
+
+  var newData = data || {};
+
+  switch (type) {
+    case CellType.GEOLOCATION:
+      {
+        return getGeolocationDisplayString(cellValue, data);
+      }
+
+    case CellType.SINGLE_SELECT:
+      {
+        if (!data) return '';
+        var options = newData.options;
+        return getOptionName(options, cellValue);
+      }
+
+    case CellType.MULTIPLE_SELECT:
+      {
+        if (!data) return '';
+        var _options = newData.options;
+        return getMultipleOptionName(_options, cellValue);
+      }
+
+    case CellType.FORMULA:
+    case CellType.LINK_FORMULA:
+      {
+        return getFormulaDisplayString(cellValue, newData, {
+          collaborators: collaborators
+        });
+      }
+
+    case CellType.LONG_TEXT:
+      {
+        return getLongtextDisplayString(cellValue);
+      }
+
+    case CellType.NUMBER:
+      {
+        return getNumberDisplayString(cellValue, newData);
+      }
+
+    case CellType.DATE:
+      {
+        var _ref7 = newData || {},
+            _ref7$format = _ref7.format,
+            format = _ref7$format === void 0 ? DEFAULT_DATE_FORMAT : _ref7$format;
+
+        return getDateDisplayString(cellValue, format);
+      }
+
+    case CellType.CREATOR:
+    case CellType.LAST_MODIFIER:
+      {
+        return cellValue === 'anonymous' ? cellValue : getCollaboratorsName(collaborators, [cellValue]);
+      }
+
+    case CellType.COLLABORATOR:
+      {
+        return getCollaboratorsName(collaborators, cellValue);
+      }
+
+    case CellType.DURATION:
+      {
+        return getDurationDisplayString(cellValue, data);
+      }
+
+    default:
+      {
+        return cellValue ? cellValue + '' : '';
+      }
+  }
+}

package/lib/CTimeFormatter/index.js

@@ -4,7 +4,7 @@ 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';
+import dayjs from 'dayjs';
 import './index.css';
 
 var CTimeFormatter = /*#__PURE__*/function (_React$Component) {
@@ -24,7 +24,7 @@ var CTimeFormatter = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.formatDate = function (date) {
-      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+      return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
     };
 
     return _this;

package/lib/DateEditor/index.js

@@ -4,7 +4,7 @@ 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 moment from 'moment';
+import dayjs from 'dayjs';
 import { getDateDisplayString } from '../utils/value-format-utils';
 import PCDateEditorPopover from './pc-date-editor-popover';
 import MBDateEditorPopover from './mb-date-editor-popover';
@@ -81,7 +81,7 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           value = _this$props.value,
           lang = _this$props.lang;
-      moment.locale(lang);
+      dayjs.locale(lang);
       var dateFormat = this.getDateFormat();
       this.setState({
         isDateInit: true,

package/lib/DateEditor/mb-date-editor-popover/index.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { DatePicker } from 'antd-mobile';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import Calendar from '@seafile/seafile-calendar';
 import * as SeaDatePicker from '@seafile/seafile-calendar/lib/Picker';
 import { getLocale } from '../../lang';
@@ -35,19 +35,19 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = _this.props,
           dateFormat = _this$props.dateFormat,
           showHourAndMinute = _this$props.showHourAndMinute;
-      var newValue = moment(date);
+      var newValue = dayjs(date);
 
       if (showHourAndMinute) {
         var datePickerValue = _this.state.datePickerValue;
         var HM = datePickerValue.format('HH:mm');
         var format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
 
-        var newDate = moment(date).format(format) + ' ' + HM;
-        newValue = moment(newDate);
+        var newDate = dayjs(date).format(format) + ' ' + HM;
+        newValue = dayjs(newDate);
       }
 
       _this.setState({
-        datePickerValue: moment(date)
+        datePickerValue: dayjs(date)
       });
 
       _this.props.onValueChanged(newValue.format(dateFormat));
@@ -59,8 +59,8 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
       var format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
 
       var YMD = datePickerValue.format(format);
-      var newDate = YMD + ' ' + moment(time).format('HH:mm');
-      var newValue = moment(newDate);
+      var newDate = YMD + ' ' + dayjs(time).format('HH:mm');
+      var newValue = dayjs(newDate);
 
       _this.setState({
         datePickerValue: newValue
@@ -110,7 +110,7 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = _this.props,
           dateFormat = _this$props2.dateFormat,
           lang = _this$props2.lang;
-      var defaultValue = moment().clone();
+      var defaultValue = dayjs().clone();
       return /*#__PURE__*/React.createElement(Calendar, {
         locale: initDateEditorLanguage(lang),
         format: dateFormat,
@@ -165,7 +165,7 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
 
     _this.state = {
       open: true,
-      datePickerValue: props.value ? moment(props.value) : moment().clone()
+      datePickerValue: props.value ? dayjs(props.value) : dayjs().clone()
     };
     _this.calendarContainerRef = React.createRef();
     return _this;

package/lib/DateEditor/pc-date-editor-popover.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 moment from 'moment';
+import dayjs from 'dayjs';
 import DatePicker from '@seafile/seafile-calendar/lib/Picker';
 import Calendar from '@seafile/seafile-calendar';
 import { initDateEditorLanguage } from '../utils/editor-utils';
@@ -69,7 +69,7 @@ var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
           dateFormat = _this$props.dateFormat,
           showHourAndMinute = _this$props.showHourAndMinute,
           lang = _this$props.lang;
-      var defaultValue = moment().clone();
+      var defaultValue = dayjs().clone();
       return /*#__PURE__*/React.createElement(Calendar, {
         locale: initDateEditorLanguage(lang),
         style: {
@@ -87,7 +87,7 @@ var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
 
     _this.state = {
       open: true,
-      datePickerValue: props.value ? moment(props.value) : null
+      datePickerValue: props.value ? dayjs(props.value) : null
     };
     _this.calendarContainerRef = React.createRef();
     return _this;

package/lib/MTimeFormatter/index.js

@@ -4,7 +4,7 @@ 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';
+import dayjs from 'dayjs';
 import './index.css';
 
 var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
@@ -24,7 +24,7 @@ var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.formatDate = function (date) {
-      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+      return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
     };
 
     return _this;

package/lib/RateFormatter/index.js

@@ -31,7 +31,9 @@ var RateFormatter = /*#__PURE__*/function (_React$Component) {
           _ref$rate_max_number = _ref.rate_max_number,
           rate_max_number = _ref$rate_max_number === void 0 ? 5 : _ref$rate_max_number,
           _ref$rate_style_color = _ref.rate_style_color,
-          rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$rate_style_color;
+          rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$rate_style_color,
+          _ref$rate_style_type = _ref.rate_style_type,
+          rate_style_type = _ref$rate_style_type === void 0 ? 'dtable-icon-rate' : _ref$rate_style_type;
 
       var validValue = Math.min(rate_max_number, value);
       var rateList = [];
@@ -39,7 +41,7 @@ var RateFormatter = /*#__PURE__*/function (_React$Component) {
       for (var i = 0; i < validValue; i++) {
         rateList.push( /*#__PURE__*/React.createElement("i", {
           key: "dtable-ui-component-rate-".concat(i),
-          className: "dtable-font dtable-icon-star",
+          className: "dtable-font ".concat(rate_style_type),
           style: {
             color: rate_style_color || '#e5e5e5'
           }

package/lib/TextFormatter/index.js

@@ -44,9 +44,11 @@ var TextFormatter = /*#__PURE__*/function (_React$Component) {
           containerClassName = _this$props.containerClassName,
           value = _this$props.value;
       var classname = cn('dtable-ui cell-formatter-container text-formatter', containerClassName);
+      var formattedValue = this.getFormattedValue(value);
       return /*#__PURE__*/React.createElement("div", {
-        className: classname
-      }, this.getFormattedValue(value));
+        className: classname,
+        title: formattedValue
+      }, formattedValue);
     }
   }]);
 

package/lib/utils/value-format-utils.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import moment from 'moment';
+import dayjs from 'dayjs';
 import NP from './number-precision';
 import { CellType, NUMBER_TYPES, DEFAULT_NUMBER_FORMAT, DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS, FORMULA_RESULT_TYPE, COLLABORATOR_COLUMN_TYPES, ARRAY_FORMAL_COLUMNS_TYPES, DEFAULT_DATE_FORMAT } from '../constants';
 NP.enableBoundaryChecking(false);
@@ -161,7 +161,7 @@ export var getDateDisplayString = function getDateDisplayString(value, format) {
     return formattedValue;
   }
 
-  var date = moment(value);
+  var date = dayjs(value);
   if (!date.isValid()) return value;
 
   switch (format) {