@nguyentc21/react-native-tooltip/lib/module/Tooltip/usePosition.js

Simple tooltip for React native app

import { useEffect, useState } from 'react';
import { useWindowDimensions, StyleSheet } from 'react-native';
import { getTheFinalPlacement, getCaretPosition, getTooltipPosition, getCaretWidth, checkIsXInsideY } from './functions';
const usePosition = props => {
  const {
    placement,
    forcePlacement,
    targetContentLayout,
    tooltipContentLayout,
    caretSize = 0,
    safeAreaInsets,
    hideCaret
  } = props;
  const [contentState, setContentState] = useState(undefined);
  const [caretState, setCaretState] = useState(undefined);
  const dimension = useWindowDimensions();
  const _checkIsCaretNeedHidden = (caretPosition, tooltipPosition, tooltipContentLayout) => {
    if (!!caretPosition.hidden) return true;
    const caretWidth = getCaretWidth(caretSize);
    const padding = caretWidth * 0.05 > StyleSheet.hairlineWidth ? caretWidth * 0.05 : StyleSheet.hairlineWidth;
    return checkIsXInsideY({
      pageX: caretPosition.left - (caretWidth - caretSize) * 0.5,
      pageY: caretPosition.top - (caretWidth - caretSize) * 0.5,
      width: caretWidth,
      height: caretWidth,
      x: 0,
      y: 0
    }, {
      pageX: tooltipPosition.left,
      pageY: tooltipPosition.top,
      width: tooltipContentLayout.width,
      height: tooltipContentLayout.height,
      x: 0,
      y: 0
    }, padding);
  };
  useEffect(() => {
    if (!targetContentLayout || !tooltipContentLayout) return;
    const _finalPlacement = getTheFinalPlacement({
      targetContentLayout,
      tooltipContentLayout,
      dimension,
      caretSize,
      placement,
      forcePlacement,
      safeAreaInsets
    });
    const caretPosition = !hideCaret ? getCaretPosition({
      dimension,
      targetContentLayout,
      caretSize,
      placement: _finalPlacement,
      safeAreaInsets
    }) : {
      hidden: true,
      top: 0,
      left: 0
    };
    const tooltipPosition = getTooltipPosition({
      dimension,
      tooltipContentLayout,
      targetContentLayout,
      caretSize: !!caretPosition.hidden ? 0 : caretSize,
      placement: _finalPlacement,
      safeAreaInsets
    });
    const isCaretNeedHidden = _checkIsCaretNeedHidden(caretPosition, tooltipPosition, tooltipContentLayout);
    setContentState({
      top: tooltipPosition.top,
      left: tooltipPosition.left,
      hidden: !!tooltipPosition.hidden
    });
    setCaretState({
      top: caretPosition.top,
      left: caretPosition.left,
      hidden: !!caretPosition.hidden || isCaretNeedHidden
    });
  }, [hideCaret, caretSize, dimension, safeAreaInsets, placement, forcePlacement, targetContentLayout, tooltipContentLayout]);
  return {
    contentPosition: contentState,
    caretPosition: caretState
  };
};
export default usePosition;
//# sourceMappingURL=usePosition.js.map