@wix/design-system/dist/cjs/FloatingHelper/FloatingHelperContent/FloatingHelperContent.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _FloatingHelperContentSt = require("./FloatingHelperContent.st.css.js");
var _constants = require("../constants");
var _constants2 = require("./constants");
var _Text = _interopRequireDefault(require("../../Text"));
var _Button = _interopRequireDefault(require("../../Button"));
var _constants3 = require("../../Button/constants");
var _deprecationLog = _interopRequireDefault(require("../../utils/deprecationLog"));
var _excluded = ["title", "body", "actionText", "onActionClick", "actionTheme", "image", "appearance", "footer", "direction"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FloatingHelper/FloatingHelperContent/FloatingHelperContent.jsx",
  _this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var skinToButtonProps = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.actionButtonSkin.white, {
  skin: _constants3.SKINS.light,
  priority: _constants3.PRIORITY.secondary
}), _constants2.actionButtonSkin.standard, {
  skin: _constants3.SKINS.standard,
  priority: _constants3.PRIORITY.secondary
}), _constants2.actionButtonSkin.premium, {
  skin: _constants3.SKINS.premium,
  priority: _constants3.PRIORITY.primary
}), _constants2.actionButtonSkin.standardPrimary, {
  skin: _constants3.SKINS.standard,
  priority: _constants3.PRIORITY.primary
}), _constants2.actionButtonSkin.lightPrimary, {
  skin: _constants3.SKINS.light,
  priority: _constants3.PRIORITY.primary
});

/** FloatingHelperContent */
var FloatingHelperContent = function FloatingHelperContent(_ref) {
  var title = _ref.title,
    body = _ref.body,
    actionText = _ref.actionText,
    onActionClick = _ref.onActionClick,
    _ref$actionTheme = _ref.actionTheme,
    actionTheme = _ref$actionTheme === void 0 ? 'white' : _ref$actionTheme,
    image = _ref.image,
    _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'dark' : _ref$appearance,
    footer = _ref.footer,
    _ref$direction = _ref.direction,
    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var skin = props.skin || appearance;
  var actionSkin = props.actionSkin || actionTheme;
  (0, _react.useEffect)(function () {
    if (appearance) {
      (0, _deprecationLog["default"])('<FloatingHelperContent/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
    }
  }, [appearance]);
  (0, _react.useEffect)(function () {
    if (actionTheme) {
      (0, _deprecationLog["default"])('<FloatingHelperContent/> - prop "actionTheme" is deprecated and will be removed in next major release, please use "actionSkin" property instead.');
    }
  }, [actionTheme]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _FloatingHelperContentSt.st)(_FloatingHelperContentSt.classes.root, {
      hasBody: !!body,
      direction: direction
    }),
    "data-direction": direction,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73,
      columnNumber: 7
    }
  }, title && /*#__PURE__*/_react["default"].createElement("div", {
    className: _FloatingHelperContentSt.classes.title,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    dataHook: _constants2.dataHooks.title,
    weight: "bold",
    light: skin === _constants.floatingHelperSkin.dark,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 13
    }
  }, title)), body && /*#__PURE__*/_react["default"].createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    dataHook: _constants2.dataHooks.body,
    light: skin === _constants.floatingHelperSkin.dark,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87,
      columnNumber: 13
    }
  }, body)), actionText && onActionClick && actionText.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: _FloatingHelperContentSt.classes.action,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 97,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, skinToButtonProps[actionSkin], {
    dataHook: _constants2.dataHooks.actionButton,
    onClick: onActionClick,
    size: "small",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 13
    }
  }), actionText)), footer && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants2.dataHooks.footer,
    className: _FloatingHelperContentSt.classes.footer,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109,
      columnNumber: 11
    }
  }, footer)), image && direction && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants2.dataHooks.image,
    className: (0, _FloatingHelperContentSt.st)(_FloatingHelperContentSt.classes.image, {
      direction: direction
    }),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 115,
      columnNumber: 9
    }
  }, image));
};
FloatingHelperContent.displayName = 'FloatingHelperContent';
var _default = exports["default"] = FloatingHelperContent;