@wix/design-system
Version:
@wix/design-system
51 lines • 3.4 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Footer.st.css.js';
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 const Footer = ({ dataHook, className, showFooterDivider = false, }) => {
const { footerClassName, skin, actionsSize, sideActions, secondaryButtonText, secondaryButtonOnClick, secondaryButtonProps, primaryButtonText, primaryButtonOnClick, primaryButtonProps, primaryButtonTooltipProps, } = useBaseModalLayoutContext();
const hasPrimaryButton = primaryButtonText || primaryButtonOnClick || primaryButtonProps;
const hasSecondaryButton = secondaryButtonText || secondaryButtonOnClick || secondaryButtonProps;
const hasFooter = hasPrimaryButton || hasSecondaryButton || sideActions;
return ((hasFooter && (React.createElement("div", { "data-hook": dataHook, "data-divider": showFooterDivider, className: st(classes.root, { showDivider: showFooterDivider }, footerClassName, className) },
React.createElement(Divider, { className: classes.divider, dataHook: dataHooks.footerDivider }),
React.createElement("div", { className: classes.innerContent },
sideActions && (React.createElement("div", { "data-hook": dataHooks.footerSideActions, className: classes.sideActions }, sideActions)),
(hasPrimaryButton || hasSecondaryButton) && (React.createElement("div", { className: classes.actions },
hasSecondaryButton && (React.createElement(Button, { skin: skin, size: actionsSize, onClick: secondaryButtonOnClick, priority: "secondary", ...secondaryButtonProps, dataHook: dataHooks.footerSecondaryButton }, secondaryButtonText ||
(secondaryButtonProps && secondaryButtonProps.children))),
hasPrimaryButton && (React.createElement(Tooltip, { dataHook: dataHooks.primaryButtonTooltip, disabled: !primaryButtonTooltipProps?.content, ...primaryButtonTooltipProps },
React.createElement(Button, { skin: skin, size: actionsSize, onClick: primaryButtonOnClick, ...primaryButtonProps, dataHook: dataHooks.footerPrimaryButton }, primaryButtonText || primaryButtonProps?.children))))))))) ||
null);
};
Footer.displayName = 'BaseModalLayout.Footer';
Footer.propTypes = {
className: PropTypes.string,
dataHook: PropTypes.string,
skin: PropTypes.oneOf(['standard', 'premium', 'destructive']),
actionsSize: Button.propTypes.size,
primaryButtonText: PropTypes.string,
primaryButtonOnClick: PropTypes.func,
primaryButtonProps: (() => {
const { dataHook, ...buttonProps } = Button.propTypes;
return PropTypes.shape(buttonProps);
})(),
primaryButtonTooltipProps: PropTypes.shape({
content: PropTypes.string,
...TooltipCommonProps,
}),
secondaryButtonText: PropTypes.string,
secondaryButtonOnClick: PropTypes.func,
secondaryButtonProps: (() => {
const { dataHook, ...buttonProps } = Button.propTypes;
return PropTypes.shape(buttonProps);
})(),
sideActions: PropTypes.node,
showFooterDivider: PropTypes.bool,
};
//# sourceMappingURL=Footer.js.map