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


const VariableHeight = React.createClass({
  getInitialState() {
    const preset = 'stiff';
    const [stiffness, damping] = presets[preset];

    return {isOpened: false, height: 100, preset: 'stiff', stiffness, damping};
  },


  shouldComponentUpdate,


  onChangePreset({target: {value: preset}}) {
    const [stiffness, damping] = presets[preset];

    this.setState({preset, stiffness, damping});
  },


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

    return (
      <div>
        <div style={style.config}>
          <label style={style.label}>
            Opened:
            <input style={style.input}
              type="checkbox"
              value={isOpened}
              onChange={({target: {checked}}) => this.setState({isOpened: checked})} />
          </label>

          <label style={style.label}>
            Content height:
            <input style={style.input}
              type="range"
              value={height} step={50} min={0} max={500}
              onChange={({target: {value}}) => this.setState({height: value})} />
            {height}
          </label>

          <label style={style.label}>
            Preset:
            <select style={style.input}
              value={preset} step={10} min={0} max={300}
              onChange={this.onChangePreset}>
              {Object.keys(presets).map(p => <option key={p} value={p}>{p}</option>)}
            </select>
          </label>

          <label style={style.label}>
            Stiffness:
            <input style={style.input}
              type="range"
              value={stiffness} step={10} min={0} max={300}
              onChange={({target: {value}}) => this.setState({stiffness: value})} />
            {stiffness}
          </label>

          <label style={style.label}>
            Damping:
            <input style={style.input}
              type="range"
              value={damping} step={5} min={0} max={40}
              onChange={({target: {value}}) => this.setState({damping: value})} />
            {damping}
          </label>
        </div>
        <Collapse isOpened={isOpened} style={style.container} springConfig={[stiffness, damping]}>
          <div style={{...style.getContent(height), height}}></div>
        </Collapse>

      </div>
    );
  }
});


export default VariableHeight;

@@ -372,16 +372,36 @@
 : false,
+ keepContent: false,
  height:
@@ -444,16 +444,16 @@
 mping%7D;%0A
-
   %7D,%0A%0A%0A 
@@ -664,16 +664,29 @@
 sOpened,
+ keepContent,
  height,
@@ -930,21 +930,23 @@
         
-value
+checked
 =%7BisOpen
@@ -1049,32 +1049,312 @@
       %3C/label%3E%0A%0A
+          %3Clabel style=%7Bstyle.label%7D%3E%0A            Keep content:%0A            %3Cinput style=%7Bstyle.input%7D%0A              type=%22checkbox%22%0A              checked=%7BkeepContent%7D%0A              onChange=%7B(%7Btarget: %7Bchecked%7D%7D) =%3E this.setState(%7BkeepContent: checked%7D)%7D /%3E%0A          %3C/label%3E%0A%0A
           %3Clabel
@@ -2635,28 +2635,18 @@
 apse
- isOpened=%7BisOpened%7D
+%0A         
  sty
@@ -2669,43 +2669,128 @@
 ner%7D
- springConfig=%7B%5Bstiffness, damping%5D
+%0A          isOpened=%7BisOpened%7D%0A          springConfig=%7B%5Bstiffness, damping%5D%7D%0A          keepCollapsedContent=%7BkeepContent
 %7D%3E%0A 

Add keepContent to SpringConfig