dtable-ui-component 0.3.2-alpha4 → 0.3.2-alpha6

package/lib/RowExpandLinkFormatter/value-display-utils.js

@@ -0,0 +1,401 @@
+import { CellType } from 'dtable-store';
+import { isArrayFormalColumn } from './utils';
+import NP from './number-precision';
+import DateUtils from './date-utils';
+import { DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS } from './column-data-constants';
+import { FORMULA_RESULT_TYPE } from './formula-constants';
+NP.enableBoundaryChecking(false);
+var DEFAULT_NUMBER_FORMAT = 'number';
+var COLLABORATOR_COLUMN_TYPES = [CellType.COLLABORATOR, CellType.CREATOR, CellType.LAST_MODIFIER];
+var DOWNLOAD_NAME_COLUMN_TYPES = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.COLLABORATOR, CellType.CREATOR, CellType.AUTO_NUMBER];
+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];
+
+  if ((num + '').indexOf('e') > -1) {
+    if (num < 1 && num > -1) {
+      var _decimalDigits = enable_precision ? precision : 8;
+
+      return num.toFixed(_decimalDigits);
+    }
+
+    return num;
+  }
+
+  var decimalDigits = enable_precision ? precision : _getDecimalDigits(num);
+  var value = parseFloat(num.toFixed(decimalDigits));
+  var isMinus = value < 0;
+  var integer = Math.trunc(value); // format decimal value
+
+  var decimalValue = String(Math.abs(NP.minus(value, integer)).toFixed(decimalDigits)).slice(1);
+
+  if (isCurrency) {
+    if (!enable_precision) {
+      if (decimalValue.length === 2) {
+        decimalValue = decimalValue.padEnd(3, '0');
+      } else {
+        decimalValue = (decimalValue.substring(0, 3) || '.').padEnd(3, '0');
+      }
+    }
+  }
+
+  decimalValue = decimalValue.replace(/./, decimalString); // format integer value
+
+  var result = [],
+      counter = 0;
+  integer = Math.abs(integer).toString();
+
+  for (var i = integer.length - 1; i >= 0; i--) {
+    counter++;
+    result.unshift(integer[i]);
+
+    if (!(counter % 3) && i !== 0) {
+      result.unshift(thousandsString);
+    }
+  }
+
+  return (isMinus ? '-' : '') + 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) 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 'custom_currency':
+      {
+        return "".concat(formatData.currency_symbol || '').concat(_toThousands(value, true, formatData));
+      }
+
+    default:
+      return '' + value;
+  }
+};
+
+var getCollaboratorsName = function getCollaboratorsName(value, collaborators) {
+  if (Array.isArray(value) && value.length > 0 && Array.isArray(collaborators)) {
+    var collaboratorsName = [];
+    value.forEach(function (item) {
+      var collaborator = collaborators.find(function (c) {
+        return c.email === item;
+      });
+
+      if (collaborator) {
+        collaboratorsName.push(collaborator.name);
+      }
+    });
+    return collaboratorsName.join(',');
+  }
+
+  return '';
+};
+
+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(', ');
+};
+
+var getLongtextDisplayString = function getLongtextDisplayString(value) {
+  var _ref3 = value || {},
+      text = _ref3.text;
+
+  if (!text) {
+    return null;
+  }
+
+  return text;
+};
+
+export var getCellDisplayValue = function getCellDisplayValue(record, column, collaborators) {
+  var type = column.type,
+      data = column.data,
+      key = column.key;
+  if (!DOWNLOAD_NAME_COLUMN_TYPES.includes(type)) return '';
+  var cellValue = record[key];
+
+  switch (type) {
+    case CellType.NUMBER:
+      {
+        return getNumberDisplayString(cellValue, data);
+      }
+
+    case CellType.DATE:
+      {
+        if (!cellValue || typeof cellValue !== 'string') return '';
+
+        var _ref4 = data || {},
+            format = _ref4.format;
+
+        return DateUtils.format(cellValue, format);
+      }
+
+    case CellType.COLLABORATOR:
+      {
+        if (!Array.isArray(cellValue)) return '';
+        return getCollaboratorsName(cellValue, collaborators);
+      }
+
+    case CellType.CREATOR:
+    case CellType.LAST_MODIFIER:
+      {
+        if (!cellValue) return '';
+        if (cellValue === 'anonymous') return cellValue;
+        return getCollaboratorsName([cellValue], collaborators);
+      }
+
+    case CellType.SINGLE_SELECT:
+      {
+        if (!data) return '';
+        var options = data.options;
+        return getOptionName(options, cellValue);
+      }
+
+    case CellType.MULTIPLE_SELECT:
+      {
+        if (!data) return '';
+
+        var _data$options = data.options,
+            _options = _data$options === void 0 ? [] : _data$options;
+
+        return getMultipleOptionName(_options, cellValue);
+      }
+
+    case CellType.FORMULA:
+    case CellType.LINK_FORMULA:
+      {
+        return getFormulaDisplayString(cellValue, data, collaborators);
+      }
+
+    case CellType.LONG_TEXT:
+      {
+        return getLongtextDisplayString(cellValue);
+      }
+
+    case CellType.DURATION:
+      {
+        return getDurationDisplayString(cellValue, data);
+      }
+
+    case CellType.CTIME:
+    case CellType.MTIME:
+      {
+        return DateUtils.format(cellValue.replace('T', ' ').replace('Z', ''), 'YYYY-MM-DD HH:MM:SS');
+      }
+
+    default:
+      {
+        return cellValue ? cellValue + '' : '';
+      }
+  }
+};
+
+var getFormulaDisplayString = function getFormulaDisplayString(cellValue, columnData, 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 DateUtils.format(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 (isArrayFormalColumn(array_type) && Array.isArray(cellValue)) {
+      return cellValue.map(function (val) {
+        return getCellDisplayValue({
+          'FORMULA_ARRAY': val
+        }, {
+          type: 'array_type',
+          key: 'FORMULA_ARRAY',
+          data: array_data
+        }, collaborators);
+      }).join(', ');
+    }
+
+    return getCellDisplayValue({
+      'FORMULA_ARRAY': cellValue
+    }, {
+      type: 'array_type',
+      key: 'FORMULA_ARRAY',
+      data: array_data
+    }, collaborators);
+  }
+
+  if (Object.prototype.toString.call(cellValue) === '[object Boolean]') {
+    return cellValue + '';
+  }
+
+  return cellValue;
+};
+
+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;
+}
+
+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 getDurationDisplayString = function getDurationDisplayString(value, data) {
+  if (!value && value !== 0) return '';
+
+  var _ref5 = data || {},
+      duration_format = _ref5.duration_format;
+
+  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));
+  minutes = minutes > 9 ? minutes : "0".concat(minutes);
+  seconds = seconds > 9 ? seconds : "0".concat(seconds);
+  displayString += "".concat(hours, ":").concat(minutes, ":").concat(seconds).concat(decimalSuffix);
+  return displayString;
+};

package/lib/common/delete-tip.js

@@ -3,6 +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 ModalPortal from './modal-portal';
 import { getLocale } from '../lang';
 import './delete-tip.css';
 
@@ -51,7 +52,7 @@ var DeleteTip = /*#__PURE__*/function (_React$Component) {
           onDelete = _this$props.onDelete,
           position = _this$props.position,
           deleteTip = _this$props.deleteTip;
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement("div", {
         ref: function ref(node) {
           return _this2.tipContainer = node;
         },
@@ -73,7 +74,7 @@ var DeleteTip = /*#__PURE__*/function (_React$Component) {
       }, getLocale('Cancel')), /*#__PURE__*/React.createElement("button", {
         className: "btn btn-primary",
         onClick: onDelete
-      }, getLocale('Delete'))));
+      }, getLocale('Delete')))));
     }
   }]);
 

package/lib/common/modal-portal.js

@@ -0,0 +1,44 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import ReactDOM from 'react-dom';
+var modalRoot = document.getElementById('modal-wrapper');
+
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalPortal, _React$Component);
+
+  var _super = _createSuper(ModalPortal);
+
+  function ModalPortal(props) {
+    var _this;
+
+    _classCallCheck(this, ModalPortal);
+
+    _this = _super.call(this, props);
+    _this.el = document.createElement('div');
+    return _this;
+  }
+
+  _createClass(ModalPortal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      modalRoot.appendChild(this.el);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      modalRoot.removeChild(this.el);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return ReactDOM.createPortal(this.props.children, this.el);
+    }
+  }]);
+
+  return ModalPortal;
+}(React.Component);
+
+export { ModalPortal as default };

package/lib/data/dtable-value.js

@@ -88,6 +88,13 @@ var DTABLE_VALUE = {
       'H7QK': '220',
       'zw4Q': '549580',
       'l9fg': 'test',
+      '2uZ2': [{
+        'row_id': 'BUOKV7pySG6F0-3LcKIFuA',
+        'display_value': '联机记录-12436'
+      }, {
+        'row_id': 'CU3j3PNyQaetnLWyiizURg',
+        'display_value': '第二行'
+      }],
       'EC80': [{
         'url': 'https://dev.seatable.cn/workspace/8/asset/3054cef5-ae9a-4323-bc2e-1fd1538db1f2/external-apps/files/2022-11/%E6%88%AA%E5%B1%8F2022-11-24%2010.45.13.png',
         'size': 443928,

package/lib/index.js

@@ -36,7 +36,10 @@ export { default as FileItemFormatter } from './FileItemFormatter';
 export { default as DigitalSignFormatter } from './DigitalSignFormatter';
 export { default as SimpleLongTextFormatter } from './SimpleLongTextFormatter'; // row expand formatter
 
-export { default as RowExpandFileFormatter } from './RowExpandFileFormatter'; // editor
+export { default as RowExpandFileFormatter } from './RowExpandFileFormatter';
+export { default as RowExpandImageFormatter } from './RowExpandImageFormatter';
+export { default as RowExpandLinkFormatter } from './RowExpandLinkFormatter';
+export { default as RowExpandFormatter } from './RowExpandFormatter'; // editor
 
 export { default as TextEditor } from './TextEditor';
 export { default as NumberEditor } from './NumberEditor';

package/lib/locals/en.js

@@ -14,6 +14,7 @@ var en = {
   Please_select: 'Please select',
   Clear: 'Clear',
   Are_you_sure_you_want_to_delete_this_file: 'Are you sure you want to delete this file?',
+  Are_you_sure_you_want_to_delete_this_image: 'Are you sure you want to delete this image?',
   Cancel: 'Cancel',
   Delete: 'Delete'
 };

package/lib/locals/zh-CN.js

@@ -14,6 +14,7 @@ var zh_CN = {
   Please_select: '请选择',
   Clear: '清空',
   Are_you_sure_you_want_to_delete_this_file: '你确定要删除此文件吗？',
+  Are_you_sure_you_want_to_delete_this_image: '你确定要删除此图片吗？',
   Cancel: '取消',
   Delete: '删除'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.3.2-alpha4",
+  "version": "0.3.2-alpha6",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",