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


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


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


  shouldComponentUpdate,


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

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


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

    return (
      <div>
        <div style={style.config}>
          <button onClick={this.onToggle}>{isOpened ? 'Close' : 'Open'}</button>
        </div>
        <h3>Variable height</h3>
        <Collapse isOpened={isOpened} style={style.container}>
          <div style={{...localStyle(height).content, height}}></div>
        </Collapse>
        <h3>Fixed height</h3>
        <Collapse isOpened={isOpened} style={style.container} fixedHeight={150}>
          <div style={{...localStyle(height).content, height}}></div>
        </Collapse>
      </div>
    );
  }
});


export default InitiallyOpened;

@@ -166,147 +166,8 @@
 ;%0A%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%0A
 cons
@@ -260,19 +260,26 @@
 ue, 
-height: 100
+keepContent: false
 %7D;%0A 
@@ -313,24 +313,22 @@
 te,%0A%0A%0A  
-onToggle
+render
 () %7B%0A   
@@ -335,32 +335,45 @@
  const %7BisOpened
+, keepContent
 %7D = this.state;%0A
@@ -376,39 +376,243 @@
 te;%0A
-%0A
     
-this.setState(%7BisOpened: !
+const height = 100;%0A%0A    return (%0A      %3Cdiv%3E%0A        %3Cdiv style=%7Bstyle.config%7D%3E%0A          %3Clabel style=%7Bstyle.label%7D%3E%0A            Opened:%0A            %3Cinput style=%7Bstyle.input%7D%0A              type=%22checkbox%22%0A              checked=%7B
 isOp
@@ -620,116 +620,185 @@
 ned%7D
-);
 %0A  
-%7D,%0A%0A%0A  render() %7B%0A
+        
     
-c
 on
-st %7BisOpen
+Change=%7B(%7Btarget: %7Bcheck
 ed%7D
+%7D)
  =
+%3E
  this.s
+etS
 tate
-;%0A    const height = 100;%0A%0A    return (%0A      %3Cdiv%3E%0A
+(%7BisOpened: checked%7D)%7D /%3E%0A          %3C/label%3E%0A%0A          %3Clabel style=%7Bstyle.label%7D%3E%0A            Keep content:%0A    
     
@@ -794,35 +794,37 @@
 t:%0A            %3C
-div
+input
  style=%7Bstyle.co
@@ -817,32 +817,30 @@
 tyle=%7Bstyle.
-config%7D%3E
+input%7D
 %0A          %3C
@@ -842,77 +842,172 @@
     
-%3Cbutton onClick=%7Bthis.onToggle%7D%3E%7BisOpened ? 'Close' : 'Open'%7D%3C/button
+    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  
@@ -1145,34 +1145,32 @@
 %7B...
-localStyle(height).content
+style.getContent(height)
 , he
@@ -1250,36 +1250,26 @@
 Collapse
- isOpened=%7BisOpened%7D
+%0A         
  style=%7B
@@ -1288,25 +1288,110 @@
 ner%7D
- fixedHeight=%7B150
+%0A          isOpened=%7BisOpened%7D%0A          fixedHeight=%7B150%7D%0A          keepCollapsedContent=%7BkeepContent
 %7D%3E%0A 
@@ -1419,34 +1419,32 @@
 %7B...
-localStyle(height).content
+style.getContent(height)
 , he

Refactor InitiallyOpened example