-
Notifications
You must be signed in to change notification settings - Fork 9
/
development.jsx
104 lines (95 loc) · 2.62 KB
/
development.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import NumberComponent from '../number/number';
import CurrencyComponent from '../currency/currency';
import PercentComponent from '../percent/percent';
function renderSign(direction) {
switch (direction) {
case 'positive':
return <span dangerouslySetInnerHTML={{ __html: '+ ' }} />;
case 'negative':
return <span aria-label="−" dangerouslySetInnerHTML={{ __html: '– ' }} />;
default:
return <span />;
}
}
function getDirection(value) {
if (value > 0) {
return 'positive';
} else if (value < 0) {
return 'negative';
}
return 'neutral';
}
function getDirectionColor(direction, colors) {
return colors[direction];
}
function getDecimalProps(type, decimals, maxDecimals, minDecimals) {
const isNumber = type === 'number';
return {
[isNumber ? 'valueDecimals' : 'decimals']: decimals,
[isNumber ? 'valueMaxDecimals' : 'maxDecimals']: maxDecimals,
[isNumber ? 'valueMinDecimals' : 'minDecimals']: minDecimals,
};
}
/**
This is the `<Development /> component`
*/
export default function Development({
positiveColor: positive,
negativeColor: negative,
neutralColor: neutral,
value,
decimals,
type,
direction,
className,
maxDecimals,
minDecimals,
...rest
}) {
const components = {
currency: CurrencyComponent,
percentage: PercentComponent,
number: NumberComponent,
};
const developmentDirection = direction || getDirection(value);
const Component = components[type] || components.number;
const classes = classNames(`number--${developmentDirection}`, className);
const style = {
...rest.style,
color: getDirectionColor(developmentDirection, {
positive,
negative,
neutral,
}),
};
const decimalProps = getDecimalProps(type, decimals, maxDecimals, minDecimals);
return (
<Component
{...rest}
{...decimalProps}
style={style}
className={classes}
value={Math.abs(parseFloat(value))}
prefix={renderSign(developmentDirection)}
prefixStyle={rest.prefixStyle}
/>
);
}
Development.propTypes = {
className: PropTypes.string,
value: PropTypes.any.isRequired, // eslint-disable-line
decimals: PropTypes.number,
type: PropTypes.oneOf(['number', 'currency', 'percentage']),
direction: PropTypes.oneOf(['positive', 'negative', 'neutral']),
maxDecimals: PropTypes.number,
minDecimals: PropTypes.number,
positiveColor: PropTypes.string,
neutralColor: PropTypes.string,
negativeColor: PropTypes.string,
};
Development.defaultProps = {
type: 'number',
};