feeles-ide/lib/Cards/CardWindow.js

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
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';
import { Card } from 'material-ui/Card';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';

var HeaderHeight = 32;

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

  function CardWindow() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, CardWindow);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CardWindow.__proto__ || _Object$getPrototypeOf(CardWindow)).call.apply(_ref, [this].concat(args))), _this), _this.closeCard = function () {
      _this.props.updateCard(_this.props.name, { visible: false });
    }, _this.handleScroll = function () {
      _this.props.scrollToCard(_this.props.name);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(CardWindow, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.visible !== nextProps.visible && nextProps.visible) {
        this.handleScroll();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          visible = _props.visible,
          fit = _props.fit,
          order = _props.order;


      var fitWrap = fit ? {
        display: 'flex'
      } : {
        maxHeight: '100%'
      };

      var styles = {
        root: _extends({
          width: 0,
          order: order,
          boxSizing: 'border-box',
          maxWidth: '100%',
          maxHeight: '100%',
          height: '100%',
          direction: 'ltr',
          flex: '0 0 auto',
          flexBasis: visible ? '50%' : 0,
          padding: visible ? '16px 20px 16px 0' : 0,
          overflow: visible ? 'initial' : 'hidden'
        }, fitWrap),
        card: _extends({
          flex: 1
        }, fitWrap),
        innerContainer: _extends({
          position: 'relative',
          width: '100%',
          flexDirection: 'column'
        }, fitWrap),
        header: {
          flex: 0,
          display: 'flex',
          alignItems: 'center',
          minHeight: HeaderHeight,
          paddingLeft: 8,
          width: '100%',
          boxSizing: 'border-box',
          overflowX: 'auto',
          overflowY: 'hidden'
        },
        title: {
          flex: '0 0 auto',
          marginLeft: 6,
          fontSize: '.8rem'
        },
        blank: {
          flex: '1 1 auto'
        },
        a: {
          display: 'inherit'
        },
        close: {
          transform: 'scale(0.8)'
        }
      };

      return React.createElement(
        'div',
        { id: this.props.name, style: styles.root },
        React.createElement(
          Card,
          _extends({}, this.cardProps, {
            style: styles.card,
            containerStyle: styles.innerContainer
          }),
          React.createElement(
            'div',
            { style: styles.header },
            React.createElement(
              'a',
              { style: styles.a, onClick: this.handleScroll },
              this.props.icon
            ),
            React.createElement('div', { style: styles.blank }),
            this.props.actions,
            this.props.disableCloseButton ? null : React.createElement(
              IconButton,
              { onClick: this.closeCard, iconStyle: styles.close },
              React.createElement(NavigationClose, null)
            )
          ),
          this.props.children
        )
      );
    }
  }, {
    key: 'cardProps',
    get: function get() {
      var props = _extends({}, this.props);
      for (var key in CardWindow.propTypes) {
        delete props[key];
      }
      return props;
    }
  }]);

  return CardWindow;
}(PureComponent);

CardWindow.propTypes = {
  name: PropTypes.string.isRequired,
  visible: PropTypes.bool.isRequired,
  order: PropTypes.number.isRequired,
  updateCard: PropTypes.func.isRequired,
  scrollToCard: PropTypes.func.isRequired,
  actions: PropTypes.array.isRequired,
  cards: PropTypes.object.isRequired,
  icon: PropTypes.node.isRequired,
  fit: PropTypes.bool.isRequired,
  width: PropTypes.number.isRequired,
  disableCloseButton: PropTypes.bool.isRequired,
  showAll: PropTypes.bool.isRequired
};
CardWindow.defaultProps = {
  visible: false,
  actions: [],
  icon: null,
  fit: false,
  disableCloseButton: false, // ボタンで閉じられないようにする
  width: 480
};
export default CardWindow;