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