wix-style-react
Version:
wix-style-react
50 lines • 2.51 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { SortByArrowUp, SortByArrowDown, } from '@wix/wix-ui-icons-common/system';
import { st, classes } from './TrendIndicator.st.css';
import { dataHooks } from './constants';
import { SupportedWixLocales } from 'wix-design-systems-locale-utils';
import { WixStyleReactEnvironmentContext } from '../WixStyleReactEnvironmentProvider/context';
/** TrendIndicator */
class TrendIndicator extends React.PureComponent {
render() {
const { value, inverted, className, dataHook } = this.props;
const locale = this.props.locale || this.context.locale;
if (isNaN(Number(value))) {
return null;
}
let skin = 'neutral';
let trendIcon = null;
if (value > 0) {
trendIcon = React.createElement(SortByArrowUp, { "data-hook": dataHooks.trendIndicatorUp });
skin = !inverted ? 'positive' : 'negative';
}
else if (value < 0) {
trendIcon = React.createElement(SortByArrowDown, { "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(locale, { style: 'percent' }).format(Math.abs(value) / 100)))));
}
}
TrendIndicator.displayName = 'TrendIndicator';
TrendIndicator.contextType = WixStyleReactEnvironmentContext;
TrendIndicator.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** A number to be displayed as the trend, a positive number will be green with an arrow facing up and a negative number will be red with an arrow facing down */
value: PropTypes.number.isRequired,
/** Invert color and arrow direction. */
inverted: PropTypes.bool,
/** Locale */
locale: PropTypes.oneOf(SupportedWixLocales),
};
TrendIndicator.defaultProps = {
inverted: false,
};
export default TrendIndicator;
//# sourceMappingURL=TrendIndicator.js.map