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 { StyleSheet, Text, View } from 'react-native';
10*26ad19fcSEvan Bacon
11*26ad19fcSEvan Baconimport type { LogLevel } from '../Data/LogBoxLog';
12*26ad19fcSEvan Baconimport type { Message } from '../Data/parseLogBoxLog';
13*26ad19fcSEvan Baconimport { LogBoxMessage } from '../UI/LogBoxMessage';
14*26ad19fcSEvan Baconimport * as LogBoxStyle from '../UI/LogBoxStyle';
15*26ad19fcSEvan Bacon
16*26ad19fcSEvan Bacontype Props = {
17*26ad19fcSEvan Bacon  collapsed: boolean;
18*26ad19fcSEvan Bacon  message: Message;
19*26ad19fcSEvan Bacon  level: LogLevel;
20*26ad19fcSEvan Bacon  title: string;
21*26ad19fcSEvan Bacon  onPress: () => void;
22*26ad19fcSEvan Bacon};
23*26ad19fcSEvan Bacon
24*26ad19fcSEvan Baconconst SHOW_MORE_MESSAGE_LENGTH = 300;
25*26ad19fcSEvan Bacon
26*26ad19fcSEvan Baconfunction ShowMoreButton({
27*26ad19fcSEvan Bacon  message,
28*26ad19fcSEvan Bacon  collapsed,
29*26ad19fcSEvan Bacon  onPress,
30*26ad19fcSEvan Bacon}: Pick<Props, 'collapsed' | 'message' | 'onPress'>) {
31*26ad19fcSEvan Bacon  if (message.content.length < SHOW_MORE_MESSAGE_LENGTH || !collapsed) {
32*26ad19fcSEvan Bacon    return null;
33*26ad19fcSEvan Bacon  }
34*26ad19fcSEvan Bacon  return (
35*26ad19fcSEvan Bacon    <Text style={styles.collapse} onPress={onPress}>
36*26ad19fcSEvan Bacon      ... See More
37*26ad19fcSEvan Bacon    </Text>
38*26ad19fcSEvan Bacon  );
39*26ad19fcSEvan Bacon}
40*26ad19fcSEvan Bacon
41*26ad19fcSEvan Baconexport function LogBoxInspectorMessageHeader(props: Props) {
42*26ad19fcSEvan Bacon  return (
43*26ad19fcSEvan Bacon    <View style={styles.body}>
44*26ad19fcSEvan Bacon      <View style={styles.heading}>
45*26ad19fcSEvan Bacon        <Text style={[styles.headingText, styles[props.level]]}>{props.title}</Text>
46*26ad19fcSEvan Bacon      </View>
47*26ad19fcSEvan Bacon      <Text style={styles.bodyText}>
48*26ad19fcSEvan Bacon        <LogBoxMessage
49*26ad19fcSEvan Bacon          maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
50*26ad19fcSEvan Bacon          message={props.message}
51*26ad19fcSEvan Bacon          style={styles.messageText}
52*26ad19fcSEvan Bacon        />
53*26ad19fcSEvan Bacon        <ShowMoreButton {...props} />
54*26ad19fcSEvan Bacon      </Text>
55*26ad19fcSEvan Bacon    </View>
56*26ad19fcSEvan Bacon  );
57*26ad19fcSEvan Bacon}
58*26ad19fcSEvan Bacon
59*26ad19fcSEvan Baconconst styles = StyleSheet.create({
60*26ad19fcSEvan Bacon  body: {
61*26ad19fcSEvan Bacon    backgroundColor: LogBoxStyle.getBackgroundColor(1),
62*26ad19fcSEvan Bacon    boxShadow: `0 2px 0 2px #00000080`,
63*26ad19fcSEvan Bacon  },
64*26ad19fcSEvan Bacon  bodyText: {
65*26ad19fcSEvan Bacon    color: LogBoxStyle.getTextColor(1),
66*26ad19fcSEvan Bacon    fontSize: 14,
67*26ad19fcSEvan Bacon    includeFontPadding: false,
68*26ad19fcSEvan Bacon    lineHeight: 20,
69*26ad19fcSEvan Bacon    fontWeight: '500',
70*26ad19fcSEvan Bacon    paddingHorizontal: 12,
71*26ad19fcSEvan Bacon    paddingBottom: 10,
72*26ad19fcSEvan Bacon  },
73*26ad19fcSEvan Bacon  heading: {
74*26ad19fcSEvan Bacon    alignItems: 'center',
75*26ad19fcSEvan Bacon    flexDirection: 'row',
76*26ad19fcSEvan Bacon    paddingHorizontal: 12,
77*26ad19fcSEvan Bacon    marginTop: 10,
78*26ad19fcSEvan Bacon    marginBottom: 5,
79*26ad19fcSEvan Bacon  },
80*26ad19fcSEvan Bacon  headingText: {
81*26ad19fcSEvan Bacon    flex: 1,
82*26ad19fcSEvan Bacon    fontSize: 20,
83*26ad19fcSEvan Bacon    fontWeight: '600',
84*26ad19fcSEvan Bacon    includeFontPadding: false,
85*26ad19fcSEvan Bacon    lineHeight: 28,
86*26ad19fcSEvan Bacon  },
87*26ad19fcSEvan Bacon  warn: {
88*26ad19fcSEvan Bacon    color: LogBoxStyle.getWarningColor(1),
89*26ad19fcSEvan Bacon  },
90*26ad19fcSEvan Bacon  error: {
91*26ad19fcSEvan Bacon    color: LogBoxStyle.getErrorColor(1),
92*26ad19fcSEvan Bacon  },
93*26ad19fcSEvan Bacon  fatal: {
94*26ad19fcSEvan Bacon    color: LogBoxStyle.getFatalColor(1),
95*26ad19fcSEvan Bacon  },
96*26ad19fcSEvan Bacon  syntax: {
97*26ad19fcSEvan Bacon    color: LogBoxStyle.getFatalColor(1),
98*26ad19fcSEvan Bacon  },
99*26ad19fcSEvan Bacon  static: {
100*26ad19fcSEvan Bacon    color: LogBoxStyle.getFatalColor(1),
101*26ad19fcSEvan Bacon  },
102*26ad19fcSEvan Bacon  messageText: {
103*26ad19fcSEvan Bacon    color: LogBoxStyle.getTextColor(0.6),
104*26ad19fcSEvan Bacon  },
105*26ad19fcSEvan Bacon  collapse: {
106*26ad19fcSEvan Bacon    color: LogBoxStyle.getTextColor(0.7),
107*26ad19fcSEvan Bacon    fontSize: 14,
108*26ad19fcSEvan Bacon    fontWeight: '300',
109*26ad19fcSEvan Bacon    lineHeight: 12,
110*26ad19fcSEvan Bacon  },
111*26ad19fcSEvan Bacon  button: {
112*26ad19fcSEvan Bacon    paddingVertical: 5,
113*26ad19fcSEvan Bacon    paddingHorizontal: 10,
114*26ad19fcSEvan Bacon    borderRadius: 3,
115*26ad19fcSEvan Bacon  },
116*26ad19fcSEvan Bacon});
117