@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.
- package/HiCell/CellImage.js +16 -4
- package/HiCell/CellNumeric.js +1 -2
- package/HiCell/CellSentinel.js +33 -109
- package/HiCell/CellSentinelScore.js +100 -0
- package/HiCell/CellTextStyled.js +71 -0
- package/HiCell/index.js +9 -1
- package/HiChip/HiChip.js +2 -1
- package/HiColoredLabel/HiColoredLabel.js +14 -4
- package/HiDatePicker/HiDatePicker.js +1 -1
- package/HiDatePicker/HiDateRangePicker.js +349 -420
- package/HiDatePicker/HiDateRangeSelector.js +80 -62
- 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/HiSelect/HiSuggestSelect.js +16 -2
- package/HiSelectNew/HiSelect.js +4 -1
- package/HiSelectableList/HiSelectableListItem.js +3 -1
- package/HiSwitch/HiSwitch.js +2 -1
- package/HiTable/HiCellBuilder.js +31 -27
- package/HiTable/HiTableHeader.js +21 -13
- package/HiTable/constants.js +7 -5
- package/es/HiCell/CellImage.js +13 -2
- package/es/HiCell/CellNumeric.js +1 -2
- package/es/HiCell/CellSentinel.js +32 -108
- package/es/HiCell/CellSentinelScore.js +60 -0
- package/es/HiCell/CellTextStyled.js +57 -0
- package/es/HiCell/index.js +2 -1
- package/es/HiChip/HiChip.js +2 -1
- package/es/HiColoredLabel/HiColoredLabel.js +14 -3
- package/es/HiDatePicker/HiDatePicker.js +1 -1
- package/es/HiDatePicker/HiDateRangePicker.js +312 -363
- package/es/HiDatePicker/HiDateRangeSelector.js +70 -56
- 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/HiSelect/HiSuggestSelect.js +16 -3
- package/es/HiSelectNew/HiSelect.js +4 -1
- package/es/HiSelectableList/HiSelectableListItem.js +3 -1
- package/es/HiSwitch/HiSwitch.js +2 -1
- package/es/HiTable/HiCellBuilder.js +30 -27
- package/es/HiTable/HiTableHeader.js +20 -14
- package/es/HiTable/constants.js +8 -1
- package/es/styles/createPalette.js +3 -3
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/styles/createPalette.js +3 -3
- package/umd/hipay-material-ui.development.js +9843 -6197
- package/umd/hipay-material-ui.production.min.js +2 -2
- 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 '../
|
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(
|
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(
|
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 (
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
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", "
|
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
|
-
|
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
|
275
|
-
to: to
|
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
|
-
|
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
|
-
|
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
|
*/
|
@@ -55,8 +55,8 @@ class YearPickerOverlay extends React.Component {
|
|
55
55
|
}
|
56
56
|
|
57
57
|
YearPickerOverlay.defaultProps = {
|
58
|
-
disableFutureDays:
|
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
|
package/es/HiSwitch/HiSwitch.js
CHANGED
@@ -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 '
|
6
|
-
import CellDate from '
|
7
|
-
import CellIcon from '
|
8
|
-
import CellImage from '
|
9
|
-
import CellNumeric from '
|
10
|
-
import CellSentinel from '
|
11
|
-
import
|
12
|
-
import
|
13
|
-
import
|
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
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
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(
|
136
|
-
|
137
|
+
return React.createElement(CellTextStyled, {
|
138
|
+
active: datacell.active,
|
137
139
|
color: datacell.color,
|
138
|
-
|
139
|
-
|
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(
|
42
|
-
const
|
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:
|
45
|
-
sortDirection: orderBy ===
|
51
|
+
key: colId,
|
52
|
+
sortDirection: orderBy === colId ? order : false,
|
46
53
|
style: {
|
47
54
|
border: 'none',
|
48
|
-
borderBottom: orderBy ===
|
55
|
+
borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
|
49
56
|
paddingRight: '13px',
|
50
57
|
paddingLeft: '13px'
|
51
58
|
},
|
52
|
-
numeric:
|
53
|
-
},
|
54
|
-
|
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(
|
63
|
+
onClick: this.createSortHandler(colId)
|
64
|
+
}, {
|
60
65
|
classes: {
|
61
66
|
icon: classes.icon
|
62
|
-
}
|
63
|
-
|
67
|
+
},
|
68
|
+
title: label
|
69
|
+
}), view === 's' ? smallLabel : label));
|
64
70
|
}, this)));
|
65
71
|
}
|
66
72
|
|
package/es/HiTable/constants.js
CHANGED
@@ -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];
|