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

Build full featured iOS & Android apps using ZMP & React

import { zmp, zmpready } from './zmp';
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
import { emit } from './utils';
export var useTab = function useTab(elRef, props) {
  var onTabShow = function onTabShow(el) {
    if (elRef.current !== el) return;
    emit(props, 'tabShow', el);
  };

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

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

  var detachEvents = function detachEvents() {
    if (!zmp) return;
    zmp.off('tabShow', onTabShow);
    zmp.off('tabHide', onTabHide);
  };

  useIsomorphicLayoutEffect(function () {
    attachEvents();
    return detachEvents;
  });
};