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