dtable-ui-component 4.3.6 → 4.3.8

package/lib/RowExpandFormulaFormatter/index.js

@@ -1,8 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { CellType, FORMULA_RESULT_TYPE, getFormulaDisplayString } from 'dtable-utils';
 import BaseFormatterConfig from '../formatterConfig/base-formatter-config';
@@ -10,20 +5,17 @@ import TextFormatter from '../TextFormatter';
 import { isArrayFormatColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from '../FormulaFormatter/utils';
 import cellValueValidator from '../FormulaFormatter/cell-value-validator';
 import '../FormulaFormatter/index.css';
-var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(RowExpandFormulaFormatter, _React$Component);
-  var _super = _createSuper(RowExpandFormulaFormatter);
-  function RowExpandFormulaFormatter() {
-    var _this;
-    _classCallCheck(this, RowExpandFormulaFormatter);
-    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.renderBorder = function (dom) {
-      var column = _this.props.column;
-      var result_type = column.data.result_type;
-      var style = {
+export default class RowExpandFormulaFormatter extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.renderBorder = dom => {
+      const {
+        column
+      } = this.props;
+      const {
+        result_type
+      } = column.data;
+      let style = {
         minHeight: '38px'
       };
       if (result_type === FORMULA_RESULT_TYPE.DATE || result_type === FORMULA_RESULT_TYPE.NUMBER) {
@@ -36,42 +28,46 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
         style: style
       }, dom);
     };
-    _this.renderOtherColumnFormatter = function () {
-      var _this$props = _this.props,
-        value = _this$props.value,
-        column = _this$props.column,
-        collaborators = _this$props.collaborators;
-      var _column$data = column.data,
-        array_type = _column$data.array_type,
-        array_data = _column$data.array_data;
+    this.renderOtherColumnFormatter = () => {
+      const {
+        value,
+        column,
+        collaborators
+      } = this.props;
+      const {
+        array_type,
+        array_data
+      } = column.data;
       if (!array_type || array_type === CellType.LINK) {
         return null;
       }
-      var Formatter = BaseFormatterConfig[array_type];
-      var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
+      const Formatter = BaseFormatterConfig[array_type];
+      let formatterProps = this.getFormatterProps(array_type, array_data, collaborators);
       if (isArrayFormatColumn(array_type)) {
         formatterProps.value = value;
-        return _this.renderBorder(_this.createColumnFormatter(Formatter, formatterProps));
+        return this.renderBorder(this.createColumnFormatter(Formatter, formatterProps));
       }
-      var cellValue = value;
+      let cellValue = value;
       if (!Array.isArray(value)) {
         cellValue = cellValueValidator(value, array_type) ? [value] : [];
       }
-      return _this.renderBorder( /*#__PURE__*/React.createElement("div", {
+      return this.renderBorder( /*#__PURE__*/React.createElement("div", {
         className: "dtable-ui formula-formatter multiple"
-      }, cellValue.map(function (v, index) {
+      }, cellValue.map((v, index) => {
         formatterProps.value = v;
         return /*#__PURE__*/React.createElement("div", {
           className: "formula-formatter-content-item ".concat(isSimpleCellFormatter(array_type) ? 'simple-cell-formatter' : ''),
           key: "formula-formatter-content-item-".concat(index)
-        }, _this.createColumnFormatter(Formatter, formatterProps));
+        }, this.createColumnFormatter(Formatter, formatterProps));
       })));
     };
-    _this.getFormatterProps = function (array_type, array_data, collaborators) {
+    this.getFormatterProps = (array_type, array_data, collaborators) => {
       switch (array_type) {
         case CellType.DURATION:
           {
-            var duration_format = array_data.duration_format;
+            const {
+              duration_format
+            } = array_data;
             return {
               format: duration_format
             };
@@ -86,65 +82,63 @@ var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
           }
         default:
           {
-            return _objectSpread(_objectSpread({}, array_data), {}, {
-              collaborators: collaborators
-            });
+            return {
+              ...array_data,
+              collaborators
+            };
           }
       }
     };
-    return _this;
   }
-  _createClass(RowExpandFormulaFormatter, [{
-    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);
-      } else {
-        return /*#__PURE__*/React.createElement(TextFormatter, formatterProps);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        containerClassName = _this$props2.containerClassName,
-        column = _this$props2.column,
-        collaborators = _this$props2.collaborators,
-        value = _this$props2.value;
-      var data = column.data;
-      var array_type = data.array_type,
-        result_type = data.result_type;
-      if (!value) return null;
-      if (Array.isArray(value)) {
-        value = getFormulaArrayValue(value);
-        if (array_type === CellType.LONG_TEXT) {
-          value = value.map(function (item) {
-            return convertValueToDtableLongTextValue(item);
-          });
-        }
-      }
-      if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
-        return this.renderOtherColumnFormatter();
-      }
-      if (typeof value === 'object') {
-        return null;
-      }
-      var formattedValue = getFormulaDisplayString(value, data, {
-        collaborators: collaborators
+  createColumnFormatter(Formatter, formatterProps) {
+    if (React.isValidElement(Formatter)) {
+      return React.cloneElement(Formatter, {
+        ...formatterProps
       });
-      var className = "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName);
-      if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
-        className = className + ' text-right';
+    } else if (isFunction(Formatter)) {
+      return /*#__PURE__*/React.createElement(Formatter, formatterProps);
+    } else {
+      return /*#__PURE__*/React.createElement(TextFormatter, formatterProps);
+    }
+  }
+  render() {
+    let {
+      containerClassName,
+      column,
+      collaborators,
+      value
+    } = this.props;
+    const {
+      data
+    } = column;
+    const {
+      array_type,
+      result_type
+    } = data;
+    if (!value) return null;
+    if (Array.isArray(value)) {
+      value = getFormulaArrayValue(value);
+      if (array_type === CellType.LONG_TEXT) {
+        value = value.map(item => convertValueToDtableLongTextValue(item));
       }
-      return this.renderBorder( /*#__PURE__*/React.createElement("div", {
-        className: className,
-        title: formattedValue,
-        "aria-label": formattedValue
-      }, formattedValue));
     }
-  }]);
-  return RowExpandFormulaFormatter;
-}(React.Component);
-export { RowExpandFormulaFormatter as default };
+    if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+      return this.renderOtherColumnFormatter();
+    }
+    if (typeof value === 'object') {
+      return null;
+    }
+    const formattedValue = getFormulaDisplayString(value, data, {
+      collaborators
+    });
+    let className = "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName);
+    if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
+      className = className + ' text-right';
+    }
+    return this.renderBorder( /*#__PURE__*/React.createElement("div", {
+      className: className,
+      title: formattedValue,
+      "aria-label": formattedValue
+    }, formattedValue));
+  }
+}

package/lib/RowExpandImageFormatter/index.js

@@ -1,108 +1,91 @@
-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, { Fragment } from 'react';
 import classnames from 'classnames';
 import RowExpandImageImageFormatter from './row-expand-image-item-formatter';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
 import './index.css';
-var RowExpandImageFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(RowExpandImageFormatter, _React$Component);
-  var _super = _createSuper(RowExpandImageFormatter);
-  function RowExpandImageFormatter(props) {
-    var _this;
-    _classCallCheck(this, RowExpandImageFormatter);
-    _this = _super.call(this, props);
-    _this.onImageClick = function (index) {
-      _this.setState({
+export default class RowExpandImageFormatter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onImageClick = index => {
+      this.setState({
         isPreviewImage: true,
         previewImageIndex: index
       });
     };
-    _this.closeImagePopup = function () {
-      if (_this.props.onCloseCallback) {
-        _this.props.onCloseCallback();
+    this.closeImagePopup = () => {
+      if (this.props.onCloseCallback) {
+        this.props.onCloseCallback();
       }
-      _this.setState({
+      this.setState({
         isPreviewImage: false,
         previewImageIndex: -1
       });
     };
-    _this.movePrev = function () {
-      var images = _this.props.value;
-      _this.setState(function (prevState) {
-        return {
-          previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
-        };
-      });
+    this.movePrev = () => {
+      let images = this.props.value;
+      this.setState(prevState => ({
+        previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
+      }));
     };
-    _this.moveNext = function () {
-      var images = _this.props.value;
-      _this.setState(function (prevState) {
-        return {
-          previewImageIndex: (prevState.previewImageIndex + 1) % images.length
-        };
-      });
+    this.moveNext = () => {
+      let images = this.props.value;
+      this.setState(prevState => ({
+        previewImageIndex: (prevState.previewImageIndex + 1) % images.length
+      }));
     };
-    _this.state = {
+    this.state = {
       isPreviewImage: false,
       previewImageIndex: -1
     };
-    return _this;
   }
-  _createClass(RowExpandImageFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        value = _this$props.value,
-        server = _this$props.server,
-        containerClassName = _this$props.containerClassName,
-        readOnly = _this$props.readOnly,
-        column = _this$props.column,
-        downloadImage = _this$props.downloadImage;
-      var _this$state = this.state,
-        isPreviewImage = _this$state.isPreviewImage,
-        previewImageIndex = _this$state.previewImageIndex;
-      if (!Array.isArray(value) || value.length === 0) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: classnames('dtable-ui cell-formatter-container row-expand-image-formatter', containerClassName)
-      }, value.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(RowExpandImageImageFormatter, {
-          url: item,
-          key: index,
-          index: index,
-          column: column,
-          downloadFile: downloadImage,
-          deleteFile: _this2.props.deleteFile,
-          readOnly: readOnly,
-          onImageClick: _this2.onImageClick
-        });
-      })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
-        imageItems: value,
-        imageIndex: previewImageIndex,
-        closeImagePopup: this.closeImagePopup,
-        moveToPrevImage: this.movePrev,
-        moveToNextImage: this.moveNext,
-        deleteImage: this.props.deleteFile,
-        downloadImage: downloadImage,
-        onRotateImage: this.props.rotateImage,
-        readOnly: readOnly,
-        server: server,
-        moveToPrevRowImage: this.props.moveToPrevRowImage,
-        moveToNextRowImage: this.props.moveToNextRowImage
-      }));
+  render() {
+    const {
+      value,
+      server,
+      containerClassName,
+      readOnly,
+      column,
+      downloadImage
+    } = this.props;
+    const {
+      isPreviewImage,
+      previewImageIndex
+    } = this.state;
+    if (!Array.isArray(value) || value.length === 0) {
+      return null;
     }
-  }]);
-  return RowExpandImageFormatter;
-}(React.Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames('dtable-ui cell-formatter-container row-expand-image-formatter', containerClassName)
+    }, value.map((item, index) => {
+      return /*#__PURE__*/React.createElement(RowExpandImageImageFormatter, {
+        url: item,
+        key: index,
+        index: index,
+        column: column,
+        downloadFile: downloadImage,
+        deleteFile: this.props.deleteFile,
+        readOnly: readOnly,
+        onImageClick: this.onImageClick
+      });
+    })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+      imageItems: value,
+      imageIndex: previewImageIndex,
+      closeImagePopup: this.closeImagePopup,
+      moveToPrevImage: this.movePrev,
+      moveToNextImage: this.moveNext,
+      deleteImage: this.props.deleteFile,
+      downloadImage: downloadImage,
+      onRotateImage: this.props.rotateImage,
+      readOnly: readOnly,
+      server: server,
+      moveToPrevRowImage: this.props.moveToPrevRowImage,
+      moveToNextRowImage: this.props.moveToNextRowImage
+    }));
+  }
+}
 RowExpandImageFormatter.defaultProps = {
   readOnly: true,
   value: [],
   server: '',
   containerClassName: ''
-};
-export { RowExpandImageFormatter as default };
+};

package/lib/RowExpandImageFormatter/row-expand-image-item-formatter.js

@@ -1,112 +1,99 @@
-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, { Component } from 'react';
 import { Tooltip } from 'reactstrap';
 import MediaQuery from 'react-responsive';
 import { getLocale } from '../lang';
 import DeleteTip from '../common/delete-tip';
-var RowExpandImageItemFormatter = /*#__PURE__*/function (_Component) {
-  _inherits(RowExpandImageItemFormatter, _Component);
-  var _super = _createSuper(RowExpandImageItemFormatter);
-  function RowExpandImageItemFormatter(props) {
-    var _this;
-    _classCallCheck(this, RowExpandImageItemFormatter);
-    _this = _super.call(this, props);
-    _this.toggleTooltip = function () {
-      _this.setState({
-        isTooltipOpen: !_this.state.isTooltipOpen
+export default class RowExpandImageItemFormatter extends Component {
+  constructor(props) {
+    super(props);
+    this.toggleTooltip = () => {
+      this.setState({
+        isTooltipOpen: !this.state.isTooltipOpen
       });
     };
-    _this.closeDeleteTip = function () {
-      _this.setState({
+    this.closeDeleteTip = () => {
+      this.setState({
         isDeleteTipOpen: false
       });
     };
-    _this.onClickDelete = function (e) {
+    this.onClickDelete = e => {
       e.preventDefault();
       e.stopPropagation();
-      _this.position = {
+      this.position = {
         top: e.clientY,
         left: e.clientX
       };
-      _this.setState({
+      this.setState({
         isDeleteTipOpen: true
       });
     };
-    _this.onClickDownload = function (e) {
+    this.onClickDownload = e => {
       e.preventDefault();
       e.stopPropagation();
-      _this.props.downloadFile(_this.props.url, e);
+      this.props.downloadFile(this.props.url, e);
     };
-    _this.onDelete = function (e) {
+    this.onDelete = e => {
       e.stopPropagation();
-      _this.closeDeleteTip();
-      _this.props.deleteFile(_this.props.index);
+      this.closeDeleteTip();
+      this.props.deleteFile(this.props.index);
     };
-    _this.onClickImage = function () {
-      _this.props.onImageClick(_this.props.index);
+    this.onClickImage = () => {
+      this.props.onImageClick(this.props.index);
     };
-    _this.state = {
+    this.state = {
       isTooltipOpen: false,
       isDeleteTipOpen: false
     };
-    return _this;
   }
-  _createClass(RowExpandImageItemFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        url = _this$props.url,
-        column = _this$props.column,
-        index = _this$props.index,
-        readOnly = _this$props.readOnly,
-        downloadFile = _this$props.downloadFile,
-        deleteFile = _this$props.deleteFile;
-      var id = 'image-list-preview-item' + column.key + index;
-      var name = decodeURI(url.slice(url.lastIndexOf('/') + 1));
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        key: "image-".concat(index),
-        className: "row-expand-item-image",
-        id: id,
-        onClick: this.onClickImage
-      }, /*#__PURE__*/React.createElement("img", {
-        src: url,
-        id: "item-image-".concat(index),
-        alt: name
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "dtable-image-icons-choice"
-      }, downloadFile && /*#__PURE__*/React.createElement("span", {
-        className: "image-icon",
-        onClick: this.onClickDownload
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-download"
-      })), !readOnly && deleteFile && /*#__PURE__*/React.createElement("span", {
-        className: "image-icon",
-        onClick: this.onClickDelete
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-fork-number"
-      })))), this.state.isDeleteTipOpen && /*#__PURE__*/React.createElement(DeleteTip, {
-        position: this.position,
-        toggle: this.closeDeleteTip,
-        onDelete: this.onDelete,
-        deleteTip: getLocale('Are_you_sure_you_want_to_delete_this_image')
-      }), /*#__PURE__*/React.createElement(MediaQuery, {
-        query: '(min-width: 768px)'
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        placement: "bottom",
-        isOpen: this.state.isTooltipOpen,
-        toggle: this.toggleTooltip,
-        target: id,
-        delay: {
-          show: 0,
-          hide: 0
-        },
-        fade: false
-      }, name)));
-    }
-  }]);
-  return RowExpandImageItemFormatter;
-}(Component);
-export { RowExpandImageItemFormatter as default };
+  render() {
+    const {
+      url,
+      column,
+      index,
+      readOnly,
+      downloadFile,
+      deleteFile
+    } = this.props;
+    const id = 'image-list-preview-item' + column.key + index;
+    const name = decodeURI(url.slice(url.lastIndexOf('/') + 1));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      key: "image-".concat(index),
+      className: "row-expand-item-image",
+      id: id,
+      onClick: this.onClickImage
+    }, /*#__PURE__*/React.createElement("img", {
+      src: url,
+      id: "item-image-".concat(index),
+      alt: name
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "dtable-image-icons-choice"
+    }, downloadFile && /*#__PURE__*/React.createElement("span", {
+      className: "image-icon",
+      onClick: this.onClickDownload
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-download"
+    })), !readOnly && deleteFile && /*#__PURE__*/React.createElement("span", {
+      className: "image-icon",
+      onClick: this.onClickDelete
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number"
+    })))), this.state.isDeleteTipOpen && /*#__PURE__*/React.createElement(DeleteTip, {
+      position: this.position,
+      toggle: this.closeDeleteTip,
+      onDelete: this.onDelete,
+      deleteTip: getLocale('Are_you_sure_you_want_to_delete_this_image')
+    }), /*#__PURE__*/React.createElement(MediaQuery, {
+      query: '(min-width: 768px)'
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "bottom",
+      isOpen: this.state.isTooltipOpen,
+      toggle: this.toggleTooltip,
+      target: id,
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      fade: false
+    }, name)));
+  }
+}

package/lib/RowExpandImageFormatter/utils.js

@@ -1,4 +1,4 @@
-export var getImageThumbnailUrl = function getImageThumbnailUrl(url, server) {
+export const getImageThumbnailUrl = (url, server) => {
   if (server && url.indexOf(server) > -1) {
     return url.replace('/workspace', '/thumbnail/workspace') + '?size=256';
   }