@wix/design-system
Version:
@wix/design-system
36 lines • 2.07 kB
JavaScript
import React, { useContext } from 'react';
import { TrendingSmall, DownwardtrendSmall } from '@wix/wix-ui-icons-common';
import { st, classes } from './TrendIndicator.st.css.js';
import { dataHooks } from './TrendIndicator.constants';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
import { WixStyleReactEnvironmentContext } from '../WixStyleReactEnvironmentProvider/context';
const TrendIndicatorInner = ({ value, inverted = false, className, dataHook, locale, format = 'percent', }) => {
const context = useContext(WixStyleReactEnvironmentContext);
const effectiveLocale = locale || context.locale;
const icons = useIcons('TrendIndicator', {
TrendingSmall,
DownwardtrendSmall,
});
if (isNaN(Number(value))) {
return null;
}
let skin = 'neutral';
let trendIcon = null;
if (value > 0) {
trendIcon = React.createElement(icons.TrendingSmall, { "data-hook": dataHooks.trendIndicatorUp });
skin = !inverted ? 'positive' : 'negative';
}
else if (value < 0) {
trendIcon = (React.createElement(icons.DownwardtrendSmall, { "data-hook": dataHooks.trendIndicatorDown }));
skin = !inverted ? 'negative' : 'positive';
}
return (React.createElement("div", { className: st(classes.root, { skin }, className), "data-hook": dataHook },
React.createElement("div", { className: classes.caption },
!!value && (React.createElement("span", { className: classes.icon, "data-hook": dataHooks.trendIndicatorIcon }, trendIcon)),
React.createElement("span", { "data-hook": dataHooks.trendIndicatorValue }, new Intl.NumberFormat(effectiveLocale, { style: format }).format(Math.abs(value) / (format === 'percent' ? 100 : 1))))));
};
const TrendIndicator = (props) => (React.createElement(WixStyleReactEnvironmentContext.Provider, { value: { locale: 'en' } },
React.createElement(TrendIndicatorInner, { ...props })));
TrendIndicator.displayName = 'TrendIndicator';
export default TrendIndicator;
//# sourceMappingURL=TrendIndicator.js.map