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

Simple tooltip for React native app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeModalView = require("@nguyentc21/react-native-modal-view");
var _usePosition = _interopRequireDefault(require("./usePosition"));
var _styles = _interopRequireDefault(require("./styles"));
var _functions = require("./functions");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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); }
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__*/(0, _react.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] = (0, _react.useState)();
  const [targetContentLayoutState, setTargetContentLayoutState] = (0, _react.useState)();
  const [visibleState, setVisibleState] = (0, _react.useState)(false);
  const [readyKeyState, setReadyKeyState] = (0, _react.useState)(0);
  const contentRef = (0, _react.useRef)(null);
  const caretWidth = (0, _functions.getCaretWidth)(caretSize);
  const tooltipContentPadding = caretWidth * 0.55 > 10 ? caretWidth * 0.55 : 10;
  const {
    contentPosition,
    caretPosition
  } = (0, _usePosition.default)({
    safeAreaInsets,
    placement,
    forcePlacement,
    targetContentLayout: targetContentLayoutState,
    tooltipContentLayout: tooltipContentLayoutState,
    caretSize,
    hideCaret
  });
  (0, _react.useEffect)(() => {
    setReadyKeyState(Math.random());
  }, [extraData, contentPosition, caretPosition]);
  const _onOpen = () => {
    var _contentRef$current, _contentRef$current$m, _props$onOpen;
    _reactNative.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);
  };
  (0, _react.useImperativeHandle)(forwardedRef, () => ({
    show: _show,
    hide: _hide
  }));
  const _props = actionType === 'onPress' ? {
    onPress: _show
  } : actionType === 'onLongPress' ? {
    onLongPress: _show
  } : {};
  const _visible = visible ?? visibleState;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
    ref: contentRef,
    disabled: !!disabled
  }, viewProps, _props), props.children), /*#__PURE__*/_react.default.createElement(_reactNativeModalView.NestedModal, _extends({}, props, {
    visible: _visible,
    close: _hide,
    onOpen: _onOpen,
    containerStyle: [_styles.default.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.default.createElement(_reactNative.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
  })));
});
var _default = exports.default = Tooltip;
//# sourceMappingURL=index.js.map