@wix/design-system
Version:
@wix/design-system
202 lines (201 loc) • 8.56 kB
JavaScript
"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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 _ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? 'blue' : _ref$theme,
_ref$buttonsHeight = _ref.buttonsHeight,
buttonsHeight = _ref$buttonsHeight === void 0 ? 'small' : _ref$buttonsHeight,
_ref$disableCancel = _ref.disableCancel,
disableCancel = _ref$disableCancel === void 0 ? false : _ref$disableCancel,
_ref$disableConfirmat = _ref.disableConfirmation,
disableConfirmation = _ref$disableConfirmat === void 0 ? false : _ref$disableConfirmat,
_ref$noBodyPadding = _ref.noBodyPadding,
noBodyPadding = _ref$noBodyPadding === void 0 ? false : _ref$noBodyPadding,
_ref$fullscreen = _ref.fullscreen,
fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
_ref$withEmptyState = _ref.withEmptyState,
withEmptyState = _ref$withEmptyState === void 0 ? false : _ref$withEmptyState,
dataHook = _ref.dataHook,
title = _ref.title,
onCancel = _ref.onCancel,
onOk = _ref.onOk,
onClose = _ref.onClose,
confirmText = _ref.confirmText,
confirmPrefixIcon = _ref.confirmPrefixIcon,
confirmSuffixIcon = _ref.confirmSuffixIcon,
cancelText = _ref.cancelText,
cancelPrefixIcon = _ref.cancelPrefixIcon,
cancelSuffixIcon = _ref.cancelSuffixIcon,
hideFooter = _ref.hideFooter,
footerBottomChildren = _ref.footerBottomChildren,
closeButton = _ref.closeButton,
width = _ref.width,
margin = _ref.margin,
sideActions = _ref.sideActions,
image = _ref.image,
maxHeight = _ref.maxHeight,
children = _ref.children;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
hasScroll = _useState2[0],
setHasScroll = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
scrolledToBottom = _useState4[0],
setScrolledToBottom = _useState4[1];
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 _useState5 = (0, _react.useState)(() => (0, _throttle.default)(() => {
setScrolledToBottom(ref.current ? ref.current.scrollTop + ref.current.clientHeight === ref.current.scrollHeight : false);
}, 16)),
_useState6 = (0, _slicedToArray2.default)(_useState5, 1),
handleMessageBoxScroll = _useState6[0];
(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