@hipay/hipay-material-ui 2.0.0-beta.52 → 2.0.0-beta.54

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