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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FloatingHelper/FloatingHelperContent/FloatingHelperContent.js";
var themeToButtonProps = {
  [_constants2.actionButtonTheme.white]: {
    skin: _constants3.SKINS.light,
    priority: _constants3.PRIORITY.secondary
  },
  [_constants2.actionButtonTheme.standard]: {
    skin: _constants3.SKINS.standard,
    priority: _constants3.PRIORITY.secondary
  },
  [_constants2.actionButtonTheme.premium]: {
    skin: _constants3.SKINS.premium,
    priority: _constants3.PRIORITY.primary
  },
  [_constants2.actionButtonTheme.standardPrimary]: {
    skin: _constants3.SKINS.standard,
    priority: _constants3.PRIORITY.primary
  },
  [_constants2.actionButtonTheme.lightPrimary]: {
    skin: _constants3.SKINS.light,
    priority: _constants3.PRIORITY.primary
  }
};

/** FloatingHelperContent */
var FloatingHelperContent = _ref => {
  var {
    title,
    body,
    actionText,
    onActionClick,
    actionTheme = 'white',
    image,
    appearance = 'dark',
    footer,
    direction = 'horizontal'
  } = _ref;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _FloatingHelperContentSt.st)(_FloatingHelperContentSt.classes.root, {
      hasBody: !!body,
      direction
    }),
    "data-direction": direction,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 7
    }
  }, title && /*#__PURE__*/_react.default.createElement("div", {
    className: _FloatingHelperContentSt.classes.title,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: _constants2.dataHooks.title,
    weight: "bold",
    light: appearance === _constants.floatingHelperAppearance.dark,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 56,
      columnNumber: 13
    }
  }, title)), body && /*#__PURE__*/_react.default.createElement("div", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: _constants2.dataHooks.body,
    light: appearance === _constants.floatingHelperAppearance.dark,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67,
      columnNumber: 13
    }
  }, body)), actionText && onActionClick && actionText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
    className: _FloatingHelperContentSt.classes.action,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, themeToButtonProps[actionTheme], {
    dataHook: _constants2.dataHooks.actionButton,
    onClick: onActionClick,
    size: "small",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 13
    }
  }), actionText)), footer && /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": _constants2.dataHooks.footer,
    className: _FloatingHelperContentSt.classes.footer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89,
      columnNumber: 11
    }
  }, footer)), image && direction && /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": _constants2.dataHooks.image,
    className: (0, _FloatingHelperContentSt.st)(_FloatingHelperContentSt.classes.image, {
      direction
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95,
      columnNumber: 9
    }
  }, image));
};
FloatingHelperContent.displayName = 'FloatingHelperContent';
FloatingHelperContent.propTypes = {
  /** Adds text as the title */
  title: _propTypes.default.string,
  /** Adds renderable node as the body */
  body: _propTypes.default.node.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']),
  /** Sets the direction of content and image. */
  direction: _propTypes.default.oneOf(['horizontal', 'vertical'])
};
var _default = exports.default = FloatingHelperContent;
//# sourceMappingURL=FloatingHelperContent.js.map