cinnecta-ui/lib/components/Drawer.js

"use strict";

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

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

var _withStyles = require("../helpers/withStyles");

var _Blanket = _interopRequireDefault(require("./Blanket"));

var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));

var _FlatButton = _interopRequireDefault(require("./FlatButton"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

var Drawer = function Drawer(_ref) {
  var active = _ref.active,
      children = _ref.children,
      css = _ref.css,
      fullWidth = _ref.fullWidth,
      onClose = _ref.onClose,
      onClosed = _ref.onClosed,
      right = _ref.right,
      width = _ref.width,
      styles = _ref.styles;
  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_Transition.default, {
    in: active,
    timeout: 200 //mountOnEnter
    //unmountOnExit
    ,
    onEnter: function onEnter(node) {
      return node.scrollTop;
    },
    onExited: function onExited() {
      return onClosed && onClosed();
    }
  }, function (state) {
    return _react.default.createElement("div", css(styles.drawer, !fullWidth && styles.drawer_width_default, fullWidth && styles.drawer_width_full, right ? styles.drawer_right : styles.drawer_left, (state === 'entering' || state === 'entered') && styles.entering, (state === 'exiting' || state === 'exited') && styles.exiting), _react.default.createElement("div", css(styles.closeButton), _react.default.createElement(_FlatButton.default, {
      transparent: true,
      icon: "error",
      onClick: function onClick() {
        return onClose && onClose();
      }
    })), children);
  }), _react.default.createElement(_Blanket.default, {
    onClick: function onClick() {
      return onClose && onClose();
    }
  }));
};

var DrawerWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var color = _ref2.color,
      units = _ref2.units;
  return {
    drawer: {
      background: color.white,
      position: 'absolute',
      top: 0,
      bottom: 0,
      width: 0,
      overflow: 'hidden',
      zIndex: 99,
      transition: 'transform 200ms ease-out'
    },
    drawer_left: {
      left: 0,
      right: 'unset'
    },
    drawer_right: {
      right: 0,
      left: 'unset'
    },
    drawer_width_default: {
      width: units(24)
    },
    drawer_width_full: {
      width: '100%'
    },
    entering: {
      transform: 'translate(0, 0)',
      transition: 'transform 200ms ease-out'
    },
    exiting: {
      transform: 'translate(100%, 0)',
      transition: 'transform 200ms ease-out'
    },
    closeButton: {
      marginTop: units(.5),
      marginRight: units(.5),
      float: 'right'
    }
  };
})(Drawer);
var _default = DrawerWithStyles;
exports.default = _default;