@mjhls/mjh-framework 1.0.990 → 1.0.992-next-update

package/dist/cjs/{index-eadd5035.js → index-4d9f51e0.js}

@@ -2,13 +2,11 @@
 
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var React = require('react');
-var ReactDOM = require('react-dom');
 var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var event = _commonjsHelpers.createCommonjsModule(function (module, exports) {
@@ -187,15 +185,11 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 
 
-var _react2 = _interopRequireDefault(React__default['default']);
+var _react2 = _interopRequireDefault(React__default["default"]);
 
 
 
-var _reactDom2 = _interopRequireDefault(ReactDOM__default['default']);
-
-
-
-var _propTypes2 = _interopRequireDefault(PropTypes__default['default']);
+var _propTypes2 = _interopRequireDefault(PropTypes__default["default"]);
 
 
 
@@ -222,7 +216,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
 
 
-var defaultBoundingClientRect = { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 };
+var defaultBoundingClientRect = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
 var LISTEN_FLAG = 'data-lazyload-listened';
 var listeners = [];
 var pending = [];
@@ -248,8 +249,7 @@ var passiveEvent = passiveEventSupported ? { capture: false, passive: true } : f
  * @return {bool}
  */
 var checkOverflowVisible = function checkOverflowVisible(component, parent) {
-  var node = _reactDom2.default.findDOMNode(component);
-  // const node = component.ref;
+  var node = component.ref;
 
   var parentTop = void 0;
   var parentLeft = void 0;
@@ -313,8 +313,7 @@ var checkOverflowVisible = function checkOverflowVisible(component, parent) {
  * @return {bool}
  */
 var checkNormalVisible = function checkNormalVisible(component) {
-  var node = _reactDom2.default.findDOMNode(component);
-  // const node = component.ref;
+  var node = component.ref;
 
   // If this element is hidden by css rules somehow, it's definitely invisible
   if (!(node.offsetWidth || node.offsetHeight || node.getClientRects().length)) return false;
@@ -346,8 +345,7 @@ var checkNormalVisible = function checkNormalVisible(component) {
  * @param  {React} component   React component that respond to scroll and resize
  */
 var checkVisible = function checkVisible(component) {
-  var node = _reactDom2.default.findDOMNode(component);
-  // const node = component.ref;
+  var node = component.ref;
   if (!(node instanceof HTMLElement)) {
     return;
   }
@@ -423,16 +421,10 @@ var LazyLoad = function (_Component) {
     var _this = _possibleConstructorReturn(this, (LazyLoad.__proto__ || Object.getPrototypeOf(LazyLoad)).call(this, props));
 
     _this.visible = false;
-    // this.setRef = this.setRef.bind(this);
+    _this.setRef = _this.setRef.bind(_this);
     return _this;
   }
 
-  // setRef(element) {
-  //   if (element) {
-  //     this.ref = element;
-  //   }
-  // }
-
   _createClass(LazyLoad, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
@@ -467,8 +459,7 @@ var LazyLoad = function (_Component) {
       }
 
       if (this.props.overflow) {
-        var parent = (0, _scrollParent2.default)(_reactDom2.default.findDOMNode(this));
-        // const parent = scrollParent(this.ref);
+        var parent = (0, _scrollParent2.default)(this.ref);
         if (parent && typeof parent.getAttribute === 'function') {
           var listenerCount = 1 + +parent.getAttribute(LISTEN_FLAG);
           if (listenerCount === 1) {
@@ -503,8 +494,7 @@ var LazyLoad = function (_Component) {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (this.props.overflow) {
-        var parent = (0, _scrollParent2.default)(_reactDom2.default.findDOMNode(this));
-        // const parent = scrollParent(this.ref);
+        var parent = (0, _scrollParent2.default)(this.ref);
         if (parent && typeof parent.getAttribute === 'function') {
           var listenerCount = +parent.getAttribute(LISTEN_FLAG) - 1;
           if (listenerCount === 0) {
@@ -526,21 +516,42 @@ var LazyLoad = function (_Component) {
         (0, event.off)(window, 'scroll', finalLazyLoadHandler, passiveEvent);
       }
     }
+  }, {
+    key: 'setRef',
+    value: function setRef(element) {
+      if (element) {
+        this.ref = element;
+      }
+    }
   }, {
     key: 'render',
     value: function render() {
-      return this.visible ? this.props.children : this.props.placeholder ? this.props.placeholder : _react2.default.createElement('div', { style: { height: this.props.height }, className: 'lazyload-placeholder' });
-      // <span ref={this.setRef} className="lazyload-custom-placeholder">
-      //   {this.props.placeholder}
-      // </span> :
-      // <div ref={this.setRef} style={{ height: this.props.height }} className="lazyload-placeholder" />;
+      var _props2 = this.props,
+          height = _props2.height,
+          children = _props2.children,
+          placeholder = _props2.placeholder,
+          className = _props2.className,
+          classNamePrefix = _props2.classNamePrefix,
+          style = _props2.style;
+
+
+      return _react2.default.createElement(
+        'div',
+        { className: classNamePrefix + '-wrapper ' + className, ref: this.setRef, style: style },
+        this.visible ? children : placeholder ? placeholder : _react2.default.createElement('div', {
+          style: { height: height },
+          className: classNamePrefix + '-placeholder'
+        })
+      );
     }
   }]);
 
   return LazyLoad;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 
 LazyLoad.propTypes = {
+  className: _propTypes2.default.string,
+  classNamePrefix: _propTypes2.default.string,
   once: _propTypes2.default.bool,
   height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
   offset: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)]),
@@ -552,10 +563,13 @@ LazyLoad.propTypes = {
   debounce: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.bool]),
   placeholder: _propTypes2.default.node,
   scrollContainer: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-  unmountIfInvisible: _propTypes2.default.bool
+  unmountIfInvisible: _propTypes2.default.bool,
+  style: _propTypes2.default.object
 };
 
 LazyLoad.defaultProps = {
+  className: '',
+  classNamePrefix: 'lazyload',
   once: false,
   offset: 0,
   overflow: false,
@@ -595,7 +609,7 @@ var decorator = function decorator() {
       }]);
 
       return LazyLoadDecorated;
-    }(React__default['default'].Component);
+    }(React__default["default"].Component);
   };
 };