zmp-react/cjs/shared/use-tab.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

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

var _zmp = require("./zmp");

var _useIsomorphicLayoutEffect = require("./use-isomorphic-layout-effect");

var _utils = require("./utils");

var useTab = function useTab(elRef, props) {
  var onTabShow = function onTabShow(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'tabShow', el);
  };

  var onTabHide = function onTabHide(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'tabHide', el);
  };

  var attachEvents = function attachEvents() {
    if (!elRef.current) return;
    (0, _zmp.zmpready)(function () {
      _zmp.zmp.on('tabShow', onTabShow);

      _zmp.zmp.on('tabHide', onTabHide);
    });
  };

  var detachEvents = function detachEvents() {
    if (!_zmp.zmp) return;

    _zmp.zmp.off('tabShow', onTabShow);

    _zmp.zmp.off('tabHide', onTabHide);
  };

  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    attachEvents();
    return detachEvents;
  });
};

exports.useTab = useTab;