LogBoxInspectorFooter.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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 type {LogLevel} from '../Data/LogBoxLog';
  12. import * as React from 'react';
  13. import DeviceInfo from '../../Utilities/DeviceInfo';
  14. import StyleSheet from '../../StyleSheet/StyleSheet';
  15. import Text from '../../Text/Text';
  16. import View from '../../Components/View/View';
  17. import LogBoxButton from './LogBoxButton';
  18. import * as LogBoxStyle from './LogBoxStyle';
  19. type Props = $ReadOnly<{|
  20. onDismiss: () => void,
  21. onMinimize: () => void,
  22. level?: ?LogLevel,
  23. |}>;
  24. function LogBoxInspectorFooter(props: Props): React.Node {
  25. if (props.level === 'syntax') {
  26. return (
  27. <View style={styles.root}>
  28. <View style={styles.button}>
  29. <Text style={styles.syntaxErrorText}>
  30. This error cannot be dismissed.
  31. </Text>
  32. </View>
  33. </View>
  34. );
  35. }
  36. return (
  37. <View style={styles.root}>
  38. <FooterButton text="Dismiss" onPress={props.onDismiss} />
  39. <FooterButton text="Minimize" onPress={props.onMinimize} />
  40. </View>
  41. );
  42. }
  43. type ButtonProps = $ReadOnly<{|
  44. onPress: () => void,
  45. text: string,
  46. |}>;
  47. function FooterButton(props: ButtonProps): React.Node {
  48. return (
  49. <LogBoxButton
  50. backgroundColor={{
  51. default: 'transparent',
  52. pressed: LogBoxStyle.getBackgroundDarkColor(),
  53. }}
  54. onPress={props.onPress}
  55. style={buttonStyles.safeArea}>
  56. <View style={buttonStyles.content}>
  57. <Text style={buttonStyles.label}>{props.text}</Text>
  58. </View>
  59. </LogBoxButton>
  60. );
  61. }
  62. const buttonStyles = StyleSheet.create({
  63. safeArea: {
  64. flex: 1,
  65. paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
  66. },
  67. content: {
  68. alignItems: 'center',
  69. height: 48,
  70. justifyContent: 'center',
  71. },
  72. label: {
  73. color: LogBoxStyle.getTextColor(1),
  74. fontSize: 14,
  75. includeFontPadding: false,
  76. lineHeight: 20,
  77. },
  78. });
  79. const styles = StyleSheet.create({
  80. root: {
  81. backgroundColor: LogBoxStyle.getBackgroundColor(1),
  82. shadowColor: '#000',
  83. shadowOffset: {width: 0, height: -2},
  84. shadowRadius: 2,
  85. shadowOpacity: 0.5,
  86. flexDirection: 'row',
  87. },
  88. button: {
  89. flex: 1,
  90. },
  91. syntaxErrorText: {
  92. textAlign: 'center',
  93. width: '100%',
  94. height: 48,
  95. fontSize: 14,
  96. lineHeight: 20,
  97. paddingTop: 20,
  98. paddingBottom: 50,
  99. fontStyle: 'italic',
  100. color: LogBoxStyle.getTextColor(0.6),
  101. },
  102. });
  103. export default LogBoxInspectorFooter;