react-cm-ui/core/surfaces/drawer/drawer.js

React UI for Healthy Church

"use strict";

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

var _lodash = _interopRequireWildcard(require("lodash"));

var _reactPortal = require("react-portal");

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));

var _constants = require("../../global/constants");

var _domUtils = _interopRequireDefault(require("../../utils/domUtils"));

var _drawerActionBar = _interopRequireDefault(require("./drawerActionBar"));

var _drawerContainer = _interopRequireDefault(require("./drawerContainer"));

var _drawerContent = _interopRequireDefault(require("./drawerContent"));

var _drawerDataCards = _interopRequireDefault(require("./drawerDataCards"));

var _drawerDataGrid = _interopRequireDefault(require("./drawerDataGrid"));

var _drawerDataGroups = _interopRequireDefault(require("./drawerDataGroups"));

var _drawerDeprecatedFiltersDrawer = _interopRequireDefault(require("../drawerDeprecated/drawerDeprecatedFiltersDrawer"));

var _drawerDetailsWindow = _interopRequireDefault(require("./drawerDetailsWindow"));

var _drawerFiltersDrawer = _interopRequireDefault(require("./drawerFiltersDrawer"));

var _drawerFiltersRail = _interopRequireDefault(require("./drawerFiltersRail"));

var _drawerNavigation = _interopRequireDefault(require("./drawerNavigation"));

var _drawerTitleBar = _interopRequireDefault(require("./drawerTitleBar"));

var _drawerWing = _interopRequireDefault(require("./drawerWing"));

var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

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

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var propTypes = {
  children: _propTypes["default"].node,

  /**
   * Override or extend the styles applied to Drawer.
   */
  classes: _propTypes["default"].shape({
    root: _propTypes["default"].string
  }),
  className: _propTypes["default"].string,

  /**
   * Used for DOM testing. https://testing-library.com/docs/queries/bytestid/
   */
  dataTestId: _propTypes["default"].string,
  dimmer: _propTypes["default"].bool,
  isOpen: _propTypes["default"].bool.isRequired,
  isModal: _propTypes["default"].bool,
  maxHeight: _propTypes["default"].number,
  maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  onClose: _propTypes["default"].func,
  onCloseComplete: _propTypes["default"].func,
  onOpenComplete: _propTypes["default"].func,
  positionX: _propTypes["default"].oneOf(['left', 'right']),
  positionY: _propTypes["default"].oneOf(['bottom', 'top']),
  positionYOffset: _propTypes["default"].number,
  shadowSize: _propTypes["default"].oneOf(['large', 'small', 'xsmall']),
  shouldCloseOnClickOutside: _propTypes["default"].bool,
  style: _propTypes["default"].shape({}),
  theme: _propTypes["default"].shape({
    zIndex: _propTypes["default"].shape({
      drawer: _propTypes["default"].number
    })
  }),
  wing: _propTypes["default"].shape({})
};
var defaultProps = {
  children: undefined,
  classes: null,
  className: undefined,
  dataTestId: "".concat(_constants.UI_CLASS_NAME, "-drawer"),
  dimmer: true,
  isModal: true,
  maxHeight: undefined,
  maxWidth: undefined,
  shouldCloseOnClickOutside: false,
  onClose: undefined,
  onCloseComplete: undefined,
  onOpenComplete: undefined,
  positionX: 'right',
  positionY: undefined,
  positionYOffset: undefined,
  shadowSize: undefined,
  style: {},
  theme: null,
  wing: undefined
};
var BODY = document.body;
var TRANSLATE_X_END = 'translate3d(0, 0, 0)';
var TRANSLATE_X_LEFT_START = 'translate3d(-100%, 0, 0)';
var TRANSLATE_X_RIGHT_START = 'translate3d(100%, 0, 0)';
var BOX_SHADOW_XSMALL = '0 0 3px 0 rgba(0, 0, 0, 0.30)';
var BOX_SHADOW_SMALL = '2px 0 7px 0 rgba(0, 0, 0, 0.17)';
var BOX_SHADOW_LARGE = '12px 0 19px 0 rgba(0, 0, 0, .22)';
var DEFAULT_DRAWER_WIDTH = 768;

function toggleBodyStyle(isOpen) {
  var _window = window,
      scrollY = _window.scrollY;
  var bodyStyleTop = BODY.style.top;
  BODY.style.height = isOpen ? '100%' : '';
  BODY.style.position = isOpen ? 'fixed' : '';
  BODY.style.top = isOpen ? "-".concat(scrollY, "px") : '';
  BODY.style.width = isOpen ? '100%' : '';

  if (!isOpen) {
    BODY.classList.remove('drawer-open'); // eslint-disable-next-line radix

    window.scrollTo(0, parseInt(bodyStyleTop || '0') * -1);
  } else {
    BODY.classList.add('drawer-open');
  }
}

var styles = function styles(theme) {
  return {
    root: {
      backfaceVisibility: 'hidden',
      height: '100%',
      left: 0,
      minWidth: 320,
      position: 'fixed',
      top: 0,
      width: '100%',
      zIndex: theme.zIndex.drawer
    }
  };
};

var Drawer = /*#__PURE__*/function (_React$Component) {
  _inherits(Drawer, _React$Component);

  var _super = _createSuper(Drawer);

  function Drawer(props) {
    var _this;

    _classCallCheck(this, Drawer);

    _this = _super.call(this, props);
    _this.state = {
      isOpen: props.isOpen // We put props.isOpen into state because when closing a drawer we return false in render before the closing animation is complete.

    };
    _this.useComponentWillUnmount = false;
    _this.onClickOutside = _this.onClickOutside.bind(_assertThisInitialized(_this));
    _this.onCloseAnimationComplete = _this.onCloseAnimationComplete.bind(_assertThisInitialized(_this));
    _this.onOpenAnimationComplete = _this.onOpenAnimationComplete.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Drawer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var isOpen = this.props.isOpen;

      if (isOpen) {
        this.setState({
          isOpen: isOpen
        }, function () {
          _this2.onOpen();
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this3 = this;

      var nextProps = this.props;

      if (!prevProps.isOpen && nextProps.isOpen) {
        this.setState({
          isOpen: nextProps.isOpen
        }, function () {
          _this3.onOpen();
        });
      }

      if (prevProps.isOpen && !nextProps.isOpen) {
        this.onBeforeClose();
      }

      if (prevProps.isOpen && nextProps.isOpen && prevProps.positionYOffset !== nextProps.positionYOffset) {
        this.drawerContainerRef.style.transform = _lodash["default"].isNumber(nextProps.positionYOffset) ? "".concat(TRANSLATE_X_END, " translateY(").concat(nextProps.positionYOffset, "px)") : TRANSLATE_X_END;
      }

      if (prevProps.isOpen && nextProps.isOpen && prevProps.maxWidth !== nextProps.maxWidth) {
        this.drawerContainerRef.style.maxWidth = _lodash["default"].isNumber(nextProps.maxWidth) ? "".concat(nextProps.maxWidth, "px") : nextProps.maxWidth || "".concat(DEFAULT_DRAWER_WIDTH, "px");
      }

      if (prevProps.isOpen && nextProps.isOpen && prevProps.maxHeight !== nextProps.maxHeight) {
        this.drawerContainerRef.style.maxHeight = nextProps.maxHeight ? "".concat(nextProps.maxHeight, "px") : 'none';
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var isOpen = this.state.isOpen;
      /**
       * We only want to clean up classes here if the drawer isOpen and the
       * closing animation never happens.
       */

      if (isOpen && this.useComponentWillUnmount) {
        toggleBodyStyle(false);

        if (BODY.classList.contains('drawer-nubbin-open')) {
          BODY.classList.remove('drawer-nubbin-open');
        }

        if (BODY.classList.contains('drawer-dimmers')) {
          BODY.classList.remove('drawer-dimmers');
        }

        if (BODY.classList.contains('drawer-open-layered')) {
          BODY.classList.remove('drawer-open-layered');
        }

        if (BODY.classList.contains('drawer-animate-out')) {
          BODY.classList.remove('drawer-animate-out');
        }
      }
    }
  }, {
    key: "onBeforeClose",
    value: function onBeforeClose() {
      var animationEvent = _domUtils["default"].cssTransitionType(this.drawerContainerRef);

      BODY.classList.add('drawer-animate-out');
      this.drawerContainerRef.classList.add('drawer-animate-out');
      this.drawerContainerRef.style.transform = this.setStartOfTransform();
      this.drawerContainerRef.addEventListener(animationEvent, this.onCloseAnimationComplete);
    }
  }, {
    key: "onClickOutside",
    value: function onClickOutside(event) {
      var shouldCloseOnClickOutside = this.props.shouldCloseOnClickOutside;

      if (this.drawerContainerRef.contains(event.target) || !shouldCloseOnClickOutside) {
        return;
      }

      this.onClose();
    }
  }, {
    key: "onClose",
    value: function onClose() {
      var _this$props = this.props,
          shouldCloseOnClickOutside = _this$props.shouldCloseOnClickOutside,
          onClose = _this$props.onClose;

      if (shouldCloseOnClickOutside) {
        document.removeEventListener('click', this.onClickOutside);
      }

      if ((0, _lodash.isFunction)(onClose)) {
        // eslint-disable-next-line prefer-rest-params
        onClose.apply(void 0, arguments);
      } else {
        console.warn('Drawer\'s onClose prop is required when using the prop shouldCloseOnClickOutside');
      }
    }
  }, {
    key: "onCloseAnimationComplete",
    value: function onCloseAnimationComplete() {
      var _this$props2 = this.props,
          onCloseComplete = _this$props2.onCloseComplete,
          shouldCloseOnClickOutside = _this$props2.shouldCloseOnClickOutside;

      var animationEvent = _domUtils["default"].cssTransitionType(this.drawerContainerRef);

      var numberOfModalDrawers = document.querySelectorAll('.ui.drawer-is_modal').length;

      if (shouldCloseOnClickOutside) {
        document.removeEventListener('click', this.onClickOutside);
      }

      this.drawerContainerRef.removeEventListener(animationEvent, this.onCloseAnimationComplete);

      if (numberOfModalDrawers <= 2) {
        BODY.classList.remove('drawer-open-layered');
      }

      if (numberOfModalDrawers <= 1 || numberOfModalDrawers > 1 && BODY.classList.contains('drawer-nubbin-open')) {
        var isOpen = false;
        toggleBodyStyle(isOpen);

        if (BODY.classList.contains('drawer-dimmers')) {
          BODY.classList.remove('drawer-dimmers');
        }
      }

      if (numberOfModalDrawers <= 1 && BODY.classList.contains('drawer-nubbin-open')) {
        BODY.classList.remove('drawer-nubbin-open');
      }

      BODY.classList.remove('drawer-animate-out');
      this.drawerContainerRef.style.transform = this.setStartOfTransform();
      this.useComponentWillUnmount = false;
      this.setState({
        isOpen: false
      }, function () {
        if ((0, _lodash.isFunction)(onCloseComplete)) {
          onCloseComplete(true);
        }
      });
    }
  }, {
    key: "onOpen",
    value: function onOpen() {
      var _this4 = this;

      var _this$props3 = this.props,
          dimmer = _this$props3.dimmer,
          isModal = _this$props3.isModal,
          maxWidth = _this$props3.maxWidth,
          maxHeight = _this$props3.maxHeight,
          positionYOffset = _this$props3.positionYOffset,
          positionY = _this$props3.positionY,
          shadowSize = _this$props3.shadowSize,
          theme = _this$props3.theme;
      this.useComponentWillUnmount = true;
      this.setStartOfTransform();

      var animationEvent = _domUtils["default"].cssTransitionType(this.drawerContainerRef);

      var boxShadowPositionX = this.isPositionX('right') ? '-' : '';
      var numberOfModalDrawers = document.querySelectorAll('.ui.drawer-is_modal').length;
      var layeredOffset = 11;
      var zIndex = theme.zIndex.drawer + 2; // adding 2 accounts for the frist .drawer and .drawer-dimmers- z-indexes

      this.drawerContainerRef.addEventListener(animationEvent, this.onOpenAnimationComplete);

      if (!dimmer || !isModal || numberOfModalDrawers >= 2) {
        this.drawerRef.style.pointerEvents = 'none';
        this.drawerContainerRef.style.pointerEvents = 'auto';
        this.drawerDimmerRef.style.display = 'none';
      }

      setTimeout(function () {
        if (_this4.shadowContainerRef && _this4.shadowRef && _this4.drawerRef && _this4.drawerContainerRef) {
          if (_this4.isPositionX('left')) {
            _this4.shadowContainerRef.style.right = '-30px';
            _this4.shadowRef.style.marginRight = '30px';
          } else {
            _this4.shadowContainerRef.style.left = '-30px';
            _this4.shadowRef.style.marginLeft = '30px';
          }

          if (numberOfModalDrawers >= 2) {
            var newZIndex = zIndex + numberOfModalDrawers;
            var boxShadow = BOX_SHADOW_SMALL;

            switch (shadowSize) {
              case 'large':
                boxShadow = BOX_SHADOW_LARGE;
                break;

              case 'xsmall':
                boxShadow = BOX_SHADOW_XSMALL;
                break;

              default:
            }

            _domUtils["default"].addClassName(BODY, 'drawer-open-layered');

            _this4.drawerRef.style.zIndex = newZIndex;
            _this4.shadowRef.style.boxShadow = "".concat(boxShadowPositionX).concat(boxShadow);
            _this4.drawerContainerRef.style.zIndex = newZIndex;
          } else {
            var _boxShadow = BOX_SHADOW_LARGE;

            switch (shadowSize) {
              case 'small':
                _boxShadow = BOX_SHADOW_SMALL;
                break;

              case 'xsmall':
                _boxShadow = BOX_SHADOW_XSMALL;
                break;

              default:
            }

            if (!positionY && !maxHeight) {
              var isOpen = true;
              toggleBodyStyle(isOpen);
            } else {
              BODY.classList.add('drawer-nubbin-open');
            }

            _this4.shadowRef.style.boxShadow = "".concat(boxShadowPositionX).concat(_boxShadow);
            _this4.drawerRef.style.zIndex = zIndex - 1;
            _this4.drawerContainerRef.style.zIndex = zIndex + numberOfModalDrawers;
          }

          if (!_lodash["default"].isUndefined(maxWidth)) {
            _this4.drawerContainerRef.style.maxWidth = _lodash["default"].isNumber(maxWidth) ? "".concat(maxWidth, "px") : maxWidth || "".concat(DEFAULT_DRAWER_WIDTH, "px");
          } else {
            _this4.drawerContainerRef.style.maxWidth = "".concat(DEFAULT_DRAWER_WIDTH - layeredOffset * (numberOfModalDrawers - 1), "px");
          }

          if (!_lodash["default"].isUndefined(maxHeight)) {
            _this4.drawerContainerRef.style.maxHeight = "".concat(maxHeight, "px");
          }

          _this4.drawerContainerRef.style.transform = _lodash["default"].isNumber(positionYOffset) ? "".concat(TRANSLATE_X_END, " translateY(").concat(positionYOffset, "px)") : TRANSLATE_X_END;
        }
      }, 30);
    }
  }, {
    key: "onOpenAnimationComplete",
    value: function onOpenAnimationComplete() {
      var _this$props4 = this.props,
          dimmer = _this$props4.dimmer,
          isModal = _this$props4.isModal,
          shouldCloseOnClickOutside = _this$props4.shouldCloseOnClickOutside;

      var animationEvent = _domUtils["default"].cssTransitionType(this.drawerContainerRef);

      this.drawerContainerRef.removeEventListener(animationEvent, this.onOpenAnimationComplete);
      var onOpenComplete = this.props.onOpenComplete;

      if (typeof onOpenComplete === 'function') {
        onOpenComplete();
      }

      if (dimmer && isModal) {
        BODY.classList.add('drawer-dimmers');
      }

      if (shouldCloseOnClickOutside) {
        document.addEventListener('click', this.onClickOutside);
      }
    }
  }, {
    key: "setStartOfTransform",
    value: function setStartOfTransform() {
      var positionYOffset = this.props.positionYOffset;
      var translateX = this.isPositionX('left') ? TRANSLATE_X_LEFT_START : TRANSLATE_X_RIGHT_START;
      this.drawerContainerRef.style.transform = _lodash["default"].isNumber(positionYOffset) ? "".concat(translateX, " translateY(").concat(positionYOffset, "px)") : translateX;
    }
  }, {
    key: "isPositionX",
    value: function isPositionX(position) {
      var positionX = this.props.positionX;
      return positionX === position;
    }
  }, {
    key: "isPositionY",
    value: function isPositionY(position) {
      var positionY = this.props.positionY;
      return positionY === position;
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      var _this$props5 = this.props,
          children = _this$props5.children,
          classes = _this$props5.classes,
          className = _this$props5.className,
          dataTestId = _this$props5.dataTestId,
          isModal = _this$props5.isModal,
          positionYOffset = _this$props5.positionYOffset,
          style = _this$props5.style,
          wing = _this$props5.wing;
      var isOpen = this.state.isOpen;

      if (!isOpen) {
        return false;
      }

      var rootClasses = (0, _classnames["default"])('ui', 'drawer', classes.root, className, {
        'left-position': this.isPositionX('left'),
        'top-position': this.isPositionY('top'),
        'bottom-position': this.isPositionY('bottom'),
        'drawer-is_modal': isModal
      });
      return /*#__PURE__*/_react["default"].createElement(_reactPortal.Portal, null, /*#__PURE__*/_react["default"].createElement("div", {
        className: rootClasses,
        "data-testid": dataTestId,
        ref: function ref(_ref5) {
          _this5.drawerRef = _ref5;
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "drawer-container",
        "data-testid": "".concat(_constants.UI_CLASS_NAME, "-drawer_container"),
        ref: function ref(_ref3) {
          _this5.drawerContainerRef = _ref3;
        },
        style: _objectSpread({
          height: _lodash["default"].isNumber(positionYOffset) ? "calc(100% - ".concat(positionYOffset, "px)") : null
        }, style)
      }, /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars["default"], {
        autoHide: true
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "drawer-container-inner"
      }, children)), wing, /*#__PURE__*/_react["default"].createElement("div", {
        className: "shadow_container",
        "data-testid": "".concat(dataTestId, "_shadow_container"),
        ref: function ref(_ref2) {
          _this5.shadowContainerRef = _ref2;
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        ref: function ref(_ref) {
          _this5.shadowRef = _ref;
        }
      }))), /*#__PURE__*/_react["default"].createElement("div", {
        className: "drawer-dimmer",
        "data-testid": "".concat(dataTestId, "_dimmer"),
        ref: function ref(_ref4) {
          _this5.drawerDimmerRef = _ref4;
        }
      })));
    }
  }]);

  return Drawer;
}(_react["default"].Component);

Drawer.ActionBar = _drawerActionBar["default"];
Drawer.Container = _drawerContainer["default"];
Drawer.Content = _drawerContent["default"];
Drawer.DataCards = _drawerDataCards["default"];
Drawer.DataGrid = _drawerDataGrid["default"];
Drawer.DataGroups = _drawerDataGroups["default"];
Drawer.DeprecatedFiltersDrawer = _drawerDeprecatedFiltersDrawer["default"];
Drawer.Details = _drawerDetailsWindow["default"]; // TODO: Deprecated. Alias name for Drawer.DetailsWindow. Remove in a major release.

Drawer.DetailsWindow = _drawerDetailsWindow["default"];
Drawer.FiltersDrawer = _drawerFiltersDrawer["default"];
Drawer.FiltersRail = _drawerFiltersRail["default"];
Drawer.Grid = _drawerDataCards["default"]; // TODO: Deprecated. Alias name for Drawer.DataGrid. Remove in a major release.

Drawer.Navigation = _drawerNavigation["default"];
Drawer.Table = _drawerDataGrid["default"]; // TODO: Deprecated. Alias name for Drawer.DataGrid. Remove in a major release.

Drawer.TitleBar = _drawerTitleBar["default"];
Drawer.Wing = _drawerWing["default"];
Drawer.propTypes = propTypes;
Drawer.defaultProps = defaultProps;

var _default = (0, _withStyles["default"])(styles, {
  withTheme: true
})(Drawer);

exports["default"] = _default;