wix-style-react/dist/src/ModalMobileLayout/ModalMobileLayout.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _ModalMobileLayoutSt = require("./ModalMobileLayout.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ModalMobileLayout/ModalMobileLayout.js";
class ModalMobileLayout extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._renderTitle = () => /*#__PURE__*/_react.default.createElement("div", {
      className: _ModalMobileLayoutSt.classes.title,
      "data-hook": "modalMobileLayout-title",
      "data-sticky-title": this.props.stickyTitle,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 112,
        columnNumber: 5
      }
    }, this.props.title);
    this._renderFooter = () => /*#__PURE__*/_react.default.createElement("div", {
      className: _ModalMobileLayoutSt.classes.footer,
      "data-hook": "modalMobileLayout-footer",
      "data-sticky-footer": this.props.stickyFooter,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 122,
        columnNumber: 5
      }
    }, this.props.footer);
  }
  render() {
    var {
      dataHook,
      className,
      title,
      content,
      footer,
      onOverlayClick,
      onCloseButtonClick,
      fullscreen,
      stickyTitle,
      stickyFooter
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      id: "modalMobileLayout-root",
      "data-hook": dataHook,
      className: (0, _ModalMobileLayoutSt.st)(_ModalMobileLayoutSt.classes.root, {
        fullscreen,
        stickyTitle,
        stickyFooter,
        noTitle: !title,
        noFooter: !footer
      }, className),
      onClick: _ref => {
        var {
          target: {
            id
          }
        } = _ref;
        id === 'modalMobileLayout-root' && onOverlayClick && onOverlayClick();
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 64,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _ModalMobileLayoutSt.classes.container,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 82,
        columnNumber: 9
      }
    }, onCloseButtonClick && /*#__PURE__*/_react.default.createElement("div", {
      className: _ModalMobileLayoutSt.classes.close,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 84,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      dataHook: "modalMobileLayout-close-button",
      skin: "light",
      onClick: onCloseButtonClick,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 85,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.X, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 90,
        columnNumber: 17
      }
    }))), title && stickyTitle && this._renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
      className: _ModalMobileLayoutSt.classes.content,
      "data-hook": "modalMobileLayout-content",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 95,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 99,
        columnNumber: 13
      }
    }, title && !stickyTitle && this._renderTitle(), content, footer && !stickyFooter && this._renderFooter())), footer && stickyFooter && this._renderFooter()));
  }
}
ModalMobileLayout.displayName = 'ModalMobileLayout';
ModalMobileLayout.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** A css class to be applied to the component's root element */
  className: _propTypes.default.string,
  /** title node to be displayed in the header strip */
  title: _propTypes.default.node,
  /** If true, the title will be sticky to the top of the modal */
  stickyTitle: _propTypes.default.bool,
  /** content node to be displayed */
  content: _propTypes.default.node,
  /** footer node to be displayed */
  footer: _propTypes.default.node,
  /** If true, the footer will be sticky to the bottom of the modal */
  stickyFooter: _propTypes.default.bool,
  /** callback for when there's a click on the overlay (in case the modal in not fullscreen) */
  onOverlayClick: _propTypes.default.func,
  /** callback for when the the close button is clicked.  **Note**: if this prop is not provided, then the close button will not be shown. */
  onCloseButtonClick: _propTypes.default.func,
  /** If true, the modal will take all of the screen */
  fullscreen: _propTypes.default.bool
};
ModalMobileLayout.defaultProps = {
  stickyTitle: false,
  stickyFooter: false,
  fullscreen: false
};
var _default = exports.default = ModalMobileLayout;
//# sourceMappingURL=ModalMobileLayout.js.map