@hipay/hipay-material-ui 2.0.0-beta.53 → 2.0.0-beta.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/HiCell/CellImage.js +16 -4
  2. package/HiCell/CellNumeric.js +1 -2
  3. package/HiCell/CellSentinel.js +33 -109
  4. package/HiCell/CellSentinelScore.js +100 -0
  5. package/HiCell/CellTextStyled.js +71 -0
  6. package/HiCell/index.js +9 -1
  7. package/HiChip/HiChip.js +2 -1
  8. package/HiColoredLabel/HiColoredLabel.js +14 -4
  9. package/HiDatePicker/HiDatePicker.js +1 -1
  10. package/HiDatePicker/HiDateRangePicker.js +349 -420
  11. package/HiDatePicker/HiDateRangeSelector.js +80 -62
  12. package/HiDatePicker/NavBar.js +2 -1
  13. package/HiDatePicker/Overlays/TimePickerOverlay.js +1 -1
  14. package/HiDatePicker/Overlays/YearPickerOverlay.js +3 -3
  15. package/HiForm/HiFormControl.js +5 -4
  16. package/HiSelect/HiSuggestSelect.js +16 -2
  17. package/HiSelectNew/HiSelect.js +4 -1
  18. package/HiSelectableList/HiSelectableListItem.js +3 -1
  19. package/HiSwitch/HiSwitch.js +2 -1
  20. package/HiTable/HiCellBuilder.js +31 -27
  21. package/HiTable/HiTableHeader.js +21 -13
  22. package/HiTable/constants.js +7 -5
  23. package/es/HiCell/CellImage.js +13 -2
  24. package/es/HiCell/CellNumeric.js +1 -2
  25. package/es/HiCell/CellSentinel.js +32 -108
  26. package/es/HiCell/CellSentinelScore.js +60 -0
  27. package/es/HiCell/CellTextStyled.js +57 -0
  28. package/es/HiCell/index.js +2 -1
  29. package/es/HiChip/HiChip.js +2 -1
  30. package/es/HiColoredLabel/HiColoredLabel.js +14 -3
  31. package/es/HiDatePicker/HiDatePicker.js +1 -1
  32. package/es/HiDatePicker/HiDateRangePicker.js +312 -363
  33. package/es/HiDatePicker/HiDateRangeSelector.js +70 -56
  34. package/es/HiDatePicker/NavBar.js +2 -1
  35. package/es/HiDatePicker/Overlays/TimePickerOverlay.js +1 -1
  36. package/es/HiDatePicker/Overlays/YearPickerOverlay.js +3 -3
  37. package/es/HiForm/HiFormControl.js +5 -4
  38. package/es/HiSelect/HiSuggestSelect.js +16 -3
  39. package/es/HiSelectNew/HiSelect.js +4 -1
  40. package/es/HiSelectableList/HiSelectableListItem.js +3 -1
  41. package/es/HiSwitch/HiSwitch.js +2 -1
  42. package/es/HiTable/HiCellBuilder.js +30 -27
  43. package/es/HiTable/HiTableHeader.js +20 -14
  44. package/es/HiTable/constants.js +8 -1
  45. package/es/styles/createPalette.js +3 -3
  46. package/index.es.js +1 -1
  47. package/index.js +1 -1
  48. package/package.json +1 -1
  49. package/styles/createPalette.js +3 -3
  50. package/umd/hipay-material-ui.development.js +9843 -6197
  51. package/umd/hipay-material-ui.production.min.js +2 -2
  52. package/yarn-error.log +0 -110
@@ -1,14 +1,14 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- // @inheritedComponent HiDateRangePicker
4
3
  import React from 'react';
5
4
  import PropTypes from 'prop-types';
6
5
  import moment from 'moment';
7
6
  import { findDOMNode } from 'react-dom';
8
7
  import Grid from '@material-ui/core/Grid';
9
8
  import withStyles from '../styles/withStyles';
10
- import HiSelectField from '../HiSelect/HiSelectField';
9
+ import HiSelectField from '../HiSelectNew/HiSelectField';
11
10
  import HiDateRangePicker from './HiDateRangePicker';
11
+ import HiFormControl from '../HiForm/HiFormControl';
12
12
  export function buildDateRangeOptionByKey(key, t, format) {
13
13
  let from;
14
14
  let label;
@@ -24,6 +24,8 @@ export function buildDateRangeOptionByKey(key, t, format) {
24
24
  switch (key) {
25
25
  case 'custom':
26
26
  label = t.custom_period;
27
+ from = moment().subtract(15, 'day').startOf('day');
28
+ to = moment().endOf('day');
27
29
  type = 'primary-highlight';
28
30
  break;
29
31
 
@@ -59,35 +61,35 @@ export function buildDateRangeOptionByKey(key, t, format) {
59
61
  label = t.current_month;
60
62
  from = moment().startOf('month');
61
63
  to = moment();
62
- info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
64
+ info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
63
65
  break;
64
66
 
65
67
  case 'pm':
66
68
  label = t.previous_month;
67
69
  from = moment().subtract(1, 'month').startOf('month');
68
70
  to = moment().subtract(1, 'month').endOf('month');
69
- info = `${from.format('YYYY-MM')}, ${to.diff(from, 'days')} ${t.days}`;
71
+ info = `${from.format(t.yearAndMonth)}, ${from.daysInMonth()} ${t.days}`;
70
72
  break;
71
73
 
72
74
  case 'cq':
73
75
  label = t.current_quarter;
74
76
  from = moment().startOf('quarter');
75
77
  to = moment();
76
- info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
78
+ info = `${from.format(t.yearAndQuarter)}, ${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
77
79
  break;
78
80
 
79
81
  case 'pq':
80
82
  label = t.previous_quarter;
81
83
  from = moment().subtract(1, 'quarter').startOf('quarter');
82
84
  to = moment().subtract(1, 'quarter').endOf('quarter');
83
- info = `${from.format('YYYY')}-${t.short_quarter}${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
85
+ info = `${from.format(t.yearAndQuarter)}, ${to.diff(from, 'days') + 1} ${t.days}`;
84
86
  break;
85
87
 
86
88
  case 'cy':
87
89
  label = t.current_year;
88
90
  from = moment().startOf('year');
89
91
  to = moment();
90
- info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
92
+ info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
91
93
  break;
92
94
 
93
95
  default:
@@ -125,23 +127,24 @@ class HiDateRangeSelector extends React.Component {
125
127
  super();
126
128
  this.options = [];
127
129
 
130
+ this.onBlur = event => {
131
+ if (event instanceof Object && this.props.onblur) {
132
+ this.props.onBlur(event);
133
+ }
134
+ };
135
+
128
136
  this.handleSelectChange = name => (event, value) => {
129
137
  this.setState({
130
- [name]: value
138
+ [name]: value,
139
+ key: this.state.key === 1 ? 2 : 1
131
140
  });
141
+ const selectedOption = this.options.find(option => option.id === value);
132
142
 
133
- if (value !== 'custom') {
134
- const selectedOption = this.options.find(option => option.id === value);
135
-
136
- if (selectedOption) {
137
- this.props.onChange('from', selectedOption.from.toDate());
138
- this.props.onChange('to', selectedOption.to.toDate());
139
- }
140
- } else {
141
- this.setState({
142
- defaultFrom: undefined,
143
- defaultTo: undefined
144
- });
143
+ if (selectedOption) {
144
+ this.props.onChange('from', selectedOption.from.toDate());
145
+ this.props.onChange('to', selectedOption.to.toDate());
146
+ this.props.onChange('fromError', false);
147
+ this.props.onChange('toError', false);
145
148
  }
146
149
 
147
150
  if (this.props.returnSelectValue === true) {
@@ -152,23 +155,9 @@ class HiDateRangeSelector extends React.Component {
152
155
  this.handleReset = this.handleReset.bind(this);
153
156
  this.handleSelectChange = this.handleSelectChange.bind(this);
154
157
  this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
155
- let from;
156
- let to;
157
-
158
- if (props.defaultPreset !== 'custom') {
159
- const selectedOption = this.options.find(option => option.id === props.defaultPreset);
160
-
161
- if (selectedOption) {
162
- from = selectedOption.from.toDate();
163
- to = selectedOption.to.toDate();
164
- }
165
- }
166
-
167
158
  this.state = {
168
159
  selectedPreset: props.defaultPreset,
169
- containerWidth: 0,
170
- defaultFrom: from,
171
- defaultTo: to
160
+ containerWidth: 0
172
161
  };
173
162
  }
174
163
 
@@ -185,7 +174,7 @@ class HiDateRangeSelector extends React.Component {
185
174
  componentDidMount() {
186
175
  if (this.container) {
187
176
  this.setState({
188
- containerWidth: findDOMNode(this.container).clientWidth
177
+ containerWidth: findDOMNode(this.container).clientWidth - 5
189
178
  });
190
179
  }
191
180
  }
@@ -196,6 +185,7 @@ class HiDateRangeSelector extends React.Component {
196
185
 
197
186
  handleReset(name) {
198
187
  this.props.onChange(name, undefined);
188
+ this.props.onChange(`${name}Error`, undefined);
199
189
  }
200
190
 
201
191
  render() {
@@ -203,12 +193,14 @@ class HiDateRangeSelector extends React.Component {
203
193
  {
204
194
  disabled,
205
195
  enableTime,
206
- error,
207
196
  errorText,
197
+ fromError,
198
+ toError,
208
199
  helperIcon,
209
200
  helperText,
210
201
  idRange,
211
202
  idSelect,
203
+ minimumDate,
212
204
  label,
213
205
  from,
214
206
  onChange,
@@ -219,20 +211,26 @@ class HiDateRangeSelector extends React.Component {
219
211
  selectProps,
220
212
  staticPosition
221
213
  } = _this$props,
222
- props = _objectWithoutProperties(_this$props, ["disabled", "enableTime", "error", "errorText", "helperIcon", "helperText", "idRange", "idSelect", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
214
+ props = _objectWithoutProperties(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
223
215
 
224
216
  const {
225
- defaultFrom,
226
- defaultTo,
227
217
  selectedPreset
228
218
  } = this.state;
229
- return React.createElement(Grid, {
219
+ const hiSelectableListProps = {
220
+ hideCheckbox: true
221
+ };
222
+ return React.createElement(HiFormControl, {
223
+ disabled: disabled,
224
+ helperIcon: helperIcon,
225
+ helperText: helperText,
226
+ errorText: errorText,
227
+ error: !!(fromError || toError),
228
+ label: ' '
229
+ }, React.createElement(Grid, {
230
230
  container: true,
231
231
  spacing: 8,
232
232
  className: classes.root,
233
- ref: container => {
234
- this.container = container;
235
- }
233
+ ref: container => this.container = container
236
234
  }, React.createElement(Grid, {
237
235
  item: true,
238
236
  xs: 12,
@@ -242,12 +240,10 @@ class HiDateRangeSelector extends React.Component {
242
240
  }
243
241
  }, React.createElement(HiSelectField, _extends({
244
242
  disabled: disabled,
245
- error: error,
246
- errorText: errorText,
247
- helperIcon: helperIcon,
248
- helperText: helperText,
249
243
  id: idSelect,
250
244
  label: label,
245
+ hideCheckbox: true,
246
+ hiSelectableListProps: hiSelectableListProps,
251
247
  name: 'selectedPreset',
252
248
  options: this.options,
253
249
  onChange: this.handleSelectChange('selectedPreset'),
@@ -267,26 +263,32 @@ class HiDateRangeSelector extends React.Component {
267
263
  'grid-sm-8': classes.smRangePicker
268
264
  }
269
265
  }, React.createElement(HiDateRangePicker, _extends({
266
+ key: this.state.key,
270
267
  classes: {
271
268
  root: classes.dateRangePicker
272
269
  },
273
270
  id: idRange,
274
- from: from || defaultFrom,
275
- to: to || defaultTo,
271
+ from: selectedPreset ? from : undefined,
272
+ to: selectedPreset ? to : undefined,
276
273
  enableTime: enableTime,
277
274
  onChange: onChange,
275
+ toError: toError,
276
+ fromError: fromError,
277
+ minimumDate: minimumDate,
278
+ errorText: null,
278
279
  onReset: this.handleReset,
279
280
  disabled: disabled || selectedPreset !== 'custom',
280
281
  translations: translations,
281
- staticPosition: staticPosition
282
- }, props))));
282
+ staticPosition: staticPosition,
283
+ onBlur: this.onBlur,
284
+ hasSelector: true
285
+ }, props)))));
283
286
  }
284
287
 
285
288
  }
286
289
 
287
290
  HiDateRangeSelector.defaultProps = {
288
291
  availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
289
- defaultPreset: 'cd',
290
292
  enableTime: false,
291
293
  returnSelectValue: false,
292
294
  staticPosition: false,
@@ -300,7 +302,8 @@ HiDateRangeSelector.defaultProps = {
300
302
  quarter: 'Quarter',
301
303
  week: 'Week',
302
304
  short_week: 'W',
303
- short_quarter: 'Q',
305
+ yearAndMonth: 'YYYY[-]MM',
306
+ yearAndQuarter: 'YYYY[-Q]Q',
304
307
  year: 'Year',
305
308
  days: 'days',
306
309
  custom_period: 'Custom Period',
@@ -313,7 +316,13 @@ HiDateRangeSelector.defaultProps = {
313
316
  previous_month: 'Previous Month',
314
317
  current_quarter: 'Current Quarter',
315
318
  previous_quarter: 'Previous Quarter',
316
- current_year: 'Current Year'
319
+ current_year: 'Current Year',
320
+ invalid_format: 'The date format is not valid',
321
+ to_superior_from: 'Date from cannot be greater than date to',
322
+ date_superior_max_date: 'Date from cannot be greater than %s',
323
+ date_inferior_min_date: 'Date from cannot be before than %s',
324
+ missing_date_from: 'Missing date from',
325
+ missing_date_to: 'Missing date to'
317
326
  }
318
327
  };
319
328
  HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -350,7 +359,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
350
359
  /**
351
360
  * Texte de l'erreur
352
361
  */
353
- errorText: PropTypes.string,
362
+ errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
354
363
 
355
364
  /**
356
365
  * Format de date utilisé
@@ -392,6 +401,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
392
401
  */
393
402
  locale: PropTypes.string,
394
403
 
404
+ /**
405
+ * Date minimale sélectionnable
406
+ */
407
+ minimumDate: PropTypes.instanceOf(Date).isRequired,
408
+
395
409
  /**
396
410
  * Callback à la sélection d'une date
397
411
  */
@@ -17,7 +17,8 @@ export const styles = theme => ({
17
17
  button: {
18
18
  height: 32,
19
19
  width: 32,
20
- margin: '4px 24px'
20
+ margin: '4px 24px',
21
+ padding: 0
21
22
  },
22
23
  left: {
23
24
  float: 'left'
@@ -81,7 +81,7 @@ export const styles = theme => ({
81
81
  bottom: 0,
82
82
  height: 32,
83
83
  width: 32,
84
- margin: '4px 24px'
84
+ margin: '0px 24px'
85
85
  },
86
86
  calendarButton: {
87
87
  fontWeight: theme.typography.fontWeightMedium
@@ -55,8 +55,8 @@ class YearPickerOverlay extends React.Component {
55
55
  }
56
56
 
57
57
  YearPickerOverlay.defaultProps = {
58
- disableFutureDays: false,
59
- disablePastDays: false,
58
+ // disableFutureDays: true,
59
+ // disablePastDays: false,
60
60
  minimumDate: new Date(2013, 4, 1),
61
61
  // by default 1 May 2013
62
62
  translations: {
@@ -92,7 +92,7 @@ YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
92
92
  /**
93
93
  * Date minimale sélectionnable
94
94
  */
95
- minimumDate: PropTypes.instanceOf(Date),
95
+ minimumDate: PropTypes.instanceOf(Date).isRequired,
96
96
 
97
97
  /**
98
98
  * Fonction de callback
@@ -25,6 +25,7 @@ export const styles = theme => ({
25
25
  position: 'absolute',
26
26
  right: 5,
27
27
  cursor: 'pointer',
28
+ zIndex: 1,
28
29
  top: '-5px',
29
30
  '&$iconButtonError': {
30
31
  color: theme.palette.negative.main
@@ -194,7 +195,7 @@ class HiFormControl extends React.PureComponent {
194
195
  required: required,
195
196
  disabled: disabled,
196
197
  focused: !disabled && (focused || hovered)
197
- }, InputLabelProps), error && React.createElement(HiIconButton, {
198
+ }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
198
199
  className: classNames(classes.iconButton, classes.iconButtonError),
199
200
  onClick: this.handleHelperClick,
200
201
  onKeyDown: this.handleKeyDown
@@ -227,8 +228,8 @@ HiFormControl.defaultProps = {
227
228
  required: true,
228
229
  disabled: false,
229
230
  error: false,
230
- errorText: '',
231
- helperText: '',
231
+ errorText: undefined,
232
+ helperText: undefined,
232
233
  helperIcon: false,
233
234
  multiline: false,
234
235
  nbChars: 0,
@@ -263,7 +264,7 @@ HiFormControl.propTypes = process.env.NODE_ENV !== "production" ? {
263
264
  /**
264
265
  * Texte de l'erreur
265
266
  */
266
- errorText: PropTypes.string,
267
+ errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
267
268
 
268
269
  /**
269
270
  * Propriétés appliquées au composant FormHelperText
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
6
6
  import { findDOMNode } from 'react-dom';
7
7
  import Grow from '@material-ui/core/Grow';
8
8
  import Paper from '@material-ui/core/Paper';
9
+ import classNames from 'classnames';
9
10
  import HiSelectableList from '../HiSelectableList';
10
11
  import HiInput from '../HiForm/HiInput';
11
12
  import { withStyles } from '../styles';
@@ -28,6 +29,9 @@ export const styles = theme => ({
28
29
  borderRadius: '0px 2px',
29
30
  maxHeight: 440,
30
31
  transition: 'none'
32
+ },
33
+ alignRight: {
34
+ right: 0
31
35
  }
32
36
  });
33
37
 
@@ -139,9 +143,10 @@ class HiSuggestSelect extends React.PureComponent {
139
143
  showMinLength,
140
144
  showNoResults,
141
145
  onSearch,
142
- translations
146
+ translations,
147
+ align
143
148
  } = _this$props,
144
- otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations"]);
149
+ otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
145
150
 
146
151
  const {
147
152
  focused,
@@ -188,7 +193,9 @@ class HiSuggestSelect extends React.PureComponent {
188
193
  disablePortal: true,
189
194
  anchorEl: this.textInput,
190
195
  placement: "bottom-start",
191
- className: classes.popper,
196
+ className: classNames(classes.popper, {
197
+ [classes.alignRight]: align === 'right'
198
+ }),
192
199
  open: true
193
200
  }, React.createElement(Grow, {
194
201
  in: open,
@@ -211,6 +218,7 @@ class HiSuggestSelect extends React.PureComponent {
211
218
  }
212
219
 
213
220
  HiSuggestSelect.defaultProps = {
221
+ align: 'left',
214
222
  showMinLength: false,
215
223
  showNoResults: false,
216
224
  translations: {
@@ -220,6 +228,11 @@ HiSuggestSelect.defaultProps = {
220
228
  options: []
221
229
  };
222
230
  HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
231
+ /**
232
+ * Align popper on right or left of container
233
+ */
234
+ align: PropTypes.oneOf(['left', 'right']),
235
+
223
236
  /**
224
237
  * Useful to extend the style applied to components.
225
238
  */
@@ -434,7 +434,7 @@ class HiSelect extends React.PureComponent {
434
434
 
435
435
  const popperClass = classNames(classes.popper, {
436
436
  [classes.popperWidth]: !this.props.containerWidth,
437
- [classes.popperRightAlign]: this.props.containerWidth
437
+ [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right'
438
438
  });
439
439
  const content = React.createElement(ClickAwayListener, {
440
440
  onClickAway: this.handleClickAway
@@ -515,6 +515,7 @@ class HiSelect extends React.PureComponent {
515
515
  }
516
516
 
517
517
  HiSelect.defaultProps = {
518
+ align: 'left',
518
519
  disabled: false,
519
520
  displayAsChip: false,
520
521
  error: false,
@@ -537,6 +538,8 @@ HiSelect.defaultProps = {
537
538
  type: 'text'
538
539
  };
539
540
  HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
541
+ align: PropTypes.oneOf(['left', 'right']),
542
+
540
543
  /**
541
544
  * Useful to extend the style applied to components.
542
545
  */
@@ -109,7 +109,9 @@ export const styles = theme => ({
109
109
  textOverflow: 'ellipsis',
110
110
  textAlign: 'right',
111
111
  margin: '4px 12px 4px 8px',
112
- alignSelf: 'center'
112
+ alignSelf: 'center',
113
+ minWidth: '40%',
114
+ maxWidth: '100%'
113
115
  }),
114
116
  checkbox: {
115
117
  marginTop: 3
@@ -12,7 +12,8 @@ export const styles = theme => ({
12
12
  display: 'inline-flex',
13
13
  width: 62,
14
14
  position: 'relative',
15
- flexShrink: 0
15
+ flexShrink: 0,
16
+ zIndex: 0
16
17
  },
17
18
  bar: {
18
19
  borderRadius: 7,
@@ -2,15 +2,16 @@
2
2
  import React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import TableCell from '@material-ui/core/TableCell';
5
- import CellAddress from '@hipay/hipay-material-ui/HiCell/CellAddress';
6
- import CellDate from '@hipay/hipay-material-ui/HiCell/CellDate';
7
- import CellIcon from '@hipay/hipay-material-ui/HiCell/CellIcon';
8
- import CellImage from '@hipay/hipay-material-ui/HiCell/CellImage';
9
- import CellNumeric from '@hipay/hipay-material-ui/HiCell/CellNumeric';
10
- import CellSentinel from '@hipay/hipay-material-ui/HiCell/CellSentinel';
11
- import CellText from '@hipay/hipay-material-ui/HiCell/CellText';
12
- import CellRate from '@hipay/hipay-material-ui/HiCell/CellRate';
13
- import CellPinToAction from '@hipay/hipay-material-ui/HiCell/CellPinToAction';
5
+ import CellAddress from '../HiCell/CellAddress';
6
+ import CellDate from '../HiCell/CellDate';
7
+ import CellIcon from '../HiCell/CellIcon';
8
+ import CellImage from '../HiCell/CellImage';
9
+ import CellNumeric from '../HiCell/CellNumeric';
10
+ import CellSentinel from '../HiCell/CellSentinel';
11
+ import CellSentinelScore from '../HiCell/CellSentinelScore';
12
+ import CellTextStyled from '../HiCell/CellTextStyled';
13
+ import CellRate from '../HiCell/CellRate';
14
+ import CellPinToAction from '../HiCell/CellPinToAction';
14
15
  import * as cst from './constants';
15
16
 
16
17
  class HiCellBuilder extends React.PureComponent {
@@ -56,7 +57,8 @@ class HiCellBuilder extends React.PureComponent {
56
57
  shortLabel: datacell.id,
57
58
  path: datacell.img,
58
59
  size: datacell.size,
59
- view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
60
+ view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
61
+ fallbackImage: datacell.fallbackImage
60
62
  });
61
63
 
62
64
  case cst.TYPE_RATE:
@@ -109,13 +111,19 @@ class HiCellBuilder extends React.PureComponent {
109
111
 
110
112
  case cst.TYPE_SENTINEL:
111
113
  return React.createElement(CellSentinel, {
112
- automaticFraudReviewResult: datacell.automaticFraudReviewResult,
113
- fraudResult: datacell.value,
114
- hideFraudResult: datacell.hideFraudResult,
115
- pendingManualAction: datacell.pendingManualAction,
116
- score: datacell.score,
117
- smartDecision: datacell.smartDecision,
118
- view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
114
+ color: datacell.color,
115
+ label: datacell.label,
116
+ letter: datacell.label2,
117
+ active: datacell.active,
118
+ reviewer: datacell.reviewer,
119
+ outlined: datacell.outlined
120
+ });
121
+
122
+ case cst.TYPE_SENTINEL_SCORE:
123
+ return React.createElement(CellSentinelScore, {
124
+ value: datacell.value,
125
+ result: datacell.result,
126
+ active: datacell.active
119
127
  });
120
128
 
121
129
  case cst.TYPE_PIN_TO_ACTION:
@@ -125,18 +133,13 @@ class HiCellBuilder extends React.PureComponent {
125
133
  });
126
134
 
127
135
  case cst.TYPE_ACCOUNT_NUMBER:
128
- return React.createElement(CellText, {
129
- label: datacell.value,
130
- color: datacell.color,
131
- ellipsis: datacell.ellipse
132
- });
133
-
134
136
  default:
135
- return React.createElement(CellText, {
136
- label: datacell.value,
137
+ return React.createElement(CellTextStyled, {
138
+ active: datacell.active,
137
139
  color: datacell.color,
138
- ellipsis: datacell.ellipse,
139
- view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
140
+ label: datacell.label,
141
+ title: datacell.title,
142
+ value: datacell.value
140
143
  });
141
144
  }
142
145
  }
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  // @inheritedComponent TableHeader
2
3
  import React from 'react';
3
4
  import PropTypes from 'prop-types';
@@ -38,29 +39,34 @@ class HiTableHeader extends React.PureComponent {
38
39
  height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
39
40
  whiteSpace: 'nowrap'
40
41
  }
41
- }, Object.keys(columns).map(function (key) {
42
- const column = columns[key];
42
+ }, Object.keys(columns).map(key => {
43
+ const {
44
+ colId,
45
+ type,
46
+ label,
47
+ smallLabel,
48
+ view
49
+ } = columns[key];
43
50
  return React.createElement(TableCell, {
44
- key: column.colId,
45
- sortDirection: orderBy === column.colId ? order : false,
51
+ key: colId,
52
+ sortDirection: orderBy === colId ? order : false,
46
53
  style: {
47
54
  border: 'none',
48
- borderBottom: orderBy === column.colId ? 'solid 1px #00ADE9' : 'none',
55
+ borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
49
56
  paddingRight: '13px',
50
57
  paddingLeft: '13px'
51
58
  },
52
- numeric: !!cst.ALIGN_RIGHT_TYPES.includes(column.type)
53
- }, sortable ? React.createElement(Tooltip, {
54
- title: "Sort",
55
- enterDelay: 300
56
- }, React.createElement(TableSortLabel, {
57
- active: orderBy === column.colId,
59
+ numeric: cst.ALIGN_RIGHT_TYPES.includes(type)
60
+ }, React.createElement(TableSortLabel, _extends({}, sortable && {
61
+ active: orderBy === colId,
58
62
  direction: order,
59
- onClick: this.createSortHandler(column.colId),
63
+ onClick: this.createSortHandler(colId)
64
+ }, {
60
65
  classes: {
61
66
  icon: classes.icon
62
- }
63
- }, column.label)) : column.label);
67
+ },
68
+ title: label
69
+ }), view === 's' ? smallLabel : label));
64
70
  }, this)));
65
71
  }
66
72
 
@@ -26,6 +26,7 @@ export const TYPE_IMAGE = 'image';
26
26
  export const TYPE_NUMERIC = 'numeric';
27
27
  export const TYPE_RATE = 'rate';
28
28
  export const TYPE_SENTINEL = 'sentinel';
29
+ export const TYPE_SENTINEL_SCORE = 'sentinel_score';
29
30
  export const TYPE_STATUS = 'status';
30
31
  export const TYPE_COUNTRY = 'country';
31
32
  export const TYPE_TEXT = 'text';
@@ -123,6 +124,11 @@ export const DEFAULT_WIDTHS = {
123
124
  [VIEWS.SMALL]: 80
124
125
  },
125
126
  [TYPE_SENTINEL]: {
127
+ [VIEWS.LARGE]: 64,
128
+ [VIEWS.MEDIUM]: 64,
129
+ [VIEWS.SMALL]: 64
130
+ },
131
+ [TYPE_SENTINEL_SCORE]: {
126
132
  [VIEWS.LARGE]: 80,
127
133
  [VIEWS.MEDIUM]: 80,
128
134
  [VIEWS.SMALL]: 80
@@ -160,6 +166,7 @@ export const DEFAULT_VIEWS = {
160
166
  [TYPE_NUMERIC]: VIEWS.LARGE,
161
167
  [TYPE_RATE]: VIEWS.LARGE,
162
168
  [TYPE_SENTINEL]: VIEWS.LARGE,
169
+ [TYPE_SENTINEL_SCORE]: VIEWS.LARGE,
163
170
  [TYPE_STATUS]: VIEWS.LARGE,
164
171
  [TYPE_TEXT]: VIEWS.LARGE,
165
172
  [TYPE_THIRD_PARTY_SECURITY]: VIEWS.LARGE
@@ -179,4 +186,4 @@ export const DEFAULT_PADDING = {
179
186
  * @type {*[]}
180
187
  */
181
188
 
182
- export const ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL];
189
+ export const ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL, TYPE_SENTINEL_SCORE];