wix-style-react
Version:
wix-style-react
313 lines (312 loc) • 11.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = 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 = _interopRequireDefault(require("./HeaderLayout"));
var _FooterLayout = _interopRequireDefault(require("./FooterLayout"));
var _MessageBoxFunctionalLayoutSt = require("./MessageBoxFunctionalLayout.st.css");
var _constants = require("./constants");
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/MessageBoxFunctionalLayout/MessageBoxFunctionalLayout.js";
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,
withFooterAction,
noPadding,
image,
maxHeight,
children
} = _ref;
var [state, setState] = _react.default.useState({
hasScroll: false,
scrolledToBottom: false
});
var ref = _react.default.useRef(null);
var handleMessageBoxScroll = (0, _throttle.default)(() => {
var scrolledToBottom = ref.current.scrollTop + ref.current.clientHeight === ref.current.scrollHeight;
if (scrolledToBottom !== state.scrolledToBottom) {
setState({
scrolledToBottom
});
}
}, 16);
(0, _react.useEffect)(() => {
if (ref && ref.current.scrollHeight > ref.current.clientHeight) {
ref.current.addEventListener('scroll', handleMessageBoxScroll);
setState({
hasScroll: true
});
}
return () => {
handleMessageBoxScroll.cancel();
// TODO: fix ESLint error
// eslint-disable-next-line react-hooks/exhaustive-deps
ref.current.removeEventListener('scroll', handleMessageBoxScroll);
};
// TODO: fix ESLint error
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ref]);
var Content = _ref2 => {
var {
newColorsBranding
} = _ref2;
var {
hasScroll,
scrolledToBottom
} = state;
var ContentLayout = () => /*#__PURE__*/_react.default.createElement("div", {
ref: ref,
"data-hook": _constants.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: 79,
columnNumber: 7
}
}, children);
if (image && !withEmptyState && !newColorsBranding) {
return /*#__PURE__*/_react.default.createElement("div", {
className: _MessageBoxFunctionalLayoutSt.classes.contentWithImage,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.image, {
withFooterAction,
noPadding
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 11
}
}, image), /*#__PURE__*/_react.default.createElement(ContentLayout, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 11
}
}));
}
return /*#__PURE__*/_react.default.createElement(ContentLayout, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 12
}
});
};
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 117,
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: 119,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.topAreaContainer, {
newColorsBranding
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 11
}
}, newColorsBranding && image ? /*#__PURE__*/_react.default.createElement("div", {
className: _MessageBoxFunctionalLayoutSt.classes.imageContainer,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 15
}
}, image) : null, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MessageBoxFunctionalLayoutSt.st)(_MessageBoxFunctionalLayoutSt.classes.contentAreaContainer, {
newColorsBranding
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_HeaderLayout.default, {
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: 141,
columnNumber: 15
}
}), /*#__PURE__*/_react.default.createElement(Content, {
newColorsBranding: newColorsBranding,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 15
}
}))), !hideFooter ? /*#__PURE__*/_react.default.createElement(_FooterLayout.default, {
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: 153,
columnNumber: 13
}
}) : null);
});
};
MessageBoxFunctionalLayout.displayName = 'MessageBoxFunctionalLayout';
MessageBoxFunctionalLayout.propTypes = {
/** applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: _propTypes.default.string,
/** Hides the footer that contains the action buttons */
hideFooter: _propTypes.default.bool,
/** Defines the main action button text */
confirmText: _propTypes.default.node,
/** Add a prefix icon for the main action button */
confirmPrefixIcon: _propTypes.default.element,
/** Add a suffix icon for the main action button */
confirmSuffixIcon: _propTypes.default.element,
/** Defines the secondary action button text */
cancelText: _propTypes.default.node,
/** Add a prefix icon for the secondary action button */
cancelPrefixIcon: _propTypes.default.element,
/** Add a suffix icon for the secondary action button */
cancelSuffixIcon: _propTypes.default.element,
/** modal theme color */
theme: _propTypes.default.oneOf(['red', 'blue', 'purple']),
/** Called when the main action (confirm) is clicked */
onOk: _propTypes.default.func,
/** Called when the secondary action (cancel) is clicked */
onCancel: _propTypes.default.func,
/** Called when the close button is clicked */
onClose: _propTypes.default.func,
/** Specify exact width */
width: _propTypes.default.string,
/** Specify exact margin. Use to fine tune position inside other elements.
* When used inside `<Modal>`, beware that `<Modal>` is a flex container, therefore specific flex item CSS rules apply for this margin. */
margin: _propTypes.default.string,
/** Defines the modals's header title */
title: _propTypes.default.node,
/** The content to be displayed. can be text or some node */
children: _propTypes.default.any,
/** Max height. When supplied - will allow internal scroll to the component */
maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Defines the buttons size */
buttonsHeight: _propTypes.default.oneOf(['tiny', 'small', 'medium', 'large']),
/** Show/hide the close button */
closeButton: _propTypes.default.bool,
/** Defines the secondary action button */
disableCancel: _propTypes.default.bool,
/** Defines the main action button */
disableConfirmation: _propTypes.default.bool,
/** Removes the content padding. Used in custom modal that defines it's own padding*/
noBodyPadding: _propTypes.default.bool,
/** A render slot to display a foot note */
footerBottomChildren: _propTypes.default.node,
/** Stretches the component to a full screen mode (with some padding) */
fullscreen: _propTypes.default.bool,
/** Changes the internal padding to be used with `<EmptyState/>` component */
withEmptyState: _propTypes.default.bool,
/** Used to display some side component in the footer, for example `<Checkbox/>` */
sideActions: _propTypes.default.node,
/** Used to display an illustration on the left side */
image: _propTypes.default.node
};
var _default = exports.default = MessageBoxFunctionalLayout;
//# sourceMappingURL=MessageBoxFunctionalLayout.js.map