wix-style-react
Version:
139 lines (107 loc) • 4.96 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className"],
_excluded2 = ["dataHook"],
_excluded3 = ["dataHook"];
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './AnnouncementModalLayout.st.css';
import TextButton from '../TextButton';
import { dataHooks } from './constants';
import BaseModalLayout from '../BaseModalLayout';
import Button from '../Button';
/** A layout for announcement modals, to be used inside a <Modal /> */
var AnnouncementModalLayout = function AnnouncementModalLayout(_ref) {
var children = _ref.children,
className = _ref.className,
restProps = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement(BaseModalLayout, _extends({
className: st(classes.announcementModalLayout, className)
}, restProps), /*#__PURE__*/React.createElement(BaseModalLayout.Illustration, null), /*#__PURE__*/React.createElement(BaseModalLayout.Header, {
titleAppearance: 'H2'
}), /*#__PURE__*/React.createElement(BaseModalLayout.Content, {
hideTopScrollDivider: true,
hideBottomScrollDivider: true
}, children), /*#__PURE__*/React.createElement(BaseModalLayout.Footer, null), /*#__PURE__*/React.createElement(Link, restProps), /*#__PURE__*/React.createElement("div", {
className: classes.bottomSpacing
}), /*#__PURE__*/React.createElement(BaseModalLayout.Footnote, null));
};
var Link = function Link(_ref2) {
var linkText = _ref2.linkText,
linkOnClick = _ref2.linkOnClick,
theme = _ref2.theme;
return (linkText || linkOnClick) && /*#__PURE__*/React.createElement("div", {
className: classes.link
}, /*#__PURE__*/React.createElement(TextButton, {
size: "small",
weight: "normal",
dataHook: dataHooks.link,
onClick: linkOnClick,
skin: theme
}, linkText)) || null;
};
AnnouncementModalLayout.displayName = 'AnnouncementModalLayout';
AnnouncementModalLayout.propTypes = {
/** ...BaseModalLayout.propTypes, */
/** additional css classes */
className: PropTypes.string,
/** data hook for testing */
dataHook: PropTypes.string,
/** callback for when the close button is clicked */
onCloseButtonClick: PropTypes.func,
/** callback for when the help button is clicked */
onHelpButtonClick: PropTypes.func,
/** a global theme for the modal, will be applied as stylable state and will affect footer buttons skin */
theme: PropTypes.oneOf(['standard', 'premium']),
/** ...Header.propTypes, */
/** The modal's title */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** The modal's subtitle */
subtitle: PropTypes.string,
/** ...Content.propTypes, */
/** the content you want to render in the modal, children passed directly will be treated as `content` as well */
content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** ...Footer.propTypes, */
/** will determine the action buttons size*/
actionsSize: Button.propTypes.size,
/** a text for the primary action button */
primaryButtonText: PropTypes.string,
/** a callback for when the primary action button is clicked */
primaryButtonOnClick: PropTypes.func,
/** Passed to the primary action button as props without any filter / mutation */
primaryButtonProps: function () {
var _Button$propTypes = Button.propTypes,
dataHook = _Button$propTypes.dataHook,
buttonProps = _objectWithoutProperties(_Button$propTypes, _excluded2);
return PropTypes.shape(buttonProps);
}(),
/** a text for the secondary action button */
secondaryButtonText: PropTypes.string,
/** callback for when the secondary action button is clicked */
secondaryButtonOnClick: PropTypes.func,
/** Passed to the secondary button as props without any filter / mutation */
secondaryButtonProps: function () {
var _Button$propTypes2 = Button.propTypes,
dataHook = _Button$propTypes2.dataHook,
buttonProps = _objectWithoutProperties(_Button$propTypes2, _excluded3);
return PropTypes.shape(buttonProps);
}(),
/** side actions node, to be rendered as the first element on the same row as the action buttons */
sideActions: PropTypes.node,
/** ...Footnote.propTypes, */
/** a footnote node, to be rendered at the very bottom of the modal */
footnote: PropTypes.node,
/** ...Illustration.propTypes, */
/** The illustration src or the illustration node itself */
illustration: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** AnnouncementModalLayout */
/** When not provided, the primary link will not be rendered */
linkText: PropTypes.string,
/** callback for when the link is clicked */
linkOnClick: PropTypes.func
};
AnnouncementModalLayout.defaultProps = {
theme: 'standard',
actionsSize: 'medium'
};
export default AnnouncementModalLayout;