@wix/design-system
Version:
@wix/design-system
25 lines • 2.52 kB
JavaScript
import React from 'react';
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';
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", dataHook: dataHooks.footerSecondaryButton, ...secondaryButtonProps, internalDataHook: 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, dataHook: dataHooks.footerPrimaryButton, ...primaryButtonProps, internalDataHook: dataHooks.footerPrimaryButton }, primaryButtonText || primaryButtonProps?.children))))))))) ||
null);
};
Footer.displayName = 'BaseModalLayout.Footer';
//# sourceMappingURL=Footer.js.map