mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Remove chonky header for single modules (#50672)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/50672 We have precious little screen real estate, esp in E2E tests where we get 320x192 dips. Let's clean this up. Changelog: [Internal] Reviewed By: cortinico, GijsWeterings Differential Revision: D72683491 fbshipit-source-id: 222a77f937dfb9dcceb627d8f084c58df7c07b56
This commit is contained in:
committed by
Facebook GitHub Bot
parent
e385ff689b
commit
675b51f562
@@ -1,108 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow strict-local
|
||||
*/
|
||||
|
||||
import {type RNTesterTheme} from './RNTesterTheme';
|
||||
import * as React from 'react';
|
||||
import {Button, Platform, StyleSheet, Text, View} from 'react-native';
|
||||
|
||||
function RNTTestDetails({
|
||||
description,
|
||||
expect,
|
||||
title,
|
||||
theme,
|
||||
}: {
|
||||
description?: string,
|
||||
expect?: string,
|
||||
title: string,
|
||||
theme: RNTesterTheme,
|
||||
}): React.Node {
|
||||
const [collapsed, setCollapsed] = React.useState(true);
|
||||
|
||||
const content =
|
||||
description == null && expect == null ? null : (
|
||||
<>
|
||||
{description == null ? null : (
|
||||
<View style={styles.section}>
|
||||
<Text style={[styles.heading, {color: theme.LabelColor}]}>
|
||||
Description
|
||||
</Text>
|
||||
<Text style={[styles.paragraph, {color: theme.LabelColor}]}>
|
||||
{description}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{expect == null ? null : (
|
||||
<View style={styles.section}>
|
||||
<Text style={[styles.heading, {color: theme.LabelColor}]}>
|
||||
Expectation
|
||||
</Text>
|
||||
<Text style={[styles.paragraph, {color: theme.LabelColor}]}>
|
||||
{expect}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<View
|
||||
style={StyleSheet.compose(styles.container, {
|
||||
borderColor: theme.SeparatorColor,
|
||||
backgroundColor:
|
||||
Platform.OS === 'ios'
|
||||
? theme.SystemBackgroundColor
|
||||
: theme.BackgroundColor,
|
||||
})}>
|
||||
<View style={styles.titleRow}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={StyleSheet.compose(styles.title, {color: theme.LabelColor})}>
|
||||
{title}
|
||||
</Text>
|
||||
{content != null && (
|
||||
<Button
|
||||
title={collapsed ? 'Expand' : 'Collapse'}
|
||||
onPress={() => setCollapsed(!collapsed)}
|
||||
color={theme.LinkColor}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
{!collapsed ? content : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 6,
|
||||
paddingBottom: 10,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
heading: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
paragraph: {
|
||||
fontSize: 14,
|
||||
},
|
||||
section: {
|
||||
marginVertical: 4,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
},
|
||||
titleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
});
|
||||
|
||||
export default RNTTestDetails;
|
||||
@@ -15,7 +15,6 @@ import type {
|
||||
|
||||
import {type RNTesterTheme, RNTesterThemeContext} from './RNTesterTheme';
|
||||
import RNTPressableRow from './RNTPressableRow';
|
||||
import RNTTestDetails from './RNTTestDetails';
|
||||
import * as React from 'react';
|
||||
import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
|
||||
|
||||
@@ -80,12 +79,6 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
|
||||
|
||||
return singleModule != null ? (
|
||||
<>
|
||||
<RNTTestDetails
|
||||
title={singleModule.title}
|
||||
description={singleModule.description}
|
||||
expect={singleModule.expect}
|
||||
theme={theme}
|
||||
/>
|
||||
{singleModule.scrollable === true ? (
|
||||
<ScrollView style={styles.examplesContainer} testID="example-container">
|
||||
<singleModule.render />
|
||||
|
||||
Reference in New Issue
Block a user