@wix/design-system/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports.FunnelBadge = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
var _Heading = _interopRequireDefault(require("../../Heading"));
var _Badge = _interopRequireDefault(require("../../Badge"));
var _Focusable = require("../../common/Focusable");
var _FunnelBadgeSt = require("./FunnelBadge.st.css.js");
var _constants = require("../constants");
var _excluded = ["tooltipContent", "tooltipProps", "onTooltipShow", "value", "differenceBadgeSkin"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.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); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var StandardBadge = /*#__PURE__*/function (_PureComponent) {
  function StandardBadge() {
    (0, _classCallCheck2["default"])(this, StandardBadge);
    return _callSuper(this, StandardBadge, arguments);
  }
  (0, _inherits2["default"])(StandardBadge, _PureComponent);
  return (0, _createClass2["default"])(StandardBadge, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        value = _this$props.value,
        skin = _this$props.skin,
        prefixIcon = _this$props.prefixIcon,
        className = _this$props.className,
        focusableOnBlur = _this$props.focusableOnBlur,
        focusableOnFocus = _this$props.focusableOnFocus,
        dataHook = _this$props.dataHook;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _FunnelBadgeSt.st)(_FunnelBadgeSt.classes.badge, {
          skin: skin
        }, className),
        "data-hook": dataHook,
        tabIndex: 0,
        onBlur: focusableOnBlur,
        onFocus: focusableOnFocus,
        "data-skin": skin,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 21,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _FunnelBadgeSt.classes.badgeContent,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 29,
          columnNumber: 9
        }
      }, !!prefixIcon && /*#__PURE__*/_react["default"].cloneElement(prefixIcon, {
        'data-prefix-icon': true
      }), /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
        className: _FunnelBadgeSt.classes.badgeText,
        size: "extraTiny",
        dataHook: _constants.dataHooks.badgeValue,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 34,
          columnNumber: 11
        }
      }, value)));
    }
  }]);
}(_react.PureComponent);
var DarkBadge = /*#__PURE__*/function (_PureComponent2) {
  function DarkBadge() {
    (0, _classCallCheck2["default"])(this, DarkBadge);
    return _callSuper(this, DarkBadge, arguments);
  }
  (0, _inherits2["default"])(DarkBadge, _PureComponent2);
  return (0, _createClass2["default"])(DarkBadge, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        value = _this$props2.value,
        className = _this$props2.className,
        focusableOnBlur = _this$props2.focusableOnBlur,
        focusableOnFocus = _this$props2.focusableOnFocus,
        dataHook = _this$props2.dataHook,
        prefixIcon = _this$props2.prefixIcon;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _FunnelBadgeSt.st)(_FunnelBadgeSt.classes.darkBadge, className),
        "data-hook": dataHook,
        tabIndex: 0,
        onBlur: focusableOnBlur,
        onFocus: focusableOnFocus,
        "data-skin": "dark",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 58,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
        type: "transparent",
        dataHook: _constants.dataHooks.badgeValue,
        prefixIcon: prefixIcon,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 66,
          columnNumber: 9
        }
      }, value));
    }
  }]);
}(_react.PureComponent);
var FocusedStandardBadge = (0, _Focusable.withFocusable)(StandardBadge);
var FocusedDarkBadge = (0, _Focusable.withFocusable)(DarkBadge);
var FunnelBadge = exports.FunnelBadge = function FunnelBadge(props) {
  var tooltipContent = props.tooltipContent,
    tooltipProps = props.tooltipProps,
    onTooltipShow = props.onTooltipShow,
    value = props.value,
    differenceBadgeSkin = props.differenceBadgeSkin,
    otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
    dataHook: _constants.dataHooks.badgeTooltip,
    disabled: !tooltipContent,
    content: tooltipContent,
    onShow: onTooltipShow,
    moveBy: {
      y: 2
    },
    textAlign: "start",
    size: "small"
  }, tooltipProps, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 5
    }
  }), differenceBadgeSkin === 'dark' ? /*#__PURE__*/_react["default"].createElement(FocusedDarkBadge, (0, _extends2["default"])({
    value: value,
    dataHook: _constants.dataHooks.badge
  }, otherProps, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 103,
      columnNumber: 9
    }
  })) : /*#__PURE__*/_react["default"].createElement(FocusedStandardBadge, (0, _extends2["default"])({
    value: value,
    dataHook: _constants.dataHooks.badge,
    skin: differenceBadgeSkin
  }, otherProps, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109,
      columnNumber: 9
    }
  })));
};