@up-group-ui/react-controls
Version:
Up shared react controls
60 lines • 3.33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var typestyle_1 = require("typestyle");
var currency_1 = require("../../../Common/utils/currency");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var react_countup_1 = require("react-countup");
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var UpCurrency = function (props) {
var _a, _b;
var positiveIntegerColor = '#ff8c1a';
var positiveDecimalColor = '#994d00';
var negativeIntegerColor = '#D7D7D7';
var negativeDecimalColor = '#9B9B9B';
if ((_a = props.colors) === null || _a === void 0 ? void 0 : _a.default) {
positiveIntegerColor = props.colors.default.integer;
positiveDecimalColor = props.colors.default.float;
}
if ((_b = props.colors) === null || _b === void 0 ? void 0 : _b.negative) {
negativeIntegerColor = props.colors.negative.integer;
negativeDecimalColor = props.colors.negative.float;
}
var bigNumber = (0, typestyle_1.style)({
$nest: {
'&.up-number-integer': {
fontSize: (props.integerFontSize ? props.integerFontSize : 40) + 'px',
lineHeight: (props.integerLineHeight
? props.integerLineHeight
: (props.integerFontSize ? props.integerFontSize : 40) + 8) + 'px',
fontWeight: props.integerFontWeight ? props.integerFontWeight : 'normal',
color: props.value >= 0 ? positiveIntegerColor : negativeIntegerColor,
},
},
});
var smallNumber = (0, typestyle_1.style)({
$nest: {
'&.up-number-decimal': {
marginTop: '8px',
fontSize: (props.decimalFontSize ? props.decimalFontSize : 14) + 'px',
fontWeight: 500,
lineHeight: (props.decimalLineHeight
? props.decimalLineHeight
: (props.decimalFontSize ? props.decimalFontSize : 14) + 2) + 'px',
color: props.value >= 0 ? positiveDecimalColor : negativeDecimalColor,
},
},
});
var countUp = (props.animate
? (0, react_countup_1.useCountUp)({
start: 0,
decimals: 2,
delay: props.delay || 0,
end: props.value,
})
: { countUp: 0 }).countUp;
return ((0, jsx_runtime_1.jsx)(Box_1.default, (0, tslib_1.__assign)({ justifyContent: 'center', style: { height: '100%' } }, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ flexDirection: 'row', justifyContent: 'center' }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-number-integer', bigNumber) }, { children: (0, currency_1.getIntegerValue)((props.animate ? countUp : props.value), '') }), void 0), (0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-number-decimal', smallNumber) }, { children: [(0, currency_1.getDecimalValue)((props.animate ? countUp : props.value), 2), props.unit ? props.unit : ''] }), void 0)] }), void 0) }), void 0));
};
exports.default = UpCurrency;
//# sourceMappingURL=UpCurrency.js.map