text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var React = require("react");
  var Utilities_1 = require("../../Utilities");
  var index_1 = require("../FocusTrapZone/index");
  var Panel_types_1 = require("./Panel.types");
  var Layer_1 = require("../Layer/Layer");
  var Overlay_1 = require("../../Overlay");
  var Popup_1 = require("../../Popup");
  var Button_1 = require("../../Button");
  var Styling_1 = require("../../Styling");
  var stylesImport = require("./Panel.scss");
  var styles = stylesImport;
  var theme = Styling_1.getTheme();
  var Panel = /** @class */ (function (_super) {
      tslib_1.__extends(Panel, _super);
      function Panel(props) {
          var _this = _super.call(this, props) || this;
          _this._panel = Utilities_1.createRef();
          _this._content = Utilities_1.createRef();
          _this.dismiss = function () {
              if (_this.state.isOpen) {
                  _this.setState({
                      isOpen: false,
                      isAnimating: true
                  }, function () {
                      _this._async.setTimeout(_this._onTransitionComplete, 200);
                  });
                  if (_this.props.onDismiss) {
                      _this.props.onDismiss();
                  }
              }
          };
          _this._onRenderNavigation = function (props) {
              var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton;
              if (hasCloseButton) {
                  return (React.createElement("div", { className: Utilities_1.css('ms-Panel-navigation', styles.navigation) },
                      React.createElement(Button_1.IconButton, { styles: {
                              root: {
                                  height: 'auto',
                                  width: '44px',
                                  color: theme.palette.neutralSecondary,
                                  fontSize: Styling_1.IconFontSizes.large,
                              },
                              rootHovered: {
                                  color: theme.palette.neutralPrimary
                              }
                          }, className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close'), onClick: _this._onPanelClick, ariaLabel: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } })));
              }
              return null;
          };
          _this._onRenderHeader = function (props, defaultRender, headerTextId) {
              var headerText = props.headerText, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
              if (headerText) {
                  return (React.createElement("div", { className: Utilities_1.css('ms-Panel-header', styles.header) },
                      React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', styles.headerText, headerClassName), id: headerTextId, role: 'heading' }, headerText)));
              }
              return null;
          };
          _this._onRenderBody = function (props) {
              var contentClass = Utilities_1.css('ms-Panel-content', styles.content, props.isFooterAtBottom && styles.contentGrow);
              return (React.createElement("div", { ref: _this._content, className: contentClass, "data-is-scrollable": true }, props.children));
          };
          _this._onRenderFooter = function (props) {
              var isFooterSticky = _this.state.isFooterSticky;
              var _a = _this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
              if (onRenderFooterContent) {
                  return (React.createElement("div", { className: Utilities_1.css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
                      React.createElement("div", { className: Utilities_1.css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
              }
              return null;
          };
          _this._onPanelClick = function () {
              _this.dismiss();
          };
          _this._onTransitionComplete = function () {
              _this.setState({
                  isAnimating: false
              });
              if (!_this.state.isOpen && _this.props.onDismissed) {
                  _this.props.onDismissed();
              }
          };
          _this._warnDeprecations({
              'ignoreExternalFocusing': 'focusTrapZoneProps',
              'forceFocusInsideTrap': 'focusTrapZoneProps',
              'firstFocusableSelector': 'focusTrapZoneProps'
          });
          _this.state = {
              isFooterSticky: false,
              isOpen: false,
              isAnimating: false,
              id: Utilities_1.getId('Panel')
          };
          return _this;
      }
      Panel.prototype.componentDidMount = function () {
          this._events.on(window, 'resize', this._updateFooterPosition);
          if (this._shouldListenForOuterClick(this.props)) {
              this._events.on(document.body, 'click', this._dismissOnOuterClick, true);
          }
          if (this.props.isOpen) {
              this.open();
          }
      };
      Panel.prototype.componentDidUpdate = function (previousProps) {
          var shouldListenOnOuterClick = this._shouldListenForOuterClick(this.props);
          var previousShouldListenOnOuterClick = this._shouldListenForOuterClick(previousProps);
          if (shouldListenOnOuterClick && !previousShouldListenOnOuterClick) {
              this._events.on(document.body, 'click', this._dismissOnOuterClick, true);
          }
          else if (!shouldListenOnOuterClick && previousShouldListenOnOuterClick) {
              this._events.off(document.body, 'click', this._dismissOnOuterClick, true);
          }
      };
      Panel.prototype.componentWillReceiveProps = function (newProps) {
          if (newProps.isOpen !== this.state.isOpen) {
              if (newProps.isOpen) {
                  this.open();
              }
              else {
                  this.dismiss();
              }
          }
      };
      Panel.prototype.render = function () {
          var _a = this.props, _b = _a.className, className = _b === void 0 ? '' : _b, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, focusTrapZoneProps = _a.focusTrapZoneProps, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, isHiddenOnDismiss = _a.isHiddenOnDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, _c = _a.onLightDismissClick, onLightDismissClick = _c === void 0 ? this._onPanelClick : _c, _d = _a.onRenderNavigation, onRenderNavigation = _d === void 0 ? this._onRenderNavigation : _d, _e = _a.onRenderHeader, onRenderHeader = _e === void 0 ? this._onRenderHeader : _e, _f = _a.onRenderBody, onRenderBody = _f === void 0 ? this._onRenderBody : _f, _g = _a.onRenderFooter, onRenderFooter = _g === void 0 ? this._onRenderFooter : _g;
          var _h = this.state, isOpen = _h.isOpen, isAnimating = _h.isAnimating, id = _h.id;
          var isLeft = type === Panel_types_1.PanelType.smallFixedNear ? true : false;
          var isRTL = Utilities_1.getRTL();
          var isOnRightSide = isRTL ? isLeft : !isLeft;
          var headerTextId = headerText && id + '-headerText';
          var customWidthStyles = (type === Panel_types_1.PanelType.custom) ? { width: customWidth } : {};
          var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
          if (!isOpen && !isAnimating && !isHiddenOnDismiss) {
              return null;
          }
          var overlay;
          if (isBlocking && isOpen) {
              overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(styles.overlay, isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn200, !isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut200), isDarkThemed: false, onClick: isLightDismiss ? onLightDismissClick : undefined }));
          }
          var header = onRenderHeader(this.props, this._onRenderHeader, headerTextId);
          return (React.createElement(Layer_1.Layer, tslib_1.__assign({}, layerProps),
              React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: header ? headerTextId : undefined, onDismiss: this.dismiss, className: Utilities_1.css(!isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) },
                  React.createElement("div", tslib_1.__assign({}, nativeProps, { ref: this._panel, className: Utilities_1.css('ms-Panel', styles.root, className, 
                      // because the RTL animations are not being used, we need to set a class
                      isOpen && ('is-open ' + styles.rootIsOpen), type === Panel_types_1.PanelType.smallFluid && ('ms-Panel--smFluid ' + styles.rootIsSmallFluid), type === Panel_types_1.PanelType.smallFixedNear && ('ms-Panel--smLeft ' + styles.rootIsSmallLeft), type === Panel_types_1.PanelType.smallFixedFar && ('ms-Panel--sm ' + styles.rootIsSmall), type === Panel_types_1.PanelType.medium && ('ms-Panel--md ' + styles.rootIsMedium), (type === Panel_types_1.PanelType.large || type === Panel_types_1.PanelType.largeFixed) && ('ms-Panel--lg ' + styles.rootIsLarge), type === Panel_types_1.PanelType.largeFixed && ('ms-Panel--fixed ' + styles.rootIsFixed), type === Panel_types_1.PanelType.extraLarge && ('ms-Panel--xl ' + styles.rootIsXLarge), type === Panel_types_1.PanelType.custom && ('ms-Panel--custom ' + styles.rootIsCustom), hasCloseButton && ('ms-Panel--hasCloseButton ' + styles.rootHasCloseButton), !isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) }),
                      overlay,
                      React.createElement(index_1.FocusTrapZone, tslib_1.__assign({ ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: isHiddenOnDismiss && !isOpen ? false : forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector, isClickableOutsideFocusTrap: true }, focusTrapZoneProps, { className: Utilities_1.css('ms-Panel-main', styles.main, isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40, isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40, !isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40, !isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40, focusTrapZoneProps ? focusTrapZoneProps.className : undefined), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss }),
                          React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(this.props, this._onRenderNavigation)),
                          React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', styles.contentInner) },
                              header,
                              onRenderBody(this.props, this._onRenderBody),
                              onRenderFooter(this.props, this._onRenderFooter)))))));
      };
      Panel.prototype.open = function () {
          var _this = this;
          if (!this.state.isOpen) {
              this.setState({
                  isOpen: true,
                  isAnimating: true
              }, function () {
                  _this._async.setTimeout(_this._onTransitionComplete, 200);
              });
          }
      };
      Panel.prototype._shouldListenForOuterClick = function (props) {
          return !!props.isBlocking && !!props.isOpen;
      };
      Panel.prototype._updateFooterPosition = function () {
          var _content = this._content.current;
          if (_content) {
              var height = _content.clientHeight;
              var innerHeight_1 = _content.scrollHeight;
              this.setState({
                  isFooterSticky: height < innerHeight_1 ? true : false
              });
          }
      };
      Panel.prototype._dismissOnOuterClick = function (ev) {
          var panel = this._panel.current;
          if (this.state.isOpen && panel) {
              if (!Utilities_1.elementContains(panel, ev.target)) {
                  if (this.props.onOuterClick) {
                      this.props.onOuterClick();
                      ev.preventDefault();
                  }
                  else {
                      this.dismiss();
                  }
              }
          }
      };
      Panel.defaultProps = {
          isHiddenOnDismiss: false,
          isOpen: false,
          isBlocking: true,
          hasCloseButton: true,
          type: Panel_types_1.PanelType.smallFixedFar,
      };
      return Panel;
  }(Utilities_1.BaseComponent));
  exports.Panel = Panel;
  //# sourceMappingURL=Panel.js.map