dtable-ui-component 0.1.83 → 0.1.84

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

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 import moment from 'moment';
-import { formatDateToString } from '../../utils/value-format-utils';
+import { getDateDisplayString } from '../../utils/value-format-utils';
 import PCDateEditorPopover from '../cell-editor-popover/pc-date-editor-popover';
 import MBDateEditorPopover from '../cell-editor-popover/mb-date-editor-popover';
 
@@ -117,7 +117,7 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "form-control",
         onClick: this.onDateEditorToggle
-      }, formatDateToString(newValue, dateFormat))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
+      }, getDateDisplayString(newValue, dateFormat))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
         query: '(min-width: 768px)'
       }, /*#__PURE__*/React.createElement(PCDateEditorPopover, {
         lang: lang,

package/es/components/cell-editor/index.js

@@ -2,7 +2,7 @@ import "../../css/cell-editor.css";
 export { default as NumberEditor } from './number-editor';
 export { default as TextEditor } from './text-editor';
 export { default as CheckboxEditor } from './checkbox-editor';
-export { default as SingleSelectEdtior } from './single-select-editor';
+export { default as SingleSelectEditor } from './single-select-editor';
 export { default as MultipleSelectEditor } from './multiple-select-editor';
 export { default as CollaboratorEditor } from './collaborator-editor';
 export { default as LinkEditor } from './link-editor';

package/es/components/cell-editor/link-editor.js

@@ -5,8 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 import { getLocale } from '../../lang';
-import * as CellTypes from '../../utils/cell-types';
-import { formatNumberToString, formatDateToString } from '../../utils/value-format-utils';
+import * as CellTypes from '../../constants/cell-types';
+import { getNumberDisplayString, getDateDisplayString } from '../../utils/value-format-utils';
 import EditEditorButton from '../common/edit-editor-button';
 import LinkEditorOption from '../common/link-editor-option';
 import PCLinkEditorPopover from '../cell-editor-popover/pc-link-editor-popover';
@@ -82,13 +82,13 @@ var LinkEditor = /*#__PURE__*/function (_React$Component) {
       switch (type) {
         case CellTypes.NUMBER:
           {
-            return formatNumberToString(value, data);
+            return getNumberDisplayString(value, data);
           }
 
         case CellTypes.DATE:
           {
             var format = data.format;
-            return formatDateToString(value, format);
+            return getDateDisplayString(value, format);
           }
 
         default:

package/es/components/cell-editor/number-editor.js

@@ -4,18 +4,18 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import isHotkey from 'is-hotkey';
-import { NUMBER_TYPES } from '../../utils/constants';
-import { formatNumberToString, formatStringToNumber, formatNumberString } from '../../utils/value-format-utils';
+import { NUMBER_TYPES } from '../../constants';
+import { getNumberDisplayString, formatStringToNumber, formatNumberString } from '../../utils/value-format-utils';
 
-var NumebrEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(NumebrEditor, _React$Component);
+var NumberEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(NumberEditor, _React$Component);
 
-  var _super = _createSuper(NumebrEditor);
+  var _super = _createSuper(NumberEditor);
 
-  function NumebrEditor(props) {
+  function NumberEditor(props) {
     var _this;
 
-    _classCallCheck(this, NumebrEditor);
+    _classCallCheck(this, NumberEditor);
 
     _this = _super.call(this, props);
 
@@ -42,7 +42,7 @@ var NumebrEditor = /*#__PURE__*/function (_React$Component) {
 
       _this.props.onCommit(updated);
 
-      var newValue = formatNumberToString(value, column.data); // format the number to display
+      var newValue = getNumberDisplayString(value, column.data); // format the number to display
 
       _this.setState({
         isEditorShow: false,
@@ -107,7 +107,7 @@ var NumebrEditor = /*#__PURE__*/function (_React$Component) {
         _column = _this$props.column;
     var dataFormat = _column.data && _column.data.format;
     _this.dataFormat = dataFormat || NUMBER_TYPES.NUMBER;
-    var initValue = formatNumberToString(_value, _column.data); // format the number to display
+    var initValue = getNumberDisplayString(_value, _column.data); // format the number to display
 
     _this.state = {
       inputValue: initValue,
@@ -117,7 +117,7 @@ var NumebrEditor = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(NumebrEditor, [{
+  _createClass(NumberEditor, [{
     key: "render",
     value: function render() {
       var style = this.getStyle();
@@ -144,11 +144,11 @@ var NumebrEditor = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return NumebrEditor;
+  return NumberEditor;
 }(React.Component);
 
-NumebrEditor.defaultProps = {
+NumberEditor.defaultProps = {
   isReadOnly: false,
   value: ''
 };
-export default NumebrEditor;
+export default NumberEditor;

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

@@ -4,14 +4,14 @@ 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 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 vlaue is exist, typeof value is array
+// 4 value is exist, typeof value is array
 var CreatorFormatter = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(CreatorFormatter, _React$PureComponent);
 
@@ -50,7 +50,7 @@ var CreatorFormatter = /*#__PURE__*/function (_React$PureComponent) {
         }
 
         ;
-        return /*#__PURE__*/React.createElement(ColloboratorItem, {
+        return /*#__PURE__*/React.createElement(CollaboratorItem, {
           key: index,
           collaborator: collaborator
         });

package/es/components/cell-formatter/date-formatter.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 { formatDateToString } from '../../utils/value-format-utils';
+import { getDateDisplayString } from '../../utils/value-format-utils';
 
 var DateFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(DateFormatter, _React$Component);
@@ -23,7 +23,7 @@ var DateFormatter = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.formatDate = function (date, format) {
-      return formatDateToString(date, format);
+      return getDateDisplayString(date, format);
     };
 
     return _this;

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _FormatterConfig;
 
 import React from 'react';
-import * as CellTypes from '../../utils/cell-types';
+import * as CellTypes from '../../constants/cell-types';
 import CheckboxFormatter from './checkbox-formatter';
 import ImageFormatter from './image-formatter';
 import LongTextFormatter from './long-text-formatter';

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

@@ -4,15 +4,14 @@ 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 { FORMULA_RESULT_TYPE } from '../../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 * as CellType from '../../constants/cell-types';
 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];
+import { isArrayFormalColumn, isSimpleCellFormatter } from '../../utils/column-utils';
+import cellValueValidator from '../../utils/cell-value-validator';
+import { getFormulaDisplayString } from '../../utils/value-format-utils';
 
 var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(FormulaFormatter, _React$Component);
@@ -30,125 +29,116 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
 
     _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:
+    _this.getGridCellClassName = function (resultType) {
+      switch (resultType) {
+        case FORMULA_RESULT_TYPE.NUMBER:
           {
-            formatterProps.collaborators = collaborators;
-            break;
+            return 'text-right';
           }
 
-        case CellTypes.FORMULA:
-        case CellTypes.LINK_FORMULA:
+        default:
           {
-            formatterProps.column = column;
-            Formatter = FormulaFormatter;
+            return '';
           }
       }
-
-      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;
+          collaborators = _this$props.collaborators;
       var columnData = column.data;
+      var array_type = columnData.array_type,
+          array_data = columnData.array_data;
 
-      var _ref = columnData || {},
-          display_column_key = _ref.display_column_key,
-          linked_table_id = _ref.linked_table_id;
+      if (!array_type || array_type === CellType.LINK) {
+        return null;
+      }
 
-      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;
+      var Formatter = cellFormatterFactory.createFormatter(array_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));
-        }));
+      var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
+
+      if (isArrayFormalColumn(array_type)) {
+        formatterProps.value = value;
+        return _this.createColumnFormatter(Formatter, formatterProps);
       }
 
-      return _this.getOtherColumnFormatter(value, linkedColumn);
-    };
+      var _isSimpleCellFormatterColumn = isSimpleCellFormatter(array_type);
 
-    _this.getFormattedValue = function (cellValue, columnData) {
-      if (!columnData) return '';
-      var result_type = columnData.result_type;
+      var cellValue = value;
 
-      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);
+      if (!Array.isArray(value)) {
+        cellValue = cellValueValidator(value, array_type) ? [value] : [];
       }
 
-      var formattedValue = Object.prototype.toString.call(cellValue) === '[object Boolean]' ? cellValue + '' : cellValue;
-      return formattedValue;
+      var contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui formula-formatter multiple"
+      }, cellValue.map(function (v, index) {
+        formatterProps.value = v;
+        return /*#__PURE__*/React.createElement("div", {
+          className: contentItemClassName,
+          key: "formula-formatter-content-item-".concat(index)
+        }, _this.createColumnFormatter(Formatter, formatterProps));
+      }));
+    };
+
+    _this.getFormatterProps = function (array_type, array_data, collaborators) {
+      switch (array_type) {
+        case CellType.DURATION:
+          {
+            var duration_format = array_data.duration_format;
+            return {
+              format: duration_format
+            };
+          }
+
+        case CellType.NUMBER:
+        case CellType.RATE:
+        case CellType.GEOLOCATION:
+          {
+            return {
+              data: array_data
+            };
+          }
+
+        default:
+          {
+            return _objectSpread(_objectSpread({}, array_data), {}, {
+              collaborators: collaborators
+            });
+          }
+      }
     };
 
     return _this;
   }
 
   _createClass(FormulaFormatter, [{
+    key: "createColumnFormatter",
+    value: function createColumnFormatter(Formatter, formatterProps) {
+      if (React.isValidElement(Formatter)) {
+        return React.cloneElement(Formatter, _objectSpread({}, formatterProps));
+      } else if (isFunction(Formatter)) {
+        return /*#__PURE__*/React.createElement(Formatter, formatterProps);
+      }
+
+      return /*#__PURE__*/React.createElement(TextFormatter, formatterProps);
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
           value = _this$props2.value,
           containerClassName = _this$props2.containerClassName,
-          column = _this$props2.column;
+          column = _this$props2.column,
+          collaborators = _this$props2.collaborators;
       var columnData = column.data;
       var resultType = columnData.result_type;
 
-      if (resultType === FORMULA_RESULT_TYPE.COLUMN) {
+      if (resultType === FORMULA_RESULT_TYPE.ARRAY) {
         return this.renderOtherColumnFormatter();
       }
 
@@ -156,13 +146,14 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      var isNumber = resultType === FORMULA_RESULT_TYPE.NUMBER;
-      var classname = cn('dtable-ui cell-formatter-container formula-formatter', containerClassName, {
-        "text-right": isNumber
+      var gridCellClassName = this.getGridCellClassName(resultType);
+      var formattedValue = getFormulaDisplayString(value, columnData, {
+        collaborators: collaborators
       });
-      var formattedValue = this.getFormattedValue(value, columnData);
       return /*#__PURE__*/React.createElement("div", {
-        className: classname
+        className: "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(gridCellClassName),
+        title: formattedValue,
+        "aria-label": formattedValue
       }, formattedValue);
     }
   }]);

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

@@ -4,6 +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 { getGeolocationDisplayString } from '../../utils/value-format-utils';
 
 var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(GeolocationFormatter, _React$Component);
@@ -21,16 +22,17 @@ var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
           value = _this$props.value,
+          data = _this$props.data,
           containerClassName = _this$props.containerClassName;
-      var classname = cn('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
+      var className = cn('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
 
       if (typeof value !== 'object') {
         return null;
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: classname
-      }, "".concat(value.province || '', " ").concat(value.city || '', " ").concat(value.district || '', " ").concat(value.detail || ''));
+        className: className
+      }, getGeolocationDisplayString(value, data));
     }
   }]);
 
@@ -44,6 +46,7 @@ GeolocationFormatter.defaultProps = {
     district: '',
     detail: ''
   },
+  data: {},
   containerClassName: ''
 };
 export default GeolocationFormatter;

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

@@ -23,4 +23,5 @@ export { default as DurationFormatter } from './duration-formatter';
 export { default as RateFormatter } from './rate-formatter';
 export { default as ButtonFormatter } from './button-formatter';
 export { default as FileItemFormatter } from './widgets/file-item-formatter';
-export { default as ImagePreviewerLightbox } from './widgets/image-previewer-lightbox';
+export { default as ImagePreviewerLightbox } from './widgets/image-previewer-lightbox';
+export { default as CollaboratorItem } from '../common/collaborator-item';

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

@@ -5,8 +5,8 @@ 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 '../../utils/cell-types';
-import { formatNumberToString, formatDateToString } from '../../utils/value-format-utils';
+import * as CellTypes from '../../constants/cell-types';
+import { getNumberDisplayString, getDateDisplayString } from '../../utils/value-format-utils';
 
 // link value is  get form parant's interface
 var LinkFormatter = /*#__PURE__*/function (_React$Component) {
@@ -88,13 +88,13 @@ var LinkFormatter = /*#__PURE__*/function (_React$Component) {
       switch (type) {
         case CellTypes.NUMBER:
           {
-            return formatNumberToString(value, data);
+            return getNumberDisplayString(value, data);
           }
 
         case CellTypes.DATE:
           {
             var format = data.format;
-            return formatDateToString(value, format);
+            return getDateDisplayString(value, format);
           }
 
         default:

package/es/components/cell-formatter/multiple-select-formatter.js

@@ -26,17 +26,16 @@ var MultipleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = _this.props,
           value = _this$props.value,
           options = _this$props.options;
-      return value.map(function (item) {
-        var option = options.find(function (option) {
-          return option.id === item || option.name === item;
+      if (!Array.isArray(value) || !Array.isArray(options)) return [];
+      var selectedOptions = options.filter(function (option) {
+        return value.includes(option.id) || value.includes(option.name);
+      });
+      if (selectedOptions.length === 0) return [];
+      return selectedOptions.map(function (option) {
+        return /*#__PURE__*/React.createElement(SelectItem, {
+          key: "multiple-".concat(option.id),
+          option: option
         });
-
-        if (option) {
-          return /*#__PURE__*/React.createElement(SelectItem, {
-            key: item,
-            option: option
-          });
-        }
       });
     };
 

package/es/components/cell-formatter/number-formatter.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 { formatNumberToString } from '../../utils/value-format-utils';
+import { getNumberDisplayString } from '../../utils/value-format-utils';
 
 var NumberFormatter = /*#__PURE__*/function (_React$Component) {
   _inherits(NumberFormatter, _React$Component);
@@ -27,7 +27,7 @@ var NumberFormatter = /*#__PURE__*/function (_React$Component) {
       var classname = cn('dtable-ui cell-formatter-container number-formatter', containerClassName);
 
       if (number || number === 0) {
-        number = formatNumberToString(number, data);
+        number = getNumberDisplayString(number, data);
       }
 
       return /*#__PURE__*/React.createElement("div", {

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

@@ -25,8 +25,13 @@ var RateFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           data = _this$props.data,
           value = _this$props.value;
-      var rate_max_number = data.rate_max_number,
-          rate_style_color = data.rate_style_color;
+
+      var _ref = data || {},
+          _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;
+
       var validValue = Math.min(rate_max_number, value);
       var rateList = [];
 

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

@@ -11,9 +11,29 @@ var TextFormatter = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(TextFormatter);
 
   function TextFormatter() {
+    var _this;
+
     _classCallCheck(this, TextFormatter);
 
-    return _super.apply(this, arguments);
+    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.getFormattedValue = function (val) {
+      if (typeof val === 'object') {
+        return null;
+      }
+
+      if (Object.prototype.toString.call(val) === '[object Boolean]') {
+        return val + '';
+      }
+
+      return val;
+    };
+
+    return _this;
   }
 
   _createClass(TextFormatter, [{
@@ -25,7 +45,7 @@ var TextFormatter = /*#__PURE__*/function (_React$Component) {
       var classname = cn('dtable-ui cell-formatter-container text-formatter', containerClassName);
       return /*#__PURE__*/React.createElement("div", {
         className: classname
-      }, value);
+      }, this.getFormattedValue(value));
     }
   }]);
 

package/es/components/common/images-lazy-load.js

@@ -139,6 +139,8 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
           });
         });
       }
+
+      return '';
     }
   }]);
 

package/es/{utils/constants.js → constants/index.js}

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _DURATION_ZERO_DISPLA, _DURATION_DECIMAL_DIG;
 
+import * as CellType from './cell-types';
 export var NUMBER_TYPES = {
   'NUMBER': 'number',
   'NUMBER_WITH_COMMAS': 'number-with-commas',
@@ -23,9 +24,15 @@ export var FORMULA_RESULT_TYPE = {
   STRING: 'string',
   DATE: 'date',
   BOOL: 'bool',
-  COLUMN: 'column'
+  ARRAY: 'array'
 };
+export var SIMPLE_CELL_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.CTIME, CellType.MTIME, CellType.GEOLOCATION, CellType.AUTO_NUMBER, CellType.URL, CellType.EMAIL, CellType.DURATION, CellType.CHECKBOX, CellType.RATE];
+export var ARRAY_FORMAL_COLUMNS = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
+export var SIMPLE_CELL_FORMULA_RESULTS = [FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.STRING, FORMULA_RESULT_TYPE.DATE, FORMULA_RESULT_TYPE.BOOL];
+export var COLLABORATOR_COLUMN_TYPES = [CellType.COLLABORATOR, CellType.CREATOR, CellType.LAST_MODIFIER];
+export var ARRAY_FORMAL_COLUMNS_TYPES = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
 export var DEFAULT_NUMBER_FORMAT = 'number';
+export var DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 export var DURATION_FORMATS_MAP = {
   H_MM: 'h:mm',
   H_MM_SS: 'h:mm:ss'

package/es/index.js

@@ -1,5 +1,6 @@
+export { default as toaster } from './components/toast';
 export { setLocale } from './lang';
-export { formatDateToString, formatNumberToString, formatStringToNumber, formatNumberString } from './utils/value-format-utils';
+export { getDateDisplayString, getNumberDisplayString, formatStringToNumber, formatNumberString } from './utils/value-format-utils';
 export { default as Loading } from './components/loading';
-export { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, ImageFormatter, FileFormatter, LongTextFormatter, GeolocationFormatter, LinkFormatter, FormulaFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, FileItemFormatter, ImagePreviewerLightbox } from './components/cell-formatter';
-export { TextEditor, NumberEditor, CheckboxEditor, SingleSelectEdtior, CollaboratorEditor, DateEditor, LinkEditor } from './components/cell-editor';
+export { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, ImageFormatter, FileFormatter, LongTextFormatter, GeolocationFormatter, LinkFormatter, FormulaFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, UrlFormatter, EmailFormatter, DurationFormatter, RateFormatter, ButtonFormatter, FileItemFormatter, ImagePreviewerLightbox, CollaboratorItem } from './components/cell-formatter';
+export { TextEditor, NumberEditor, CheckboxEditor, SingleSelectEditor, CollaboratorEditor, DateEditor, LinkEditor } from './components/cell-editor';

package/es/utils/cell-value-validator.js

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var _validators;
+
+import * as CellType from '../constants/cell-types';
+import { FORMULA_RESULT_TYPE } from '../constants';
+
+var numberValidator = function numberValidator(value) {
+  return (value || value === 0) && Object.prototype.toString.call(value) === '[object Number]';
+};
+
+var textValidator = function textValidator(value) {
+  return !!value;
+};
+
+var checkboxValidator = function checkboxValidator(value) {
+  return typeof value === 'boolean';
+};
+
+var validators = (_validators = {}, _defineProperty(_validators, CellType.NUMBER, numberValidator), _defineProperty(_validators, CellType.RATE, numberValidator), _defineProperty(_validators, CellType.DURATION, numberValidator), _defineProperty(_validators, CellType.CHECKBOX, checkboxValidator), _defineProperty(_validators, CellType.TEXT, textValidator), _defineProperty(_validators, CellType.DATE, textValidator), _defineProperty(_validators, CellType.CTIME, textValidator), _defineProperty(_validators, CellType.MTIME, textValidator), _defineProperty(_validators, CellType.GEOLOCATION, textValidator), _defineProperty(_validators, CellType.AUTO_NUMBER, textValidator), _defineProperty(_validators, CellType.URL, textValidator), _defineProperty(_validators, CellType.EMAIL, textValidator), _defineProperty(_validators, FORMULA_RESULT_TYPE.DATE, textValidator), _defineProperty(_validators, FORMULA_RESULT_TYPE.STRING, textValidator), _defineProperty(_validators, FORMULA_RESULT_TYPE.NUMBER, numberValidator), _defineProperty(_validators, FORMULA_RESULT_TYPE.BOOL, checkboxValidator), _validators);
+
+var cellValueValidator = function cellValueValidator(cellValue, type) {
+  var validator = validators[type];
+
+  if (validator) {
+    return validator(cellValue);
+  }
+
+  return true;
+};
+
+export default cellValueValidator;

package/es/utils/column-utils.js

@@ -0,0 +1,7 @@
+import { ARRAY_FORMAL_COLUMNS, SIMPLE_CELL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS } from '../constants';
+export function isSimpleCellFormatter(type) {
+  return SIMPLE_CELL_COLUMNS.includes(type) || SIMPLE_CELL_FORMULA_RESULTS.includes(type);
+}
+export function isArrayFormalColumn(columnType) {
+  return ARRAY_FORMAL_COLUMNS.includes(columnType);
+}

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

@@ -1,6 +1,7 @@
 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 } from './constants';
+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': ',',
@@ -66,7 +67,7 @@ var _getDecimalDigits = function _getDecimalDigits(num) {
   return digitsLength > 8 ? 8 : digitsLength;
 };
 
-export var formatNumberToString = function formatNumberToString(value, formatData) {
+export var getNumberDisplayString = function getNumberDisplayString(value, formatData) {
   // formatData: old version maybe 'null'
   var type = Object.prototype.toString.call(value);
 
@@ -122,42 +123,42 @@ export var formatStringToNumber = function formatStringToNumber(value) {
   return isNaN(newData) ? '' : newData;
 };
 export var formatNumberString = function formatNumberString(value, format) {
-  var formatedValue = '';
+  var formattedValue = '';
 
   switch (format) {
     case NUMBER_TYPES.NUMBER:
     case NUMBER_TYPES.NUMBER_WITH_COMMAS:
-      formatedValue = value.replace(/[^.-\d,]/g, '');
+      formattedValue = value.replace(/[^.-\d,]/g, '');
       break;
 
     case NUMBER_TYPES.PERCENT:
-      formatedValue = value.replace(/[^.-\d,%]/g, '');
+      formattedValue = value.replace(/[^.-\d,%]/g, '');
       break;
 
     case NUMBER_TYPES.YUAN:
-      formatedValue = value.replace(/[^.-\d￥,]/g, '');
+      formattedValue = value.replace(/[^.-\d￥,]/g, '');
       break;
 
     case NUMBER_TYPES.DOLLAR:
-      formatedValue = value.replace(/[^.-\d$,]/g, '');
+      formattedValue = value.replace(/[^.-\d$,]/g, '');
       break;
 
     case NUMBER_TYPES.EURO:
-      formatedValue = value.replace(/[^.-\d€,]/g, '');
+      formattedValue = value.replace(/[^.-\d€,]/g, '');
       break;
 
     default:
-      formatedValue = value.replace(/[^.-\d,]/g, '');
+      formattedValue = value.replace(/[^.-\d,]/g, '');
   }
 
-  return formatedValue;
+  return formattedValue;
 };
-export var formatDateToString = function formatDateToString(value, format) {
-  var formatedValue = '';
+export var getDateDisplayString = function getDateDisplayString(value, format) {
+  var formattedValue = '';
 
   if (!value) {
     // value === '', value === undefine, value === null
-    return formatedValue;
+    return formattedValue;
   }
 
   var date = moment(value);
@@ -278,4 +279,217 @@ var getDurationDecimalSuffix = function getDurationDecimalSuffix(duration_format
   }
 
   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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.1.83",
+  "version": "0.1.84",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",
-    "@seafile/seafile-calendar": "^0.0.18",
+    "@seafile/seafile-calendar": "^0.0.19",
     "antd-mobile": "^2.3.3",
     "astro-classname": "^2.1.0",
     "bail": "1.0.5",