import React from 'react';
import {shouldComponentUpdate} from 'react-addons-pure-render-mixin';
import Collapse from '..';
import * as style from './style';

const localStyle = height => ({
  content: {
    height,
    background: 'rgba(96, 125, 139, 0.6)',
    borderRadius: height / 2
  }
});


const VariableHeight = React.createClass({
  getInitialState() {
    return {isOpened: false, height: 100};
  },


  shouldComponentUpdate,


  onChange({target: {value: height}}) {
    this.setState({height});
  },


  onToggle() {
    const {isOpened} = this.state;

    this.setState({isOpened: !isOpened});
  },


  render() {
    const {isOpened, height} = this.state;

    return (
      <div>

        <div style={style.config}>
          <button onClick={this.onToggle}>{isOpened ? 'Close' : 'Open'}</button>
          &nbsp;
          Content height:
          &nbsp;
          <input type="range" step={50} min={0} max={500}
            value={height} onChange={this.onChange} />
        </div>

        <Collapse isOpened={isOpened} style={style.container}>
          <div style={{...localStyle(height).content, height}}></div>
        </Collapse>

      </div>
    );
  }
});


export default VariableHeight;

@@ -114,16 +114,25 @@
 from '..
+/Collapse
 ';%0Aimpor
@@ -165,146 +165,8 @@
 ';%0A%0A
-const localStyle = height =%3E (%7B%0A  content: %7B%0A    height,%0A    background: 'rgba(96, 125, 139, 0.6)',%0A    borderRadius: height / 2%0A  %7D%0A%7D);%0A%0A
 %0Acon
@@ -308,184 +308,8 @@
 ,%0A%0A%0A
-  onChange(%7Btarget: %7Bvalue: height%7D%7D) %7B%0A    this.setState(%7Bheight%7D);%0A  %7D,%0A%0A%0A  onToggle() %7B%0A    const %7BisOpened%7D = this.state;%0A%0A    this.setState(%7BisOpened: !isOpened%7D);%0A  %7D,%0A%0A%0A
   re
@@ -382,25 +382,24 @@
       %3Cdiv%3E%0A
-%0A
         %3Cdiv
@@ -436,95 +436,303 @@
    %3C
-button onClick=%7Bthis.onToggle%7D%3E%7BisOpened ? 'Close' : 'Open'%7D%3C/button%3E%0A          &nbsp;%0A
+label style=%7Bstyle.label%7D%3E%0A            Opened:%0A            %3Cinput style=%7Bstyle.input%7D%0A              type=%22checkbox%22%0A              value=%7BisOpened%7D%0A              onChange=%7B(%7Btarget: %7Bchecked%7D%7D) =%3E this.setState(%7BisOpened: checked%7D)%7D /%3E%0A          %3C/label%3E%0A%0A          %3Clabel style=%7Bstyle.label%7D%3E%0A  
     
@@ -767,14 +767,36 @@
     
-&nbsp;
+  %3Cinput style=%7Bstyle.input%7D
 %0A   
@@ -802,22 +802,19 @@
         
-%3Cinput
+   
  type=%22r
@@ -818,16 +818,45 @@
 =%22range%22
+%0A              value=%7Bheight%7D
  step=%7B5
@@ -892,49 +892,116 @@
     
-value=%7Bheight%7D onChange=%7Bthis.onChange%7D /
+  onChange=%7B(%7Btarget: %7Bvalue%7D%7D) =%3E this.setState(%7Bheight: value%7D)%7D /%3E%0A            %7Bheight%7D%0A          %3C/label
 %3E%0A  
@@ -1107,34 +1107,32 @@
 %7B...
-localStyle(height).content
+style.getContent(height)
 , he

Refactor VariableHeight example