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

Simple tooltip for React native app

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { View, Pressable, Keyboard } from 'react-native';
import { NestedModal } from '@nguyentc21/react-native-modal-view';
import usePosition from './usePosition';
import styles from './styles';
import { getCaretWidth } from './functions';
const DEFAULT_CARET_SIZE = 6;
const DEFAULT_BORDER_RADIUS = 10;
const DEFAULT_SAFE_AREA_INSETS = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
};
const Tooltip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
  const {
    containerStyle,
    backdropStyle,
    forcePlacement,
    disabled,
    color = '#fff',
    backdropColor = 'rgba(0,0,0,0.5)',
    placement = 'top',
    caretSize = DEFAULT_CARET_SIZE,
    safeAreaInsets = DEFAULT_SAFE_AREA_INSETS,
    extraData,
    hideCaret,
    actionType = 'onPress',
    visible,
    ...viewProps
  } = props;
  const [tooltipContentLayoutState, setTooltipContentLayoutState] = useState();
  const [targetContentLayoutState, setTargetContentLayoutState] = useState();
  const [visibleState, setVisibleState] = useState(false);
  const [readyKeyState, setReadyKeyState] = useState(0);
  const contentRef = useRef(null);
  const caretWidth = getCaretWidth(caretSize);
  const tooltipContentPadding = caretWidth * 0.55 > 10 ? caretWidth * 0.55 : 10;
  const {
    contentPosition,
    caretPosition
  } = usePosition({
    safeAreaInsets,
    placement,
    forcePlacement,
    targetContentLayout: targetContentLayoutState,
    tooltipContentLayout: tooltipContentLayoutState,
    caretSize,
    hideCaret
  });
  useEffect(() => {
    setReadyKeyState(Math.random());
  }, [extraData, contentPosition, caretPosition]);
  const _onOpen = () => {
    var _contentRef$current, _contentRef$current$m, _props$onOpen;
    Keyboard.dismiss();
    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || (_contentRef$current$m = _contentRef$current.measure) === null || _contentRef$current$m === void 0 || _contentRef$current$m.call(_contentRef$current, (x, y, width, height, pageX, pageY) => {
      setTargetContentLayoutState({
        x,
        y,
        width,
        height,
        pageX,
        pageY
      });
    });
    (_props$onOpen = props.onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(props);
  };
  const _onTooltipLayout = e => {
    e.persist();
    setTooltipContentLayoutState(e.nativeEvent.layout);
  };
  const _show = () => {
    setVisibleState(true);
  };
  const _hide = () => {
    setVisibleState(false);
  };
  useImperativeHandle(forwardedRef, () => ({
    show: _show,
    hide: _hide
  }));
  const _props = actionType === 'onPress' ? {
    onPress: _show
  } : actionType === 'onLongPress' ? {
    onLongPress: _show
  } : {};
  const _visible = visible ?? visibleState;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, _extends({
    ref: contentRef,
    disabled: !!disabled
  }, viewProps, _props), props.children), /*#__PURE__*/React.createElement(NestedModal, _extends({}, props, {
    visible: _visible,
    close: _hide,
    onOpen: _onOpen,
    containerStyle: [styles.shadow10, {
      maxHeight: '100%',
      height: -1,
      width: -1,
      marginTop: 0,
      position: 'absolute',
      backgroundColor: color,
      top: contentPosition === null || contentPosition === void 0 ? void 0 : contentPosition.top,
      left: contentPosition === null || contentPosition === void 0 ? void 0 : contentPosition.left,
      borderRadius: DEFAULT_BORDER_RADIUS,
      overflow: 'visible',
      padding: tooltipContentPadding
    }, !!(contentPosition !== null && contentPosition !== void 0 && contentPosition.hidden) && {
      display: 'none'
    }, contentPosition == undefined && {
      opacity: 0
    }, containerStyle],
    backdropStyle: [{
      backgroundColor: backdropColor
    }, backdropStyle],
    onMainContentLayout: _onTooltipLayout,
    wrapContent: !caretPosition ? null : /*#__PURE__*/React.createElement(View, {
      style: [{
        position: 'absolute',
        backgroundColor: color,
        top: caretPosition.top,
        left: caretPosition.left,
        transform: [{
          rotate: '45deg'
        }],
        width: caretSize,
        height: caretSize
      }, !!caretPosition.hidden && {
        display: 'none'
      }]
    }),
    children: props.content,
    updateKey: readyKeyState
  })));
});
export default Tooltip;
//# sourceMappingURL=index.js.map