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

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.FunnelStep = exports.EmptyFunnelStep = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _FunnelStepSt = require("./FunnelStep.st.css.js");
var _FunnelBadge = require("../FunnelBadge");
var _numberFormatters = require("../../utils/numberFormatters");
var _constants = require("../constants");
var _excluded = ["skin"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FunnelChart/FunnelStep/FunnelStep.jsx",
  _this = void 0;
var BADGE_STANDARD_FIXED_PERCENT_POSITION = 0.6;
var BADGE_DARK_FIXED_PERCENT_POSITION = 0.45;
var BADGE_STANDARD_MAX_TOP_POSITION = 86;
var BADGE_DARK_MAX_TOP_POSITION = 90;
var BADGE_OVERFLOWED_TOP_POSITION = 10;
function calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight, differenceBadgeSkin) {
  var isDarkBadge = differenceBadgeSkin === 'dark';
  var badgeFixedPercentPosition = isDarkBadge ? BADGE_DARK_FIXED_PERCENT_POSITION : BADGE_STANDARD_FIXED_PERCENT_POSITION;
  var badgeMaxTopPosition = isDarkBadge ? BADGE_DARK_MAX_TOP_POSITION : BADGE_STANDARD_MAX_TOP_POSITION;
  var calculatedBadgePosition = Math.max(currentDeltaHeight + nextDeltaHeight * badgeFixedPercentPosition, 100 - badgeMaxTopPosition);
  return calculatedBadgePosition < 0 ? BADGE_OVERFLOWED_TOP_POSITION : calculatedBadgePosition;
}
var FunnelStep = exports.FunnelStep = function FunnelStep(_ref) {
  var currentBarIndex = _ref.currentBarIndex,
    currentBarData = _ref.currentBarData,
    nextBarData = _ref.nextBarData,
    currentBarHeight = _ref.currentBarHeight,
    nextBarHeight = _ref.nextBarHeight,
    hideDifferenceBadge = _ref.hideDifferenceBadge,
    differenceBadgeSkin = _ref.differenceBadgeSkin,
    getDifferenceBadgeProps = _ref.getDifferenceBadgeProps,
    getDifferenceStepSkin = _ref.getDifferenceStepSkin,
    getTooltipContent = _ref.getTooltipContent,
    getTooltipProps = _ref.getTooltipProps,
    _onTooltipShow = _ref.onTooltipShow;
  var nextDeltaHeight = currentBarHeight - nextBarHeight;
  var currentDeltaHeight = 100 - currentBarHeight;
  var badgeTopPosition = calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight, differenceBadgeSkin);
  var difference = (0, _numberFormatters.countPercentageFromBase)(+currentBarData.value, +nextBarData.value, 0);
  var differenceInPercentage = (0, _numberFormatters.formatToPercent)(difference);
  var dataForDifferenceBadge = {
    currentIndex: currentBarIndex,
    differenceValue: difference / 100,
    difference: differenceInPercentage
  };
  var _getDifferenceBadgePr = getDifferenceBadgeProps(dataForDifferenceBadge),
    skin = _getDifferenceBadgePr.skin,
    otherDifferenceBadgeProps = (0, _objectWithoutProperties2["default"])(_getDifferenceBadgePr, _excluded);
  var chosenBadgeSkin = skin !== null && skin !== void 0 ? skin : differenceBadgeSkin;
  var isDarkBadge = chosenBadgeSkin === 'dark';
  var styleAttributes = {
    nextBarIsFlat: nextBarHeight === 0,
    skin: getDifferenceStepSkin(dataForDifferenceBadge)
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _FunnelStepSt.st)(_FunnelStepSt.classes.root, styleAttributes),
    "data-hook": _constants.dataHooks.step,
    "data-skin": styleAttributes.skin,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _FunnelStepSt.classes.funnelStepRotated,
    style: {
      height: "".concat(nextDeltaHeight, "%")
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: _FunnelStepSt.classes.funnelStep,
    style: {
      height: "".concat(nextBarHeight, "%")
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 99,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: _FunnelStepSt.classes.funnelStepPlaceholder,
    style: {
      top: "".concat(currentDeltaHeight, "%"),
      height: "".concat(nextDeltaHeight, "%")
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 103,
      columnNumber: 7
    }
  }), hideDifferenceBadge ? null : /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _FunnelStepSt.st)(_FunnelStepSt.classes.badgeWrapper, {
      top: isDarkBadge
    }),
    style: {
      top: "".concat(badgeTopPosition, "%")
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 112,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_FunnelBadge.FunnelBadge, (0, _extends2["default"])({
    value: differenceInPercentage,
    tooltipContent: getTooltipContent(dataForDifferenceBadge),
    tooltipProps: getTooltipProps(dataForDifferenceBadge),
    differenceBadgeSkin: chosenBadgeSkin,
    onTooltipShow: function onTooltipShow() {
      return _onTooltipShow(dataForDifferenceBadge);
    }
  }, otherDifferenceBadgeProps, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 116,
      columnNumber: 11
    }
  }))));
};

/** It just takes place but doesn't display or calculate anything */
var EmptyFunnelStep = exports.EmptyFunnelStep = function EmptyFunnelStep() {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _FunnelStepSt.st)(_FunnelStepSt.classes.root),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 131,
      columnNumber: 38
    }
  });
};