@wix/design-system
Version:
@wix/design-system
57 lines • 3.65 kB
JavaScript
import React from 'react';
import { st, classes } from './FunnelStep.st.css.js';
import { FunnelBadge } from '../FunnelBadge';
import { countPercentageFromBase, formatToPercent, } from '../../utils/numberFormatters';
import { dataHooks } from '../constants';
const BADGE_STANDARD_FIXED_PERCENT_POSITION = 0.6;
const BADGE_DARK_FIXED_PERCENT_POSITION = 0.45;
const BADGE_STANDARD_MAX_TOP_POSITION = 86;
const BADGE_DARK_MAX_TOP_POSITION = 90;
const BADGE_OVERFLOWED_TOP_POSITION = 10;
function calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight, differenceBadgeSkin) {
const isDarkBadge = differenceBadgeSkin === 'dark';
const badgeFixedPercentPosition = isDarkBadge
? BADGE_DARK_FIXED_PERCENT_POSITION
: BADGE_STANDARD_FIXED_PERCENT_POSITION;
const badgeMaxTopPosition = isDarkBadge
? BADGE_DARK_MAX_TOP_POSITION
: BADGE_STANDARD_MAX_TOP_POSITION;
const calculatedBadgePosition = Math.max(currentDeltaHeight + nextDeltaHeight * badgeFixedPercentPosition, 100 - badgeMaxTopPosition);
return calculatedBadgePosition < 0
? BADGE_OVERFLOWED_TOP_POSITION
: calculatedBadgePosition;
}
export const FunnelStep = ({ currentBarIndex, currentBarData, nextBarData, currentBarHeight, nextBarHeight, hideDifferenceBadge, differenceBadgeSkin, // remove
getDifferenceBadgeProps, getDifferenceStepSkin, getTooltipContent, getTooltipProps, onTooltipShow, }) => {
const nextDeltaHeight = currentBarHeight - nextBarHeight;
const currentDeltaHeight = 100 - currentBarHeight;
const badgeTopPosition = calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight, differenceBadgeSkin);
const difference = countPercentageFromBase(+currentBarData.value, +nextBarData.value, 0);
const differenceInPercentage = formatToPercent(difference);
const dataForDifferenceBadge = {
currentIndex: currentBarIndex,
differenceValue: difference / 100,
difference: differenceInPercentage,
};
const { skin, ...otherDifferenceBadgeProps } = getDifferenceBadgeProps(dataForDifferenceBadge);
const chosenBadgeSkin = skin ?? differenceBadgeSkin;
const isDarkBadge = chosenBadgeSkin === 'dark';
const styleAttributes = {
nextBarIsFlat: nextBarHeight === 0,
skin: getDifferenceStepSkin(dataForDifferenceBadge),
};
return (React.createElement("div", { className: st(classes.root, styleAttributes), "data-hook": dataHooks.step, "data-skin": styleAttributes.skin },
React.createElement("div", { className: classes.funnelStepRotated, style: {
height: `${nextDeltaHeight}%`,
} }),
React.createElement("div", { className: classes.funnelStep, style: { height: `${nextBarHeight}%` } }),
React.createElement("div", { className: classes.funnelStepPlaceholder, style: {
top: `${currentDeltaHeight}%`,
height: `${nextDeltaHeight}%`,
} }),
hideDifferenceBadge ? null : (React.createElement("div", { className: st(classes.badgeWrapper, { top: isDarkBadge }), style: { top: `${badgeTopPosition}%` } },
React.createElement(FunnelBadge, { value: differenceInPercentage, tooltipContent: getTooltipContent(dataForDifferenceBadge), tooltipProps: getTooltipProps(dataForDifferenceBadge), differenceBadgeSkin: chosenBadgeSkin, onTooltipShow: () => onTooltipShow(dataForDifferenceBadge), ...otherDifferenceBadgeProps })))));
};
/** It just takes place but doesn't display or calculate anything */
export const EmptyFunnelStep = () => React.createElement("div", { className: st(classes.root) });
//# sourceMappingURL=FunnelStep.js.map