From 0a5851a265ca33cd52262fc026dd9c05a7f69528 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Fri, 22 Sep 2017 16:14:35 -0300 Subject: [PATCH 01/12] Fix no working on iOS --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8da182b..d24044d 100644 --- a/src/index.js +++ b/src/index.js @@ -108,7 +108,8 @@ var Accordion = React.createClass({ From d9948eaff47aa191cf7adf1e2f6205e7bff41892 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Fri, 22 Sep 2017 17:28:31 -0300 Subject: [PATCH 02/12] Passing is_visible state to header component --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index d24044d..9debbaf 100644 --- a/src/index.js +++ b/src/index.js @@ -103,7 +103,7 @@ var Accordion = React.createClass({ underlayColor={this.props.underlayColor} style={this.props.style} > - {this.props.header} + {React.cloneElement(this.props.header, { isOpen: this.state.is_visible })} Date: Fri, 22 Sep 2017 17:51:46 -0300 Subject: [PATCH 03/12] Fix header render --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 9debbaf..a2829c2 100644 --- a/src/index.js +++ b/src/index.js @@ -89,7 +89,7 @@ var Accordion = React.createClass({ setTimeout(this._getContentHeight); }, - render() { + render({ Header }) { return ( /*jshint ignore:start */ - {React.cloneElement(this.props.header, { isOpen: this.state.is_visible })} + {this.props.header({ isOpen: this.state.is_visible })} Date: Fri, 22 Sep 2017 17:56:53 -0300 Subject: [PATCH 04/12] Remove incorrect syntax --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index a2829c2..818b23c 100644 --- a/src/index.js +++ b/src/index.js @@ -89,7 +89,7 @@ var Accordion = React.createClass({ setTimeout(this._getContentHeight); }, - render({ Header }) { + render() { return ( /*jshint ignore:start */ Date: Fri, 13 Oct 2017 10:02:31 -0300 Subject: [PATCH 05/12] Fix layout issue in android --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 818b23c..175d05e 100644 --- a/src/index.js +++ b/src/index.js @@ -113,7 +113,7 @@ var Accordion = React.createClass({ }} > - {this.props.content} + {(Platform.OS === 'ios' || this.state.is_visible) ? this.props.content : null} From c31e3f3bf95efae5b0a5048583e81661441bd291 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Fri, 13 Oct 2017 10:09:55 -0300 Subject: [PATCH 06/12] Import `Platform` from `react-native` --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 175d05e..61189c8 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,8 @@ import { StyleSheet, TouchableHighlight, View, - Text + Text, + Platform } from 'react-native'; var Accordion = React.createClass({ From 1f880d850f4929a7dbf5054b309115debe6670b9 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Wed, 18 Oct 2017 14:36:51 -0300 Subject: [PATCH 07/12] import PropTypes from prop-types --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 61189c8..b5d09f9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ 'use strict'; -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import tweenState from 'react-tween-state'; import { From 03bb42330c622553aa4283c917049eab1b796df9 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Wed, 18 Oct 2017 14:44:03 -0300 Subject: [PATCH 08/12] import PropTypes from 'prop-types' --- src/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index b5d09f9..e9f291a 100644 --- a/src/index.js +++ b/src/index.js @@ -16,15 +16,15 @@ var Accordion = React.createClass({ mixins: [tweenState.Mixin], propTypes: { - activeOpacity: React.PropTypes.number, - animationDuration: React.PropTypes.number, - content: React.PropTypes.element.isRequired, - easing: React.PropTypes.string, - expanded: React.PropTypes.bool, - header: React.PropTypes.element.isRequired, - onPress: React.PropTypes.func, - underlayColor: React.PropTypes.string, - style: React.PropTypes.object + activeOpacity: PropTypes.number, + animationDuration: PropTypes.number, + content: PropTypes.element.isRequired, + easing: PropTypes.string, + expanded: PropTypes.bool, + header: PropTypes.element.isRequired, + onPress: PropTypes.func, + underlayColor: PropTypes.string, + style: PropTypes.object }, getDefaultProps() { From b37b2975902d6624e76686a8bbe66ca565d72b15 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Wed, 18 Oct 2017 17:20:59 -0300 Subject: [PATCH 09/12] Refactor to use react es6 class and Animated component --- src/index.js | 123 ++++++++++++++++++++++++--------------------------- 1 file changed, 59 insertions(+), 64 deletions(-) diff --git a/src/index.js b/src/index.js index e9f291a..fc2efd4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,78 +1,79 @@ 'use strict'; -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import tweenState from 'react-tween-state'; - import { StyleSheet, TouchableHighlight, View, Text, - Platform + Platform, + Animated } from 'react-native'; -var Accordion = React.createClass({ - mixins: [tweenState.Mixin], - - propTypes: { - activeOpacity: PropTypes.number, - animationDuration: PropTypes.number, - content: PropTypes.element.isRequired, - easing: PropTypes.string, - expanded: PropTypes.bool, - header: PropTypes.element.isRequired, - onPress: PropTypes.func, - underlayColor: PropTypes.string, - style: PropTypes.object - }, +const propTypes = { + activeOpacity: PropTypes.number, + animationDuration: PropTypes.number, + content: PropTypes.element.isRequired, + easing: PropTypes.string, + expanded: PropTypes.bool, + header: PropTypes.element.isRequired, + onPress: PropTypes.func, + underlayColor: PropTypes.string, + style: PropTypes.object +}; + +const defaultProps = { + activeOpacity: 1, + animationDuration: 300, + easing: 'linear', + expanded: false, + underlayColor: '#000', + style: {} +}; + +class Accordion extends Component { + state = { + is_visible: false, + height: new Animated.Value(0), + content_height: 0 + }; - getDefaultProps() { - return { - activeOpacity: 1, - animationDuration: 300, - easing: 'linear', - expanded: false, - underlayColor: '#000', - style: {} - }; - }, - - getInitialState() { - return { - is_visible: false, - height: 0, - content_height: 0 - }; - }, + componentDidMount() { + // Gets content height when component mounts + // without setTimeout, measure returns 0 for every value. + // See https://github.com/facebook/react-native/issues/953 + setTimeout(this._getContentHeight); + } - close() { + close = () => { this.state.is_visible && this.toggle(); - }, + }; - open() { + open = () => { !this.state.is_visible && this.toggle(); - }, + }; - toggle() { + toggle = () => { this.state.is_visible = !this.state.is_visible; - this.tweenState('height', { - easing: tweenState.easingTypes[this.props.easing], - duration: this.props.animationDuration, - endValue: this.state.height === 0 ? this.state.content_height : 0 - }); - }, + Animated.timing( + this.state.height, + toValue: this.state.height === 0 ? this.state.content_height : 0, + duration: this.props.animationDuration + ).start(); + }; - _onPress() { + _onPress = () => { this.toggle(); if (this.props.onPress) { this.props.onPress.call(this); } - }, + }; - _getContentHeight() { + _getContentHeight => () { if (this.refs.AccordionContent) { this.refs.AccordionContent.measure((ox, oy, width, height, px, py) => { // Sets content height in state @@ -82,18 +83,10 @@ var Accordion = React.createClass({ }); }); } - }, - - componentDidMount() { - // Gets content height when component mounts - // without setTimeout, measure returns 0 for every value. - // See https://github.com/facebook/react-native/issues/953 - setTimeout(this._getContentHeight); - }, + }; render() { return ( - /*jshint ignore:start */ {this.props.header({ isOpen: this.state.is_visible })} - {(Platform.OS === 'ios' || this.state.is_visible) ? this.props.content : null} - + - /*jshint ignore:end */ ); } -}); +} + +Accordion.propTypes = propTypes; +Accordion.defaultProps = defaultProps; -module.exports = Accordion; +export default Accordion; From e998a5a776ef85037e5935f8d5f709105b4ebab2 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Wed, 18 Oct 2017 17:39:43 -0300 Subject: [PATCH 10/12] Fix syntax error --- src/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index fc2efd4..b8ae153 100644 --- a/src/index.js +++ b/src/index.js @@ -60,8 +60,10 @@ class Accordion extends Component { Animated.timing( this.state.height, - toValue: this.state.height === 0 ? this.state.content_height : 0, - duration: this.props.animationDuration + { + toValue: this.state.height === 0 ? this.state.content_height : 0, + duration: this.props.animationDuration, + } ).start(); }; From a71a6bbd70c6bd6f38f53c795d79ffa8548fcbca Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Wed, 18 Oct 2017 17:45:04 -0300 Subject: [PATCH 11/12] Fix syntax error --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index b8ae153..c7aec7d 100644 --- a/src/index.js +++ b/src/index.js @@ -75,7 +75,7 @@ class Accordion extends Component { } }; - _getContentHeight => () { + _getContentHeight = () => { if (this.refs.AccordionContent) { this.refs.AccordionContent.measure((ox, oy, width, height, px, py) => { // Sets content height in state From a9cc8b769ecf770171141495e9f6115dea23e2f2 Mon Sep 17 00:00:00 2001 From: "Ernesto R. C. Pereda" Date: Wed, 18 Oct 2017 22:22:40 -0300 Subject: [PATCH 12/12] Fix issue to get height value --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index c7aec7d..ff77594 100644 --- a/src/index.js +++ b/src/index.js @@ -61,7 +61,7 @@ class Accordion extends Component { Animated.timing( this.state.height, { - toValue: this.state.height === 0 ? this.state.content_height : 0, + toValue: this.state.height._value === 0 ? this.state.content_height : 0, duration: this.props.animationDuration, } ).start(); @@ -80,7 +80,7 @@ class Accordion extends Component { this.refs.AccordionContent.measure((ox, oy, width, height, px, py) => { // Sets content height in state this.setState({ - height: this.props.expanded ? height : 0, + height: new Animated.Value(this.props.expanded ? height : 0), content_height: height }); });