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

Build full featured iOS & Android apps using ZMP & React

import { useEffect, useRef } from 'react';
import { watchProp } from './watch-prop';
import { zmp, zmpready } from './zmp';
export var useTooltip = function useTooltip(elRef, props) {
  var zmpTooltip = useRef(null);
  var tooltip = props.tooltip,
      tooltipTrigger = props.tooltipTrigger;

  var onMount = function onMount() {
    if (!elRef.current) return;
    if (!tooltip) return;
    zmpready(function () {
      zmpTooltip.current = zmp.tooltip.create({
        targetEl: elRef.current,
        text: tooltip,
        trigger: tooltipTrigger
      });
    });
  };

  var onDestroy = function onDestroy() {
    if (zmpTooltip.current && zmpTooltip.current.destroy) {
      zmpTooltip.current.destroy();
      zmpTooltip.current = null;
    }
  };

  useEffect(function () {
    onMount();
    return onDestroy;
  }, []);
  watchProp(tooltip, function (value) {
    if (!value && zmpTooltip.current) {
      zmpTooltip.current.destroy();
      zmpTooltip.current = null;
      return;
    }

    if (value && !zmpTooltip.current && zmp) {
      zmpTooltip.current = zmp.tooltip.create({
        targetEl: elRef.current,
        text: value,
        trigger: tooltipTrigger
      });
      return;
    }

    if (!value || !zmpTooltip.current) return;
    zmpTooltip.current.setText(value);
  });
};