@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,13 +1,12 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
- import _objectSpread from "@babel/runtime/helpers/objectSpread";
3
2
  import _extends from "@babel/runtime/helpers/extends";
3
+ import _objectSpread from "@babel/runtime/helpers/objectSpread";
4
4
  import React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import MomentLocaleUtils from 'react-day-picker/moment';
7
7
  import DayPickerInput from 'react-day-picker/DayPickerInput';
8
8
  import classNames from 'classnames';
9
9
  import withStyles from '../styles/withStyles';
10
- import { capitalize } from '../utils/helpers';
11
10
  import Caption from './Caption';
12
11
  import Overlay from './Overlays/Overlay';
13
12
  import TimePickerOverlay from './Overlays/TimePickerOverlay';
@@ -17,333 +16,261 @@ import NavBar from './NavBar';
17
16
  import Weekday from './Weekday';
18
17
  import { HiTextField } from '../HiForm';
19
18
  import styles from './stylesheet';
19
+ import moment from 'moment';
20
+ import HiFormControl from '../HiForm/HiFormControl';
20
21
 
21
22
  class HiDateRangePicker extends React.Component {
22
23
  constructor(props) {
23
24
  super();
24
25
 
25
- this.handleInputChange = inputName => event => {
26
- this.event = event;
27
- this.props.onChange(inputName, event.target.value);
26
+ this.handleDayChange = (name, day) => {
27
+ if (day) {
28
+ // if time disabled, focus TO input
29
+ // else focus current input
30
+ if (!this.props.enableTime) {
31
+ if (day instanceof Date) {
32
+ if (name === 'from' && this.toInput) {
33
+ this.toInput.getInput().focus();
34
+ }
35
+ }
36
+ } else {
37
+ this.timeout = setTimeout(() => {
38
+ if (this[`${name}Input`].getInput()) {
39
+ this[`${name}Input`].getInput().focus();
40
+ }
41
+ }, 10);
42
+ }
43
+
44
+ if (this.props.onChange) {
45
+ this.handleChange(name, day);
46
+ }
47
+
48
+ if (this.props.enableTime) {
49
+ this.openPanel('time');
50
+ }
51
+ }
28
52
  };
29
53
 
30
- this.handleDayPickerFocus = name => () => {
31
- this.setState({
32
- focusedInput: name
33
- });
54
+ this.handleInputChange = inputName => event => {
55
+ this.handleChange(inputName, event.target.value);
34
56
  };
35
57
 
36
- this.handleDayPickerBlur = name => () => {
37
- this.setState({
38
- focusedInput: ''
39
- });
58
+ this.onDayToClick = day => {
59
+ let change = moment(day) >= moment(this.props.from);
40
60
 
41
- if (this.props.onBlur) {
42
- this.props.onBlur(name);
61
+ if (change && this.props.disableFutureDays && moment(day) > moment()) {
62
+ change = false;
63
+ }
64
+
65
+ if (change) {
66
+ console.log(_objectSpread({}, this.props));
67
+ this.handleDayChange('to', day);
68
+ document.activeElement.blur();
43
69
  }
44
70
  };
45
71
 
46
- this.state = {
47
- fromCurrentMonth: props.from ? props.from : new Date(),
48
- toCurrentMonth: props.to ? props.to : new Date(),
49
- focusedInput: ''
72
+ this.handleTimeChange = (name, date, precision) => {
73
+ this.handleChange(name, date);
74
+
75
+ if (name === 'from' && precision === 'minute') {
76
+ this.fromInput.hideDayPicker();
77
+ this.toInput.getInput().focus();
78
+ this.toInput.showDayPicker();
79
+ this.openPanel('calendar');
80
+ } else if (name === 'to' && precision === 'minute') {
81
+ this.toInput.hideDayPicker();
82
+ document.activeElement.blur();
83
+ }
50
84
  };
51
- this.handleReset = this.handleReset.bind(this);
52
- this.handleDayChange = this.handleDayChange.bind(this);
53
- this.handleDayChangeFrom = this.handleDayChangeFrom.bind(this);
54
- this.handleDayChangeTo = this.handleDayChangeTo.bind(this);
55
- this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
56
- this.handleCurrentMonthChangeFrom = this.handleCurrentMonthChangeFrom.bind(this);
57
- this.handleCurrentMonthChangeTo = this.handleCurrentMonthChangeTo.bind(this);
58
- this.handleTimeChange = this.handleTimeChange.bind(this);
59
- this.handleCalendarClick = this.handleCalendarClick.bind(this);
60
- this.handleCalendarClickFrom = this.handleCalendarClickFrom.bind(this);
61
- this.handleCalendarClickTo = this.handleCalendarClickTo.bind(this);
62
- this.handleClockClick = this.handleClockClick.bind(this);
63
- this.handleClockClickFrom = this.handleClockClickFrom.bind(this);
64
- this.handleClockClickTo = this.handleClockClickTo.bind(this);
65
- this.handleMonthClick = this.handleMonthClick.bind(this);
66
- this.handleMonthClickFrom = this.handleMonthClickFrom.bind(this);
67
- this.handleMonthClickTo = this.handleMonthClickTo.bind(this);
68
- this.handleYearClick = this.handleYearClick.bind(this);
69
- this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
70
- this.handleYearClickTo = this.handleYearClickTo.bind(this);
71
- this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
72
- this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
73
- this.handleInputChange = this.handleInputChange.bind(this);
74
- this.openPanel = this.openPanel.bind(this);
75
- this.renderCaption = this.renderCaption.bind(this);
76
- this.renderCaptionFrom = this.renderCaptionFrom.bind(this);
77
- this.renderCaptionTo = this.renderCaptionTo.bind(this);
78
- this.renderNavBar = this.renderNavBar.bind(this);
79
- this.renderNavBarFrom = this.renderNavBarFrom.bind(this);
80
- this.renderNavBarTo = this.renderNavBarTo.bind(this);
81
- this.renderOverlay = this.renderOverlay.bind(this);
82
- this.renderOverlayFrom = this.renderOverlayFrom.bind(this);
83
- this.renderOverlayTo = this.renderOverlayTo.bind(this);
84
- this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
85
- this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
86
- this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
87
- }
88
85
 
89
- componentDidUpdate(prevProps) {
90
- // Focus From input on enabling
91
- if (prevProps.disabled === true && this.props.disabled === false) {
92
- this.timeout = setTimeout(() => {
93
- if (this.fromInput.getInput()) {
94
- this.fromInput.getInput().focus();
86
+ this.handleChange = (name, day) => {
87
+ const {
88
+ translations
89
+ } = this.props;
90
+ let date = undefined;
91
+ let error = undefined;
92
+ let now = new Date();
93
+ const {
94
+ minimumDate,
95
+ disableFutureDays,
96
+ format
97
+ } = this.props;
98
+
99
+ if (day instanceof Date) {
100
+ date = day;
101
+ } else if (day) {
102
+ let parsedValue = moment(day, this.props.format, true);
103
+
104
+ if (parsedValue.isValid()) {
105
+ date = parsedValue.toDate();
106
+ } else {
107
+ error = translations.invalid_format;
95
108
  }
96
- }, 0);
97
- }
98
- }
99
-
100
- componentWillUnmount() {
101
- clearTimeout(this.timeout);
102
- }
109
+ }
103
110
 
104
- handleDayChange(name, day, modifiers) {
105
- if (day) {
106
- // if time disabled, focus TO input
107
- // else focus current input
108
- if (!this.props.enableTime) {
109
- if (day instanceof Date) {
110
- if (name === 'from' && this.toInput) {
111
- this.toInput.getInput().focus();
112
- } else if (name === 'to') {
113
- if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
114
- // trigger blur only if user clicks on date into calendar
115
- // else keep focus to see day selection into calendar
116
- document.activeElement.blur();
117
- }
111
+ if (date) {
112
+ let comparativeDate = name === 'to' ? moment(this.props.from) : moment(this.props.to);
118
113
 
119
- delete this.event;
120
- }
114
+ if (name === 'to' && comparativeDate > moment(date) || name === 'from' && comparativeDate < moment(date)) {
115
+ error = translations.to_superior_from;
116
+ } else if (date < minimumDate) {
117
+ error = translations.date_inferior_min_date.replace("%s", moment(minimumDate).format(format));
118
+ } else if (disableFutureDays && date > now) {
119
+ error = translations.date_superior_max_date.replace("%s", moment().format(format));
121
120
  }
122
- } else {
123
- this.timeout = setTimeout(() => {
124
- if (this[`${name}Input`].getInput()) {
125
- this[`${name}Input`].getInput().focus();
126
- }
127
- }, 10);
128
- }
129
121
 
130
- if (this.props.onChange) {
131
- // Keep Time if set
132
- if (this.props.enableTime) {
133
- if (this.props[name]) {
134
- day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
122
+ if (!this.props.enableTime) {
123
+ if (name === 'from') {
124
+ date.setHours(0, 0);
135
125
  } else {
136
- day.setHours(0, 0);
126
+ date.setHours(23, 59);
137
127
  }
138
128
  }
139
-
140
- this.props.onChange(name, day);
141
129
  }
142
130
 
143
- if (this.props.enableTime) {
144
- this.openPanel(name, 'time');
145
- }
146
- }
147
- }
148
-
149
- handleDayChangeFrom(day, modifiers) {
150
- this.handleDayChange('from', day, modifiers);
151
- }
152
-
153
- handleDayChangeTo(day, modifiers) {
154
- this.handleDayChange('to', day, modifiers);
155
- }
156
-
157
- handleCurrentMonthChange(name, day) {
158
- this.setState({
159
- [`${name}CurrentMonth`]: day,
160
- [`${name}OpenedPanel`]: 'calendar'
161
- });
162
- }
163
-
164
- handleCurrentMonthChangeFrom(day) {
165
- this.handleCurrentMonthChange('from', day);
166
- }
167
-
168
- handleCurrentMonthChangeTo(day) {
169
- this.handleCurrentMonthChange('to', day);
170
- }
171
-
172
- handleCalendarClick(name) {
173
- this.openPanel(name, 'calendar');
174
- }
175
-
176
- handleCalendarClickFrom() {
177
- this.handleCalendarClick('from');
178
- }
179
-
180
- handleCalendarClickTo() {
181
- this.handleCalendarClick('to');
182
- }
183
-
184
- handleClockClick(name) {
185
- this.openPanel(name, 'time');
186
- }
187
-
188
- handleClockClickFrom() {
189
- this.handleClockClick('from');
190
- }
191
-
192
- handleClockClickTo() {
193
- this.handleClockClick('to');
194
- }
195
-
196
- handleMonthClick(name) {
197
- this.openPanel(name, 'months');
198
- }
199
-
200
- handleMonthClickFrom() {
201
- this.handleMonthClick('from');
202
- }
203
-
204
- handleMonthClickTo() {
205
- this.handleMonthClick('to');
206
- }
207
-
208
- handleYearClick(name) {
209
- this.openPanel(name, 'years');
210
- }
211
-
212
- handleYearClickFrom() {
213
- this.handleYearClick('from');
214
- }
131
+ this.props.onChange(name, date);
132
+ this.props.onChange(`${name}Error`, error);
133
+ };
215
134
 
216
- handleYearClickTo() {
217
- this.handleYearClick('to');
218
- }
135
+ this.handleCurrentMonthChange = day => {
136
+ this.setState({
137
+ currentMonth: day,
138
+ openedPanel: 'calendar'
139
+ });
140
+ };
219
141
 
220
- handleTimeChange(name, date, precision) {
221
- this.props.onChange(name, date);
142
+ this.handleDayPickerFocus = name => {
143
+ this.setState({
144
+ focusedInput: name
145
+ });
146
+ };
222
147
 
223
- if (name === 'from' && precision === 'minute') {
224
- this.fromInput.hideDayPicker();
225
- this.toInput.getInput().focus();
226
- this.toInput.showDayPicker();
227
- } else if (name === 'to' && precision === 'minute') {
228
- this.toInput.hideDayPicker();
229
- document.activeElement.blur();
230
- }
231
- }
148
+ this.handleDayPickerBlur = name => {
149
+ this.setState({
150
+ focusedInput: ''
151
+ });
232
152
 
233
- handleReset(name) {
234
- this.handleCurrentMonthChange(name, new Date());
235
- this.timeout = setTimeout(() => {
236
- if (this.props.onReset) {
237
- this.props.onReset(name);
153
+ if (this.props.onBlur) {
154
+ this.props.onBlur(name);
238
155
  }
239
- }, 0);
240
- }
241
156
 
242
- openPanel(name, panel) {
243
- this.setState({
244
- [`${name}OpenedPanel`]: panel
245
- });
246
- }
157
+ this.timeout = setTimeout(() => {
158
+ if (!['from', 'to'].includes(this.state.focusedInput)) {
159
+ this.setState({
160
+ openedPanel: 'calendar'
161
+ });
162
+ }
163
+ }, 100);
164
+ };
247
165
 
248
- renderCaption(name, propsCaption) {
249
- return React.createElement(Caption, _extends({
250
- onMonthClick: this[`handleMonthClick${capitalize(name)}`],
251
- onYearClick: this[`handleYearClick${capitalize(name)}`]
252
- }, propsCaption));
253
- }
166
+ this.handleReset = name => {
167
+ this.handleChange(name, undefined);
168
+ this.setState({
169
+ keyFrom: this.state.keyFrom === 1 ? 2 : 1,
170
+ keyTo: this.state.keyTo === 1 ? 2 : 1
171
+ });
172
+ };
254
173
 
255
- renderCaptionFrom(propsCaption) {
256
- return this.renderCaption('from', propsCaption);
257
- }
174
+ this.openPanel = panel => {
175
+ this.setState({
176
+ openedPanel: panel
177
+ });
178
+ };
258
179
 
259
- renderCaptionTo(propsCaption) {
260
- return this.renderCaption('to', propsCaption);
261
- }
180
+ this.renderCaption = propsCaption => {
181
+ return React.createElement(Caption, _extends({
182
+ onMonthClick: () => this.openPanel('months'),
183
+ onYearClick: () => this.openPanel('years')
184
+ }, propsCaption));
185
+ };
262
186
 
263
- renderNavBar(name, propsNavBar) {
264
- return React.createElement(NavBar, _extends({
265
- showClockButton: this.props.enableTime,
266
- onClockClick: this[`handleClockClick${capitalize(name)}`]
267
- }, propsNavBar));
268
- }
187
+ this.renderNavBar = propsNavBar => {
188
+ return React.createElement(NavBar, _extends({
189
+ showClockButton: this.props.enableTime,
190
+ onClockClick: () => this.openPanel('time')
191
+ }, propsNavBar));
192
+ };
269
193
 
270
- renderNavBarFrom(propsNavBar) {
271
- return this.renderNavBar('from', propsNavBar);
272
- }
194
+ this.renderOverlay = (name, propsOverlay, staticPosition) => {
195
+ const rangeOverlayProps = _objectSpread({}, propsOverlay, {
196
+ side: name,
197
+ staticPosition
198
+ });
273
199
 
274
- renderNavBarTo(propsNavBar) {
275
- return this.renderNavBar('to', propsNavBar);
276
- }
200
+ switch (this.state['openedPanel']) {
201
+ case 'time':
202
+ return this.renderTimePickerOverlay(name, rangeOverlayProps);
277
203
 
278
- renderOverlay(name, propsOverlay, staticPosition) {
279
- const rangeOverlayProps = _objectSpread({}, propsOverlay, {
280
- side: name,
281
- staticPosition
282
- });
204
+ case 'months':
205
+ return this.renderMonthPickerOverlay(name, rangeOverlayProps);
283
206
 
284
- switch (this.state[`${name}OpenedPanel`]) {
285
- case 'time':
286
- return this.renderTimePickerOverlay(name, rangeOverlayProps);
207
+ case 'years':
208
+ return this.renderYearPickerOverlay(name, rangeOverlayProps);
287
209
 
288
- case 'months':
289
- return this.renderMonthPickerOverlay(name, rangeOverlayProps);
210
+ case 'calendar':
211
+ return React.createElement(Overlay, rangeOverlayProps);
212
+ }
213
+ };
290
214
 
291
- case 'years':
292
- return this.renderYearPickerOverlay(name, rangeOverlayProps);
215
+ this.renderOverlayFrom = propsOverlay => {
216
+ return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
217
+ };
293
218
 
294
- case 'calendar':
295
- default:
296
- return React.createElement(Overlay, rangeOverlayProps);
297
- }
298
- }
219
+ this.renderOverlayTo = propsOverlay => {
220
+ return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
221
+ };
299
222
 
300
- renderOverlayFrom(propsOverlay) {
301
- return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
302
- }
223
+ this.renderMonthPickerOverlay = (name, propsOverlay) => {
224
+ const monthPickerProps = {
225
+ value: this.state['currentMonth'],
226
+ onChange: this.handleCurrentMonthChange
227
+ };
228
+ return React.createElement(MonthPickerOverlay, _extends({
229
+ key: `${name}-month-picker-overlay`
230
+ }, monthPickerProps, propsOverlay));
231
+ };
303
232
 
304
- renderOverlayTo(propsOverlay) {
305
- return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
306
- }
233
+ this.renderTimePickerOverlay = (name, propsOverlay) => {
234
+ const timePickerProps = {
235
+ value: this.props[name],
236
+ onChange: (date, precision) => this.handleTimeChange(name, date, precision),
237
+ onCalendarClick: () => this.openPanel('calendar')
238
+ };
239
+ return React.createElement(TimePickerOverlay, _extends({
240
+ key: `${name}-time-picker-overlay`
241
+ }, timePickerProps, propsOverlay));
242
+ };
307
243
 
308
- renderMonthPickerOverlay(name, propsOverlay) {
309
- const monthPickerProps = {
310
- value: this.state[`${name}CurrentMonth`],
311
- onChange: this[`handleCurrentMonthChange${capitalize(name)}`]
244
+ this.renderYearPickerOverlay = (name, propsOverlay) => {
245
+ const yearPickerProps = {
246
+ value: this.state['currentMonth'],
247
+ onChange: this.handleCurrentMonthChange,
248
+ disabledFutureDays: this.props.disableFutureDays
249
+ };
250
+ return React.createElement(YearPickerOverlay, _extends({
251
+ key: `${name}-year-picker-overlay`
252
+ }, yearPickerProps, propsOverlay));
312
253
  };
313
- return React.createElement(MonthPickerOverlay, _extends({
314
- key: `${name}-month-picker-overlay`
315
- }, monthPickerProps, propsOverlay));
316
- }
317
254
 
318
- renderTimePickerOverlay(name, propsOverlay) {
319
- const timePickerProps = {
320
- value: this.props[name],
321
- onChange: (date, precision) => this.handleTimeChange(name, date, precision),
322
- onCalendarClick: this[`handleCalendarClick${capitalize(name)}`]
255
+ this.state = {
256
+ currentMonth: new Date(),
257
+ focusedInput: '',
258
+ openedPanel: 'calendar',
259
+ keyFrom: 1,
260
+ keyTo: 1
323
261
  };
324
- return React.createElement(TimePickerOverlay, _extends({
325
- key: `${name}-time-picker-overlay`
326
- }, timePickerProps, propsOverlay));
327
262
  }
328
263
 
329
- renderYearPickerOverlay(name, propsOverlay) {
330
- const yearPickerProps = {
331
- value: this.state[`${name}CurrentMonth`],
332
- onChange: this[`handleCurrentMonthChange${capitalize(name)}`],
333
- disabledFutureDays: this.props.disableFutureDays,
334
- disabledPastDays: this.props.disablePastDays
335
- };
336
- return React.createElement(YearPickerOverlay, _extends({
337
- key: `${name}-year-picker-overlay`
338
- }, yearPickerProps, propsOverlay));
264
+ componentWillUnmount() {
265
+ clearTimeout(this.timeout);
339
266
  }
340
267
 
341
268
  render() {
342
269
  const _this$props = this.props,
343
270
  {
344
271
  classes,
272
+ disabled,
345
273
  disabledDays,
346
- disablePastDays,
347
274
  disableFutureDays,
348
275
  enableTime,
349
276
  labelFrom,
@@ -351,19 +278,21 @@ class HiDateRangePicker extends React.Component {
351
278
  locale,
352
279
  format,
353
280
  from,
281
+ fromError,
354
282
  minimumDate,
355
283
  onReset,
356
284
  to,
285
+ toError,
357
286
  translations,
358
287
  id,
359
- staticPosition
288
+ staticPosition,
289
+ errorText,
290
+ hasSelector,
291
+ helperIcon,
292
+ helperText
360
293
  } = _this$props,
361
- props = _objectWithoutProperties(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "minimumDate", "onReset", "to", "translations", "id", "staticPosition"]);
294
+ props = _objectWithoutProperties(_this$props, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
362
295
 
363
- const {
364
- fromCurrentMonth,
365
- toCurrentMonth
366
- } = this.state;
367
296
  const now = new Date();
368
297
  const modifiers = {
369
298
  start: from,
@@ -408,96 +337,76 @@ class HiDateRangePicker extends React.Component {
408
337
  selectedDays,
409
338
  todayButton: translations.today,
410
339
  weekdayElement: Weekday
411
- }, props); // Build Props for the From DatePicker
412
- // Disable days after 'to' date if define
413
-
414
-
415
- let after;
416
-
417
- if (to instanceof Date && disableFutureDays) {
418
- after = to < now ? now : to;
419
- } else if (to instanceof Date) {
420
- after = to;
421
- } else if (disableFutureDays) {
422
- after = now;
423
- }
424
-
425
- const disabledDaysFrom = _objectSpread({}, disablePastDays && {
426
- before: now
427
- }, (to || disableFutureDays) && {
428
- after
429
- }, disabledDays);
340
+ }, props);
430
341
 
431
342
  const fromDayPickerProps = _objectSpread({}, dayPickerProps, {
432
- onTodayButtonClick: this.handleCurrentMonthChangeFrom,
433
- NavBarElement: this.renderNavBarFrom,
434
- captionElement: this.renderCaptionFrom,
435
- disabledDays: disabledDaysFrom,
436
- month: fromCurrentMonth,
437
- modifiers: _objectSpread({}, modifiers, {
438
- disabled: disabledDaysFrom
439
- })
440
- }); // Build Props for the To DatePicker
441
- // Disable days before 'from' date if define
442
-
443
-
444
- let before;
445
-
446
- if (from instanceof Date && disablePastDays) {
447
- before = from < now ? now : from;
448
- } else if (from instanceof Date) {
449
- before = from;
450
- } else if (disablePastDays) {
451
- before = now;
452
- }
453
-
454
- const disabledDaysTo = _objectSpread({}, (from || disablePastDays) && {
455
- before
456
- }, disableFutureDays && {
457
- after: now
458
- }, disabledDays);
343
+ onTodayButtonClick: this.handleCurrentMonthChange,
344
+ navbarElement: this.renderNavBar,
345
+ captionElement: this.renderCaption,
346
+ disabledDays: _objectSpread({
347
+ before: minimumDate
348
+ }, disableFutureDays && {
349
+ after: now
350
+ }, to && {
351
+ after: to
352
+ }),
353
+ month: this.state.currentMonth,
354
+ modifiers: _objectSpread({}, modifiers)
355
+ });
459
356
 
460
357
  const toDayPickerProps = _objectSpread({}, dayPickerProps, {
461
- onTodayButtonClick: this.handleCurrentMonthChangeTo,
462
- NavBarElement: this.renderNavBarTo,
463
- captionElement: this.renderCaptionTo,
464
- disabledDays: disabledDaysTo,
465
- month: toCurrentMonth,
466
- modifiers: _objectSpread({}, modifiers, {
467
- disabled: disabledDaysTo
468
- })
358
+ onTodayButtonClick: this.handleCurrentMonthChange,
359
+ navbarElement: this.renderNavBar,
360
+ onDayClick: this.onDayToClick,
361
+ captionElement: this.renderCaption,
362
+ disabledDays: _objectSpread({
363
+ before: minimumDate
364
+ }, disableFutureDays && {
365
+ after: now
366
+ }, from && {
367
+ before: from
368
+ }),
369
+ month: this.state.currentMonth,
370
+ modifiers: _objectSpread({}, modifiers)
469
371
  }); // From & To InputProps
470
372
 
471
373
 
472
374
  const fromInputProps = _objectSpread({}, onReset && {
473
375
  onReset: () => this.handleReset('from')
474
- }, props, labelFrom && {
376
+ }, props, fromError && {
377
+ error: true
378
+ }, labelFrom && {
475
379
  label: labelFrom
476
380
  }, {
477
381
  id: `${id}-from`,
478
- onChange: this.handleInputChange('from')
382
+ onChange: this.handleInputChange('from'),
383
+ disabled: disabled
479
384
  });
480
385
 
481
386
  const toInputProps = _objectSpread({}, onReset && {
482
387
  onReset: () => this.handleReset('to')
483
- }, props, labelTo && {
388
+ }, props, toError && {
389
+ error: true
390
+ }, labelTo && {
484
391
  label: labelTo
485
392
  }, {
486
393
  id: `${id}-to`,
487
- onChange: this.handleInputChange('to')
394
+ onChange: this.handleInputChange('to'),
395
+ disabled: disabled
488
396
  });
489
397
 
490
398
  const toClass = classNames(classes.toInput, {
491
399
  [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from',
492
400
  [classes.right4]: staticPosition === true && this.state.focusedInput === 'from'
493
401
  });
494
- return React.createElement("div", {
402
+ let content = React.createElement("div", {
495
403
  className: classNames(classes.root, classes.rangePickerContainer)
496
404
  }, React.createElement("div", {
497
405
  className: classes.fromInput,
498
- onFocus: this.handleDayPickerFocus('from'),
499
- onBlur: this.handleDayPickerBlur('from')
406
+ onFocus: () => this.handleDayPickerFocus('from') // onBlur={() => this.handleDayPickerBlur('from')}
407
+
500
408
  }, React.createElement("div", null, React.createElement(DayPickerInput, {
409
+ key: this.state.keyFrom,
501
410
  ref: el => {
502
411
  this.fromInput = el;
503
412
  },
@@ -510,13 +419,14 @@ class HiDateRangePicker extends React.Component {
510
419
  format: enableTime ? `${format} HH:mm` : format,
511
420
  formatDate: MomentLocaleUtils.formatDate,
512
421
  parseDate: MomentLocaleUtils.parseDate,
513
- onDayChange: this.handleDayChangeFrom,
422
+ onDayChange: day => this.handleDayChange('from', day),
514
423
  placeholder: ''
515
424
  }))), React.createElement("div", {
516
425
  className: toClass,
517
- onFocus: this.handleDayPickerFocus('to'),
518
- onBlur: this.handleDayPickerBlur('to')
426
+ onFocus: () => this.handleDayPickerFocus('to'),
427
+ onBlur: () => this.handleDayPickerBlur('to')
519
428
  }, React.createElement(DayPickerInput, {
429
+ key: this.state.keyTo,
520
430
  ref: el => {
521
431
  this.toInput = el;
522
432
  },
@@ -528,32 +438,49 @@ class HiDateRangePicker extends React.Component {
528
438
  inputProps: toInputProps,
529
439
  format: enableTime ? `${format} HH:mm` : format,
530
440
  formatDate: MomentLocaleUtils.formatDate,
531
- parseDate: MomentLocaleUtils.parseDate,
532
- onDayChange: this.handleDayChangeTo,
441
+ parseDate: MomentLocaleUtils.parseDate //onDayChange={(day) => this.handleDayChange('to', day)}
442
+ ,
533
443
  placeholder: ''
534
444
  })));
445
+
446
+ if (!hasSelector) {
447
+ content = React.createElement(HiFormControl, {
448
+ disabled: disabled,
449
+ helperIcon: helperIcon,
450
+ helperText: helperText,
451
+ errorText: errorText,
452
+ error: fromError || toError,
453
+ label: ' '
454
+ }, content);
455
+ }
456
+
457
+ return content;
535
458
  }
536
459
 
537
460
  }
538
461
 
539
462
  HiDateRangePicker.defaultProps = {
540
463
  disabledDays: [],
541
- disablePastDays: false,
542
- disableFutureDays: false,
464
+ disableFutureDays: true,
543
465
  staticPosition: false,
544
466
  enableTime: false,
545
- format: 'YYYY-DD-MM',
467
+ hasSelector: false,
468
+ format: 'YYYY-MM-DD',
546
469
  labelFrom: 'Start',
547
470
  labelTo: 'End',
548
471
  locale: 'fr-FR',
549
- minimumDate: new Date(2013, 4, 1),
550
- // by default 1 May 2013
551
472
  translations: {
552
473
  today: 'today',
553
474
  hour: 'Hour',
554
475
  minute: 'Minute',
555
476
  month: 'Month',
556
- year: 'Year'
477
+ year: 'Year',
478
+ invalid_format: 'The date format is not valid',
479
+ to_superior_from: 'Date from cannot be greater than date to',
480
+ missing_date_from: 'Missing date from',
481
+ missing_date_to: 'Missing date to',
482
+ date_superior_max_date: 'Date from cannot be greater than %s',
483
+ date_inferior_min_date: 'Date from cannot be before than %s'
557
484
  }
558
485
  };
559
486
  HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -567,25 +494,20 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
567
494
  */
568
495
  disabled: PropTypes.bool,
569
496
 
570
- /**
571
- * Définie les jours non sélectionnables
572
- */
573
- disabledDays: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.instanceOf(Date)]),
574
-
575
497
  /**
576
498
  * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
577
499
  */
578
500
  disableFutureDays: PropTypes.bool,
579
501
 
580
502
  /**
581
- * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
503
+ * Ajoute la gestion de l'heure
582
504
  */
583
- disablePastDays: PropTypes.bool,
505
+ enableTime: PropTypes.bool,
584
506
 
585
507
  /**
586
- * Ajoute la gestion de l'heure
508
+ * Texte de l'erreur
587
509
  */
588
- enableTime: PropTypes.bool,
510
+ errorText: PropTypes.string,
589
511
 
590
512
  /**
591
513
  * Format des dates affichées
@@ -595,7 +517,29 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
595
517
  /**
596
518
  * Date de début sélectionnée
597
519
  */
598
- from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
520
+ from: PropTypes.instanceOf(Date),
521
+ //from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
522
+
523
+ /**
524
+ * Erreur sur date from
525
+ */
526
+ fromError: PropTypes.bool,
527
+
528
+ /**
529
+ * @ignore
530
+ * Si true, on n'enveloppe pas le composant avec un HiFormControl
531
+ */
532
+ hasSelector: PropTypes.bool,
533
+
534
+ /**
535
+ * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
536
+ */
537
+ helperIcon: PropTypes.bool,
538
+
539
+ /**
540
+ * Texte de l'aide
541
+ */
542
+ helperText: PropTypes.string,
599
543
 
600
544
  /**
601
545
  * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
@@ -620,7 +564,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
620
564
  /**
621
565
  * Date minimale sélectionnable
622
566
  */
623
- minimumDate: PropTypes.instanceOf(Date),
567
+ minimumDate: PropTypes.instanceOf(Date).isRequired,
624
568
 
625
569
  /**
626
570
  * Callback à la sélection d'une date
@@ -633,7 +577,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
633
577
  * @param {string} nom du champs
634
578
  * @param {string} nouvelle valeur du champs
635
579
  */
636
- onChange: PropTypes.func,
580
+ onChange: PropTypes.func.isRequired,
637
581
 
638
582
  /**
639
583
  * Callback au reset de l'input
@@ -649,7 +593,12 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
649
593
  /**
650
594
  * Date de fin sélectionnée
651
595
  */
652
- to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
596
+ to: PropTypes.instanceOf(Date),
597
+
598
+ /**
599
+ * Erreur sur date to
600
+ */
601
+ toError: PropTypes.bool,
653
602
 
654
603
  /**
655
604
  * Traductions