Merge pull request twobin#292 from ameerthehacker/ref-find-dom-node

ref: replace findDomNode api with component ref
simmbiote · Mar 29, 2020 · 635ea75 · 635ea75
2 parents 573448e + 2d74313
commit 635ea75
Show file tree

Hide file tree

Showing 5 changed files with 6,578 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -233,6 +233,7 @@ Using `LazyLoad` component will help ease this situation by only updating compon
 
 1. [lancehub](https://github.com/lancehub)
 2. [doug-wade](https://github.com/doug-wade)
+3. [ameerthehacker](https://github.com/ameerthehacker)
 
 
 ## License

diff --git a/lib/index.js b/lib/index.js
@@ -3,18 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.forceCheck = exports.lazyload = undefined;
+exports.forceVisible = exports.forceCheck = exports.lazyload = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -70,7 +66,7 @@ var passiveEvent = passiveEventSupported ? { capture: false, passive: true } : f
  * @return {bool}
  */
 var checkOverflowVisible = function checkOverflowVisible(component, parent) {
-  var node = _reactDom2.default.findDOMNode(component);
+  var node = component.ref;
 
   var parentTop = void 0;
   var parentLeft = void 0;
@@ -134,7 +130,7 @@ var checkOverflowVisible = function checkOverflowVisible(component, parent) {
  * @return {bool}
  */
 var checkNormalVisible = function checkNormalVisible(component) {
-  var node = _reactDom2.default.findDOMNode(component);
+  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;
@@ -166,7 +162,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);
+  var node = component.ref;
   if (!(node instanceof HTMLElement)) {
     return;
   }
@@ -212,6 +208,19 @@ var lazyLoadHandler = function lazyLoadHandler() {
   purgePending();
 };
 
+/**
+ * Forces the component to display regardless of whether the element is visible in the viewport.
+ */
+var forceVisible = function forceVisible() {
+  for (var i = 0; i < listeners.length; ++i) {
+    var listener = listeners[i];
+    listener.visible = true;
+    listener.forceUpdate();
+  }
+  // Remove `once` component in listeners
+  purgePending();
+};
+
 // Depending on component's props
 var delayType = void 0;
 var finalLazyLoadHandler = null;
@@ -229,10 +238,18 @@ 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);
     return _this;
   }
 
   _createClass(LazyLoad, [{
+    key: 'setRef',
+    value: function setRef(element) {
+      if (element) {
+        this.ref = element;
+      }
+    }
+  }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
       // It's unlikely to change delay type on the fly, this is mainly
@@ -266,7 +283,7 @@ var LazyLoad = function (_Component) {
       }
 
       if (this.props.overflow) {
-        var parent = (0, _scrollParent2.default)(_reactDom2.default.findDOMNode(this));
+        var parent = (0, _scrollParent2.default)(this.ref);
         if (parent && typeof parent.getAttribute === 'function') {
           var listenerCount = 1 + +parent.getAttribute(LISTEN_FLAG);
           if (listenerCount === 1) {
@@ -301,7 +318,7 @@ var LazyLoad = function (_Component) {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (this.props.overflow) {
-        var parent = (0, _scrollParent2.default)(_reactDom2.default.findDOMNode(this));
+        var parent = (0, _scrollParent2.default)(this.ref);
         if (parent && typeof parent.getAttribute === 'function') {
           var listenerCount = +parent.getAttribute(LISTEN_FLAG) - 1;
           if (listenerCount === 0) {
@@ -326,7 +343,11 @@ var LazyLoad = function (_Component) {
   }, {
     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' });
+      return this.visible ? this.props.children : this.props.placeholder ? _react2.default.createElement(
+        'span',
+        { ref: this.setRef, className: 'lazyload-custom-placeholder' },
+        this.props.placeholder
+      ) : _react2.default.createElement('div', { ref: this.setRef, style: { height: this.props.height }, className: 'lazyload-placeholder' });
     }
   }]);
 
@@ -394,4 +415,5 @@ var decorator = function decorator() {
 
 exports.lazyload = decorator;
 exports.default = LazyLoad;
-exports.forceCheck = lazyLoadHandler;
+exports.forceCheck = lazyLoadHandler;
+exports.forceVisible = forceVisible;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-lazyload",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "description": "Lazyload your components, images or anything where performance matters.",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/index.jsx b/src/index.jsx
@@ -2,7 +2,6 @@
  * react-lazyload
  */
 import React, { Component } from 'react';
-import ReactDom from 'react-dom';
 import PropTypes from 'prop-types';
 import { on, off } from './utils/event';
 import scrollParent from './utils/scrollParent';
@@ -37,7 +36,7 @@ const passiveEvent = passiveEventSupported ? { capture: false, passive: true } :
  * @return {bool}
  */
 const checkOverflowVisible = function checkOverflowVisible(component, parent) {
-  const node = ReactDom.findDOMNode(component);
+  const node = component.ref;
 
   let parentTop;
   let parentLeft;
@@ -91,7 +90,7 @@ const checkOverflowVisible = function checkOverflowVisible(component, parent) {
  * @return {bool}
  */
 const checkNormalVisible = function checkNormalVisible(component) {
-  const node = ReactDom.findDOMNode(component);
+  const 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;
@@ -123,7 +122,7 @@ const checkNormalVisible = function checkNormalVisible(component) {
  * @param  {React} component   React component that respond to scroll and resize
  */
 const checkVisible = function checkVisible(component) {
-  const node = ReactDom.findDOMNode(component);
+  const node = component.ref;
   if (!(node instanceof HTMLElement)) {
     return;
   }
@@ -199,6 +198,13 @@ class LazyLoad extends Component {
     super(props);
 
     this.visible = false;
+    this.setRef = this.setRef.bind(this);
+  }
+
+  setRef(element) {
+    if (element) {
+      this.ref = element;
+    }
   }
 
   componentDidMount() {
@@ -239,7 +245,7 @@ class LazyLoad extends Component {
     }
 
     if (this.props.overflow) {
-      const parent = scrollParent(ReactDom.findDOMNode(this));
+      const parent = scrollParent(this.ref);
       if (parent && typeof parent.getAttribute === 'function') {
         const listenerCount = 1 + (+parent.getAttribute(LISTEN_FLAG));
         if (listenerCount === 1) {
@@ -269,7 +275,7 @@ class LazyLoad extends Component {
 
   componentWillUnmount() {
     if (this.props.overflow) {
-      const parent = scrollParent(ReactDom.findDOMNode(this));
+      const parent = scrollParent(this.ref);
       if (parent && typeof parent.getAttribute === 'function') {
         const listenerCount = (+parent.getAttribute(LISTEN_FLAG)) - 1;
         if (listenerCount === 0) {
@@ -296,8 +302,10 @@ class LazyLoad extends Component {
     return this.visible ?
            this.props.children :
              this.props.placeholder ?
-                this.props.placeholder :
-                <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" />;
   }
 }