kylefang/react-native-paper
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-paper.git synced 2026-06-16 20:01:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: refactor of ProgressBar component (#735)

Browse Source
This commit is contained in:
Julian Hundeloh
2019-04-11 11:03:08 +02:00
committed by Dawid
parent 8c41503c18
commit b3df217e61
12 changed files with 478 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
example/src/Examples/ProgressBarExample.js
View File

@@ -3,6 +3,7 @@
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import {
Button,
ProgressBar,
Paragraph,
Colors,
@@ -16,43 +17,73 @@ type Props = {
type State = {
progress: number,
visible: boolean,
};
class ProgressBarExample extends React.Component<Props, State> {
static title = 'Progress Bar';
state = {
progress: 0,
progress: 0.3,
visible: true,
};
componentDidMount() {
this._interval = setInterval(
() =>
this.setState(state => ({
progress: state.progress < 1 ? state.progress + 0.01 : 0,
})),
16
);
}
componentWillUnmount() {
clearInterval(this._interval);
}
_interval: IntervalID;
render() {
const {
theme: {
colors: { background },
},
} = this.props;
return (
<View style={[styles.container, { backgroundColor: background }]}>
<Paragraph>ProgressBar primary color</Paragraph>
<ProgressBar progress={this.state.progress} />
<Paragraph>ProgressBar custom color</Paragraph>
<ProgressBar progress={this.state.progress} color={Colors.red800} />
<Button onPress={() => this.setState({ visible: !this.state.visible })}>
Toggle visible
</Button>
<Button onPress={() => this.setState({ progress: Math.random() })}>
Random progress
</Button>
<View style={styles.row}>
<Paragraph>Default ProgressBar </Paragraph>
<ProgressBar
progress={this.state.progress}
visible={this.state.visible}
/>
</View>
<View style={styles.row}>
<Paragraph>Indeterminate ProgressBar</Paragraph>
<ProgressBar indeterminate visible={this.state.visible} />
</View>
<View style={styles.row}>
<Paragraph>ProgressBar with custom color</Paragraph>
<ProgressBar
progress={this.state.progress}
visible={this.state.visible}
color={Colors.red800}
/>
</View>
<View style={styles.row}>
<Paragraph>ProgressBar with custom background color</Paragraph>
<ProgressBar
progress={this.state.progress}
visible={this.state.visible}
color={Colors.red800}
style={{ backgroundColor: Colors.teal500 }}
/>
</View>
<View style={styles.row}>
<Paragraph>ProgressBar with custom height</Paragraph>
<ProgressBar
progress={this.state.progress}
visible={this.state.visible}
style={{ height: 20 }}
/>
</View>
</View>
);
}
@@ -62,6 +93,10 @@ const styles = StyleSheet.create({
flex: 1,
padding: 16,
},
row: {
marginVertical: 10,
},
});
export default withTheme(ProgressBarExample);