InspectorOverlay.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow
  9. */
  10. 'use strict';
  11. const Dimensions = require('../Utilities/Dimensions');
  12. const ElementBox = require('./ElementBox');
  13. const React = require('react');
  14. const StyleSheet = require('../StyleSheet/StyleSheet');
  15. const View = require('../Components/View/View');
  16. import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
  17. import type {PressEvent} from '../Types/CoreEventTypes';
  18. type Inspected = $ReadOnly<{|
  19. frame?: Object,
  20. style?: ViewStyleProp,
  21. |}>;
  22. type Props = $ReadOnly<{|
  23. inspected?: Inspected,
  24. onTouchPoint: (locationX: number, locationY: number) => void,
  25. |}>;
  26. class InspectorOverlay extends React.Component<Props> {
  27. findViewForTouchEvent: (e: PressEvent) => void = (e: PressEvent) => {
  28. const {locationX, locationY} = e.nativeEvent.touches[0];
  29. this.props.onTouchPoint(locationX, locationY);
  30. };
  31. shouldSetResponser: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
  32. this.findViewForTouchEvent(e);
  33. return true;
  34. };
  35. render(): React.Node {
  36. let content = null;
  37. if (this.props.inspected) {
  38. content = (
  39. <ElementBox
  40. frame={this.props.inspected.frame}
  41. style={this.props.inspected.style}
  42. />
  43. );
  44. }
  45. return (
  46. <View
  47. onStartShouldSetResponder={this.shouldSetResponser}
  48. onResponderMove={this.findViewForTouchEvent}
  49. style={[styles.inspector, {height: Dimensions.get('window').height}]}>
  50. {content}
  51. </View>
  52. );
  53. }
  54. }
  55. const styles = StyleSheet.create({
  56. inspector: {
  57. backgroundColor: 'transparent',
  58. position: 'absolute',
  59. left: 0,
  60. top: 0,
  61. right: 0,
  62. },
  63. });
  64. module.exports = InspectorOverlay;