@wix/design-system
Version:
@wix/design-system
264 lines (263 loc) • 9.75 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 _react = _interopRequireWildcard(require("react"));
var _generateDataAttr = require("../utils/generateDataAttr");
var _propTypes = _interopRequireDefault(require("prop-types"));
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 _context = require("../WixDesignSystemProvider/context");
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); }
/** MessageBoxFunctionalLayout */
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);
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 = _ref2 => {
var {
newColorsBranding
} = _ref2;
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,
newColorsBranding,
fullscreenBody: fullscreen,
noFooter: hideFooter,
footerBorder: hasScroll && !scrolledToBottom,
withEmptyState
}),
style: {
maxHeight
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 7
}
}, children);
if (image && !withEmptyState && !newColorsBranding) {
return /*#__PURE__*/_react.default.createElement("div", {
className: _MessageBoxFunctionalLayoutSt.classes.contentWithImage,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.image),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 11
}
}, image), /*#__PURE__*/_react.default.createElement(ContentLayout, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 11
}
}));
}
return /*#__PURE__*/_react.default.createElement(ContentLayout, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 12
}
});
};
return /*#__PURE__*/_react.default.createElement(_context.WixDesignSystemContext.Consumer, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 5
}
}, _ref3 => {
var {
newColorsBranding
} = _ref3;
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
"data-hook": dataHook,
className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.root, {
fullscreen,
newColorsBranding: newColorsBranding && !image,
hasImage: newColorsBranding && !!image
}),
style: {
width,
margin
}
}, (0, _generateDataAttr.generateDataAttr)({
noBodyPadding,
theme
}, ['noBodyPadding', 'theme']), {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.topAreaContainer, {
newColorsBranding
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 11
}
}, newColorsBranding && image ? /*#__PURE__*/_react.default.createElement("div", {
className: _MessageBoxFunctionalLayoutSt.classes.imageContainer,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 15
}
}, image) : null, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.contentAreaContainer, {
newColorsBranding
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_HeaderLayout.HeaderLayout, {
title: title,
onCancel: onClose ? onClose : onCancel,
theme: !newColorsBranding ? theme : 'newColorsBranding',
closeButton: closeButton,
size: newColorsBranding ? 'large' : 'medium',
newColorsBranding: newColorsBranding,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 15
}
}), /*#__PURE__*/_react.default.createElement(Content, {
newColorsBranding: newColorsBranding,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 15
}
}))), !hideFooter ? /*#__PURE__*/_react.default.createElement(_FooterLayout.FooterLayout, {
newColorsBranding: newColorsBranding,
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: 143,
columnNumber: 13
}
}) : null);
});
};
exports.MessageBoxFunctionalLayout = MessageBoxFunctionalLayout;
MessageBoxFunctionalLayout.displayName = 'MessageBoxFunctionalLayout';
MessageBoxFunctionalLayout.propTypes = {
dataHook: _propTypes.default.any,
hideFooter: _propTypes.default.any,
confirmText: _propTypes.default.any,
confirmPrefixIcon: _propTypes.default.any,
confirmSuffixIcon: _propTypes.default.any,
cancelText: _propTypes.default.any,
cancelPrefixIcon: _propTypes.default.any,
cancelSuffixIcon: _propTypes.default.any,
theme: _propTypes.default.any,
onOk: _propTypes.default.any,
onCancel: _propTypes.default.any,
onClose: _propTypes.default.any,
width: _propTypes.default.any,
margin: _propTypes.default.any,
title: _propTypes.default.any,
children: _propTypes.default.any,
maxHeight: _propTypes.default.any,
buttonsHeight: _propTypes.default.any,
closeButton: _propTypes.default.any,
disableCancel: _propTypes.default.any,
disableConfirmation: _propTypes.default.any,
noBodyPadding: _propTypes.default.any,
footerBottomChildren: _propTypes.default.any,
fullscreen: _propTypes.default.any,
withEmptyState: _propTypes.default.any,
sideActions: _propTypes.default.any,
image: _propTypes.default.any
};
//# sourceMappingURL=MessageBoxFunctionalLayout.js.map