wix-style-react
Version:
wix-style-react
111 lines (110 loc) • 3.96 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _system = require("@wix/wix-ui-icons-common/system");
var _TrendIndicatorSt = require("./TrendIndicator.st.css");
var _constants = require("./constants");
var _wixDesignSystemsLocaleUtils = require("wix-design-systems-locale-utils");
var _context = require("../WixStyleReactEnvironmentProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/TrendIndicator/TrendIndicator.js";
/** TrendIndicator */
class TrendIndicator extends _react.default.PureComponent {
render() {
var {
value,
inverted,
className,
dataHook
} = this.props;
var locale = this.props.locale || this.context.locale;
if (isNaN(Number(value))) {
return null;
}
var skin = 'neutral';
var trendIcon = null;
if (value > 0) {
trendIcon = /*#__PURE__*/_react.default.createElement(_system.SortByArrowUp, {
"data-hook": _constants.dataHooks.trendIndicatorUp,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 19
}
});
skin = !inverted ? 'positive' : 'negative';
} else if (value < 0) {
trendIcon = /*#__PURE__*/_react.default.createElement(_system.SortByArrowDown, {
"data-hook": _constants.dataHooks.trendIndicatorDown,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 19
}
});
skin = !inverted ? 'negative' : 'positive';
}
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _TrendIndicatorSt.st)(_TrendIndicatorSt.classes.root, {
skin
}, className),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _TrendIndicatorSt.classes.caption,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 9
}
}, !!value && /*#__PURE__*/_react.default.createElement("span", {
className: _TrendIndicatorSt.classes.icon,
"data-hook": _constants.dataHooks.trendIndicatorIcon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 13
}
}, trendIcon), /*#__PURE__*/_react.default.createElement("span", {
"data-hook": _constants.dataHooks.trendIndicatorValue,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 11
}
}, new Intl.NumberFormat(locale, {
style: 'percent'
}).format(Math.abs(value) / 100))));
}
}
TrendIndicator.displayName = 'TrendIndicator';
TrendIndicator.contextType = _context.WixStyleReactEnvironmentContext;
TrendIndicator.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** A css class to be applied to the component's root element */
className: _propTypes.default.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.default.number.isRequired,
/** Invert color and arrow direction. */
inverted: _propTypes.default.bool,
/** Locale */
locale: _propTypes.default.oneOf(_wixDesignSystemsLocaleUtils.SupportedWixLocales)
};
TrendIndicator.defaultProps = {
inverted: false
};
var _default = exports.default = TrendIndicator;
//# sourceMappingURL=TrendIndicator.js.map