wix-style-react/dist/src/FloatingHelper/FloatingHelperContent/FloatingHelperContent.js

wix-style-react

"use strict";

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

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

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

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

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

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

var _FloatingHelperContentSt = require("./FloatingHelperContent.st.css");

var _constants = require("../constants");

var _constants2 = require("./constants");

var _Text = _interopRequireDefault(require("../../Text"));

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

var _constants3 = require("../../Button/constants");

var _themeToButtonProps;

var themeToButtonProps = (_themeToButtonProps = {}, (0, _defineProperty2["default"])(_themeToButtonProps, _constants2.actionButtonTheme.white, {
  skin: _constants3.SKINS.light,
  priority: _constants3.PRIORITY.secondary
}), (0, _defineProperty2["default"])(_themeToButtonProps, _constants2.actionButtonTheme.standard, {
  skin: _constants3.SKINS.standard,
  priority: _constants3.PRIORITY.secondary
}), (0, _defineProperty2["default"])(_themeToButtonProps, _constants2.actionButtonTheme.premium, {
  skin: _constants3.SKINS.premium,
  priority: _constants3.PRIORITY.primary
}), (0, _defineProperty2["default"])(_themeToButtonProps, _constants2.actionButtonTheme.standardPrimary, {
  skin: _constants3.SKINS.standard,
  priority: _constants3.PRIORITY.primary
}), (0, _defineProperty2["default"])(_themeToButtonProps, _constants2.actionButtonTheme.lightPrimary, {
  skin: _constants3.SKINS.light,
  priority: _constants3.PRIORITY.primary
}), _themeToButtonProps);
/** FloatingHelperContent */

var FloatingHelperContent = function FloatingHelperContent(props) {
  var title = props.title,
      body = props.body,
      actionText = props.actionText,
      onActionClick = props.onActionClick,
      actionTheme = props.actionTheme,
      image = props.image,
      appearance = props.appearance,
      footer = props.footer;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _FloatingHelperContentSt.st)(_FloatingHelperContentSt.classes.root, {
      hasBody: !!props.body
    })
  }, /*#__PURE__*/_react["default"].createElement("div", null, title && /*#__PURE__*/_react["default"].createElement("div", {
    className: _FloatingHelperContentSt.classes.title
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    dataHook: _constants2.dataHooks.title,
    weight: "bold",
    light: appearance === _constants.floatingHelperAppearance.dark
  }, title)), body && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    dataHook: _constants2.dataHooks.body,
    light: appearance === _constants.floatingHelperAppearance.dark
  }, body)), actionText && onActionClick && actionText.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: _FloatingHelperContentSt.classes.action
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, themeToButtonProps[actionTheme], {
    dataHook: _constants2.dataHooks.actionButton,
    onClick: onActionClick,
    size: "small"
  }), actionText)), footer && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants2.dataHooks.footer,
    className: _FloatingHelperContentSt.classes.footer
  }, footer)), image && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants2.dataHooks.image,
    className: _FloatingHelperContentSt.classes.image
  }, image));
};

FloatingHelperContent.displayName = 'FloatingHelperContent';
FloatingHelperContent.propTypes = {
  /** Adds text as the title */
  title: _propTypes["default"].string,

  /** Adds text as the body */
  body: _propTypes["default"].string.isRequired,

  /** Sets the text of the action button. Needs to be a non-empty string (and onActionClick prop has to be passed) in order for the action button to appear */
  actionText: _propTypes["default"].string,

  /** Sets the theme of the action button */
  actionTheme: _propTypes["default"].oneOf(['standard', 'white', 'premium', 'lightPrimary', 'standardPrimary']),

  /** Custom footer node */
  footer: _propTypes["default"].node,

  /** When both onActionClick & actionText are provided, will make an action button appear and invoke onActionClick() upon click */
  onActionClick: _propTypes["default"].func,

  /** Adds an image */
  image: _propTypes["default"].node,

  /** Appearance : `dark` or `light`. */
  appearance: _propTypes["default"].oneOf(['dark', 'light'])
};
FloatingHelperContent.defaultProps = {
  actionTheme: 'white',
  appearance: 'dark'
};
var _default = FloatingHelperContent;
exports["default"] = _default;