feeles-ide/lib/Cards/CardWindow.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _Card = _interopRequireDefault(require("@material-ui/core/Card"));

var cn = {
  flex: (0, _typestyle.style)({
    display: 'flex'
  }),
  max: (0, _typestyle.style)({
    maxHeight: '100%'
  })
};

var getCn = function getCn(props) {
  return {
    root: (0, _typestyle.style)({
      position: 'relative',
      width: 0,
      order: props.order,
      boxSizing: 'border-box',
      maxWidth: '100%',
      maxHeight: '100%',
      height: '100%',
      direction: 'ltr',
      flex: '0 0 auto',
      flexBasis: props.visible ? props.flexBasis : 0,
      padding: props.visible ? '16px 20px 16px 0' : 0,
      overflow: props.visible ? 'initial' : 'hidden'
    }),
    card: (0, _typestyle.style)({
      display: 'flex',
      flex: 1,
      flexDirection: 'column',
      position: 'relative',
      overflow: 'visible' // position: sticky のために必要

    })
  };
};

var CardWindow =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(CardWindow, _PureComponent);

  function CardWindow() {
    (0, _classCallCheck2.default)(this, CardWindow);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CardWindow).apply(this, arguments));
  }

  (0, _createClass2.default)(CardWindow, [{
    key: "render",
    value: function render() {
      var dcn = getCn(this.props);
      var fit = this.props.fit;
      return _react.default.createElement("div", {
        id: this.props.name,
        className: (0, _typestyle.classes)(dcn.root, fit ? cn.flex : cn.max)
      }, _react.default.createElement(_Card.default, (0, _extends2.default)({}, this.cardProps, {
        className: (0, _typestyle.classes)(dcn.card, fit ? cn.flex : cn.max)
      }), this.props.children), this.props.footer || null, _react.default.createElement("div", {
        id: "".concat(this.props.name, "-BottomAnchor")
      }));
    }
  }, {
    key: "cardProps",
    get: function get() {
      var props = (0, _objectSpread2.default)({}, this.props);

      for (var key in CardWindow.propTypes) {
        delete props[key];
      }

      return props;
    }
  }]);
  return CardWindow;
}(_react.PureComponent);

exports.default = CardWindow;
(0, _defineProperty2.default)(CardWindow, "propTypes", {
  name: _propTypes.default.string.isRequired,
  visible: _propTypes.default.bool.isRequired,
  order: _propTypes.default.number.isRequired,
  cardProps: _propTypes.default.object.isRequired,
  fit: _propTypes.default.bool.isRequired,
  showAll: _propTypes.default.bool.isRequired,
  footer: _propTypes.default.node,
  flexBasis: _propTypes.default.string.isRequired
});
(0, _defineProperty2.default)(CardWindow, "defaultProps", {
  visible: false,
  fit: false,
  footer: null,
  flexBasis: '50%'
});