@wix/design-system
Version:
@wix/design-system
59 lines • 4.7 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import noop from 'lodash/noop';
import Heading from '../Heading';
import Tooltip from '../Tooltip';
import SparklineChart from '../SparklineChart';
import TrendIndicator from '../TrendIndicator';
import Text from '../Text';
import Loader from '../Loader';
import { st, classes } from './AnalyticsSummaryCard.st.css.js';
import { dataHooks, HORIZONTAL_PADDING, } from './AnalyticsSummaryCard.constants';
import { withFocusable } from '../common/Focusable';
import { useHover } from '../common/useHover';
const SPARKLINE_HEIGHT = 22;
// storybook utils can't unwrap HOC, hence the export
export const AnalyticsSummaryCard = ({ isLoading = false, ctaButton = null, footer = null, onChartHover = noop, isTrendVisible = false, alwaysShowCTA = false, chartWidth = 69, chartAnimationDuration = 300, onClick, onCTAClick, title, titleTooltip, value, valueTooltip, dataHook, className, trend, invertedTrend, chartData, chartColorHex, chartHighlightedStartingIndex, getChartTooltipContent, focusableOnFocus, focusableOnBlur, border = false, horizontalPadding = HORIZONTAL_PADDING.large, }) => {
const { hovered: isHovered, hoverProps } = useHover();
const handleClick = useCallback((event) => onClick?.(event), [onClick]);
const handleCTAClick = useCallback((event) => {
event.stopPropagation();
onCTAClick?.(event);
}, [onCTAClick]);
const shouldShowCTA = useMemo(() => !isLoading && ctaButton && (isHovered || alwaysShowCTA), [alwaysShowCTA, ctaButton, isHovered, isLoading]);
const renderTitle = useCallback(() => (React.createElement(Tooltip, { placement: "top", content: titleTooltip, disabled: !titleTooltip, dataHook: dataHooks.analyticsSummaryCardTitleTooltip },
React.createElement("span", { "data-hook": dataHooks.analyticsSummaryCardTitle }, title))), [title, titleTooltip]);
const renderValue = useCallback(() => {
if (valueTooltip) {
return (React.createElement(Tooltip, { placement: "top", content: valueTooltip, dataHook: dataHooks.analyticsSummaryCardValueTooltip },
React.createElement(Text, { tagName: "span", weight: "bold", dataHook: dataHooks.analyticsSummaryCardValue }, value)));
}
else {
return (React.createElement(Text, { tagName: "span", weight: "bold", dataHook: dataHooks.analyticsSummaryCardValue }, value));
}
}, [value, valueTooltip]);
const isClickable = useMemo(() => onClick !== undefined, [onClick]);
return (React.createElement("div", { className: st(classes.root, {
hovered: isHovered,
clickable: isClickable,
border,
horizontalPadding,
}, className), "data-hook": dataHook, onClick: handleClick, ...hoverProps, onFocus: focusableOnFocus, onBlur: focusableOnBlur },
isLoading && (React.createElement("div", { className: classes.loader },
React.createElement(Loader, { dataHook: dataHooks.analyticsSummaryCardLoader, size: "tiny" }))),
shouldShowCTA && (React.createElement("div", { "data-hook": dataHooks.analyticsSummaryCardCTA, className: st(classes.ctaButton), onClick: handleCTAClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur }, ctaButton)),
React.createElement("div", null,
React.createElement("div", { className: st(classes.title), onFocus: focusableOnFocus, onBlur: focusableOnBlur },
React.createElement(Heading, { size: "extraTiny" }, renderTitle())),
React.createElement("div", { className: classes.valueLineContainer },
React.createElement("div", { className: classes.valueAndTrend },
renderValue(),
isTrendVisible && trend !== undefined && (React.createElement(TrendIndicator, { dataHook: dataHooks.analyticsSummaryCardTrend, className: classes.trend, value: trend, inverted: invertedTrend }))),
React.createElement("div", { className: st(classes.sparkline), onFocus: focusableOnFocus, onBlur: focusableOnBlur },
React.createElement(SparklineChart, { dataHook: dataHooks.analyticsSummaryCardChart, onHover: onChartHover, data: chartData, color: chartColorHex, width: chartWidth, height: SPARKLINE_HEIGHT, highlightedStartingIndex: chartHighlightedStartingIndex, getTooltipContent: getChartTooltipContent, animationDuration: chartAnimationDuration }))),
React.createElement("div", { className: st(classes.footer) },
" ",
footer))));
};
AnalyticsSummaryCard.displayName = 'AnalyticsSummaryCard';
export default withFocusable(AnalyticsSummaryCard);
//# sourceMappingURL=AnalyticsSummaryCard.js.map