From 527fd61cc8216211eb9ad9f1386f4c326f7d432c Mon Sep 17 00:00:00 2001 From: Ishaan Parikh Date: Tue, 21 Jun 2016 09:36:41 -0700 Subject: [PATCH 1/6] editing imports --- ProgressBar.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index 53dd792..0198742 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -1,11 +1,10 @@ -var React = require('react-native'); - -var { +import React from 'react-native'; +import { Animated, Easing, StyleSheet, View -} = React; +} from 'react-native'; var styles = StyleSheet.create({ background: { From a987587b05b0f1aca3c8b8d9e5dfb6454c0d3551 Mon Sep 17 00:00:00 2001 From: Ishaan Parikh Date: Tue, 21 Jun 2016 12:44:07 -0700 Subject: [PATCH 2/6] mistake --- ProgressBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ProgressBar.js b/ProgressBar.js index 0198742..8b6d053 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -1,4 +1,4 @@ -import React from 'react-native'; +import React from 'react'; import { Animated, Easing, From 65e16992810b8a2672125d758ee02d864a8cc966 Mon Sep 17 00:00:00 2001 From: yasemincidem Date: Wed, 16 Nov 2016 11:26:47 +0300 Subject: [PATCH 3/6] Flexbox used instead of fixed width so progressbar will be flexible. --- ProgressBar.js | 96 +++++++++++++++++++++++++++----------------------- 1 file changed, 51 insertions(+), 45 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index a21e79e..c760fb0 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -8,60 +8,66 @@ import { } from 'react-native'; var styles = StyleSheet.create({ - background: { - backgroundColor: '#bbbbbb', - height: 5, - overflow: 'hidden' - }, - fill: { - backgroundColor: '#3b5998', - height: 5 - } + background: { + backgroundColor: '#bbbbbb', + height: 5, + overflow: 'hidden' + }, + fill: { + backgroundColor: '#3b5998', + height: 5 + } }); var ProgressBar = React.createClass({ - getDefaultProps() { - return { - style: styles, - easing: Easing.inOut(Easing.ease), - easingDuration: 500 - }; - }, - - getInitialState() { - return { - progress: new Animated.Value(this.props.initialProgress || 0) - }; - }, + getDefaultProps() { + return { + style: styles, + easing: Easing.inOut(Easing.ease), + easingDuration: 500 + }; + }, - componentDidUpdate(prevProps, prevState) { - if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { - this.update(); - } - }, + getInitialState() { + return { + progress: new Animated.Value(this.props.initialProgress || 0), + calculatedWidth: 0 + }; + }, - render() { + componentDidUpdate(prevProps, prevState) { + if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { + this.update(); + } + }, - var fillWidth = this.state.progress.interpolate({ - inputRange: [0, 1], - outputRange: [0 * this.props.style.width, 1 * this.props.style.width], - }); + render() { + var fillWidth = this.state.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ), + 1 * (this.props.style.width || this.state.calculatedWidth)], + }); - return ( - - - - ); - }, + return ( + { + if (!this.props.style.width) { + this.setState({calculatedWidth: event.nativeEvent.layout.width}) + } + }}> + + + ); + }, - update() { - Animated.timing(this.state.progress, { - easing: this.props.easing, - duration: this.props.easingDuration, - toValue: this.props.progress - }).start(); - } + update() { + Animated.timing(this.state.progress, { + easing: this.props.easing, + duration: this.props.easingDuration, + toValue: this.props.progress + }).start(); + } }); module.exports = ProgressBar; From d93f1ecf1795442c756f17268f569c14c491690e Mon Sep 17 00:00:00 2001 From: yasemincidem Date: Wed, 16 Nov 2016 11:50:51 +0300 Subject: [PATCH 4/6] code refactor --- ProgressBar.js | 103 +++++++++++++++++++++++++------------------------ 1 file changed, 52 insertions(+), 51 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index c760fb0..25c9e10 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -8,66 +8,67 @@ import { } from 'react-native'; var styles = StyleSheet.create({ - background: { - backgroundColor: '#bbbbbb', - height: 5, - overflow: 'hidden' - }, - fill: { - backgroundColor: '#3b5998', - height: 5 - } + background: { + backgroundColor: '#bbbbbb', + height: 5, + overflow: 'hidden' + }, + fill: { + backgroundColor: '#3b5998', + height: 5 + } }); var ProgressBar = React.createClass({ - getDefaultProps() { - return { - style: styles, - easing: Easing.inOut(Easing.ease), - easingDuration: 500 - }; - }, + getDefaultProps() { + return { + style: styles, + easing: Easing.inOut(Easing.ease), + easingDuration: 500 + }; + }, + + getInitialState() { + return { + progress: new Animated.Value(this.props.initialProgress || 0), + calculatedWidth: 0 + }; + }, - getInitialState() { - return { - progress: new Animated.Value(this.props.initialProgress || 0), - calculatedWidth: 0 - }; - }, + componentDidUpdate(prevProps, prevState) { + if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { + this.update(); + } + }, - componentDidUpdate(prevProps, prevState) { - if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { - this.update(); - } - }, + render() { - render() { - var fillWidth = this.state.progress.interpolate({ - inputRange: [0, 1], - outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ), - 1 * (this.props.style.width || this.state.calculatedWidth)], - }); + var fillWidth = this.state.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ), + 1 * (this.props.style.width || this.state.calculatedWidth)] + }); - return ( - { - if (!this.props.style.width) { - this.setState({calculatedWidth: event.nativeEvent.layout.width}) - } - }}> - - - ); - }, + return ( + { + if (!this.props.style.width) { + this.setState({calculatedWidth: event.nativeEvent.layout.width}) + } + }}> + + + ); + }, - update() { - Animated.timing(this.state.progress, { - easing: this.props.easing, - duration: this.props.easingDuration, - toValue: this.props.progress - }).start(); - } + update() { + Animated.timing(this.state.progress, { + easing: this.props.easing, + duration: this.props.easingDuration, + toValue: this.props.progress + }).start(); + } }); module.exports = ProgressBar; From bdb03a062383dffcf98510d4d1799226b507736d Mon Sep 17 00:00:00 2001 From: stantoncbradley Date: Tue, 19 Sep 2017 10:09:28 -0700 Subject: [PATCH 5/6] update syntax --- ProgressBar.js | 84 ++++++++++++++++++++++++-------------------------- 1 file changed, 41 insertions(+), 43 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index 25c9e10..7ab2d0d 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -1,74 +1,72 @@ import React from 'react'; import { StyleSheet, - Text, View, Animated, Easing, } from 'react-native'; -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ background: { backgroundColor: '#bbbbbb', height: 5, - overflow: 'hidden' + overflow: 'hidden', }, fill: { backgroundColor: '#3b5998', - height: 5 - } -}); - -var ProgressBar = React.createClass({ - - getDefaultProps() { - return { - style: styles, - easing: Easing.inOut(Easing.ease), - easingDuration: 500 - }; + height: 5, }, +}); - getInitialState() { - return { +class ProgressBar extends React.Component { + constructor() { + super(); + this.state = { progress: new Animated.Value(this.props.initialProgress || 0), - calculatedWidth: 0 + calculatedWidth: 0, }; - }, + } - componentDidUpdate(prevProps, prevState) { - if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { + componentDidUpdate(prevProps) { + if (this.props.progress >= 0 && this.props.progress !== prevProps.progress) { this.update(); } - }, + } - render() { + update() { + Animated.timing(this.state.progress, { + easing: this.props.easing, + duration: this.props.easingDuration, + toValue: this.props.progress, + }).start(); + } - var fillWidth = this.state.progress.interpolate({ + render() { + const fillWidth = this.state.progress.interpolate({ inputRange: [0, 1], - outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ), - 1 * (this.props.style.width || this.state.calculatedWidth)] + outputRange: [0 * (this.props.style.width || this.state.calculatedWidth), + 1 * (this.props.style.width || this.state.calculatedWidth)], }); return ( - { - if (!this.props.style.width) { - this.setState({calculatedWidth: event.nativeEvent.layout.width}) - } - }}> - + { + if (!this.props.style.width) { + this.setState({ calculatedWidth: event.nativeEvent.layout.width }); + } + }} + > + ); - }, - - update() { - Animated.timing(this.state.progress, { - easing: this.props.easing, - duration: this.props.easingDuration, - toValue: this.props.progress - }).start(); } -}); +} + +ProgressBar.defaultProps = { + style: styles, + easing: Easing.inOut(Easing.ease), + easingDuration: 500, +}; -module.exports = ProgressBar; +export default ProgressBar; From 2d7277402163c81eaae9f568f2f0c8401f95266e Mon Sep 17 00:00:00 2001 From: stantoncbradley Date: Tue, 19 Sep 2017 10:18:22 -0700 Subject: [PATCH 6/6] pass props into constructor --- ProgressBar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index 7ab2d0d..ceb0dc5 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -19,8 +19,8 @@ const styles = StyleSheet.create({ }); class ProgressBar extends React.Component { - constructor() { - super(); + constructor(props) { + super(props); this.state = { progress: new Animated.Value(this.props.initialProgress || 0), calculatedWidth: 0,