Files
react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js
T
Rick Hanlon a9ffad446a LogBox - Better design for stacks
Summary:
This diff makes minor style improvements and refactors to stack frame displays, primarily:
- Adding brackets around react components
- Uses a monospace font for the code
- Changing section titles to "Components" and "Call stack"
- Refactors the section headers to a single component and reduces the text size of headings
- Removes the query string from unsymbolicated stacks

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18433487

fbshipit-source-id: 7914b5810a4303e9a0d52def92e524b9e72f79ed
2019-11-11 16:12:44 -08:00

61 lines
1.3 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/
'use strict';
import * as React from 'react';
import StyleSheet from '../../StyleSheet/StyleSheet';
import Text from '../../Text/Text';
import View from '../../Components/View/View';
import * as LogBoxStyle from './LogBoxStyle';
type Props = $ReadOnly<{|
heading: string,
children: React.Node,
action?: ?React.Node,
|}>;
function LogBoxInspectorSection(props: Props): React.Node {
return (
<View style={styles.section}>
<View style={styles.heading}>
<Text style={styles.headingText}>{props.heading}</Text>
{props.action}
</View>
<View style={styles.body}>{props.children}</View>
</View>
);
}
const styles = StyleSheet.create({
section: {
marginTop: 15,
},
heading: {
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 12,
marginBottom: 10,
},
headingText: {
color: LogBoxStyle.getTextColor(1),
flex: 1,
fontSize: 18,
fontWeight: '600',
includeFontPadding: false,
lineHeight: 20,
},
body: {
paddingBottom: 10,
},
});
export default LogBoxInspectorSection;