LogBoxButton.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. * @flow strict-local
  8. * @format
  9. */
  10. 'use strict';
  11. import * as React from 'react';
  12. import StyleSheet from '../../StyleSheet/StyleSheet';
  13. import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
  14. import View from '../../Components/View/View';
  15. import * as LogBoxStyle from './LogBoxStyle';
  16. import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
  17. import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
  18. import type {PressEvent} from '../../Types/CoreEventTypes';
  19. type Props = $ReadOnly<{|
  20. backgroundColor: $ReadOnly<{|
  21. default: string,
  22. pressed: string,
  23. |}>,
  24. children?: React.Node,
  25. hitSlop?: ?EdgeInsetsProp,
  26. onPress?: ?(event: PressEvent) => void,
  27. style?: ViewStyleProp,
  28. |}>;
  29. function LogBoxButton(props: Props): React.Node {
  30. const [pressed, setPressed] = React.useState(false);
  31. let backgroundColor = props.backgroundColor;
  32. if (!backgroundColor) {
  33. backgroundColor = {
  34. default: LogBoxStyle.getBackgroundColor(0.95),
  35. pressed: LogBoxStyle.getBackgroundColor(0.6),
  36. };
  37. }
  38. const content = (
  39. <View
  40. style={StyleSheet.compose(
  41. {
  42. backgroundColor: pressed
  43. ? backgroundColor.pressed
  44. : backgroundColor.default,
  45. },
  46. props.style,
  47. )}>
  48. {props.children}
  49. </View>
  50. );
  51. return props.onPress == null ? (
  52. content
  53. ) : (
  54. <TouchableWithoutFeedback
  55. hitSlop={props.hitSlop}
  56. onPress={props.onPress}
  57. onPressIn={() => setPressed(true)}
  58. onPressOut={() => setPressed(false)}>
  59. {content}
  60. </TouchableWithoutFeedback>
  61. );
  62. }
  63. export default LogBoxButton;