From 91609f05290c0e0513f54bbcb5d915e39e2b41b2 Mon Sep 17 00:00:00 2001 From: Lars Vinter Date: Thu, 23 Feb 2017 15:29:02 +0100 Subject: [PATCH] 1.8.0 release --- README.md | 39 +++++++++++++++++------------ examples/Advanced/index.ios.js | 4 +++ examples/Advanced/package.json | 45 +++++++++++++++++----------------- examples/Simple/package.json | 2 +- package.json | 2 +- src/AwesomeButton.js | 12 ++++++++- src/ButtonView.js | 14 ++++++++++- 7 files changed, 77 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 4617084..a9ef947 100644 --- a/README.md +++ b/README.md @@ -28,8 +28,7 @@ import React, { Component } from 'react'; import { AppRegistry, View, - StyleSheet, - Text + StyleSheet } from 'react-native'; import AwesomeButton from 'react-native-awesome-button'; @@ -40,19 +39,19 @@ const styles = StyleSheet.create({ margin: 30, marginTop: 560 } -}) +}); class Simple extends Component { handleButtonPress() { - console.log('I was pressed') + console.log('I was pressed'); } render() { return ( - ) + ); } } -AppRegistry.registerComponent('Simple', () => Simple) +AppRegistry.registerComponent('Simple', () => Simple); ``` @@ -97,10 +96,11 @@ import React, { Component } from 'react'; import { AppRegistry, View, - StyleSheet, - Text + StyleSheet } from 'react-native'; import AwesomeButton from 'react-native-awesome-button'; +import { Icon } from 'react-native-material-design'; + const styles = StyleSheet.create({ container: { @@ -109,7 +109,7 @@ const styles = StyleSheet.create({ margin: 30, marginTop: 560 } -}) +}); export default class Advanced extends Component { constructor(props) { @@ -123,7 +123,7 @@ export default class Advanced extends Component { handleLogin() { this.setState({ buttonState: 'busy' }); setTimeout(() => { - this.setState({ buttonState: 'success' }) + this.setState({ buttonState: 'success' }); }, 2500); } @@ -131,9 +131,11 @@ export default class Advanced extends Component { return ( , + iconAlignment: 'left', backgroundStyle: { backgroundColor: 'blue', minHeight: 60, @@ -166,15 +168,14 @@ export default class Advanced extends Component { alignItems: 'center', justifyContent: 'center', borderRadius: 30 - }, - onPress: this.handleButtonPress + } } }} transitionDuration={400} buttonState={this.state.buttonState} /> - ) + ); } } @@ -212,11 +213,17 @@ Each state in the states object should have a unique key. For each of these keys |**`onPress`**|`function`|The function fired when the button is pressed. If not defined the button has no press functionality and simply renders as a view| |**`spinner`**|`bool`|If true the button will show a spinner on the left hand side of the label when in this state| |**`text`**|`string`|The label of the button when in this state| +|**`icon`**|`string`|The view (e.g. an icon) to render next to the text (any View will be accepted| +|**`iconAlignment`**|`string`|Whether to put icon on the left hand or right hand side of text. Accepts 'left' or 'right'| |**`backgroundStyle`**|`object`|An object with styling for the background view of the button in the given state| |**`labelStyle`**|`object`|An object with styling for the label text of the button in the given state| ### Versions +v 1.8.0 + - Added feature to include an icon (any View will be accepted) to left or right hand side of text (see Advanced example) + - Fixed linting errors in examples + v 1.7.0 Major refactoring adding several improvements (and a few breaking changes): - Background Style now accepts same styling properties as the component View - Label Style now accepts same styling properties as the component Text @@ -227,6 +234,8 @@ v 1.7.0 Major refactoring adding several improvements (and a few breaking chang ### Roadmap - Add tests - Add animations on other props (e.g. labelStyle or width) + - Add smooth fade in/out of text at "center timing" of animation to sync effects + - Add Android examples ### Contributing diff --git a/examples/Advanced/index.ios.js b/examples/Advanced/index.ios.js index 38b2e94..71ea48f 100644 --- a/examples/Advanced/index.ios.js +++ b/examples/Advanced/index.ios.js @@ -5,6 +5,8 @@ import { StyleSheet } from 'react-native'; import AwesomeButton from 'react-native-awesome-button'; +import { Icon } from 'react-native-material-design'; + const styles = StyleSheet.create({ container: { @@ -38,6 +40,8 @@ export default class Advanced extends Component { states={{ idle: { text: 'Log In', + icon: , + iconAlignment: 'left', backgroundStyle: { backgroundColor: 'blue', minHeight: 60, diff --git a/examples/Advanced/package.json b/examples/Advanced/package.json index 6a35f92..9866f46 100644 --- a/examples/Advanced/package.json +++ b/examples/Advanced/package.json @@ -1,23 +1,24 @@ { - "name": "Advanced", - "version": "0.0.1", - "private": true, - "scripts": { - "start": "node node_modules/react-native/local-cli/cli.js start", - "test": "jest" - }, - "dependencies": { - "react": "15.4.2", - "react-native": "0.41.2", - "react-native-awesome-button": "1.7.0" - }, - "devDependencies": { - "babel-jest": "19.0.0", - "babel-preset-react-native": "1.9.1", - "jest": "19.0.1", - "react-test-renderer": "15.4.2" - }, - "jest": { - "preset": "react-native" - } -} \ No newline at end of file + "name": "Advanced", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "node node_modules/react-native/local-cli/cli.js start", + "test": "jest" + }, + "dependencies": { + "react": "15.4.2", + "react-native": "0.41.2", + "react-native-awesome-button": "^1.8.0", + "react-native-material-design": "^0.3.7" + }, + "devDependencies": { + "babel-jest": "19.0.0", + "babel-preset-react-native": "1.9.1", + "jest": "19.0.1", + "react-test-renderer": "15.4.2" + }, + "jest": { + "preset": "react-native" + } +} diff --git a/examples/Simple/package.json b/examples/Simple/package.json index 7658d17..9697832 100644 --- a/examples/Simple/package.json +++ b/examples/Simple/package.json @@ -9,7 +9,7 @@ "dependencies": { "react": "15.4.2", "react-native": "0.41.2", - "react-native-awesome-button": "1.7.0" + "react-native-awesome-button": "1.8.0" }, "devDependencies": { "babel-jest": "19.0.0", diff --git a/package.json b/package.json index bc3c3f4..3982ab6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-awesome-button", - "version": "1.7.0", + "version": "1.8.0", "description": "A React Native component rendering a button supporting showing different appearances and functionality given the passed props", "main": "index.js", "scripts": { diff --git a/src/AwesomeButton.js b/src/AwesomeButton.js index 70e7ef3..32597b5 100644 --- a/src/AwesomeButton.js +++ b/src/AwesomeButton.js @@ -44,7 +44,15 @@ class AwesomeButton extends Component { } render() { - const { backgroundStyle, labelStyle, text, spinner, onPress } = this.state.viewState; + const { + backgroundStyle, + labelStyle, + text, + spinner, + onPress, + icon, + iconAlignment + } = this.state.viewState; const backgroundColor = this.state.backgroundColor.interpolate({ inputRange: [0, 1], outputRange: this.state.prevBackgroundColor ? @@ -60,6 +68,8 @@ class AwesomeButton extends Component { spinner={spinner} onPress={onPress} disabled={onPress ? false : true} + icon={icon} + iconAlignment={iconAlignment} /> ); diff --git a/src/ButtonView.js b/src/ButtonView.js index 630cdab..e184c02 100644 --- a/src/ButtonView.js +++ b/src/ButtonView.js @@ -15,11 +15,19 @@ const ButtonView = (props) => { > + { (props.icon && props.iconAlignment === 'left') ? + props.icon + : null + } { props.spinner ? : null } {props.text} + { (props.icon && props.iconAlignment === 'right') ? + props.icon + : null + } @@ -33,7 +41,9 @@ ButtonView.propTypes = { text: PropTypes.string, onPress: PropTypes.func, spinner: PropTypes.bool, - disabled: PropTypes.bool + disabled: PropTypes.bool, + icon: PropTypes.element, + iconAlignment: PropTypes.string }; ButtonView.defaultProps = { @@ -54,6 +64,8 @@ ButtonView.defaultProps = { text: 'Click here', spinner: false, disabled: true, + icon: null, + iconAlignment: null, onPress: (() => {}) // work-around to suppress eslinters no-default-prop };