@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.
Files changed (36) hide show
  1. package/HiCell/CellSentinel.js +33 -109
  2. package/HiCell/CellSentinelScore.js +100 -0
  3. package/HiChip/HiChip.js +1 -1
  4. package/HiColoredLabel/HiColoredLabel.js +14 -4
  5. package/HiDatePicker/HiDatePicker.js +1 -1
  6. package/HiDatePicker/HiDateRangePicker.js +339 -420
  7. package/HiDatePicker/HiDateRangeSelector.js +81 -61
  8. package/HiDatePicker/NavBar.js +2 -1
  9. package/HiDatePicker/Overlays/TimePickerOverlay.js +1 -1
  10. package/HiDatePicker/Overlays/YearPickerOverlay.js +3 -3
  11. package/HiForm/HiFormControl.js +5 -4
  12. package/HiSelectNew/HiSelect.js +4 -1
  13. package/HiSwitch/HiSwitch.js +2 -1
  14. package/HiTable/HiCellBuilder.js +14 -7
  15. package/HiTable/constants.js +7 -5
  16. package/es/HiCell/CellSentinel.js +32 -108
  17. package/es/HiCell/CellSentinelScore.js +60 -0
  18. package/es/HiChip/HiChip.js +1 -1
  19. package/es/HiColoredLabel/HiColoredLabel.js +14 -3
  20. package/es/HiDatePicker/HiDatePicker.js +1 -1
  21. package/es/HiDatePicker/HiDateRangePicker.js +304 -364
  22. package/es/HiDatePicker/HiDateRangeSelector.js +71 -55
  23. package/es/HiDatePicker/NavBar.js +2 -1
  24. package/es/HiDatePicker/Overlays/TimePickerOverlay.js +1 -1
  25. package/es/HiDatePicker/Overlays/YearPickerOverlay.js +3 -3
  26. package/es/HiForm/HiFormControl.js +5 -4
  27. package/es/HiSelectNew/HiSelect.js +4 -1
  28. package/es/HiSwitch/HiSwitch.js +2 -1
  29. package/es/HiTable/HiCellBuilder.js +13 -7
  30. package/es/HiTable/constants.js +8 -1
  31. package/es/styles/createPalette.js +3 -3
  32. package/package.json +2 -2
  33. package/styles/createPalette.js +3 -3
  34. package/umd/hipay-material-ui.development.js +899 -1131
  35. package/umd/hipay-material-ui.production.min.js +1 -1
  36. 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
- smartDecision: {
7
- marginLeft: 2,
8
- display: 'inline-block',
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
- score,
63
- fraudResult,
64
- automaticFraudReviewResult,
65
- pendingManualAction,
66
- smartDecision,
67
- hideFraudResult
21
+ color,
22
+ label,
23
+ letter,
24
+ outlined,
25
+ reviewer,
26
+ value
68
27
  } = this.props;
69
- const scoreLabel = score > 0 ? `+${score}` : `${score}`;
28
+
29
+ const _label = label ? label : value;
30
+
31
+ const _letter = letter ? letter : _label[0];
32
+
70
33
  return React.createElement("div", {
71
- style: {
72
- textAlign: 'right',
73
- minWidth: '100px'
74
- }
34
+ className: classes.flexContent,
35
+ title: reviewer ? `${_label}\n${reviewer}` : _label
75
36
  }, React.createElement(HiColoredLabel, {
76
- label: scoreLabel,
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
- active: pendingManualAction
89
- }), !!smartDecision && React.createElement("div", {
90
- className: classes.smartDecision
91
- }, automaticFraudReviewResult && React.createElement(HiColoredLabel, {
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
- hideFraudResult: false
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
- * Résultat de la fraude
116
- */
117
- fraudResult: PropTypes.string.isRequired,
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);
@@ -52,7 +52,7 @@ export const styles = theme => ({
52
52
  position: 'relative',
53
53
  cursor: 'pointer',
54
54
  '&:hover, &:focus': {
55
- color: theme.palette.primary.main
55
+ color: theme.palette.neutral.dark
56
56
  }
57
57
  },
58
58
  label: {
@@ -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
- NavBarElement: props2 => React.createElement(NavBar, _extends({
216
+ navbarElement: props2 => React.createElement(NavBar, _extends({
217
217
  showClockButton: enableTime,
218
218
  onClockClick: this.handleClockClick
219
219
  }, props2)),