dtable-ui-component 0.1.75-beta2 → 0.1.75-beta3

package/lib/GeolocationFormatter/index.js

@@ -1,46 +1,59 @@
-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 cn from 'astro-classname';
-import { getGeolocationDisplayString } from '../utils/value-format-utils';
-import './index.css';
+"use strict";
 
-var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(GeolocationFormatter, _React$Component);
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-  var _super = _createSuper(GeolocationFormatter);
+exports.__esModule = true;
+exports.default = void 0;
 
-  function GeolocationFormatter() {
-    _classCallCheck(this, GeolocationFormatter);
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-    return _super.apply(this, arguments);
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _valueFormatUtils = require("../utils/value-format-utils");
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  data: _propTypes.default.object,
+  containerClassName: _propTypes.default.string
+};
+
+var GeolocationFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(GeolocationFormatter, _React$Component);
+
+  function GeolocationFormatter() {
+    return _React$Component.apply(this, arguments) || this;
   }
 
-  _createClass(GeolocationFormatter, [{
-    key: "render",
-    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);
-
-      if (typeof value !== 'object') {
-        return null;
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, getGeolocationDisplayString(value, data));
+  var _proto = GeolocationFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        value = _this$props.value,
+        data = _this$props.data,
+        containerClassName = _this$props.containerClassName;
+    var className = (0, _astroClassname.default)('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
+
+    if (typeof value !== 'object') {
+      return null;
     }
-  }]);
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, (0, _valueFormatUtils.getGeolocationDisplayString)(value, data));
+  };
 
   return GeolocationFormatter;
-}(React.Component);
+}(_react.default.Component);
 
-GeolocationFormatter.defaultProps = {
+(0, _defineProperty2.default)(GeolocationFormatter, "defaultProps", {
   value: {
     province: '',
     city: '',
@@ -49,5 +62,7 @@ GeolocationFormatter.defaultProps = {
   },
   data: {},
   containerClassName: ''
-};
-export default GeolocationFormatter;
+});
+GeolocationFormatter.propTypes = propTypes;
+var _default = GeolocationFormatter;
+exports.default = _default;

package/lib/ImageFormatter/images-lazy-load.js

@@ -1,50 +1,61 @@
-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 Loading from '../Loading';
-import { getImageThumbnailUrl } from '../utils/utils';
+"use strict";
 
-var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImagesLazyLoad, _React$Component);
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-  var _super = _createSuper(ImagesLazyLoad);
+exports.__esModule = true;
+exports.default = void 0;
 
-  function ImagesLazyLoad(props) {
-    var _this;
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
 
-    _classCallCheck(this, ImagesLazyLoad);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-    _this = _super.call(this, props);
+var _Loading = _interopRequireDefault(require("../Loading"));
 
-    _this.componentDidMount = function () {
+var _utils = require("../utils/utils");
+
+var propTypes = {
+  images: _propTypes.default.array.isRequired,
+  server: _propTypes.default.string,
+  onImageClick: _propTypes.default.func
+};
+
+var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ImagesLazyLoad, _React$Component);
+
+  function ImagesLazyLoad(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
       var images = _this.state.images;
 
       _this.lazyLoadImages(images);
-    };
-
-    _this.componentWillReceiveProps = function (nextProps) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillReceiveProps", function (nextProps) {
       if (nextProps.images.toString() !== _this.props.images.toString()) {
         _this.lazyLoadImages(nextProps.images);
       }
-    };
-
-    _this.componentWillUnmount = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
       // prevent async operation
       _this.setState = function (state, callback) {
         return;
       };
-    };
-
-    _this.lazyLoadImages = function (images) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lazyLoadImages", function (images) {
       if (!Array.isArray(images) || images.length === 0) {
         return;
       }
 
       var server = _this.props.server.server;
       images.forEach(function (item) {
-        var url = getImageThumbnailUrl(item, server);
+        var url = (0, _utils.getImageThumbnailUrl)(item, server);
 
         _this.lazyLoadImage(url, function (image) {
           var _this$state = _this.state,
@@ -63,9 +74,8 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
           });
         });
       });
-    };
-
-    _this.lazyLoadImage = function (url, resolve, reject) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lazyLoadImage", function (url, resolve, reject) {
       if (!url) {
         reject('img path is require');
         return;
@@ -82,18 +92,15 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
       };
 
       image.src = url;
-    };
-
-    _this.onMouseDown = function (event) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function (event) {
       event.stopPropagation();
-    };
-
-    _this.onImageClick = function (event, index) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageClick", function (event, index) {
       event.stopPropagation();
 
       _this.props.onImageClick(index);
-    };
-
+    });
     _this.state = {
       images: props.images,
       loadedImages: [],
@@ -102,49 +109,50 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(ImagesLazyLoad, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  var _proto = ImagesLazyLoad.prototype;
 
-      var _this$state2 = this.state,
-          images = _this$state2.images,
-          loadedImages = _this$state2.loadedImages,
-          loadedCount = _this$state2.loadedCount;
+  _proto.render = function render() {
+    var _this2 = this;
 
-      if (!Array.isArray(images) || images.length === 0) {
-        return '';
-      }
+    var _this$state2 = this.state,
+        images = _this$state2.images,
+        loadedImages = _this$state2.loadedImages,
+        loadedCount = _this$state2.loadedCount;
 
-      if (images.length > loadedCount) {
-        var style = {
-          marginLeft: '4px'
-        };
-        return /*#__PURE__*/React.createElement("div", {
-          style: style
-        }, /*#__PURE__*/React.createElement(Loading, null));
-      }
+    if (!Array.isArray(images) || images.length === 0) {
+      return '';
+    }
 
-      if (images.length === loadedCount) {
-        return loadedImages.map(function (image, index) {
-          return /*#__PURE__*/React.createElement("img", {
-            key: index,
-            className: "image-item",
-            src: image.src,
-            onMouseDown: _this2.onMouseDown,
-            onClick: function onClick(event) {
-              return _this2.onImageClick(event, index);
-            },
-            alt: ""
-          });
-        });
-      }
+    if (images.length > loadedCount) {
+      var style = {
+        marginLeft: '4px'
+      };
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
+    }
 
-      return '';
+    if (images.length === loadedCount) {
+      return loadedImages.map(function (image, index) {
+        return /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          className: "image-item",
+          src: image.src,
+          onMouseDown: _this2.onMouseDown,
+          onClick: function onClick(event) {
+            return _this2.onImageClick(event, index);
+          },
+          alt: ""
+        });
+      });
     }
-  }]);
+
+    return '';
+  };
 
   return ImagesLazyLoad;
-}(React.Component);
+}(_react.default.Component);
 
-export default ImagesLazyLoad;
+ImagesLazyLoad.propTypes = propTypes;
+var _default = ImagesLazyLoad;
+exports.default = _default;

package/lib/ImageFormatter/index.js

@@ -1,45 +1,58 @@
-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 cn from 'astro-classname';
-import ImagesLazyLoad from './images-lazy-load';
-import { getImageThumbnailUrl } from '../utils/utils';
-import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
-import './index.css';
+"use strict";
 
-var ImageFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageFormatter, _React$Component);
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-  var _super = _createSuper(ImageFormatter);
+exports.__esModule = true;
+exports.default = void 0;
 
-  function ImageFormatter(props) {
-    var _this;
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _imagesLazyLoad = _interopRequireDefault(require("./images-lazy-load"));
 
-    _classCallCheck(this, ImageFormatter);
+var _utils = require("../utils/utils");
 
-    _this = _super.call(this, props);
+var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
+
+require("./index.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ImageFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ImageFormatter, _React$Component);
+
+  function ImageFormatter(props) {
+    var _this;
 
-    _this.onImageClick = function (index) {
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageClick", function (index) {
       if (!_this.props.isSupportPreview) return;
 
       _this.setState({
         isPreviewImage: true,
         previewImageIndex: index
       });
-    };
-
-    _this.closeImagePopup = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeImagePopup", function () {
       if (!_this.props.isSupportPreview) return;
 
       _this.setState({
         isPreviewImage: false,
         previewImageIndex: -1
       });
-    };
-
-    _this.movePrev = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "movePrev", function () {
       var images = _this.props.value;
 
       _this.setState(function (prevState) {
@@ -47,9 +60,8 @@ var ImageFormatter = /*#__PURE__*/function (_React$Component) {
           previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
         };
       });
-    };
-
-    _this.moveNext = function () {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "moveNext", function () {
       var images = _this.props.value;
 
       _this.setState(function (prevState) {
@@ -57,30 +69,26 @@ var ImageFormatter = /*#__PURE__*/function (_React$Component) {
           previewImageIndex: (prevState.previewImageIndex + 1) % images.length
         };
       });
-    };
-
-    _this.downloadImage = function (imageItemUrl) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downloadImage", function (imageItemUrl) {
       if (!_this.props.downloadImage) return;
 
       _this.props.downloadImage(imageItemUrl);
-    };
-
-    _this.deleteImage = function (index) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "deleteImage", function (index) {
       var readOnly = _this.props.readOnly;
       if (readOnly) return;
       if (!_this.props.deleteImage) return;
 
       _this.props.deleteImage(index);
-    };
-
-    _this.onRotateImage = function (index, degree) {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRotateImage", function (index, degree) {
       var readOnly = _this.props.readOnly;
       if (readOnly) return;
       if (!_this.props.rotateImage) return;
 
       _this.props.rotateImage(index, degree);
-    };
-
+    });
     _this.state = {
       isPreviewImage: false,
       previewImageIndex: -1
@@ -88,67 +96,78 @@ var ImageFormatter = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(ImageFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          isSample = _this$props.isSample,
-          value = _this$props.value,
-          server = _this$props.server,
-          containerClassName = _this$props.containerClassName,
-          readOnly = _this$props.readOnly;
-      var className = cn('dtable-ui cell-formatter-container image-formatter', containerClassName);
-      var _this$state = this.state,
-          isPreviewImage = _this$state.isPreviewImage,
-          previewImageIndex = _this$state.previewImageIndex;
-
-      if (!Array.isArray(value) || value.length === 0) {
-        return null;
-      }
-
-      if (isSample) {
-        var item = value[0];
-        var url = getImageThumbnailUrl(item, server);
-        return /*#__PURE__*/React.createElement("div", {
-          className: className
-        }, /*#__PURE__*/React.createElement("img", {
-          className: "image-item",
-          src: url,
-          alt: ""
-        }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
-          className: "image-item-count"
-        }, "+".concat(value.length)));
-      }
-
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  var _proto = ImageFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        isSample = _this$props.isSample,
+        value = _this$props.value,
+        server = _this$props.server,
+        containerClassName = _this$props.containerClassName,
+        readOnly = _this$props.readOnly;
+    var className = (0, _astroClassname.default)('dtable-ui cell-formatter-container image-formatter', containerClassName);
+    var _this$state = this.state,
+        isPreviewImage = _this$state.isPreviewImage,
+        previewImageIndex = _this$state.previewImageIndex;
+
+    if (!Array.isArray(value) || value.length === 0) {
+      return null;
+    }
+
+    if (isSample) {
+      var item = value[0];
+      var url = (0, _utils.getImageThumbnailUrl)(item, server);
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: className
-      }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
-        images: value,
-        server: server,
-        onImageClick: this.onImageClick
-      })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
-        imageItems: value,
-        imageIndex: previewImageIndex,
-        closeImagePopup: this.closeImagePopup,
-        moveToPrevImage: this.movePrev,
-        moveToNextImage: this.moveNext,
-        deleteImage: readOnly ? null : this.deleteImage,
-        downloadImage: this.downloadImage,
-        onRotateImage: readOnly ? null : this.onRotateImage,
-        readOnly: readOnly
-      }));
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        className: "image-item",
+        src: url,
+        alt: ""
+      }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
+        className: "image-item-count"
+      }, "+" + value.length));
     }
-  }]);
+
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, /*#__PURE__*/_react.default.createElement(_imagesLazyLoad.default, {
+      images: value,
+      server: server,
+      onImageClick: this.onImageClick
+    })), isPreviewImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
+      imageItems: value,
+      imageIndex: previewImageIndex,
+      closeImagePopup: this.closeImagePopup,
+      moveToPrevImage: this.movePrev,
+      moveToNextImage: this.moveNext,
+      deleteImage: readOnly ? null : this.deleteImage,
+      downloadImage: this.downloadImage,
+      onRotateImage: readOnly ? null : this.onRotateImage,
+      readOnly: readOnly
+    }));
+  };
 
   return ImageFormatter;
-}(React.Component);
+}(_react.default.Component);
 
-ImageFormatter.defaultProps = {
+(0, _defineProperty2.default)(ImageFormatter, "defaultProps", {
   isSample: false,
   isSupportPreview: false,
   readOnly: true,
   value: [],
   server: '',
   containerClassName: ''
+});
+ImageFormatter.propTypes = {
+  isSample: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  isSupportPreview: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  server: _propTypes.default.string,
+  containerClassName: _propTypes.default.string,
+  deleteImage: _propTypes.default.func,
+  downloadImage: _propTypes.default.func,
+  rotateImage: _propTypes.default.func
 };
-export default ImageFormatter;
+var _default = ImageFormatter;
+exports.default = _default;