rax-view/lib/miniapp/wechat.js

View component for Rax.

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _rax = require("rax");

var _dedupe = _interopRequireDefault(require("classnames/dedupe"));

var _wrapDefaultProperties = _interopRequireDefault(require("../utils/wrapDefaultProperties"));

var _index = _interopRequireDefault(require("../index.css"));

var _excluded = ["className", "style", "onFirstAppear", "onAppear", "onDisappear"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var _styleSheet = _index.default;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var cache = _styleSheet.__cache || (_styleSheet.__cache = {});

  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = cache[className];

  if (!style) {
    style = {};

    if (classNameArr.length === 1) {
      style = _styleSheet[classNameArr[0].trim()];
    } else {
      classNameArr.forEach(function (cls) {
        var value = _styleSheet[cls.trim()];

        if (typeof value === 'object') {
          style = Object.assign(style, _styleSheet[cls.trim()]);
        }
      });
    }

    cache[className] = style;
  }

  return style;
}

var View = (0, _rax.forwardRef)(function (props, ref) {
  var selfRef = (0, _rax.useRef)(null);

  var _props$className = props.className,
      className = _props$className === void 0 ? '' : _props$className,
      style = props.style,
      onFirstAppear = props.onFirstAppear,
      onAppear = props.onAppear,
      onDisappear = props.onDisappear,
      rest = _objectWithoutPropertiesLoose(props, _excluded);

  (0, _rax.useEffect)(function () {
    if (!(typeof onAppear === 'function' || typeof onFirstAppear === 'function' || typeof onDisappear === 'function')) {
      return undefined;
    }

    if (!props.id) {
      console.warn('id is required if using onAppear in wechat miniprogram!');
      return undefined;
    }

    var ele = document.getElementById(props.id);

    if (ele != null && ele._internal) {
      var observe = function () {
        selfRef.observer = ele._internal.createIntersectionObserver().relativeToViewport();
        selfRef.observer.observe("#" + props.id, function (res) {
          var _res$intersectionRati = res.intersectionRatio,
              intersectionRatio = _res$intersectionRati === void 0 ? 0 : _res$intersectionRati;

          if (intersectionRatio > 0) {
            typeof onAppear === 'function' && onAppear(res);

            if (typeof onFirstAppear === 'function') {
              if (!selfRef.triggeredAppear) {
                onFirstAppear(res);
                selfRef.triggeredAppear = true;

                if (typeof onAppear !== 'function' && typeof onDisappear !== 'function') {
                  selfRef.observer.disconnect();
                }
              }
            }
          } else {
            typeof onDisappear === 'function' && onDisappear(res);
          }
        });
        window.removeEventListener('setDataFinished', observe);
      };

      window.addEventListener('setDataFinished', observe);
    }

    return function () {
      if (selfRef.observer) {
        selfRef.observer.disconnect();
      }
    };
  }, [props.id, onAppear, onDisappear]);
  var handleAppear = onAppear;

  if (onFirstAppear) {
    handleAppear = function (event) {
      onAppear && onAppear(event);

      if (!selfRef.triggeredAppear) {
        onFirstAppear && onFirstAppear(event);
        selfRef.triggeredAppear = true;
      }
    };
  }

  return (0, _rax.createElement)("div", _extends({}, rest, {
    onAppear: handleAppear,
    onDisappear: onDisappear,
    ref: ref,
    className: (0, _dedupe.default)('rax-view-v2', className),
    style: Object.assign({}, _getStyle((0, _dedupe.default)('rax-view-v2', className)), style)
  }));
});

var _default = (0, _wrapDefaultProperties.default)(View);

exports.default = _default;