Skip to content

Commit

Permalink
Migrate rn-tester/js/examples/Layout/LayoutExample.js to function com…
Browse files Browse the repository at this point in the history 
…ponents (#48646)

Summary:

As per title.

Changelog: [Internal]

Differential Revision: D68098856
  • Loading branch information
@fabriziocucci @facebook-github-bot
fabriziocucci authored and facebook-github-bot committed Jan 13, 2025
1 parent cde8713 commit 105a233
Showing 1 changed file with 163 additions and 161 deletions.
324 changes: 163 additions & 161 deletions packages/rn-tester/js/examples/Layout/LayoutExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,179 +10,181 @@

'use strict';

import type {ViewStyleProp} from 'StyleSheet';

import RNTesterBlock from '../../components/RNTesterBlock';
import RNTesterPage from '../../components/RNTesterPage';
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
import {StyleSheet, View} from 'react-native';

class Circle extends React.Component<$FlowFixMeProps> {
render(): React.Node {
const size = this.props.size || 20;
const backgroundColor = this.props.bgColor || '#527fe4';
return (
<View
style={{
borderRadius: size / 2,
backgroundColor: backgroundColor,
width: size,
height: size,
margin: 1,
}}
/>
);
}
type CicleProps = $ReadOnly<{
backgroundColor?: string,
size?: number,
}>;

function Circle({
backgroundColor = '#527fe4',
size = 20,
}: CicleProps): React.Node {
return (
<View
style={{
borderRadius: size / 2,
backgroundColor: backgroundColor,
width: size,
height: size,
margin: 1,
}}
/>
);
}

class CircleBlock extends React.Component<$FlowFixMeProps> {
render(): React.Node {
const circleStyle = {
flexDirection: 'row',
backgroundColor: '#f6f7f8',
borderWidth: 0.5,
borderColor: '#d6d7da',
marginBottom: 2,
};
return (
<View style={[circleStyle, this.props.style]}>{this.props.children}</View>
);
}
type CircleBlockProps = $ReadOnly<{
children: React.Node,
style: ViewStyleProp,
}>;

function CircleBlock({children, style}: CircleBlockProps): React.Node {
const circleStyle = {
flexDirection: 'row',
backgroundColor: '#f6f7f8',
borderWidth: 0.5,
borderColor: '#d6d7da',
marginBottom: 2,
};
return <View style={[circleStyle, style]}>{children}</View>;
}

class LayoutExample extends React.Component<$FlowFixMeProps> {
render(): React.Node {
const fiveColoredCircles = [
<Circle bgColor="#527fe4" key="blue" />,
<Circle bgColor="#D443E3" key="violet" />,
<Circle bgColor="#FF9049" key="orange" />,
<Circle bgColor="#FFE649" key="yellow" />,
<Circle bgColor="#7FE040" key="green" />,
];
function LayoutExample(): React.Node {
const fiveColoredCircles = [
<Circle backgroundColor="#527fe4" key="blue" />,
<Circle backgroundColor="#D443E3" key="violet" />,
<Circle backgroundColor="#FF9049" key="orange" />,
<Circle backgroundColor="#FFE649" key="yellow" />,
<Circle backgroundColor="#7FE040" key="green" />,
];

return (
<RNTesterPage title={this.props.navigator ? null : 'Layout'}>
<RNTesterBlock title="Flex Direction">
<RNTesterText>row</RNTesterText>
<CircleBlock style={{flexDirection: 'row'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>row-reverse</RNTesterText>
<CircleBlock style={{flexDirection: 'row-reverse'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>column</RNTesterText>
<CircleBlock style={{flexDirection: 'column'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>column-reverse</RNTesterText>
<CircleBlock style={{flexDirection: 'column-reverse'}}>
{fiveColoredCircles}
</CircleBlock>
<View
style={[
styles.overlay,
{position: 'absolute', top: 15, left: 160},
]}>
<RNTesterText style={{color: 'black'}}>
{'top: 15, left: 160'}
</RNTesterText>
</View>
</RNTesterBlock>
return (
<RNTesterPage title={'Layout'}>
<RNTesterBlock title="Flex Direction">
<RNTesterText>row</RNTesterText>
<CircleBlock style={{flexDirection: 'row'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>row-reverse</RNTesterText>
<CircleBlock style={{flexDirection: 'row-reverse'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>column</RNTesterText>
<CircleBlock style={{flexDirection: 'column'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>column-reverse</RNTesterText>
<CircleBlock style={{flexDirection: 'column-reverse'}}>
{fiveColoredCircles}
</CircleBlock>
<View
style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
<RNTesterText style={{color: 'black'}}>
{'top: 15, left: 160'}
</RNTesterText>
</View>
</RNTesterBlock>

<RNTesterBlock title="Justify Content - Main Direction">
<RNTesterText>flex-start</RNTesterText>
<CircleBlock style={{justifyContent: 'flex-start'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>center</RNTesterText>
<CircleBlock style={{justifyContent: 'center'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>flex-end</RNTesterText>
<CircleBlock style={{justifyContent: 'flex-end'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>space-between</RNTesterText>
<CircleBlock style={{justifyContent: 'space-between'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>space-around</RNTesterText>
<CircleBlock style={{justifyContent: 'space-around'}}>
{fiveColoredCircles}
</CircleBlock>
</RNTesterBlock>
<RNTesterBlock title="Align Items - Other Direction">
<RNTesterText>flex-start</RNTesterText>
<CircleBlock style={{alignItems: 'flex-start', height: 30}}>
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={8} />
</CircleBlock>
<RNTesterText>center</RNTesterText>
<CircleBlock style={{alignItems: 'center', height: 30}}>
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={8} />
</CircleBlock>
<RNTesterText>flex-end</RNTesterText>
<CircleBlock style={{alignItems: 'flex-end', height: 30}}>
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={8} />
</CircleBlock>
</RNTesterBlock>
<RNTesterBlock title="Flex Wrap">
<CircleBlock style={{flexWrap: 'wrap'}}>
{'oooooooooooooooo'.split('').map((char, i) => (
<Circle key={i} />
))}
</CircleBlock>
</RNTesterBlock>
</RNTesterPage>
);
}
<RNTesterBlock title="Justify Content - Main Direction">
<RNTesterText>flex-start</RNTesterText>
<CircleBlock style={{justifyContent: 'flex-start'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>center</RNTesterText>
<CircleBlock style={{justifyContent: 'center'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>flex-end</RNTesterText>
<CircleBlock style={{justifyContent: 'flex-end'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>space-between</RNTesterText>
<CircleBlock style={{justifyContent: 'space-between'}}>
{fiveColoredCircles}
</CircleBlock>
<RNTesterText>space-around</RNTesterText>
<CircleBlock style={{justifyContent: 'space-around'}}>
{fiveColoredCircles}
</CircleBlock>
</RNTesterBlock>
<RNTesterBlock title="Align Items - Other Direction">
<RNTesterText>flex-start</RNTesterText>
<CircleBlock style={{alignItems: 'flex-start', height: 30}}>
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={8} />
</CircleBlock>
<RNTesterText>center</RNTesterText>
<CircleBlock style={{alignItems: 'center', height: 30}}>
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={8} />
</CircleBlock>
<RNTesterText>flex-end</RNTesterText>
<CircleBlock style={{alignItems: 'flex-end', height: 30}}>
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={10} />
<Circle size={20} />
<Circle size={17} />
<Circle size={12} />
<Circle size={15} />
<Circle size={8} />
</CircleBlock>
</RNTesterBlock>
<RNTesterBlock title="Flex Wrap">
<CircleBlock style={{flexWrap: 'wrap'}}>
{'oooooooooooooooo'.split('').map((char, i) => (
<Circle key={i} />
))}
</CircleBlock>
</RNTesterBlock>
</RNTesterPage>
);
}

const styles = StyleSheet.create({
Expand Down

0 comments on commit 105a233

Please sign in to comment.