mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Add RNTester examples for display: contents (#47201)
Summary: Adds a page dedicated to `display: contents` to RNTester APIs section. Those can be used to verify that it's working correctly visually. Needs https://github.com/facebook/react-native/pull/47194 ## Changelog: [INTERNAL] [ADDED] - Added `display: contents` examples to RNTester Pull Request resolved: https://github.com/facebook/react-native/pull/47201 Test Plan: Row styles are ignored in new arch and TextInputs as leaf are hidden https://www.internalfb.com/compare-screenshots-from-diff/D65248256 Reviewed By: javache Differential Revision: D65248256 Pulled By: NickGerleman fbshipit-source-id: 90410e1380e4cdb22cb4cac5c8c21e08a088ce69
This commit is contained in:
Jakub Piasecki
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
ecd138e267
commit
fd273f83e0
@@ -0,0 +1,221 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import type {RNTesterModule} from '../../types/RNTesterTypes';
|
||||
|
||||
import * as React from 'react';
|
||||
import {StyleSheet, TextInput, View, Text} from 'react-native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
contents: {
|
||||
display: 'contents',
|
||||
},
|
||||
box: {
|
||||
width: 200,
|
||||
height: 100,
|
||||
},
|
||||
wrap: {
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
tinyBox: {
|
||||
width: 50,
|
||||
height: 25,
|
||||
},
|
||||
border1: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'brown',
|
||||
},
|
||||
border2: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'magenta',
|
||||
},
|
||||
border3: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'green',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
});
|
||||
|
||||
export default ({
|
||||
title: 'Display: contents',
|
||||
category: 'UI',
|
||||
description:
|
||||
'Demonstrates various ways display: contents may be used in the tree',
|
||||
examples: [
|
||||
{
|
||||
title: 'Single display: contents node',
|
||||
name: 'single-contents-node',
|
||||
description:
|
||||
'Single display: contents node with flex-direction: row (should be ignored in layout)',
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="display-contents-test-single-node-root"
|
||||
style={[styles.box, styles.border1]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-child"
|
||||
style={[styles.box, styles.border2, styles.row, styles.contents]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-1"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-2"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Multiple display: contents nodes',
|
||||
name: 'multiple-contents-nodes',
|
||||
description:
|
||||
'Three display: contents nodes with flex-direction: row (they should be ignored in layout)',
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="display-contents-test-multiple-node-root"
|
||||
style={[styles.box, styles.border1, styles.wrap]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-child-1"
|
||||
style={[styles.box, styles.border2, styles.row, styles.contents]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-1"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-2"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
testID="display-contents-test-single-node-child-2"
|
||||
style={[styles.box, styles.border2, styles.row, styles.contents]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-3"
|
||||
style={[styles.tinyBox, styles.border2]}
|
||||
/>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-4"
|
||||
style={[styles.tinyBox, styles.border2]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
testID="display-contents-test-single-node-child-3"
|
||||
style={[styles.box, styles.border2, styles.row, styles.contents]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-5"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-6"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Nested display: contents nodes',
|
||||
name: 'nested-contents-nodes',
|
||||
description:
|
||||
'Single display: contents node with two nested display: contents nodes, each with flex-direction: row (they should be ignored in layout)',
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="display-contents-test-multiple-node-root"
|
||||
style={[styles.box, styles.border1, styles.wrap]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-child-1"
|
||||
style={[styles.box, styles.border2, styles.row, styles.contents]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-1"
|
||||
style={[styles.tinyBox, styles.border2]}
|
||||
/>
|
||||
<View
|
||||
testID="display-contents-test-single-node-grandchild-2"
|
||||
style={[styles.tinyBox, styles.border1, styles.contents]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-great-grandchild-1"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
<View
|
||||
testID="display-contents-test-single-node-great-grandchild-2"
|
||||
style={[styles.tinyBox, styles.border3]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Leaf node with display: contents',
|
||||
name: 'contents-leaf-node',
|
||||
description:
|
||||
'Single display: contents leaf node (should be ignored in layout)',
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="display-contents-test-single-node-root"
|
||||
style={[styles.box, styles.border1]}>
|
||||
<View
|
||||
testID="display-contents-test-single-node-child"
|
||||
style={[styles.tinyBox, styles.border2, styles.contents]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'TextInput with display: contents',
|
||||
name: 'contents-textinput',
|
||||
description:
|
||||
'A TextInput with display: contents style (should behave as if display: none was set)',
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View
|
||||
testID="display-contents-textinput-root"
|
||||
style={[styles.box, styles.border1, styles.wrap]}>
|
||||
<TextInput
|
||||
testID="display-contents-textinput"
|
||||
style={[
|
||||
styles.tinyBox,
|
||||
styles.border2,
|
||||
styles.row,
|
||||
styles.contents,
|
||||
]}
|
||||
/>
|
||||
<TextInput
|
||||
testID="display-contents-textinput2"
|
||||
style={[
|
||||
styles.tinyBox,
|
||||
styles.border2,
|
||||
styles.row,
|
||||
styles.contents,
|
||||
]}>
|
||||
<Text>Text1</Text>
|
||||
<Text>Text2</Text>
|
||||
</TextInput>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
}: RNTesterModule);
|
||||
@@ -202,6 +202,12 @@ const APIs: Array<RNTesterModuleInfo> = ([
|
||||
category: 'UI',
|
||||
module: require('../examples/Dimensions/DimensionsExample'),
|
||||
},
|
||||
{
|
||||
key: 'DisplayContentsExample',
|
||||
category: 'UI',
|
||||
module: require('../examples/DisplayContents/DisplayContentsExample')
|
||||
.default,
|
||||
},
|
||||
// Only show the link for the example if the API is available.
|
||||
typeof IntersectionObserver === 'function'
|
||||
? {
|
||||
|
||||
@@ -211,6 +211,12 @@ const APIs: Array<RNTesterModuleInfo> = ([
|
||||
key: 'Dimensions',
|
||||
module: require('../examples/Dimensions/DimensionsExample'),
|
||||
},
|
||||
{
|
||||
key: 'DisplayContentsExample',
|
||||
category: 'UI',
|
||||
module: require('../examples/DisplayContents/DisplayContentsExample')
|
||||
.default,
|
||||
},
|
||||
// Only show the link for the example if the API is available.
|
||||
typeof IntersectionObserver === 'function'
|
||||
? {
|
||||
|
||||
Reference in New Issue
Block a user