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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Button = _interopRequireDefault(require("../../Button"));

var _FooterLayout = _interopRequireDefault(require("../../../es/src/MessageBox/FunctionalLayout/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 = (0, _classnames["default"])(_FooterLayout["default"].footerbuttons, (0, _defineProperty2["default"])({}, _FooterLayout["default"].withSideActions, sideActions && (cancelText || confirmText)));
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: _FooterLayout["default"].footer,
    "data-hook": "message-box-footer"
  }, sideActions, children, /*#__PURE__*/_react["default"].createElement("div", {
    className: footerButtonsClassNames
  }, cancelText && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    prefixIcon: cancelPrefixIcon,
    suffixIcon: cancelSuffixIcon,
    disabled: !enableCancel,
    size: buttonSizeByHeight[buttonsHeight],
    priority: "secondary",
    skin: buttonSkinByTheme[theme],
    onClick: onCancel,
    dataHook: "cancellation-button",
    children: cancelText
  }), confirmText && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    prefixIcon: confirmPrefixIcon,
    suffixIcon: confirmSuffixIcon,
    disabled: !enableOk,
    size: buttonSizeByHeight[buttonsHeight],
    priority: "primary",
    skin: buttonSkinByTheme[theme],
    onClick: onOk,
    dataHook: "confirmation-button",
    children: confirmText
  }))), bottomChildren && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": "footer-layout-bottom-children",
    className: _FooterLayout["default"].bottomChildren,
    children: bottomChildren
  }));
};

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