@hipay/hipay-material-ui 2.0.0-beta.53 → 2.0.0-beta.54
Sign up to get free protection for your applications and to get access to all the features.
- package/HiCell/CellSentinel.js +33 -109
- package/HiCell/CellSentinelScore.js +100 -0
- package/HiChip/HiChip.js +1 -1
- package/HiColoredLabel/HiColoredLabel.js +14 -4
- package/HiDatePicker/HiDatePicker.js +1 -1
- package/HiDatePicker/HiDateRangePicker.js +339 -420
- package/HiDatePicker/HiDateRangeSelector.js +81 -61
- package/HiDatePicker/NavBar.js +2 -1
- package/HiDatePicker/Overlays/TimePickerOverlay.js +1 -1
- package/HiDatePicker/Overlays/YearPickerOverlay.js +3 -3
- package/HiForm/HiFormControl.js +5 -4
- package/HiSelectNew/HiSelect.js +4 -1
- package/HiSwitch/HiSwitch.js +2 -1
- package/HiTable/HiCellBuilder.js +14 -7
- package/HiTable/constants.js +7 -5
- package/es/HiCell/CellSentinel.js +32 -108
- package/es/HiCell/CellSentinelScore.js +60 -0
- package/es/HiChip/HiChip.js +1 -1
- package/es/HiColoredLabel/HiColoredLabel.js +14 -3
- package/es/HiDatePicker/HiDatePicker.js +1 -1
- package/es/HiDatePicker/HiDateRangePicker.js +304 -364
- package/es/HiDatePicker/HiDateRangeSelector.js +71 -55
- package/es/HiDatePicker/NavBar.js +2 -1
- package/es/HiDatePicker/Overlays/TimePickerOverlay.js +1 -1
- package/es/HiDatePicker/Overlays/YearPickerOverlay.js +3 -3
- package/es/HiForm/HiFormControl.js +5 -4
- package/es/HiSelectNew/HiSelect.js +4 -1
- package/es/HiSwitch/HiSwitch.js +2 -1
- package/es/HiTable/HiCellBuilder.js +13 -7
- package/es/HiTable/constants.js +8 -1
- package/es/styles/createPalette.js +3 -3
- package/package.json +2 -2
- package/styles/createPalette.js +3 -3
- package/umd/hipay-material-ui.development.js +899 -1131
- package/umd/hipay-material-ui.production.min.js +1 -1
- package/yarn-error.log +0 -110
@@ -3,138 +3,62 @@ import PropTypes from 'prop-types';
|
|
3
3
|
import HiColoredLabel from '../HiColoredLabel';
|
4
4
|
import withStyles from '../styles/withStyles';
|
5
5
|
export const styles = {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
minWidth: 18
|
6
|
+
flexContent: {
|
7
|
+
display: 'flex',
|
8
|
+
justifyContent: 'flex-end'
|
10
9
|
},
|
11
|
-
label: {
|
12
|
-
marginLeft: 2
|
13
|
-
},
|
14
|
-
nowrap: {
|
15
|
-
whiteSpace: 'nowrap'
|
16
|
-
}
|
10
|
+
label: {}
|
17
11
|
};
|
18
|
-
/**
|
19
|
-
* Get Theme color from fraudResult
|
20
|
-
* @param fraudResult
|
21
|
-
* @returns {*}
|
22
|
-
*/
|
23
|
-
|
24
|
-
function getColorFromFraudResult(fraudResult) {
|
25
|
-
let color;
|
26
|
-
|
27
|
-
switch (fraudResult.toUpperCase()) {
|
28
|
-
case 'ACCEPTED':
|
29
|
-
color = 'positive';
|
30
|
-
break;
|
31
|
-
|
32
|
-
case 'BLOCKED':
|
33
|
-
color = 'negative';
|
34
|
-
break;
|
35
|
-
|
36
|
-
case 'CHALLENGED':
|
37
|
-
color = 'middle';
|
38
|
-
break;
|
39
|
-
|
40
|
-
case 'PENDING':
|
41
|
-
color = 'primary';
|
42
|
-
break;
|
43
|
-
|
44
|
-
case 'FORCE_AUTHENTICATE':
|
45
|
-
case 'ASK_AUTHENTICATE':
|
46
|
-
default:
|
47
|
-
color = 'neutral';
|
48
|
-
break;
|
49
|
-
}
|
50
|
-
|
51
|
-
return color;
|
52
|
-
}
|
53
12
|
/**
|
54
13
|
* Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
|
55
14
|
*/
|
56
15
|
|
57
|
-
|
58
16
|
class CellSentinel extends React.PureComponent {
|
59
17
|
render() {
|
60
18
|
const {
|
19
|
+
active,
|
61
20
|
classes,
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
21
|
+
color,
|
22
|
+
label,
|
23
|
+
letter,
|
24
|
+
outlined,
|
25
|
+
reviewer,
|
26
|
+
value
|
68
27
|
} = this.props;
|
69
|
-
|
28
|
+
|
29
|
+
const _label = label ? label : value;
|
30
|
+
|
31
|
+
const _letter = letter ? letter : _label[0];
|
32
|
+
|
70
33
|
return React.createElement("div", {
|
71
|
-
|
72
|
-
|
73
|
-
minWidth: '100px'
|
74
|
-
}
|
34
|
+
className: classes.flexContent,
|
35
|
+
title: reviewer ? `${_label}\n${reviewer}` : _label
|
75
36
|
}, React.createElement(HiColoredLabel, {
|
76
|
-
|
77
|
-
color: getColorFromFraudResult(fraudResult),
|
78
|
-
classes: {
|
79
|
-
root: classes.label
|
80
|
-
},
|
81
|
-
active: pendingManualAction
|
82
|
-
}), !hideFraudResult && React.createElement(HiColoredLabel, {
|
83
|
-
label: fraudResult.toUpperCase().substr(0, 1),
|
84
|
-
color: getColorFromFraudResult(fraudResult),
|
37
|
+
active: active,
|
85
38
|
classes: {
|
86
39
|
root: classes.label
|
87
40
|
},
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
}
|
92
|
-
label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
|
93
|
-
color: getColorFromFraudResult(automaticFraudReviewResult),
|
94
|
-
active: pendingManualAction
|
95
|
-
})));
|
41
|
+
color: color,
|
42
|
+
label: _letter,
|
43
|
+
outlined: outlined
|
44
|
+
}));
|
96
45
|
}
|
97
46
|
|
98
47
|
}
|
99
48
|
|
100
49
|
CellSentinel.defaultProps = {
|
101
|
-
|
50
|
+
active: false,
|
51
|
+
outlined: false
|
102
52
|
};
|
103
53
|
CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
|
104
|
-
/**
|
105
|
-
* Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
|
106
|
-
*/
|
107
|
-
automaticFraudReviewResult: PropTypes.string,
|
108
|
-
|
109
|
-
/**
|
110
|
-
* Useful to extend the style applied to components.
|
111
|
-
*/
|
112
54
|
classes: PropTypes.object,
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
* Si true le fraudResult ne sera pas affiché
|
121
|
-
*/
|
122
|
-
hideFraudResult: PropTypes.bool,
|
123
|
-
|
124
|
-
/**
|
125
|
-
* Signal qu'il attend une réponse manuelle
|
126
|
-
*/
|
127
|
-
pendingManualAction: PropTypes.bool,
|
128
|
-
|
129
|
-
/**
|
130
|
-
* Score de la fraude
|
131
|
-
*/
|
132
|
-
score: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
133
|
-
|
134
|
-
/**
|
135
|
-
* Active le SmartDecision (ajoute l'indicateur ou blanc)
|
136
|
-
*/
|
137
|
-
smartDecision: PropTypes.bool
|
55
|
+
value: PropTypes.string,
|
56
|
+
color: PropTypes.string,
|
57
|
+
label: PropTypes.string,
|
58
|
+
letter: PropTypes.string,
|
59
|
+
active: PropTypes.bool,
|
60
|
+
reviewer: PropTypes.string,
|
61
|
+
outlined: PropTypes.bool
|
138
62
|
} : {};
|
139
63
|
export default withStyles(styles, {
|
140
64
|
name: 'HmuiCellSentinel'
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import PropTypes from 'prop-types';
|
3
|
+
import HiColoredLabel from '../HiColoredLabel';
|
4
|
+
import withStyles from '../styles/withStyles';
|
5
|
+
export const styles = {
|
6
|
+
flexContent: {
|
7
|
+
display: 'flex',
|
8
|
+
justifyContent: 'flex-end'
|
9
|
+
},
|
10
|
+
label: {}
|
11
|
+
};
|
12
|
+
export const sentinelColorById = {
|
13
|
+
NOT_LAUNCHED: '#737373',
|
14
|
+
ACCEPTED: '#00AF01',
|
15
|
+
AUTHENTICATE: '#484A4B',
|
16
|
+
FORCE_AUTHENTICATE: '#20272B',
|
17
|
+
PENDING: '#3987AD',
|
18
|
+
TO_BE_REVIEWED: '#FF8F01',
|
19
|
+
CHALLENGED: '#FF8F01',
|
20
|
+
BLOCKED: '#D50000',
|
21
|
+
ALLOWED: '#00AF01',
|
22
|
+
DENIED: '#D50000'
|
23
|
+
};
|
24
|
+
/**
|
25
|
+
* Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
|
26
|
+
*/
|
27
|
+
|
28
|
+
class CellSentinelScore extends React.PureComponent {
|
29
|
+
render() {
|
30
|
+
const {
|
31
|
+
classes,
|
32
|
+
result,
|
33
|
+
value
|
34
|
+
} = this.props;
|
35
|
+
return React.createElement("div", {
|
36
|
+
className: classes.flexContent
|
37
|
+
}, React.createElement(HiColoredLabel, {
|
38
|
+
active: result === 'TO_BE_REVIEWED',
|
39
|
+
classes: {
|
40
|
+
root: classes.label
|
41
|
+
},
|
42
|
+
color: sentinelColorById[result],
|
43
|
+
label: value > 0 ? `+${value}` : `${value}`
|
44
|
+
}));
|
45
|
+
}
|
46
|
+
|
47
|
+
}
|
48
|
+
|
49
|
+
CellSentinelScore.defaultProps = {
|
50
|
+
active: false,
|
51
|
+
outlined: false
|
52
|
+
};
|
53
|
+
CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
|
54
|
+
classes: PropTypes.object,
|
55
|
+
result: PropTypes.string,
|
56
|
+
value: PropTypes.number
|
57
|
+
} : {};
|
58
|
+
export default withStyles(styles, {
|
59
|
+
name: 'HmuiCellSentinelScore'
|
60
|
+
})(CellSentinelScore);
|
package/es/HiChip/HiChip.js
CHANGED
@@ -96,6 +96,9 @@ export const styles = theme => ({
|
|
96
96
|
activeColorNeutral: {
|
97
97
|
color: theme.palette.neutral.contrastText,
|
98
98
|
backgroundColor: theme.palette.neutral.main
|
99
|
+
},
|
100
|
+
outlined: {
|
101
|
+
border: '1px solid'
|
99
102
|
}
|
100
103
|
});
|
101
104
|
/**
|
@@ -111,11 +114,12 @@ function HiColoredLabel(props) {
|
|
111
114
|
label,
|
112
115
|
color,
|
113
116
|
active,
|
117
|
+
outlined,
|
114
118
|
fontWeight,
|
115
119
|
style,
|
116
120
|
theme
|
117
121
|
} = props,
|
118
|
-
other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
|
122
|
+
other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
|
119
123
|
|
120
124
|
const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
|
121
125
|
const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
|
@@ -123,6 +127,7 @@ function HiColoredLabel(props) {
|
|
123
127
|
className: classNames(classes.root, {
|
124
128
|
[classes.color]: !active,
|
125
129
|
[classes.activeColor]: active,
|
130
|
+
[classes.outlined]: outlined,
|
126
131
|
[classes[`activeColor${capitalize(color)}`]]: active && isHiColor,
|
127
132
|
[classes[`color${capitalize(color)}`]]: !active && isHiColor
|
128
133
|
}, className),
|
@@ -165,11 +170,17 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
165
170
|
/**
|
166
171
|
* Label à afficher
|
167
172
|
*/
|
168
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
|
173
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired,
|
174
|
+
|
175
|
+
/**
|
176
|
+
* Ajoute une bordure
|
177
|
+
*/
|
178
|
+
outlined: PropTypes.bool
|
169
179
|
} : {};
|
170
180
|
HiColoredLabel.defaultProps = {
|
171
181
|
active: false,
|
172
|
-
color: 'primary'
|
182
|
+
color: 'primary',
|
183
|
+
outlined: false
|
173
184
|
};
|
174
185
|
export default withStyles(styles, {
|
175
186
|
hiComponent: true,
|
@@ -213,7 +213,7 @@ class HiDatePicker extends React.Component {
|
|
213
213
|
todayButton: translations.today,
|
214
214
|
onTodayButtonClick: this.handleCurrentMonthChange,
|
215
215
|
weekdayElement: Weekday,
|
216
|
-
|
216
|
+
navbarElement: props2 => React.createElement(NavBar, _extends({
|
217
217
|
showClockButton: enableTime,
|
218
218
|
onClockClick: this.handleClockClick
|
219
219
|
}, props2)),
|