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 { GestureResponderEvent, StyleSheet, Text, View } from 'react-native';
10import { StackFrame } from 'stacktrace-parser';
11
12import { LogBoxButton } from '../UI/LogBoxButton';
13import * as LogBoxStyle from '../UI/LogBoxStyle';
14import { CODE_FONT } from '../UI/constants';
15import { getStackFormattedLocation } from '../formatProjectFilePath';
16
17declare const process: any;
18
19type Props = {
20  frame: StackFrame & { collapse?: boolean };
21  onPress?: (event: GestureResponderEvent) => void;
22};
23
24export function LogBoxInspectorStackFrame(props: Props) {
25  const { frame, onPress } = props;
26  const location = getStackFormattedLocation(process.env.EXPO_PROJECT_ROOT, frame);
27  return (
28    <View style={styles.frameContainer}>
29      <LogBoxButton
30        backgroundColor={{
31          default: 'transparent',
32          pressed: onPress ? LogBoxStyle.getBackgroundColor(1) : 'transparent',
33        }}
34        onPress={onPress}
35        style={styles.frame}>
36        <Text style={[styles.name, frame.collapse === true && styles.dim]}>{frame.methodName}</Text>
37        <Text
38          ellipsizeMode="middle"
39          numberOfLines={1}
40          style={[styles.location, frame.collapse === true && styles.dim]}>
41          {location}
42        </Text>
43      </LogBoxButton>
44    </View>
45  );
46}
47
48const styles = StyleSheet.create({
49  frameContainer: {
50    flexDirection: 'row',
51    paddingHorizontal: 15,
52  },
53  frame: {
54    flex: 1,
55    paddingVertical: 4,
56    paddingHorizontal: 10,
57    borderRadius: 5,
58  },
59  lineLocation: {
60    flexDirection: 'row',
61  },
62  name: {
63    color: LogBoxStyle.getTextColor(1),
64    fontSize: 14,
65    includeFontPadding: false,
66    lineHeight: 18,
67    fontWeight: '400',
68    fontFamily: CODE_FONT,
69  },
70  location: {
71    color: LogBoxStyle.getTextColor(0.8),
72    fontSize: 12,
73    fontWeight: '300',
74    includeFontPadding: false,
75    lineHeight: 16,
76    paddingLeft: 10,
77  },
78  dim: {
79    color: LogBoxStyle.getTextColor(0.4),
80    fontWeight: '300',
81  },
82  line: {
83    color: LogBoxStyle.getTextColor(0.8),
84    fontSize: 12,
85    fontWeight: '300',
86    includeFontPadding: false,
87    lineHeight: 16,
88  },
89});
90