wix-style-react/dist/es/src/MessageBox/FunctionalLayout/FooterLayout.js

wix-style-react

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Button from '../../Button';
import styles from './FooterLayout.scss';
var buttonSkinByTheme = {
  blue: 'standard',
  purple: 'premium',
  red: 'destructive'
};
var buttonSizeByHeight = {
  'x-small': 'tiny',
  tiny: 'tiny',
  small: 'small',
  medium: 'medium',
  large: 'large',
  'x-large': 'large'
};

var FooterLayout = function FooterLayout(_ref) {
  var bottomChildren = _ref.bottomChildren,
      children = _ref.children,
      theme = _ref.theme,
      cancelText = _ref.cancelText,
      cancelPrefixIcon = _ref.cancelPrefixIcon,
      cancelSuffixIcon = _ref.cancelSuffixIcon,
      onCancel = _ref.onCancel,
      onOk = _ref.onOk,
      confirmText = _ref.confirmText,
      confirmPrefixIcon = _ref.confirmPrefixIcon,
      confirmSuffixIcon = _ref.confirmSuffixIcon,
      buttonsHeight = _ref.buttonsHeight,
      enableOk = _ref.enableOk,
      enableCancel = _ref.enableCancel,
      sideActions = _ref.sideActions;
  var footerButtonsClassNames = classNames(styles.footerbuttons, _defineProperty({}, styles.withSideActions, sideActions && (cancelText || confirmText)));
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: styles.footer,
    "data-hook": "message-box-footer"
  }, sideActions, children, /*#__PURE__*/React.createElement("div", {
    className: footerButtonsClassNames
  }, cancelText && /*#__PURE__*/React.createElement(Button, {
    prefixIcon: cancelPrefixIcon,
    suffixIcon: cancelSuffixIcon,
    disabled: !enableCancel,
    size: buttonSizeByHeight[buttonsHeight],
    priority: "secondary",
    skin: buttonSkinByTheme[theme],
    onClick: onCancel,
    dataHook: "cancellation-button",
    children: cancelText
  }), confirmText && /*#__PURE__*/React.createElement(Button, {
    prefixIcon: confirmPrefixIcon,
    suffixIcon: confirmSuffixIcon,
    disabled: !enableOk,
    size: buttonSizeByHeight[buttonsHeight],
    priority: "primary",
    skin: buttonSkinByTheme[theme],
    onClick: onOk,
    dataHook: "confirmation-button",
    children: confirmText
  }))), bottomChildren && /*#__PURE__*/React.createElement("div", {
    "data-hook": "footer-layout-bottom-children",
    className: styles.bottomChildren,
    children: bottomChildren
  }));
};

FooterLayout.propTypes = {
  confirmText: PropTypes.node,
  confirmPrefixIcon: PropTypes.element,
  confirmSuffixIcon: PropTypes.element,
  cancelText: PropTypes.node,
  cancelPrefixIcon: PropTypes.element,
  cancelSuffixIcon: PropTypes.element,
  onCancel: PropTypes.func,
  onOk: PropTypes.func,
  enableOk: PropTypes.bool,
  enableCancel: PropTypes.bool,
  theme: PropTypes.string,
  buttonsHeight: PropTypes.string,
  children: PropTypes.any,
  bottomChildren: PropTypes.node,
  sideActions: PropTypes.node
};
FooterLayout.defaultProps = {
  theme: 'blue',
  buttonsHeight: 'small',
  enableOk: true,
  enableCancel: true
};
export default FooterLayout;