sharyn/components/Page.js

"use strict";

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

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

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

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

var _styles = require("@material-ui/core/styles");

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

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

/* eslint-disable import/no-extraneous-dependencies */
// flow-disable-next-line
// flow-disable-next-line
var styles = function styles(_ref) {
  var _container;

  var breakpoints = _ref.breakpoints;
  return {
    // paddingLeft 39px and 31px are for alignment with the burger icon
    container: (_container = {
      display: 'flex',
      alignItems: 'flex-start',
      height: '100%',
      padding: '30px 39px 0'
    }, (0, _defineProperty2.default)(_container, breakpoints.up('xs'), {
      padding: '30px 39px 0'
    }), (0, _defineProperty2.default)(_container, breakpoints.down('xs'), {
      padding: 0
    }), _container),
    containerMiddle: {
      paddingTop: 0
    },
    paper: (0, _defineProperty2.default)({
      width: '100%',
      margin: '0 auto'
    }, breakpoints.down('xs'), {
      height: '100%',
      boxShadow: 'none',
      padding: '25px 31px 0' // Make 25 customizable when props are supported

    }),
    paperMiddle: (0, _defineProperty2.default)({
      width: 'auto',
      maxWidth: '100%',
      margin: 'auto'
    }, breakpoints.down('xs'), {
      width: '100%'
    }),
    paperPadding: {
      padding: 30
    },
    // Make it customizable when props are supported
    noPaper: {
      background: 'transparent',
      boxShadow: 'none'
    }
  };
};

var PageJSX = function PageJSX(_ref2) {
  var children = _ref2.children,
      classes = _ref2.classes,
      middle = _ref2.middle,
      noPadding = _ref2.noPadding,
      noPaper = _ref2.noPaper,
      _ref2$containerClass = _ref2.containerClass,
      containerClass = _ref2$containerClass === void 0 ? '' : _ref2$containerClass,
      _ref2$paperClass = _ref2.paperClass,
      paperClass = _ref2$paperClass === void 0 ? '' : _ref2$paperClass,
      _ref2$maxWidth = _ref2.maxWidth,
      maxWidth = _ref2$maxWidth === void 0 ? 1012 : _ref2$maxWidth;
  return _react.default.createElement("div", {
    className: "".concat(classes.container, " ").concat(containerClass, " ").concat(middle ? classes.containerMiddle : '')
  }, _react.default.createElement(_Paper.default, {
    className: "".concat(classes.paper, " ").concat(paperClass, " ").concat(noPaper ? classes.noPaper : '', " ").concat(noPadding ? '' : classes.paperPadding, " ").concat(middle ? classes.paperMiddle : ''),
    style: {
      maxWidth: maxWidth
    }
  }, children));
};

PageJSX.propTypes = {
  children: _propTypes.default.any,
  classes: _propTypes.default.object.isRequired,
  noPaper: _propTypes.default.bool,
  noPadding: _propTypes.default.bool,
  containerClass: _propTypes.default.string,
  paperClass: _propTypes.default.string,
  maxWidth: _propTypes.default.any,
  middle: _propTypes.default.bool
};
var Page = (0, _styles.withStyles)(styles)(PageJSX);
var _default = Page;
exports.default = _default;