@sberdevices/plasma-temple/dist/components/StateLayout/StateLayout@mobile.js

SberDevices CanvasApp Templates.

"use strict";

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

var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));

var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));

var _plasmaUi = /*#__PURE__*/require("@sberdevices/plasma-ui");

var _plasmaTokens = /*#__PURE__*/require("@sberdevices/plasma-tokens");

var _Header = /*#__PURE__*/require("../Header/Header");

var _FullScreenBackground = /*#__PURE__*/require("../FullScreenBackground/FullScreenBackground");

var _hooks = /*#__PURE__*/require("../../hooks");

var _StateLayoutCommon = /*#__PURE__*/require("./StateLayout@common");

var _StateLayoutImage = /*#__PURE__*/require("./StateLayoutImage/StateLayoutImage");

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

var defaultBottomOffset = 80;

var StyledContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-4eu9ad-0"
})(["display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:", ";box-sizing:border-box;padding-bottom:", "px;"], function (_ref) {
  var $height = _ref.$height;
  return $height ? "".concat($height, "px") : '100vh';
}, function (_ref2) {
  var offsetBottom = _ref2.offsetBottom;
  return offsetBottom !== null && offsetBottom !== void 0 ? offsetBottom : defaultBottomOffset;
});

var StyledContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-4eu9ad-1"
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;margin-top:auto;"]);

var StyledTitle = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.Headline2).withConfig({
  componentId: "plasma-temple__sc-4eu9ad-2"
})(["text-align:center;margin-bottom:0.75rem;"]);
var StyledSubtitle = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.ParagraphText1).withConfig({
  componentId: "plasma-temple__sc-4eu9ad-3"
})(["color:", ";text-align:center;margin-bottom:1.875rem;"], _plasmaTokens.secondary);

var StyledButtonWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-4eu9ad-4"
})(["display:flex;flex-direction:column;width:100%;margin-top:auto;"]);

var StateLayoutMobile = function StateLayoutMobile(_ref3) {
  var header = _ref3.header,
      image = _ref3.image,
      background = _ref3.background,
      backgroundFit = _ref3.backgroundFit,
      backgroundWidth = _ref3.backgroundWidth,
      backgroundMask = _ref3.backgroundMask,
      title = _ref3.title,
      text = _ref3.text,
      button = _ref3.button,
      children = _ref3.children,
      className = _ref3.className,
      insets = _ref3.insets;
  var height = (0, _hooks.useWindowInnerHeight)();
  return /*#__PURE__*/_react["default"].createElement(StyledContainer, {
    className: className,
    offsetBottom: insets === null || insets === void 0 ? void 0 : insets.bottom,
    $height: height
  }, header && /*#__PURE__*/_react["default"].createElement(_StateLayoutCommon.StyledHeaderContainer, null, /*#__PURE__*/_react["default"].createElement(_Header.Header, header)), background && /*#__PURE__*/_react["default"].createElement(_FullScreenBackground.FullScreenBackground, {
    src: background,
    imageWidth: backgroundWidth,
    imageFit: backgroundFit,
    mask: backgroundMask
  }), /*#__PURE__*/_react["default"].createElement(StyledContentContainer, null, /*#__PURE__*/_react["default"].createElement(_StateLayoutImage.StateLayoutImage, {
    image: children !== null && children !== void 0 ? children : image
  }), /*#__PURE__*/_react["default"].createElement(StyledTitle, {
    "data-cy": "state-layout-title",
    breakWord: false
  }, title), text && /*#__PURE__*/_react["default"].createElement(StyledSubtitle, {
    "data-cy": "state-layout-text",
    breakWord: false
  }, text)), /*#__PURE__*/_react["default"].createElement(StyledButtonWrapper, null, button));
};

exports.StateLayoutMobile = StateLayoutMobile;
//# sourceMappingURL=StateLayout@mobile.js.map