wix-style-react
Version:
132 lines (113 loc) • 6.4 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
var _excluded = ["dataHook"],
_excluded2 = ["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) { _defineProperty(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; }
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Footer.st.css';
import Button from '../../../Button';
import { dataHooks } from '../../constants';
import Divider from '../../../Divider';
import { useBaseModalLayoutContext } from '../../BaseModalLayoutContext';
import Tooltip from '../../../Tooltip';
import { TooltipCommonProps } from '../../../common/PropTypes/TooltipCommon';
export var Footer = function Footer(_ref) {
var dataHook = _ref.dataHook,
className = _ref.className,
showFooterDivider = _ref.showFooterDivider;
var _useBaseModalLayoutCo = useBaseModalLayoutContext(),
footerClassName = _useBaseModalLayoutCo.footerClassName,
theme = _useBaseModalLayoutCo.theme,
actionsSize = _useBaseModalLayoutCo.actionsSize,
sideActions = _useBaseModalLayoutCo.sideActions,
secondaryButtonText = _useBaseModalLayoutCo.secondaryButtonText,
secondaryButtonOnClick = _useBaseModalLayoutCo.secondaryButtonOnClick,
secondaryButtonProps = _useBaseModalLayoutCo.secondaryButtonProps,
primaryButtonText = _useBaseModalLayoutCo.primaryButtonText,
primaryButtonOnClick = _useBaseModalLayoutCo.primaryButtonOnClick,
primaryButtonProps = _useBaseModalLayoutCo.primaryButtonProps,
primaryButtonTooltipProps = _useBaseModalLayoutCo.primaryButtonTooltipProps;
var hasPrimaryButton = primaryButtonText || primaryButtonOnClick || primaryButtonProps;
var hasSecondaryButton = secondaryButtonText || secondaryButtonOnClick || secondaryButtonProps;
var hasFooter = hasPrimaryButton || hasSecondaryButton || sideActions;
return hasFooter && /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
"data-divider": showFooterDivider,
className: st(classes.root, {
showDivider: showFooterDivider
}, footerClassName, className)
}, /*#__PURE__*/React.createElement(Divider, {
className: classes.divider,
dataHook: dataHooks.footerDivider
}), /*#__PURE__*/React.createElement("div", {
className: classes.innerContent
}, sideActions && /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.footerSideActions,
className: classes.sideActions
}, sideActions), (hasPrimaryButton || hasSecondaryButton) && /*#__PURE__*/React.createElement("div", {
className: classes.actions
}, hasSecondaryButton && /*#__PURE__*/React.createElement(Button, _extends({
skin: theme,
size: actionsSize,
onClick: secondaryButtonOnClick,
priority: "secondary"
}, secondaryButtonProps, {
dataHook: dataHooks.footerSecondaryButton
}), secondaryButtonText || secondaryButtonProps && secondaryButtonProps.children), hasPrimaryButton && /*#__PURE__*/React.createElement(Tooltip, _extends({
dataHook: dataHooks.primaryButtonTooltip,
disabled: !(primaryButtonTooltipProps !== null && primaryButtonTooltipProps !== void 0 && primaryButtonTooltipProps.content)
}, primaryButtonTooltipProps), /*#__PURE__*/React.createElement(Button, _extends({
skin: theme,
size: actionsSize,
onClick: primaryButtonOnClick
}, primaryButtonProps, {
dataHook: dataHooks.footerPrimaryButton
}), primaryButtonText || (primaryButtonProps === null || primaryButtonProps === void 0 ? void 0 : primaryButtonProps.children)))))) || null;
};
Footer.displayName = 'BaseModalLayout.Footer';
Footer.propTypes = {
/** additional css classes */
className: PropTypes.string,
/** data hook for testing */
dataHook: PropTypes.string,
/** a theme for the Footer, will affect footer action buttons skin */
theme: PropTypes.oneOf(['standard', 'premium', 'destructive']),
/** 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, _excluded);
return PropTypes.shape(buttonProps);
}(),
/** Allows to pass all common tooltip props */
primaryButtonTooltipProps: PropTypes.shape(_objectSpread({
content: PropTypes.string
}, TooltipCommonProps)),
/** 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, _excluded2);
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,
/** shows the footer divider */
showFooterDivider: PropTypes.bool
};
Footer.defaultProps = {
showFooterDivider: false
};