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

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.MessageBoxFunctionalLayout = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _generateDataAttr = require("../utils/generateDataAttr");
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _HeaderLayout = require("./components/HeaderLayout");
var _FooterLayout = require("./components/FooterLayout");
var _MessageBoxFunctionalLayoutSt = require("./MessageBoxFunctionalLayout.st.css.js");
var _MessageBoxFunctionalLayout = require("./MessageBoxFunctionalLayout.constants");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MessageBoxFunctionalLayout/MessageBoxFunctionalLayout.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * @deprecated MessageBoxFunctionalLayout is deprecated and will be removed in the next major version. Please use MessageModalLayout instead.
 */
var MessageBoxFunctionalLayout = _ref => {
  var {
    theme = 'blue',
    buttonsHeight = 'small',
    disableCancel = false,
    disableConfirmation = false,
    noBodyPadding = false,
    fullscreen = false,
    withEmptyState = false,
    dataHook,
    title,
    onCancel,
    onOk,
    onClose,
    confirmText,
    confirmPrefixIcon,
    confirmSuffixIcon,
    cancelText,
    cancelPrefixIcon,
    cancelSuffixIcon,
    hideFooter,
    footerBottomChildren,
    closeButton,
    width,
    margin,
    sideActions,
    image,
    maxHeight,
    children
  } = _ref;
  var [hasScroll, setHasScroll] = (0, _react.useState)(false);
  var [scrolledToBottom, setScrolledToBottom] = (0, _react.useState)(false);
  var ref = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    (0, _deprecationLog.default)('<MessageBoxFunctionalLayout/> is deprecated and will be removed in the next major version. Please use <MessageModalLayout/> instead.');
  }, []);
  var [handleMessageBoxScroll] = (0, _react.useState)(() => (0, _throttle.default)(() => {
    setScrolledToBottom(ref.current ? ref.current.scrollTop + ref.current.clientHeight === ref.current.scrollHeight : false);
  }, 16));
  (0, _react.useEffect)(() => {
    var scrollElement = ref.current;
    if (scrollElement && (scrollElement == null ? void 0 : scrollElement.scrollHeight) > (scrollElement == null ? void 0 : scrollElement.clientHeight)) {
      scrollElement.addEventListener('scroll', handleMessageBoxScroll);
      setHasScroll(true);
    }
    return () => {
      handleMessageBoxScroll.cancel();
      scrollElement == null || scrollElement.removeEventListener('scroll', handleMessageBoxScroll);
    };
  }, [ref, handleMessageBoxScroll]);
  var Content = () => {
    var ContentLayout = () => /*#__PURE__*/_react.default.createElement("div", {
      ref: ref,
      "data-hook": _MessageBoxFunctionalLayout.dataHooks.content,
      className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.content, {
        scrollable: typeof maxHeight !== 'undefined',
        noPadding: noBodyPadding,
        fullscreen: fullscreen,
        noFooter: hideFooter,
        footerBorder: hasScroll && !scrolledToBottom,
        withEmptyState
      }),
      style: {
        maxHeight
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 83,
        columnNumber: 7
      }
    }, children);
    return /*#__PURE__*/_react.default.createElement(ContentLayout, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 100,
        columnNumber: 12
      }
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    "data-hook": dataHook,
    className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.root, {
      fullscreen,
      hasImage: !!image
    }),
    style: {
      width,
      margin
    }
  }, (0, _generateDataAttr.generateDataAttr)({
    noBodyPadding,
    theme
  }, ['noBodyPadding', 'theme']), {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 104,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.topAreaContainer),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 116,
      columnNumber: 7
    }
  }, image ? /*#__PURE__*/_react.default.createElement("div", {
    className: _MessageBoxFunctionalLayoutSt.classes.imageContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 117,
      columnNumber: 18
    }
  }, image) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.contentAreaContainer),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 118,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_HeaderLayout.HeaderLayout, {
    title: title,
    onCancel: onClose ? onClose : onCancel,
    closeButton: closeButton,
    size: "large",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 119,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 125,
      columnNumber: 11
    }
  }))), !hideFooter ? /*#__PURE__*/_react.default.createElement(_FooterLayout.FooterLayout, {
    bottomChildren: footerBottomChildren,
    enableCancel: !disableCancel,
    enableOk: !disableConfirmation,
    buttonsHeight: buttonsHeight,
    confirmText: confirmText,
    confirmPrefixIcon: confirmPrefixIcon,
    confirmSuffixIcon: confirmSuffixIcon,
    cancelText: cancelText,
    cancelPrefixIcon: cancelPrefixIcon,
    cancelSuffixIcon: cancelSuffixIcon,
    onCancel: onCancel,
    onOk: onOk,
    theme: theme,
    sideActions: sideActions,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 129,
      columnNumber: 9
    }
  }) : null);
};
exports.MessageBoxFunctionalLayout = MessageBoxFunctionalLayout;
MessageBoxFunctionalLayout.displayName = 'MessageBoxFunctionalLayout';
//# sourceMappingURL=MessageBoxFunctionalLayout.js.map