feeles-ide/lib/ChromeTab/ChromeTabContent.js

The hackable and serializable IDE to make learning material

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

var getStyles = function getStyles(props, context) {
  var show = props.show;
  var palette = context.muiTheme.palette;


  return {
    root: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      opacity: show ? 1 : 0,
      backgroundColor: 'transparent',
      zIndex: show ? 11 : 10,
      display: 'flex',
      flexDirection: 'column'
    },
    container: {
      flex: '1 1 auto',
      borderTop: '1px solid ' + palette.primary1Color
    }
  };
};

var ChromeTabContent = function (_PureComponent) {
  _inherits(ChromeTabContent, _PureComponent);

  function ChromeTabContent() {
    _classCallCheck(this, ChromeTabContent);

    return _possibleConstructorReturn(this, (ChromeTabContent.__proto__ || _Object$getPrototypeOf(ChromeTabContent)).apply(this, arguments));
  }

  _createClass(ChromeTabContent, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps) {
      if (!this.props.show && !nextProps.show) {
        return false;
      }
      return true;
    }
  }, {
    key: 'render',
    value: function render() {
      var children = this.props.children;
      var prepareStyles = this.context.muiTheme.prepareStyles;

      var _getStyles = getStyles(this.props, this.context),
          root = _getStyles.root,
          container = _getStyles.container;

      return React.createElement(
        'div',
        { style: prepareStyles(root) },
        React.createElement(
          'div',
          { style: prepareStyles(container) },
          children
        )
      );
    }
  }]);

  return ChromeTabContent;
}(PureComponent);

ChromeTabContent.propTypes = {
  show: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired
};
ChromeTabContent.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default ChromeTabContent;