@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.js";
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 = _ref => {
  var {
    currentBarIndex,
    currentBarData,
    nextBarData,
    currentBarHeight,
    nextBarHeight,
    hideDifferenceBadge,
    differenceBadgeSkin,
    // remove
    getDifferenceBadgeProps,
    getDifferenceStepSkin,
    getTooltipContent,
    getTooltipProps,
    onTooltipShow: _onTooltipShow
  } = _ref;
  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,
    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: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _FunnelStepSt.classes.funnelStepRotated,
    style: {
      height: "".concat(nextDeltaHeight, "%")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _FunnelStepSt.classes.funnelStep,
    style: {
      height: "".concat(nextBarHeight, "%")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 99,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _FunnelStepSt.classes.funnelStepPlaceholder,
    style: {
      top: "".concat(currentDeltaHeight, "%"),
      height: "".concat(nextDeltaHeight, "%")
    },
    __self: void 0,
    __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: void 0,
    __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: () => _onTooltipShow(dataForDifferenceBadge)
  }, otherDifferenceBadgeProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 116,
      columnNumber: 11
    }
  }))));
};

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