1/**
2 * Copyright (c) 650 Industries.
3 * Copyright (c) Meta Platforms, Inc. and affiliates.
4 *
5 * This source code is licensed under the MIT license found in the
6 * LICENSE file in the root directory of this source tree.
7 */
8import React from 'react';
9import { Pressable, StyleSheet, Text, View } from 'react-native';
10
11import { useSelectedLog } from '../Data/LogContext';
12import * as LogBoxStyle from '../UI/LogBoxStyle';
13
14type Props = {
15  onDismiss: () => void;
16  onMinimize: () => void;
17};
18
19export function LogBoxInspectorFooter(props: Props) {
20  const log = useSelectedLog();
21
22  if (['static', 'syntax'].includes(log.level)) {
23    return (
24      <View style={styles.root}>
25        <View style={styles.button}>
26          <Text style={styles.syntaxErrorText}>This error cannot be dismissed.</Text>
27        </View>
28      </View>
29    );
30  }
31
32  return (
33    <View style={styles.root}>
34      <FooterButton text="Dismiss" onPress={props.onDismiss} />
35      <FooterButton text="Minimize" onPress={props.onMinimize} />
36    </View>
37  );
38}
39
40function FooterButton({ text, onPress }: { onPress: () => void; text: string }) {
41  return (
42    <Pressable onPress={onPress} style={{ flex: 1 }}>
43      {({
44        /** @ts-expect-error: react-native types are broken. */
45        hovered,
46        pressed,
47      }) => (
48        <View
49          style={[
50            buttonStyles.safeArea,
51            {
52              // @ts-expect-error: web-only type
53              transitionDuration: '150ms',
54              backgroundColor: pressed
55                ? '#323232'
56                : hovered
57                ? '#111111'
58                : LogBoxStyle.getBackgroundColor(),
59            },
60          ]}>
61          <View style={buttonStyles.content}>
62            <Text style={buttonStyles.label}>{text}</Text>
63          </View>
64        </View>
65      )}
66    </Pressable>
67  );
68}
69
70const buttonStyles = StyleSheet.create({
71  safeArea: {
72    flex: 1,
73    borderTopWidth: 1,
74    borderColor: '#323232',
75    // paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
76  },
77  content: {
78    alignItems: 'center',
79    height: 48,
80    justifyContent: 'center',
81  },
82  label: {
83    userSelect: 'none',
84    color: LogBoxStyle.getTextColor(1),
85    fontSize: 14,
86    includeFontPadding: false,
87    lineHeight: 20,
88  },
89});
90
91const styles = StyleSheet.create({
92  root: {
93    backgroundColor: LogBoxStyle.getBackgroundColor(1),
94    boxShadow: `0 -2px 0 2px #000`,
95    flexDirection: 'row',
96  },
97  button: {
98    flex: 1,
99  },
100  syntaxErrorText: {
101    textAlign: 'center',
102    width: '100%',
103    height: 48,
104    fontSize: 14,
105    lineHeight: 20,
106    paddingTop: 20,
107    paddingBottom: 50,
108    fontStyle: 'italic',
109    color: LogBoxStyle.getTextColor(0.6),
110  },
111});
112