@wix/design-system/dist/cjs/ModalMobileLayout/ModalMobileLayout.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _ModalMobileLayoutSt = require("./ModalMobileLayout.st.css.js");
var _Title = _interopRequireDefault(require("./components/Title/Title"));
var _Footer = _interopRequireDefault(require("./components/Footer/Footer"));
var _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ModalMobileLayout/ModalMobileLayout.tsx";
var ModalMobileLayout = _ref => {
  var {
    dataHook,
    className,
    title,
    content,
    footer,
    onOverlayClick,
    onCloseButtonClick,
    fullscreen = false,
    stickyTitle = false,
    stickyFooter = false
  } = _ref;
  var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('ModalMobileLayout', {
    X: _wixUiIconsCommon.X
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    id: "modalMobileLayout-root",
    "data-hook": dataHook,
    className: (0, _ModalMobileLayoutSt.st)(_ModalMobileLayoutSt.classes.root, {
      fullscreen,
      noTitle: !title,
      noFooter: !footer
    }, className),
    onClick: _ref2 => {
      var {
        target
      } = _ref2;
      target instanceof HTMLElement && target.id === 'modalMobileLayout-root' && onOverlayClick && onOverlayClick();
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _ModalMobileLayoutSt.classes.container,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 7
    }
  }, onCloseButtonClick && /*#__PURE__*/_react.default.createElement("div", {
    className: _ModalMobileLayoutSt.classes.close,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    dataHook: "modalMobileLayout-close-button",
    skin: "light",
    onClick: onCloseButtonClick,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 50,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(icons.X, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 15
    }
  }))), title && stickyTitle && /*#__PURE__*/_react.default.createElement(_Title.default, {
    isSticky: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59,
      columnNumber: 34
    }
  }, title), /*#__PURE__*/_react.default.createElement("div", {
    className: _ModalMobileLayoutSt.classes.content,
    "data-hook": "modalMobileLayout-content",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 61,
      columnNumber: 11
    }
  }, title && !stickyTitle && /*#__PURE__*/_react.default.createElement(_Title.default, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 62,
      columnNumber: 39
    }
  }, title), content, footer && !stickyFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 41
    }
  }, footer))), footer && stickyFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, {
    isSticky: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67,
      columnNumber: 36
    }
  }, footer)));
};
ModalMobileLayout.displayName = 'ModalMobileLayout';
var _default = exports.default = ModalMobileLayout;
//# sourceMappingURL=ModalMobileLayout.js.map