react-native-xenon/lib/module/ui/components/bubble/Bubble.js

A powerful in-app debugging tool for React Native.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Bubble;
var _react = require("react");
var _reactNative = require("react-native");
var _contexts = require("../../../contexts");
var _icons = _interopRequireDefault(require("../../../theme/icons"));
var _colors = _interopRequireDefault(require("../../../theme/colors"));
var _utils = require("../../../core/utils");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Bubble({
  bubbleSize,
  idleBubbleOpacity,
  pan,
  screenWidth,
  screenHeight
}) {
  const iconSize = bubbleSize * 0.65;
  const {
    setDebuggerState
  } = (0, _react.useContext)(_contexts.MainContext);
  const [idleOpacity, setIdleOpacity] = (0, _react.useState)(idleBubbleOpacity);
  const opacityTimer = (0, _react.useRef)(null);
  const panResponder = (0, _react.useMemo)(() => {
    const clearTimer = () => {
      if (opacityTimer.current) clearTimeout(opacityTimer.current);
      opacityTimer.current = null;
    };
    return _reactNative.PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.current.setOffset({
          // @ts-ignore
          x: pan.current.x._value,
          // @ts-ignore
          y: pan.current.y._value
        });
        pan.current.setValue({
          x: 0,
          y: 0
        });
        clearTimer();
        setIdleOpacity(1);
      },
      onPanResponderMove: _reactNative.Animated.event([null, {
        dx: pan.current.x,
        dy: pan.current.y
      }], {
        useNativeDriver: false
      }),
      onPanResponderRelease: (_, gesture) => {
        const isTapGesture = gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
        if (isTapGesture) setDebuggerState(draft => {
          draft.visibility = 'panel';
        });
        pan.current.flattenOffset();
        const finalX = gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
        const verticalSafeMargin = (0, _utils.getVerticalSafeMargin)(screenHeight);
        const finalY = (0, _utils.clamp)(gesture.moveY, verticalSafeMargin, screenHeight - verticalSafeMargin - bubbleSize);
        _reactNative.Animated.spring(pan.current, {
          toValue: {
            x: finalX,
            y: finalY
          },
          useNativeDriver: false
        }).start(({
          finished
        }) => {
          if (!finished) return;
          opacityTimer.current = setTimeout(() => {
            setIdleOpacity(0.5);
            clearTimer();
          }, 1000);
        });
      }
    });
  }, [bubbleSize, pan, screenHeight, screenWidth, setDebuggerState]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: styles.bubbleBackdrop,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
      ...panResponder.panHandlers,
      style: [styles.bubble, {
        width: bubbleSize,
        height: bubbleSize,
        borderRadius: bubbleSize / 2,
        transform: pan.current.getTranslateTransform(),
        opacity: idleOpacity
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
        source: _icons.default.bug,
        style: {
          width: iconSize,
          height: iconSize
        }
      })
    })
  });
}
const styles = _reactNative.StyleSheet.create({
  bubbleBackdrop: {
    flex: 1,
    ..._reactNative.StyleSheet.absoluteFillObject,
    pointerEvents: 'box-none'
  },
  bubble: {
    backgroundColor: _colors.default.lightGray,
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center'
  }
});
//# sourceMappingURL=Bubble.js.map