wix-style-react
Version:
213 lines (162 loc) • 9.29 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 _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 _CustomModalLayoutSt = require("./CustomModalLayout.st.css");
var _BaseModalLayout = _interopRequireDefault(require("../BaseModalLayout"));
var _Button = _interopRequireDefault(require("../Button"));
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
var _excluded = ["children", "removeContentPadding", "showHeaderDivider", "showFooterDivider", "hideContentDividers", "width", "height", "maxHeight", "className", "style", "overflowY"],
_excluded2 = ["dataHook"],
_excluded3 = ["dataHook"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/** CustomModalLayout */
var CustomModalLayout = function CustomModalLayout(_ref) {
var children = _ref.children,
removeContentPadding = _ref.removeContentPadding,
showHeaderDivider = _ref.showHeaderDivider,
showFooterDivider = _ref.showFooterDivider,
hideContentDividers = _ref.hideContentDividers,
width = _ref.width,
height = _ref.height,
maxHeight = _ref.maxHeight,
className = _ref.className,
style = _ref.style,
overflowY = _ref.overflowY,
restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
if (hideContentDividers) {
(0, _deprecationLog["default"])('<CustomModalLayout/> - hideContentDividers prop is deprecated and will be removed in next major release, please use showHeaderDivider and showFooterDivider instead');
}
return /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"], (0, _extends2["default"])({}, restProps, {
className: (0, _CustomModalLayoutSt.st)(_CustomModalLayoutSt.classes.root, {
removeContentPadding: removeContentPadding,
showHeaderDivider: showHeaderDivider === true,
showFooterDivider: showFooterDivider === true
}, className),
style: _objectSpread(_objectSpread({}, style), {}, {
width: width !== undefined ? width : style.width,
height: height !== undefined ? height : style.height,
maxHeight: maxHeight !== undefined ? maxHeight : style.maxHeight
}),
"data-contentpadding": !removeContentPadding
}), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Header, {
showHeaderDivider: showHeaderDivider === true
}), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Content, {
overflowY: overflowY,
hideTopScrollDivider: hideContentDividers || showHeaderDivider !== 'auto',
hideBottomScrollDivider: hideContentDividers || showFooterDivider !== 'auto'
}, children), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Footer, {
showFooterDivider: showFooterDivider === true
}), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Footnote, null));
};
CustomModalLayout.Title = _BaseModalLayout["default"].Header.Title;
CustomModalLayout.displayName = 'CustomModalLayout';
CustomModalLayout.propTypes = {
/** ...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']),
/** ...Header.propTypes, */
/** The modal's title */
title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
/** The modal's subtitle */
subtitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
/** ...Content.propTypes, */
/** the content you want to render in the modal, children passed directly will be treated as `content` as well */
content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
/** ...Footer.propTypes, */
/** will determine the action buttons size*/
actionsSize: _Button["default"].propTypes.size,
/** a text for the primary action button */
primaryButtonText: _propTypes["default"].string,
/** a callback for when the primary action button is clicked */
primaryButtonOnClick: _propTypes["default"].func,
/** Passed to the primary action button as props without any filter / mutation */
primaryButtonProps: function () {
var _Button$propTypes = _Button["default"].propTypes,
dataHook = _Button$propTypes.dataHook,
buttonProps = (0, _objectWithoutProperties2["default"])(_Button$propTypes, _excluded2);
return _propTypes["default"].shape(buttonProps);
}(),
/** Allows to pass all common tooltip props. Check `<Tooltip/>` for a full API. */
primaryButtonTooltipProps: _propTypes["default"].shape(_objectSpread({
content: _propTypes["default"].string
}, _TooltipCommon.TooltipCommonProps)),
/** a text for the secondary action button */
secondaryButtonText: _propTypes["default"].string,
/** callback for when the secondary action button is clicked */
secondaryButtonOnClick: _propTypes["default"].func,
/** Passed to the secondary button as props without any filter / mutation */
secondaryButtonProps: function () {
var _Button$propTypes2 = _Button["default"].propTypes,
dataHook = _Button$propTypes2.dataHook,
buttonProps = (0, _objectWithoutProperties2["default"])(_Button$propTypes2, _excluded3);
return _propTypes["default"].shape(buttonProps);
}(),
/** side actions node, to be rendered as the first element on the same row as the action buttons */
sideActions: _propTypes["default"].node,
/** ...Footnote.propTypes, */
/** a footnote node, to be rendered at the very bottom of the modal */
footnote: _propTypes["default"].node,
/** CustomModalLayout */
/** When set to true, there will be no content padding */
removeContentPadding: _propTypes["default"].bool,
/** Modal desired width */
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** Modal desired height */
height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** Modal desired max-height */
maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** whether to show divider above content (default: 'auto')
* when set to 'auto' - shows top divider when scroll position is greater than 0
* when set to true - top divider is always shown
* when set to false - top divider is never shown
*/
showHeaderDivider: _propTypes["default"].oneOf(['auto', true, false]),
/** whether to show divider below content (default: 'auto')
* when set to 'auto' - shows bottom divider until content is scrolled to the boottom
* when set to true - bottom divider is always shown
* when set to false - bottom divider is never shown
*/
showFooterDivider: _propTypes["default"].oneOf(['auto', true, false]),
/**
* Hides dividers that shows above/below the content
* @deprecated
*/
hideContentDividers: _propTypes["default"].bool,
/** Inline style */
style: _propTypes["default"].object,
/**
* Sets content overflow value
* @default 'auto'
*/
overflowY: _propTypes["default"].string
};
CustomModalLayout.defaultProps = {
theme: 'standard',
actionsSize: 'small',
removeContentPadding: false,
showHeaderDivider: 'auto',
showFooterDivider: 'auto',
hideContentDividers: false,
overflowY: 'auto',
style: {}
};
var _default = CustomModalLayout;
exports["default"] = _default;