wix-style-react
Version:
284 lines (225 loc) • 13.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _generateDataAttr = require("../../utils/generateDataAttr");
var _deprecationLog = _interopRequireDefault(require("../../utils/deprecationLog"));
var _HeaderLayout = _interopRequireDefault(require("./HeaderLayout"));
var _FooterLayout = _interopRequireDefault(require("./FooterLayout"));
var _MessageBoxFunctionalLayout = _interopRequireDefault(require("../../../es/src/MessageBox/FunctionalLayout/MessageBoxFunctionalLayout.scss"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
var MessageBoxFunctionalLayout = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(MessageBoxFunctionalLayout, _React$PureComponent);
var _super = _createSuper(MessageBoxFunctionalLayout);
function MessageBoxFunctionalLayout(props) {
var _this;
(0, _classCallCheck2["default"])(this, MessageBoxFunctionalLayout);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_initializeMessageBoxRef", function (el) {
if (el && el.scrollHeight > el.clientHeight) {
_this.setState({
hasScroll: true
});
_this.messageBoxRef = el;
_this.messageBoxRef.addEventListener('scroll', _this._handleMessageBoxScroll);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleMessageBoxScroll", (0, _throttle["default"])(function () {
var scrolledToBottom = _this.messageBoxRef.scrollTop + _this.messageBoxRef.clientHeight === _this.messageBoxRef.scrollHeight;
if (scrolledToBottom !== _this.state.scrolledToBottom) {
_this.setState({
scrolledToBottom: scrolledToBottom
});
}
}, 16));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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 = (0, _classnames["default"])(_MessageBoxFunctionalLayout["default"].body, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, _MessageBoxFunctionalLayout["default"].scrollable, typeof maxHeight !== 'undefined'), (0, _defineProperty2["default"])(_classNames, _MessageBoxFunctionalLayout["default"].noPadding, noBodyPadding), (0, _defineProperty2["default"])(_classNames, _MessageBoxFunctionalLayout["default"].fullscreenBody, fullscreen), (0, _defineProperty2["default"])(_classNames, _MessageBoxFunctionalLayout["default"].noFooter, hideFooter), (0, _defineProperty2["default"])(_classNames, _MessageBoxFunctionalLayout["default"].footerBorder, hasScroll && !scrolledToBottom), (0, _defineProperty2["default"])(_classNames, _MessageBoxFunctionalLayout["default"].withEmptyState, withEmptyState), _classNames));
var messageBoxBodyStyle = {
maxHeight: maxHeight
};
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": "message-box-body",
className: messageBoxBodyClassNames,
style: messageBoxBodyStyle,
ref: _this._initializeMessageBoxRef
}, children);
});
(0, _deprecationLog["default"])("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;
}
(0, _createClass2["default"])(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 = (0, _classnames["default"])(_MessageBoxFunctionalLayout["default"].content, (0, _defineProperty2["default"])({}, _MessageBoxFunctionalLayout["default"].fullscreenContent, fullscreen));
var imageClassName = (0, _classnames["default"])(_MessageBoxFunctionalLayout["default"].image, (_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, _MessageBoxFunctionalLayout["default"].withFooterAction, sideActions), (0, _defineProperty2["default"])(_classNames3, _MessageBoxFunctionalLayout["default"].noPadding, noBodyPadding), _classNames3));
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
"data-hook": dataHook,
className: contentClassName,
style: {
width: width,
margin: margin
}
}, (0, _generateDataAttr.generateDataAttr)(this.props, ['noBodyPadding', 'theme'])), /*#__PURE__*/_react["default"].createElement(_HeaderLayout["default"], {
title: title,
onCancel: onClose ? onClose : onCancel,
theme: theme,
closeButton: closeButton
}), image && !withEmptyState ? /*#__PURE__*/_react["default"].createElement("div", {
className: _MessageBoxFunctionalLayout["default"].messageWithImage
}, /*#__PURE__*/_react["default"].createElement("div", {
className: imageClassName,
children: image
}), this._renderContent()) : this._renderContent(), !hideFooter ? /*#__PURE__*/_react["default"].createElement(_FooterLayout["default"], {
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["default"].PureComponent);
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
};
MessageBoxFunctionalLayout.defaultProps = {
theme: 'blue',
buttonsHeight: 'small',
disableCancel: false,
disableConfirmation: false,
noBodyPadding: false,
fullscreen: false,
withEmptyState: false
};
var _default = MessageBoxFunctionalLayout;
exports["default"] = _default;