mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
- Update folder structure of RNTester's JS directory. (#25013)
Summary: Changes RNTester, first attempt in the direction of improving the RNTester overall. Related ticket: #24647 Changed the `js` directory of the RNTester to have the following structure: ``` - js - assets - components - examples - types - utils ``` * **assets** _Any images, gifs, and media content_ * **components** _All shared components_ * **examples** _Example View/Components to be rendered by the App_ * **types** _Shared flow types_ * **utils** _Shared utilities_ ## Changelog [General] [Changed] - Update folder structure of RNTester's JS directory. Pull Request resolved: https://github.com/facebook/react-native/pull/25013 Differential Revision: D15515773 Pulled By: cpojer fbshipit-source-id: 0e4b6386127f338dca0ffe8c237073be53a9e221
This commit is contained in:
AndreiCalazans
committed by
Facebook Github Bot
Facebook Github Bot
parent
54abe1f599
commit
3945f10561
@@ -0,0 +1,302 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const {
|
||||
Image,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableWithoutFeedback,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewPagerAndroid,
|
||||
} = require('react-native');
|
||||
|
||||
import type {ViewPagerScrollState} from '../../../../Libraries/Components/ViewPager/ViewPagerAndroid';
|
||||
|
||||
const PAGES = 5;
|
||||
const BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];
|
||||
const IMAGE_URIS = [
|
||||
'https://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1409/m27_snyder_960.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1409/PupAmulti_rot0.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg',
|
||||
];
|
||||
|
||||
type Props = $ReadOnly<{||}>;
|
||||
type State = {|likes: number|};
|
||||
class LikeCount extends React.Component<Props, State> {
|
||||
state = {
|
||||
likes: 7,
|
||||
};
|
||||
|
||||
onClick = () => {
|
||||
this.setState({likes: this.state.likes + 1});
|
||||
};
|
||||
|
||||
render() {
|
||||
const thumbsUp = '\uD83D\uDC4D';
|
||||
return (
|
||||
<View style={styles.likeContainer}>
|
||||
<TouchableOpacity onPress={this.onClick} style={styles.likeButton}>
|
||||
<Text style={styles.likesText}>{thumbsUp + ' Like'}</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.likesText}>{this.state.likes + ' likes'}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Button extends React.Component {
|
||||
_handlePress = () => {
|
||||
if (this.props.enabled && this.props.onPress) {
|
||||
this.props.onPress();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={this._handlePress}>
|
||||
<View
|
||||
style={[
|
||||
styles.button,
|
||||
this.props.enabled ? {} : styles.buttonDisabled,
|
||||
]}>
|
||||
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ProgressBar extends React.Component {
|
||||
render() {
|
||||
const fractionalPosition =
|
||||
this.props.progress.position + this.props.progress.offset;
|
||||
const progressBarSize =
|
||||
(fractionalPosition / (PAGES - 1)) * this.props.size;
|
||||
return (
|
||||
<View style={[styles.progressBarContainer, {width: this.props.size}]}>
|
||||
<View style={[styles.progressBar, {width: progressBarSize}]} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ViewPagerAndroidExample extends React.Component {
|
||||
state = {
|
||||
page: 0,
|
||||
animationsAreEnabled: true,
|
||||
scrollEnabled: true,
|
||||
progress: {
|
||||
position: 0,
|
||||
offset: 0,
|
||||
},
|
||||
};
|
||||
|
||||
onPageSelected = e => {
|
||||
this.setState({page: e.nativeEvent.position});
|
||||
};
|
||||
|
||||
onPageScroll = e => {
|
||||
this.setState({progress: e.nativeEvent});
|
||||
};
|
||||
|
||||
onPageScrollStateChanged = (state: ViewPagerScrollState) => {
|
||||
this.setState({scrollState: state});
|
||||
};
|
||||
|
||||
move = delta => {
|
||||
const page = this.state.page + delta;
|
||||
this.go(page);
|
||||
};
|
||||
|
||||
go = page => {
|
||||
if (this.state.animationsAreEnabled) {
|
||||
this.viewPager.setPage(page);
|
||||
} else {
|
||||
this.viewPager.setPageWithoutAnimation(page);
|
||||
}
|
||||
|
||||
this.setState({page});
|
||||
};
|
||||
|
||||
render() {
|
||||
const pages = [];
|
||||
for (let i = 0; i < PAGES; i++) {
|
||||
const pageStyle = {
|
||||
backgroundColor: BGCOLOR[i % BGCOLOR.length],
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
};
|
||||
pages.push(
|
||||
<View key={i} style={pageStyle} collapsable={false}>
|
||||
<Image
|
||||
style={styles.image}
|
||||
source={{uri: IMAGE_URIS[i % BGCOLOR.length]}}
|
||||
/>
|
||||
<LikeCount />
|
||||
</View>,
|
||||
);
|
||||
}
|
||||
const {page, animationsAreEnabled} = this.state;
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ViewPagerAndroid
|
||||
style={styles.viewPager}
|
||||
initialPage={0}
|
||||
scrollEnabled={this.state.scrollEnabled}
|
||||
onPageScroll={this.onPageScroll}
|
||||
onPageSelected={this.onPageSelected}
|
||||
onPageScrollStateChanged={this.onPageScrollStateChanged}
|
||||
pageMargin={10}
|
||||
ref={viewPager => {
|
||||
this.viewPager = viewPager;
|
||||
}}>
|
||||
{pages}
|
||||
</ViewPagerAndroid>
|
||||
<View style={styles.buttons}>
|
||||
<Button
|
||||
enabled={true}
|
||||
text={
|
||||
this.state.scrollEnabled ? 'Scroll Enabled' : 'Scroll Disabled'
|
||||
}
|
||||
onPress={() =>
|
||||
this.setState({scrollEnabled: !this.state.scrollEnabled})
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.buttons}>
|
||||
{animationsAreEnabled ? (
|
||||
<Button
|
||||
text="Turn off animations"
|
||||
enabled={true}
|
||||
onPress={() => this.setState({animationsAreEnabled: false})}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
text="Turn animations back on"
|
||||
enabled={true}
|
||||
onPress={() => this.setState({animationsAreEnabled: true})}
|
||||
/>
|
||||
)}
|
||||
<Text style={styles.scrollStateText}>
|
||||
ScrollState[ {this.state.scrollState} ]
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.buttons}>
|
||||
<Button text="Start" enabled={page > 0} onPress={() => this.go(0)} />
|
||||
<Button
|
||||
text="Prev"
|
||||
enabled={page > 0}
|
||||
onPress={() => this.move(-1)}
|
||||
/>
|
||||
<Text style={styles.buttonText}>
|
||||
Page {page + 1} / {PAGES}
|
||||
</Text>
|
||||
<ProgressBar size={100} progress={this.state.progress} />
|
||||
<Button
|
||||
text="Next"
|
||||
enabled={page < PAGES - 1}
|
||||
onPress={() => this.move(1)}
|
||||
/>
|
||||
<Button
|
||||
text="Last"
|
||||
enabled={page < PAGES - 1}
|
||||
onPress={() => this.go(PAGES - 1)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
buttons: {
|
||||
flexDirection: 'row',
|
||||
height: 30,
|
||||
backgroundColor: 'black',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
margin: 5,
|
||||
borderColor: 'gray',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'gray',
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: 'black',
|
||||
opacity: 0.5,
|
||||
},
|
||||
buttonText: {
|
||||
color: 'white',
|
||||
},
|
||||
scrollStateText: {
|
||||
color: '#99d1b7',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
image: {
|
||||
width: 300,
|
||||
height: 200,
|
||||
padding: 20,
|
||||
},
|
||||
likeButton: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderColor: '#333333',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
flex: 1,
|
||||
margin: 8,
|
||||
padding: 8,
|
||||
},
|
||||
likeContainer: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
likesText: {
|
||||
flex: 1,
|
||||
fontSize: 18,
|
||||
alignSelf: 'center',
|
||||
},
|
||||
progressBarContainer: {
|
||||
height: 10,
|
||||
margin: 10,
|
||||
borderColor: '#eeeeee',
|
||||
borderWidth: 2,
|
||||
},
|
||||
progressBar: {
|
||||
alignSelf: 'flex-start',
|
||||
flex: 1,
|
||||
backgroundColor: '#eeeeee',
|
||||
},
|
||||
viewPager: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
exports.title = '<ViewPagerAndroid>';
|
||||
exports.description =
|
||||
'Container that allows to flip left and right between child views.';
|
||||
|
||||
exports.examples = [
|
||||
{
|
||||
title: 'Basic pager',
|
||||
render(): React.Element<typeof ViewPagerAndroidExample> {
|
||||
return <ViewPagerAndroidExample />;
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user