wix-style-react
Version:
265 lines (218 loc) • 11 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import throttle from 'lodash/throttle';
import { generateDataAttr } from '../../utils/generateDataAttr';
import deprecationLog from '../../utils/deprecationLog';
import HeaderLayout from './HeaderLayout';
import FooterLayout from './FooterLayout';
import styles from './MessageBoxFunctionalLayout.scss';
var MessageBoxFunctionalLayout = /*#__PURE__*/function (_React$PureComponent) {
_inherits(MessageBoxFunctionalLayout, _React$PureComponent);
var _super = _createSuper(MessageBoxFunctionalLayout);
function MessageBoxFunctionalLayout(props) {
var _this;
_classCallCheck(this, MessageBoxFunctionalLayout);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "_initializeMessageBoxRef", function (el) {
if (el && el.scrollHeight > el.clientHeight) {
_this.setState({
hasScroll: true
});
_this.messageBoxRef = el;
_this.messageBoxRef.addEventListener('scroll', _this._handleMessageBoxScroll);
}
});
_defineProperty(_assertThisInitialized(_this), "_handleMessageBoxScroll", throttle(function () {
var scrolledToBottom = _this.messageBoxRef.scrollTop + _this.messageBoxRef.clientHeight === _this.messageBoxRef.scrollHeight;
if (scrolledToBottom !== _this.state.scrolledToBottom) {
_this.setState({
scrolledToBottom: scrolledToBottom
});
}
}, 16));
_defineProperty(_assertThisInitialized(_this), "_renderContent", function () {
var _classNames;
var _this$props = _this.props,
children = _this$props.children,
hideFooter = _this$props.hideFooter,
noBodyPadding = _this$props.noBodyPadding,
maxHeight = _this$props.maxHeight,
fullscreen = _this$props.fullscreen,
withEmptyState = _this$props.withEmptyState;
var _this$state = _this.state,
hasScroll = _this$state.hasScroll,
scrolledToBottom = _this$state.scrolledToBottom;
var messageBoxBodyClassNames = classNames(styles.body, (_classNames = {}, _defineProperty(_classNames, styles.scrollable, typeof maxHeight !== 'undefined'), _defineProperty(_classNames, styles.noPadding, noBodyPadding), _defineProperty(_classNames, styles.fullscreenBody, fullscreen), _defineProperty(_classNames, styles.noFooter, hideFooter), _defineProperty(_classNames, styles.footerBorder, hasScroll && !scrolledToBottom), _defineProperty(_classNames, styles.withEmptyState, withEmptyState), _classNames));
var messageBoxBodyStyle = {
maxHeight: maxHeight
};
return /*#__PURE__*/React.createElement("div", {
"data-hook": "message-box-body",
className: messageBoxBodyClassNames,
style: messageBoxBodyStyle,
ref: _this._initializeMessageBoxRef
}, children);
});
deprecationLog("Using \"<MessageBoxFunctionalLayout/>\" is deprecated. Instead, we advise you to use the newer \"<MessageModalLayout/>\" component. Please refer to it's documentation.");
_this.state = {
hasScroll: false,
scrolledToBottom: false
};
_this.messageBoxRef = null;
return _this;
}
_createClass(MessageBoxFunctionalLayout, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.state.hasScroll) {
this._handleMessageBoxScroll.cancel();
this.messageBoxRef.removeEventListener('scroll', this._handleMessageBoxScroll);
}
}
}, {
key: "render",
value: function render() {
var _classNames3;
var theme = this.props.theme;
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
title = _this$props2.title,
onCancel = _this$props2.onCancel,
onOk = _this$props2.onOk,
onClose = _this$props2.onClose,
confirmText = _this$props2.confirmText,
confirmPrefixIcon = _this$props2.confirmPrefixIcon,
confirmSuffixIcon = _this$props2.confirmSuffixIcon,
cancelText = _this$props2.cancelText,
cancelPrefixIcon = _this$props2.cancelPrefixIcon,
cancelSuffixIcon = _this$props2.cancelSuffixIcon,
buttonsHeight = _this$props2.buttonsHeight,
hideFooter = _this$props2.hideFooter,
footerBottomChildren = _this$props2.footerBottomChildren,
closeButton = _this$props2.closeButton,
disableConfirmation = _this$props2.disableConfirmation,
disableCancel = _this$props2.disableCancel,
width = _this$props2.width,
margin = _this$props2.margin,
noBodyPadding = _this$props2.noBodyPadding,
fullscreen = _this$props2.fullscreen,
withEmptyState = _this$props2.withEmptyState,
sideActions = _this$props2.sideActions,
image = _this$props2.image;
var contentClassName = classNames(styles.content, _defineProperty({}, styles.fullscreenContent, fullscreen));
var imageClassName = classNames(styles.image, (_classNames3 = {}, _defineProperty(_classNames3, styles.withFooterAction, sideActions), _defineProperty(_classNames3, styles.noPadding, noBodyPadding), _classNames3));
return /*#__PURE__*/React.createElement("div", _extends({
"data-hook": dataHook,
className: contentClassName,
style: {
width: width,
margin: margin
}
}, generateDataAttr(this.props, ['noBodyPadding', 'theme'])), /*#__PURE__*/React.createElement(HeaderLayout, {
title: title,
onCancel: onClose ? onClose : onCancel,
theme: theme,
closeButton: closeButton
}), image && !withEmptyState ? /*#__PURE__*/React.createElement("div", {
className: styles.messageWithImage
}, /*#__PURE__*/React.createElement("div", {
className: imageClassName,
children: image
}), this._renderContent()) : this._renderContent(), !hideFooter ? /*#__PURE__*/React.createElement(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
}) : null);
}
}]);
return MessageBoxFunctionalLayout;
}(React.PureComponent);
MessageBoxFunctionalLayout.propTypes = {
/** applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: PropTypes.string,
/** Hides the footer that contains the action buttons */
hideFooter: PropTypes.bool,
/** Defines the main action button text */
confirmText: PropTypes.node,
/** Add a prefix icon for the main action button */
confirmPrefixIcon: PropTypes.element,
/** Add a suffix icon for the main action button */
confirmSuffixIcon: PropTypes.element,
/** Defines the secondary action button text */
cancelText: PropTypes.node,
/** Add a prefix icon for the secondary action button */
cancelPrefixIcon: PropTypes.element,
/** Add a suffix icon for the secondary action button */
cancelSuffixIcon: PropTypes.element,
/** modal theme color */
theme: PropTypes.oneOf(['red', 'blue', 'purple']),
/** Called when the main action (confirm) is clicked */
onOk: PropTypes.func,
/** Called when the secondary action (cancel) is clicked */
onCancel: PropTypes.func,
/** Called when the close button is clicked */
onClose: PropTypes.func,
/** Specify exact width */
width: PropTypes.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.string,
/** Defines the modals's header title */
title: PropTypes.node,
/** The content to be displayed. can be text or some node */
children: PropTypes.any,
/** Max height. When supplied - will allow internal scroll to the component */
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Defines the buttons size */
buttonsHeight: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
/** Show/hide the close button */
closeButton: PropTypes.bool,
/** Defines the secondary action button */
disableCancel: PropTypes.bool,
/** Defines the main action button */
disableConfirmation: PropTypes.bool,
/** Removes the content padding. Used in custom modal that defines it's own padding*/
noBodyPadding: PropTypes.bool,
/** A render slot to display a foot note */
footerBottomChildren: PropTypes.node,
/** Stretches the component to a full screen mode (with some padding) */
fullscreen: PropTypes.bool,
/** Changes the internal padding to be used with `<EmptyState/>` component */
withEmptyState: PropTypes.bool,
/** Used to display some side component in the footer, for example `<Checkbox/>` */
sideActions: PropTypes.node,
/** Used to display an illustration on the left side */
image: PropTypes.node
};
MessageBoxFunctionalLayout.defaultProps = {
theme: 'blue',
buttonsHeight: 'small',
disableCancel: false,
disableConfirmation: false,
noBodyPadding: false,
fullscreen: false,
withEmptyState: false
};
export default MessageBoxFunctionalLayout;