react-lifecycle-appear/lib/index.js

A React HOC, adding lifecycle methods for handling a component enters or exits the viewport.

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = withAppear;
exports.createAppear = createAppear;
exports.Appear = void 0;

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));

var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectSpread"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var appearEventDelegations = _interopRequireWildcard(require("appear-event/lib/event-listener"));

const hookNames = ['didAppearOnce', 'didAppear', 'didDisappear', 'didDisappearOnce'];
/**
 * 为防止 hooks 被其它 HOC 屏蔽，所以通过参数传入
 * @param {object} hooks
 * @param {object} ioOptions
 */

function withAppear(hooks, ioOptions) {
  function deligateEvent(el, eventName, actionName, instance) {
    if (!instance[eventName]) return;
    const deligationName = eventName.replace('Once', '').replace('did', actionName) + 'Listener';
    const once = /Once/.test(eventName);
    const deligate = appearEventDelegations[deligationName];
    deligate(el, e => {
      instance[eventName](e);
    }, (0, _objectSpread2.default)({
      once
    }, ioOptions));
  }

  function observe(instance) {
    const dom = _reactDom.default.findDOMNode(instance);

    if (dom instanceof Element && (0, _some.default)(hookNames).call(hookNames, name => !!instance[name])) {
      (0, _forEach.default)(hookNames).call(hookNames, eventName => {
        deligateEvent(dom, eventName, 'add', instance);
      });
      instance.__rah_dom = dom;
    }
  }

  function unobserve(instance) {
    const dom = instance.__rah_dom;

    if (dom) {
      (0, _forEach.default)(hookNames).call(hookNames, eventName => {
        deligateEvent(dom, eventName, 'remove', instance);
      });
    }
  }

  return function (MaybeES6Class) {
    /**
     * 通过继承的方式，而非透传 props 和 复用 UI 渲染，
     * 防止影响其它 HOC，如 MobX observer
     */
    class Enhance extends MaybeES6Class {
      componentDidMount() {
        observe(this);
        super.componentDidMount && super.componentDidMount.call(this);
      }

      componentWillUnmount() {
        unobserve(this);
        super.componentWillUnmount && super.componentWillUnmount.call(this);
      }

    }

    return (0, _assign.default)(Enhance, hooks);
  };
}

class PureAppear extends _react.Component {
  constructor(props) {
    super(props);
    const onAppearOnce = props.onAppearOnce,
          onAppear = props.onAppear,
          onDisappear = props.onDisappear,
          onDisappearOnce = props.onDisappearOnce;
    (0, _assign.default)(this, {
      didAppearOnce: onAppearOnce,
      didAppear: onAppear,
      didDisappear: onDisappear,
      didDisappearOnce: onDisappearOnce
    });
  }

  render() {
    return this.props.children;
  }

}

function createAppear(ioOptions) {
  return withAppear(null, ioOptions)(PureAppear);
}

const Appear = createAppear();
exports.Appear = Appear;