reactotron-react-native/dist/commonjs/plugins/overlay/overlay.js

A development tool to explore, inspect, and diagnose your React Native apps.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Styles = {
  container: {
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
    opacity: 0.25
  },
  debugContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
    zIndex: 2000
  },
  debugTextContainer: {
    backgroundColor: "lightgray",
    margin: 50,
    padding: 20
  },
  debugText: {
    color: "red",
    fontSize: 16,
    marginBottom: 10
  }
};
/** An overlay for showing an image to help with layout.
 *
 * @class FullScreenOverlay
 * @extends {Component}
 */
class FullScreenOverlay extends _react.Component {
  constructor(props) {
    super(props);
    this.state = {
      opacity: Styles.container.opacity,
      uri: null,
      justifyContent: "center",
      alignItems: "center"
    };

    // when the server sends stuff
    props.emitter.on("overlay", payload => {
      this.setState({
        ...this.state,
        ...payload
      });
    });
  }
  createContainerStyle() {
    const {
      opacity,
      justifyContent,
      alignItems
    } = this.state;
    const {
      width,
      height
    } = _reactNative.Dimensions.get("window");
    const containerStyle = {
      ...Styles.container,
      opacity,
      width,
      height,
      justifyContent,
      alignItems
    };
    return containerStyle;
  }
  renderDebug() {
    const {
      showDebug
    } = this.state;

    // If Reactotron is configured properly it should be disabled in production.
    // We'll throw a __DEV__ check in here just in case it get's feisty.
    if (!__DEV__ || !showDebug) return null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: Styles.debugContainer,
      pointerEvents: "none",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: Styles.debugTextContainer,
        children: Object.keys(this.state).map(key => {
          if (key === "showDebug") return null;
          const keyName = key === "uri" ? "have image" : key;
          const value = key === "uri" ? !!this.state[key] : this.state[key];
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: Styles.debugText,
            children: `${keyName}: ${value}`
          }, key);
        })
      })
    });
  }

  /**
   * Draw.
   */
  render() {
    const {
      uri,
      width,
      height,
      growToWindow,
      resizeMode,
      marginLeft = 0,
      marginRight = 0,
      marginTop = 0,
      marginBottom = 0
    } = this.state;
    const imageStyle = {
      width,
      height,
      marginTop,
      marginRight,
      marginBottom,
      marginLeft
    };
    if (growToWindow) {
      const windowSize = _reactNative.Dimensions.get("window");
      imageStyle.width = windowSize.width;
      imageStyle.height = windowSize.height;
    }
    const image = uri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
      source: {
        uri
      },
      style: imageStyle,
      resizeMode: growToWindow ? resizeMode : null
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {});
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.createContainerStyle(),
        pointerEvents: "none",
        children: image
      }), this.renderDebug()]
    });
  }
}
var _default = exports.default = FullScreenOverlay;
//# sourceMappingURL=overlay.js.map