react-cm-ui
Version:
React UI for Healthy Church
827 lines (695 loc) • 30.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _lodash = _interopRequireDefault(require("lodash"));
var _reactPortal = require("react-portal");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));
var _button = _interopRequireDefault(require("../../inputs/button"));
var _divider = _interopRequireDefault(require("../../dataDisplay/divider"));
var _domUtils = _interopRequireDefault(require("../../utils/domUtils"));
var _header = _interopRequireDefault(require("../../dataDisplay/header"));
var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));
var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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 _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 DEFAULT_CONTAINER_PADDING_TOP = 27;
var colorEnums = ['dark-blue', 'grey', 'white'];
var CloseButton = /*#__PURE__*/function (_React$Component) {
_inherits(CloseButton, _React$Component);
var _super = _createSuper(CloseButton);
function CloseButton() {
var _this;
_classCallCheck(this, CloseButton);
_this = _super.call(this);
_this._onCloseClick = _this._onCloseClick.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(CloseButton, [{
key: "render",
value: function render() {
var _this$props = this.props,
closeButton = _this$props.closeButton,
inverse = _this$props.inverse,
onClose = _this$props.onClose;
if (!onClose) {
return false;
}
var closeButtonJSX;
if (_lodash["default"].isObject(closeButton)) {
closeButtonJSX = /*#__PURE__*/_react["default"].cloneElement(closeButton, {
className: 'drawer-close-button'
});
} else {
closeButtonJSX = /*#__PURE__*/_react["default"].createElement(_button["default"], {
className: "drawer-close-button",
color: inverse ? 'transparent' : 'alternate',
onClick: this._onCloseClick,
icon: true,
style: {
margin: 0
}
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
inverse: true,
type: _lodash["default"].isString(closeButton) ? closeButton : 'times'
}));
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: "drawer-close-button-container"
}, closeButtonJSX);
}
}, {
key: "_onCloseClick",
value: function _onCloseClick() {
this.props.onClose();
}
}]);
return CloseButton;
}(_react["default"].Component);
CloseButton.propTypes = {
closeButton: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
inverse: _propTypes["default"].bool,
onClose: _propTypes["default"].func
};
var DrawerDeprecatedWing = /*#__PURE__*/function (_React$Component2) {
_inherits(DrawerDeprecatedWing, _React$Component2);
var _super2 = _createSuper(DrawerDeprecatedWing);
function DrawerDeprecatedWing() {
_classCallCheck(this, DrawerDeprecatedWing);
return _super2.apply(this, arguments);
}
_createClass(DrawerDeprecatedWing, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
children = _this$props2.children,
className = _this$props2.className,
color = _this$props2.color,
width = _this$props2.width,
style = _this$props2.style;
var rootClasses = (0, _classnames["default"])('drawer-wing', className, {
'color-dark-blue': color === 'dark-blue',
'color-grey': color === 'grey'
});
var defaultStyle = {
width: width || null
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses,
style: Object.assign({}, defaultStyle, style)
}, children);
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this$props3 = this.props,
onOpenToggle = _this$props3.onOpenToggle,
width = _this$props3.width;
var newWidth = width ? "".concat(width, "px") : '100%';
onOpenToggle(newWidth);
}
}]);
return DrawerDeprecatedWing;
}(_react["default"].Component);
DrawerDeprecatedWing.propTypes = {
className: _propTypes["default"].string,
color: _propTypes["default"].oneOf(colorEnums),
onOpenToggle: _propTypes["default"].func,
style: _propTypes["default"].shape({}),
width: _propTypes["default"].number
};
var DrawerDeprecatedHeader = /*#__PURE__*/function (_React$Component3) {
_inherits(DrawerDeprecatedHeader, _React$Component3);
var _super3 = _createSuper(DrawerDeprecatedHeader);
function DrawerDeprecatedHeader() {
var _this2;
_classCallCheck(this, DrawerDeprecatedHeader);
_this2 = _super3.call(this);
_this2._drawerContainerInnerPaddingTop = DEFAULT_CONTAINER_PADDING_TOP;
return _this2;
}
_createClass(DrawerDeprecatedHeader, [{
key: "render",
value: function render() {
var _this3 = this;
var _this$props4 = this.props,
children = _this$props4.children,
closeButton = _this$props4.closeButton,
inverse = _this$props4.inverse,
onClose = _this$props4.onClose,
title = _this$props4.title,
titleTruncate = _this$props4.titleTruncate;
var titleClass = (0, _classnames["default"])('title', {
'drawer-title-truncate': titleTruncate
});
return /*#__PURE__*/_react["default"].createElement("header", {
className: "drawer-header",
ref: function ref(_ref) {
return _this3._drawerHeaderRef = _ref;
}
}, _lodash["default"].isObject(title) ? title : title ? /*#__PURE__*/_react["default"].createElement(_header["default"], {
as: "h2",
className: titleClass,
title: title
}, title) : null, /*#__PURE__*/_react["default"].createElement(CloseButton, {
closeButton: closeButton,
inverse: inverse,
onClose: onClose
}), children ? /*#__PURE__*/_react["default"].createElement("div", {
className: "drawer-header-children"
}, children) : /*#__PURE__*/_react["default"].createElement(_divider["default"], null));
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this._onHeaderUpdate();
}
}, {
key: "_onHeaderUpdate",
value: function _onHeaderUpdate(node) {
var headerEl = _reactDom["default"].findDOMNode(this);
if (headerEl) {
var paddingTop = headerEl.offsetHeight;
var drawerInnerContainer = headerEl.closest('.drawer-container-inner');
if (drawerInnerContainer && paddingTop !== this._drawerContainerInnerPaddingTop) {
this._drawerContainerInnerPaddingTop = "".concat(paddingTop + DEFAULT_CONTAINER_PADDING_TOP, "px");
drawerInnerContainer.style.paddingTop = this._drawerContainerInnerPaddingTop;
}
}
}
}]);
return DrawerDeprecatedHeader;
}(_react["default"].Component);
DrawerDeprecatedHeader.propTypes = {
closeButton: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
inverse: _propTypes["default"].bool,
onClose: _propTypes["default"].func,
title: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
titleTruncate: _propTypes["default"].bool
};
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 DrawerDeprecated = /*#__PURE__*/function (_React$Component4) {
_inherits(DrawerDeprecated, _React$Component4);
var _super4 = _createSuper(DrawerDeprecated);
function DrawerDeprecated(props) {
var _this4;
_classCallCheck(this, DrawerDeprecated);
_this4 = _super4.call(this, props);
_this4.state = {
isOpen: props.isOpen,
isScrolled: false,
transformValue: props.position === 'right' ? 'translate(100%, 0)' : 'translate(-100%, 0)',
wing: null
};
_this4._onClickOutside = _this4._onClickOutside.bind(_assertThisInitialized(_this4));
_this4._onCloseAnimationComplete = _this4._onCloseAnimationComplete.bind(_assertThisInitialized(_this4));
_this4._onCloseWingAnimationComplete = _this4._onCloseWingAnimationComplete.bind(_assertThisInitialized(_this4));
_this4.onOpen = _this4.onOpen.bind(_assertThisInitialized(_this4));
_this4.onOpenAnimationComplete = _this4.onOpenAnimationComplete.bind(_assertThisInitialized(_this4));
_this4.onOpenWingToggle = _this4.onOpenWingToggle.bind(_assertThisInitialized(_this4));
_this4._onClose = _this4._onClose.bind(_assertThisInitialized(_this4));
_this4._onScrollStart = _this4._onScrollStart.bind(_assertThisInitialized(_this4));
_this4._onScrollStop = _this4._onScrollStop.bind(_assertThisInitialized(_this4));
_this4._drawerContainer = null;
_this4._useComponentWillUnmount = false;
return _this4;
}
_createClass(DrawerDeprecated, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this5 = this;
// Open wing if there wasn't a previous wing open.
if (!!this.props.wing && !!!prevProps.wing) {
this.setState({
wing: this.props.wing
});
} // Open new wing and close old wing.
if (!!this.props.wing && !!prevProps.wing && this.props.wing !== prevProps.wing) {
this.setState({
wing: this.props.wing
});
} // Close wing if there is no other wing to open.
if (!!!this.props.wing && !!prevProps.wing) {
this._onCloseWingToggle(false);
}
if (this.props.isOpen && prevProps.maxWidth !== this.props.maxWidth) {
var maxWidth = this.props.maxWidth;
if (_lodash["default"].isNumber(maxWidth)) {
this._drawerContainer.style.maxWidth = "".concat(maxWidth, "px");
} else if (_lodash["default"].isString(maxWidth)) {
this._drawerContainer.style.maxWidth = maxWidth;
} else {
this._drawerContainer.style.maxWidth = '768px';
}
}
if (!prevProps.isOpen && this.props.isOpen) {
this.setState({
isOpen: this.props.isOpen
}, function () {
_this5.onOpen();
});
}
if (prevProps.isOpen && !this.props.isOpen) {
this._onBeforeClose();
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this6 = this;
var isOpen = this.props.isOpen;
if (isOpen) {
this.setState({
isOpen: isOpen
}, function () {
_this6.onOpen();
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var isOpen = this.state.isOpen;
if (isOpen && this._useComponentWillUnmount) {
// We only want to clean up classes here if the closing animation never happens and the drawer isOpen.
if (document.body.classList.contains('drawer-deprecated-open')) {
document.body.classList.remove('drawer-deprecated-open');
}
if (document.body.classList.contains('drawer-dimmers')) {
document.body.classList.remove('drawer-dimmers');
}
if (document.body.classList.contains('drawer-deprecated-open-layered')) {
document.body.classList.remove('drawer-deprecated-open-layered');
}
if (document.body.classList.contains('drawer-animate-out')) {
document.body.classList.remove('drawer-animate-out');
}
}
}
}, {
key: "_onBeforeClose",
value: function _onBeforeClose() {
var animationEvent = this._transitionProps(this._drawerContainer);
document.body.classList.add('drawer-animate-out');
if (this._drawerContainer) {
this._drawerContainer.classList.add('drawer-animate-out');
this._drawerContainer.style.transform = this.props.position === 'right' ? 'translate(100%, 0)' : 'translate(-100%, 0)';
this._drawerContainer.addEventListener(animationEvent, this._onCloseAnimationComplete);
}
}
}, {
key: "_onClickOutside",
value: function _onClickOutside(event) {
if (this.drawerContainerRef.contains(event.target) || !this.props.onClickOutside) {
return;
}
this._onClose();
}
}, {
key: "_onClose",
value: function _onClose() {
var _this$props5 = this.props,
onClickOutside = _this$props5.onClickOutside,
onClose = _this$props5.onClose;
if (onClickOutside) {
document.removeEventListener('click', this._onClickOutside);
}
onClose.apply(void 0, arguments);
}
}, {
key: "_onCloseAnimationComplete",
value: function _onCloseAnimationComplete() {
var _this$props6 = this.props,
onCloseComplete = _this$props6.onCloseComplete,
position = _this$props6.position,
onClickOutside = _this$props6.onClickOutside;
var animationEvent = this._transitionProps(this.drawerContainerRef);
var body = document.body;
var numberOfModalDrawers = document.querySelectorAll('.ui.drawer-is_modal').length;
var numberOfModalDeprecatedDrawers = document.querySelectorAll('.ui.drawer.deprecated.drawer-is_modal').length;
if (onClickOutside) {
document.removeEventListener('click', this._onClickOutside);
}
this.drawerContainerRef.removeEventListener(animationEvent, this._onCloseAnimationComplete);
if (numberOfModalDrawers <= 2) {
body.classList.remove('drawer-deprecated-open-layered');
}
if (numberOfModalDrawers <= 1 || numberOfModalDeprecatedDrawers <= 1) {
var scrollPosition = parseInt(body.style.top, 10);
body.classList.remove('drawer-deprecated-open', 'drawer-dimmers');
window.scroll(0, Math.abs(scrollPosition));
body.style.top = null;
}
body.classList.remove('drawer-animate-out');
this.setState({
transformValue: position === 'right' ? 'translate(100%, 0)' : 'translate(-100%, 0)'
});
if (_lodash["default"].isFunction(onCloseComplete)) {
onCloseComplete(true);
}
this._useComponentWillUnmount = false;
this.setState({
isOpen: false
});
}
}, {
key: "onOpen",
value: function onOpen() {
var _this7 = this;
var _this$props7 = this.props,
isModal = _this$props7.isModal,
maxWidth = _this$props7.maxWidth,
onClickOutside = _this$props7.onClickOutside,
position = _this$props7.position,
theme = _this$props7.theme;
this._useComponentWillUnmount = true;
var body = document.body;
var nodePortal = _reactDom["default"].findDOMNode(this);
var scrollPosition = window.pageYOffset;
var numberOfModalDrawers = document.querySelectorAll('.ui.drawer-is_modal').length;
this._drawerContainer = nodePortal.querySelector('.drawer-container');
var drawerDimmer = nodePortal.querySelector('.drawer-dimmer-deprecated');
var layeredOffset = 11;
var animationEvent = this._transitionProps(this._drawerContainer);
var newZIndex = theme.zIndex.drawer + 2; // adding 2 accounts for the frist .drawer and .drawer-dimmers- z-indexes
this._drawerContainer.addEventListener(animationEvent, this.onOpenAnimationComplete);
if (onClickOutside) {
document.addEventListener('click', this._onClickOutside);
}
setTimeout(function () {
if (!isModal || numberOfModalDrawers >= 2) {
drawerDimmer.style.display = 'none';
}
if (numberOfModalDrawers >= 2) {
newZIndex = newZIndex + numberOfModalDrawers;
if (isModal) {
_domUtils["default"].addClassName(body, 'drawer-deprecated-open-layered');
}
nodePortal.style.zIndex = newZIndex;
_this7._drawerContainer.style.boxShadow = "".concat(position === 'right' ? '-' : '', "2px 0 7px 0 rgba(0, 0, 0, 0.17)");
_this7._drawerContainer.style.zIndex = newZIndex;
} else {
body.style.top = "-".concat(scrollPosition, "px");
if (isModal) {
_domUtils["default"].addClassName(body, 'drawer-deprecated-open');
}
_this7._drawerContainer.style.boxShadow = "".concat(position === 'right' ? '-' : '', "12px 0 19px 0 rgba(0, 0, 0, .22)");
nodePortal.style.zIndex = newZIndex - 1;
_this7._drawerContainer.style.zIndex = newZIndex + numberOfModalDrawers;
}
if (!_lodash["default"].isUndefined(maxWidth)) {
_this7._drawerContainer.style.maxWidth = _lodash["default"].isNumber(maxWidth) ? "".concat(maxWidth, "px") : _lodash["default"].isString(maxWidth) ? maxWidth : '768px';
} else {
_this7._drawerContainer.style.maxWidth = 768 - layeredOffset * (numberOfModalDrawers - 1) + 'px';
}
_this7._drawerContainer.style.transform = 'translate(0, 0)';
}, 30);
}
}, {
key: "onOpenAnimationComplete",
value: function onOpenAnimationComplete() {
var isModal = this.props.isModal;
var animationEvent = this._transitionProps(this.drawerContainerRef);
this.drawerContainerRef.removeEventListener(animationEvent, this.onOpenAnimationComplete);
var onOpenComplete = this.props.onOpenComplete;
if (typeof onOpenComplete === 'function') {
onOpenComplete();
}
if (isModal) {
document.body.classList.add('drawer-dimmers');
}
}
}, {
key: "onOpenWingToggle",
value: function onOpenWingToggle(width) {
var position = this.props.position;
this.setState({
transformValue: position === 'right' ? "translate(-".concat(width, ", 0)") : "translate(".concat(width, ", 0)")
});
}
}, {
key: "_onCloseWingToggle",
value: function _onCloseWingToggle() {
var transitionEvent = this._transitionProps(this._drawerContainer);
this._drawerContainer.addEventListener(transitionEvent, this._onCloseWingAnimationComplete);
this.setState({
transformValue: 'translate(0, 0)'
});
}
}, {
key: "_onCloseWingAnimationComplete",
value: function _onCloseWingAnimationComplete() {
var transitionEvent = this._transitionProps(this._drawerContainer);
this._drawerContainer.removeEventListener(transitionEvent, this._onCloseWingAnimationComplete);
this.setState({
wing: null
});
}
}, {
key: "_onScrollStart",
value: function _onScrollStart() {
var scrollContainerPos = this._drawerContainerInnerRef.parentNode.scrollTop;
this.setState({
isScrolled: scrollContainerPos > 0 ? true : false
});
}
}, {
key: "_onScrollStop",
value: function _onScrollStop() {
var scrollContainerPos = this._drawerContainerInnerRef.parentNode.scrollTop;
this.setState({
isScrolled: scrollContainerPos > 0 ? true : false
});
}
}, {
key: "_transitionProps",
value: function _transitionProps(el) {
var t;
var transitions = {
'transition': 'transitionend',
'oTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
for (t in transitions) {
if ((el === null || el === void 0 ? void 0 : el.style) && el.style[t] !== undefined) {
return transitions[t];
}
}
}
}, {
key: "render",
value: function render() {
var _this8 = this;
var _this$props8 = this.props,
children = _this$props8.children,
classes = _this$props8.classes,
className = _this$props8.className,
closeButton = _this$props8.closeButton,
color = _this$props8.color,
header = _this$props8.header,
inverse = _this$props8.inverse,
isModal = _this$props8.isModal,
scrollBar = _this$props8.scrollBar,
title = _this$props8.title,
titleTruncate = _this$props8.titleTruncate,
position = _this$props8.position;
var isOpen = this.state.isOpen;
if (!isOpen) {
return false;
}
var _this$state = this.state,
transformValue = _this$state.transformValue,
wing = _this$state.wing;
var rootClasses = (0, _classnames["default"])('ui', 'drawer', 'deprecated', classes.root, className, {
'drawer-is_modal': isModal
});
var containerInnerClasses = (0, _classnames["default"])('drawer-container', {
'color-dark-blue': color === 'dark-blue',
'drawer-container-inverse': inverse,
'drawer-container-is-scrolled': this.state.isScrolled,
'drawer-container-no-header': header === false,
'left-position': position === 'left'
});
var wingClasses = (0, _classnames["default"])('drawer-wing-container', {
'left-position': position === 'left'
});
var renderContent;
if (_lodash["default"].isArray(children)) {
console.error('Please wrap the Drawer\'s children in an enclosing tag');
return false;
}
renderContent = _react["default"].Children.map(children, function (child) {
if (_lodash["default"].isFunction(child.type)) {
return /*#__PURE__*/_react["default"].cloneElement(child, {
closeButton: closeButton,
inverse: inverse,
onClose: _this8._onClose,
title: title,
titleTruncate: titleTruncate
});
} else {
return _react["default"].Children.map(child.props.children, function (secondaryChild) {
if (_lodash["default"].isFunction(secondaryChild.type) && secondaryChild.type.name === 'DrawerDeprecatedHeader') {
return /*#__PURE__*/_react["default"].createElement(DrawerDeprecatedHeader, {
children: secondaryChild.props.children,
closeButton: closeButton,
inverse: inverse,
onClose: _this8._onClose,
title: title,
titleTruncate: titleTruncate
});
} else {
return secondaryChild;
}
});
}
});
if (_lodash["default"].isUndefined(header)) {
renderContent.unshift( /*#__PURE__*/_react["default"].createElement(DrawerDeprecatedHeader, {
closeButton: closeButton,
inverse: inverse,
key: "drawer-header-".concat(_lodash["default"].kebabCase(title)),
onClose: this._onClose,
title: title,
titleTruncate: titleTruncate
}));
}
renderContent = [/*#__PURE__*/_react["default"].createElement("div", {
className: "drawer-children",
key: "drawer-children-".concat(_lodash["default"].kebabCase(title))
}, renderContent)];
if (header === false) {
renderContent.unshift( /*#__PURE__*/_react["default"].createElement(CloseButton, {
closeButton: closeButton,
inverse: inverse,
key: "drawer-close-button",
onClose: this._onClose
}));
}
return /*#__PURE__*/_react["default"].createElement(_reactPortal.Portal, null, /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses
}, /*#__PURE__*/_react["default"].createElement("div", {
className: containerInnerClasses,
ref: function ref(el) {
return _this8.drawerContainerRef = el;
},
style: {
transform: transformValue
}
}, position === 'left' && wing ? /*#__PURE__*/_react["default"].createElement("div", {
className: wingClasses
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].cloneElement(wing, {
onOpenToggle: this.onOpenWingToggle
}))) : null, scrollBar === true || _lodash["default"].isUndefined(scrollBar) ? /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars["default"], {
autoHide: true,
onScrollStart: this._onScrollStart,
onScrollStop: this._onScrollStop
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "drawer-container-inner",
ref: function ref(el) {
return _this8._drawerContainerInnerRef = el;
},
style: {
paddingBottom: '33px',
paddingLeft: '22px',
paddingRight: '22px',
paddingTop: header === false ? '22px' : null
}
}, renderContent)) : /*#__PURE__*/_react["default"].createElement("div", {
className: "drawer-container-inner",
ref: function ref(el) {
return _this8._drawerContainerInnerRef = el;
},
style: {
paddingBottom: '33px',
paddingLeft: '22px',
paddingRight: '22px',
paddingTop: header === false ? '22px' : null
}
}, renderContent), position === 'right' && wing ? /*#__PURE__*/_react["default"].createElement("div", {
className: wingClasses
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].cloneElement(wing, {
onOpenToggle: this.onOpenWingToggle
}))) : null), /*#__PURE__*/_react["default"].createElement("div", {
className: "drawer-dimmer-deprecated"
})));
}
}]);
return DrawerDeprecated;
}(_react["default"].Component);
DrawerDeprecated.Header = DrawerDeprecatedHeader;
DrawerDeprecated.Wing = DrawerDeprecatedWing;
DrawerDeprecated.propTypes = {
/**
* Override or extend the styles applied to DrawerDeprecated.
*/
classes: _propTypes["default"].shape({
root: _propTypes["default"].string
}),
className: _propTypes["default"].string,
closeButton: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
color: _propTypes["default"].oneOf(colorEnums),
header: _propTypes["default"].bool,
inverse: _propTypes["default"].bool,
isOpen: _propTypes["default"].bool.isRequired,
isModal: _propTypes["default"].bool,
maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
onClickOutside: _propTypes["default"].bool,
onClose: _propTypes["default"].func,
onCloseComplete: _propTypes["default"].func,
onOpenComplete: _propTypes["default"].func,
path: _propTypes["default"].string,
position: _propTypes["default"].oneOf(['left', 'right']),
scrollBar: _propTypes["default"].bool,
style: _propTypes["default"].shape({}),
theme: _propTypes["default"].shape({
zIndex: _propTypes["default"].shape({
drawer: _propTypes["default"].number
})
}),
title: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].string]),
titleTruncate: _propTypes["default"].bool,
wing: _propTypes["default"].shape({})
};
DrawerDeprecated.defaultProps = {
isModal: true,
isOpen: false,
position: 'right',
theme: null
};
DrawerDeprecated.contextTypes = {
router: _propTypes["default"].shape({})
};
var _default = (0, _withStyles["default"])(styles, {
withTheme: true
})(DrawerDeprecated);
exports["default"] = _default;