/* jshint node: true, esnext: true */
"use strict";

var React = require('react');
var ReactCSS = require('reactcss');
var bounds = require('react-bounds');

class Grid extends ReactCSS.Component {

  constructor() {
    super();

    this.calculateBounds = this.calculateBounds.bind(this);
  }

  classes() {
    return {
      'default': {
        grid: {
          position: 'relative'
        },
        left: {
          position: 'absolute',
          width: '130px'
        },
        main: {
          paddingLeft: '150px'
        }
      },
      'no-sidebar': {
        left: {
          display: 'none'
        },
        main: {
          paddingLeft: '0'
        }
      }
    };
  }

  styles() {
    return this.css(this.calculateBounds());
  }

  calculateBounds() {
    var activeStyles = {};

    var bounds = this.props.activeBounds;
    if (bounds) {
      for (var bound of bounds) {
        activeStyles[bound] = true;
      }
    }

    return activeStyles;
  }

  static bounds() {
    return {
      'no-sidebar': [0, 500]
      // 'no-sidebar': { min: 0, max: 500, type: 'width' }
    };
  }

  render(){
    // console.log(this.props.width);
    // console.log(this.props.activeBounds);
    return (
      <div is="grid">
        <div is="left">{ this.props.children[0] }</div>
        <div is="main">{ this.props.children[1] }</div>
      </div>
    )
  }
};

module.exports = bounds(Grid);

/* jshint node: true, esnext: true */
"use strict";

var React = require('react');
var ReactCSS = require('reactcss');
var context = require('react-context');

class Grid extends ReactCSS.Component {



  constructor() {
    super();
  }

  classes() {
    return {
      'default': {
        grid: {
          position: 'relative'
        },
        left: {
          position: 'absolute',
          width: '130px'
        },
        main: {
          paddingLeft: '150px'
        }
      },
      'no-sidebar': {
        left: {
          display: 'none'
        },
        main: {
          paddingLeft: '0'
        }
      }
    };
  }

  styles() {
    return this.css({
      'no-sidebar': this.context.width < 500
    });
  }

  render(){
    return (
      <div is="grid">
        <div is="left">{ this.props.children[0] }</div>
        <div is="main">{ this.props.children[1] }</div>
      </div>
    )
  }
};

Grid.contextTypes = context.subscribe(['width']);

module.exports = Grid;

Change width back to context
Change width back to context
