wix-style-react
Version:
wix-style-react
158 lines (156 loc) • 6.64 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _BaseModalLayoutSt = require("./BaseModalLayout.st.css");
var _constants = require("./constants");
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _system = require("@wix/wix-ui-icons-common/system/");
var _ThemeProviderConsumerBackwardCompatible = require("../ThemeProvider/ThemeProviderConsumerBackwardCompatible");
var _BaseModalLayoutContext = require("./BaseModalLayoutContext");
var _LayoutBlocks = require("./LayoutBlocks");
var _Box = _interopRequireDefault(require("../Box"));
var _excluded = ["dataHook", "className", "children", "style", "onCloseButtonClick", "onHelpButtonClick"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/BaseModalLayout/BaseModalLayout.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classNames = {
headerClassName: _BaseModalLayoutSt.classes.header,
contentClassName: _BaseModalLayoutSt.classes.content,
footerClassName: _BaseModalLayoutSt.classes.footer,
footnoteClassName: _BaseModalLayoutSt.classes.footnote,
illustrationClassName: _BaseModalLayoutSt.classes.illustration
};
/** Private component to be used by all public modals. Represents the common internals of all modals */
class BaseModalLayout extends _react.default.PureComponent {
render() {
var _this$props = this.props,
{
dataHook,
className,
children,
style,
onCloseButtonClick,
onHelpButtonClick
} = _this$props,
restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var {
theme
} = restProps;
var controlButtonAmount = [onCloseButtonClick, onHelpButtonClick].filter(Boolean).length;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
"data-theme": theme,
style: style,
className: (0, _BaseModalLayoutSt.st)(_BaseModalLayoutSt.classes.root, {
theme,
controlButtonAmount
}, className),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 7
}
}, controlButtonAmount > 0 && /*#__PURE__*/_react.default.createElement(_ThemeProviderConsumerBackwardCompatible.ThemeProviderConsumerBackwardCompatible, {
defaultIcons: {
BaseModalLayout: {
HelpIcon: _system.Help24
}
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 11
}
}, _ref => {
var {
icons: {
BaseModalLayout: {
HelpIcon
}
}
} = _ref;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
direction: "horizontal",
className: _BaseModalLayoutSt.classes.controlButtons,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 15
}
}, onHelpButtonClick && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
dataHook: _constants.dataHooks.helpButton,
className: _BaseModalLayoutSt.classes.helpButton,
onClick: onHelpButtonClick,
size: "large",
skin: "dark",
"aria-label": _constants.labels.help,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 19
}
}, /*#__PURE__*/_react.default.createElement(HelpIcon, {
className: _BaseModalLayoutSt.classes.helpIcon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 21
}
})), onCloseButtonClick && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
dataHook: _constants.dataHooks.closeButton,
className: _BaseModalLayoutSt.classes.closeButton,
onClick: onCloseButtonClick,
size: "large",
skin: "dark",
"aria-label": _constants.labels.close,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 19
}
}));
}), /*#__PURE__*/_react.default.createElement(_BaseModalLayoutContext.BaseModalLayoutContext.Provider, {
value: _objectSpread(_objectSpread({}, restProps), classNames),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 9
}
}, children));
}
}
BaseModalLayout.Header = _LayoutBlocks.Header;
BaseModalLayout.Content = _LayoutBlocks.Content;
BaseModalLayout.Footer = _LayoutBlocks.Footer;
BaseModalLayout.Footnote = _LayoutBlocks.Footnote;
BaseModalLayout.Illustration = _LayoutBlocks.Illustration;
BaseModalLayout.propTypes = {
/** additional css classes */
className: _propTypes.default.string,
/** data hook for testing */
dataHook: _propTypes.default.string,
/** callback for when the close button is clicked */
onCloseButtonClick: _propTypes.default.func,
/** callback for when the help button is clicked */
onHelpButtonClick: _propTypes.default.func,
/** a global theme for the modal, will be applied as stylable state and will affect footer buttons skin */
theme: _propTypes.default.oneOf(['standard', 'premium', 'destructive'])
};
BaseModalLayout.defaultProps = {
theme: 'standard'
};
BaseModalLayout.displayName = 'BaseModalLayout';
var _default = exports.default = BaseModalLayout;
//# sourceMappingURL=BaseModalLayout.js.map