From 3cd6d18aa8a0ccf46f2c6ba87857ebdcfa1b1700 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Tue, 20 Aug 2024 16:48:38 -0700
Subject: [PATCH] Increase Example List Density (#46080)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46080
1. Force the examples to be alphabetized, where the hand-maintained list has some examples that are not
2. Remove reundant/not useful UI
Changelog: [Internal]
Reviewed By: cortinico
Differential Revision: D61430910
fbshipit-source-id: 1f3e116fe81502faa7a72f2720912e26c9f04bb2
---
.../js/components/RNTPressableRow.js | 14 +++---
.../js/components/RNTesterComponentTitle.js | 3 +-
.../js/components/RNTesterModuleList.js | 44 ++-----------------
.../rn-tester/js/utils/testerStateUtils.js | 6 ++-
4 files changed, 14 insertions(+), 53 deletions(-)
diff --git a/packages/rn-tester/js/components/RNTPressableRow.js b/packages/rn-tester/js/components/RNTPressableRow.js
index c18fa8df4a0237..5a972df412f1cf 100644
--- a/packages/rn-tester/js/components/RNTPressableRow.js
+++ b/packages/rn-tester/js/components/RNTPressableRow.js
@@ -11,7 +11,7 @@
import RNTesterComponentTitle from './RNTesterComponentTitle';
import {RNTesterThemeContext} from './RNTesterTheme';
import * as React from 'react';
-import {Platform, Pressable, StyleSheet, Text, View} from 'react-native';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
type Props = {
@@ -19,7 +19,6 @@ type Props = {
testID?: ?string,
onPressIn?: ?() => mixed,
onPressOut?: ?() => mixed,
- bottomAddOn?: ?React.Node,
children?: ?React.Node,
title: string,
description?: ?string,
@@ -32,7 +31,6 @@ export default function RNTPressableRow({
onPressOut,
title,
description,
- bottomAddOn,
onPress,
style,
accessibilityLabel,
@@ -60,7 +58,6 @@ export default function RNTPressableRow({
style={[styles.descriptionText, {color: theme.SecondaryLabelColor}]}>
{description}
</Text>
- {bottomAddOn}
</Pressable>
);
}
@@ -68,17 +65,16 @@ export default function RNTPressableRow({
const styles = StyleSheet.create({
row: {
justifyContent: 'center',
- paddingHorizontal: 15,
- paddingVertical: 12,
- marginVertical: 4,
+ paddingHorizontal: 16,
+ paddingVertical: 16,
+ marginVertical: 5,
marginHorizontal: 16,
experimental_boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)',
borderRadius: 8,
},
descriptionText: {
+ marginTop: 6,
fontSize: 12,
- lineHeight: 20,
- marginBottom: 5,
},
topRowStyle: {
flexDirection: 'row',
diff --git a/packages/rn-tester/js/components/RNTesterComponentTitle.js b/packages/rn-tester/js/components/RNTesterComponentTitle.js
index 633930682f9e2f..4e2ea40cc96d8f 100644
--- a/packages/rn-tester/js/components/RNTesterComponentTitle.js
+++ b/packages/rn-tester/js/components/RNTesterComponentTitle.js
@@ -37,9 +37,8 @@ class RNTesterComponentTitle extends React.Component<Props> {
const styles = StyleSheet.create({
titleText: {
- fontSize: 20,
+ fontSize: 18,
fontWeight: '400',
- marginBottom: 5,
},
});
diff --git a/packages/rn-tester/js/components/RNTesterModuleList.js b/packages/rn-tester/js/components/RNTesterModuleList.js
index a22b8ba1096d32..d9d4646cde4084 100644
--- a/packages/rn-tester/js/components/RNTesterModuleList.js
+++ b/packages/rn-tester/js/components/RNTesterModuleList.js
@@ -13,20 +13,16 @@ import RNTPressableRow from './RNTPressableRow';
const RNTesterExampleFilter = require('./RNTesterExampleFilter');
const React = require('react');
-const {Platform, SectionList, StyleSheet, Text, View} = require('react-native');
+const {SectionList, StyleSheet, Text, View} = require('react-native');
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
* LTI update could not be added via codemod */
-const ExampleModuleRow = ({
+function ExampleModuleRow({
onShowUnderlay,
onHideUnderlay,
item,
handlePress,
-}) => {
- const theme = React.useContext(RNTesterThemeContext);
- const platform = item.module.platform;
- const onIos = !platform || platform === 'ios';
- const onAndroid = !platform || platform === 'android';
+}): React.Node {
return (
<RNTPressableRow
title={item.module.title}
@@ -35,29 +31,6 @@ const ExampleModuleRow = ({
onPressIn={onShowUnderlay}
onPressOut={onHideUnderlay}
accessibilityLabel={item.module.title + ' ' + item.module.description}
- bottomAddOn={
- <View style={styles.bottomRowStyle}>
- <Text style={{color: theme.SecondaryLabelColor, width: 65}}>
- {item.module.category || 'Other'}
- </Text>
- <View style={styles.platformLabelStyle}>
- <Text
- style={{
- color: onIos ? '#787878' : theme.SeparatorColor,
- fontWeight: onIos ? '500' : '300',
- }}>
- iOS
- </Text>
- <Text
- style={{
- color: onAndroid ? '#787878' : theme.SeparatorColor,
- fontWeight: onAndroid ? '500' : '300',
- }}>
- Android
- </Text>
- </View>
- </View>
- }
onPress={() =>
handlePress({
exampleType: item.exampleType,
@@ -67,7 +40,7 @@ const ExampleModuleRow = ({
}
/>
);
-};
+}
const renderSectionHeader = ({section}: {section: any, ...}) => (
<RNTesterThemeContext.Consumer>
@@ -149,10 +122,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
flex: 1,
},
- bottomRowStyle: {
- flexDirection: 'row',
- justifyContent: 'space-between',
- },
imageViewStyle: {
height: 30,
width: 30,
@@ -166,11 +135,6 @@ const styles = StyleSheet.create({
height: 25,
width: 25,
},
- platformLabelStyle: {
- flexDirection: 'row',
- width: 100,
- justifyContent: 'space-between',
- },
});
module.exports = RNTesterModuleList;
diff --git a/packages/rn-tester/js/utils/testerStateUtils.js b/packages/rn-tester/js/utils/testerStateUtils.js
index 538b4264345e0a..596af29acfebd3 100644
--- a/packages/rn-tester/js/utils/testerStateUtils.js
+++ b/packages/rn-tester/js/utils/testerStateUtils.js
@@ -97,7 +97,9 @@ export const getExamplesListWithRecentlyUsed = ({
},
{
key: 'COMPONENTS',
- data: components,
+ data: components.sort((a, b) =>
+ a.module.title.localeCompare(b.module.title),
+ ),
title: 'Components',
},
],
@@ -109,7 +111,7 @@ export const getExamplesListWithRecentlyUsed = ({
},
{
key: 'APIS',
- data: apis,
+ data: apis.sort((a, b) => a.module.title.localeCompare(b.module.title)),
title: 'APIs',
},
],