Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Active styles + different header when expanded #38

Closed
wants to merge 3 commits into from
Closed

Active styles + different header when expanded #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a801c7
add visible state & conditions
ntwcklng Sep 28, 2016
b6dc745
typo
ntwcklng Sep 28, 2016
7e66235
examples in readme
ntwcklng Sep 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ var YourComponent = React.createClass({
<Text>Click to Expand</Text>
</View>
);
var headerOpen = (
<View style={...}>
<Text>Expanded</Text>
</View>
);

var content = (
<View style={...}>
Expand All @@ -50,7 +55,9 @@ var YourComponent = React.createClass({
return (
<Accordion
header={header}
headerOpen={headerOpen}
content={content}
styleOpen={{backgroundColor: 'red'}}
easing="easeOutCubic"
/>
);
Expand All @@ -76,9 +83,11 @@ The following props can be used to modify the Accordion's style and/or behaviour
|__`easing`__|_String_|Optional|`linear`| A tweening function from [tween-functions](https://github.com/chenglou/tween-functions).
|__`expanded`__|_Boolean_|Optional|`false`|If the accordion is expanded by default when mounted.
|__`header`__|_Element_|Required|`N/A`|The element that will expand the accordion when pressed.
|__`headerOpen`__|_Element_|Optional|`N/A`|The element that will be visible when the accordion is expanded.
|__`onPress`__|_Function_|Optional|`N/A`|A function that will be called when the accordion is pressed.
|__`underlayColor`__|_String_|Optional|`#000`|The underlay color of the [TouchableHighlight](https://facebook.github.io/react-native/docs/touchablehighlight.html).
|__`style`__|_Object_|Optional|`{}`|The styles you want to set on the accordion element.
|__`styleOpen`__|_Object_|Optional|`{}`|The styles you want to set on the accordion element when its expanded.

## Methods
The following methods can be used to open and close the accordion:
Expand Down
8 changes: 5 additions & 3 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ var Accordion = React.createClass({
easing: React.PropTypes.string,
expanded: React.PropTypes.bool,
header: React.PropTypes.element.isRequired,
headerOpen: React.PropTypes.element,
onPress: React.PropTypes.func,
underlayColor: React.PropTypes.string,
style: React.PropTypes.object
style: React.PropTypes.object,
styleOpen: React.PropTypes.object,
},

getDefaultProps() {
Expand Down Expand Up @@ -101,9 +103,9 @@ var Accordion = React.createClass({
ref="AccordionHeader"
onPress={this._onPress}
underlayColor={this.props.underlayColor}
style={this.props.style}
style={this.state.is_visible ? this.props.styleOpen : this.props.style}
>
{this.props.header}
{this.state.is_visible && this.props.headerOpen ? this.props.headerOpen : this.props.header}
</TouchableHighlight>
<View
ref="AccordionContentWrapper"
Expand Down