@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,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.
|
26
|
-
|
27
|
-
|
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.
|
31
|
-
this.
|
32
|
-
focusedInput: name
|
33
|
-
});
|
54
|
+
this.handleInputChange = inputName => event => {
|
55
|
+
this.handleChange(inputName, event.target.value);
|
34
56
|
};
|
35
57
|
|
36
|
-
this.
|
37
|
-
this.
|
38
|
-
focusedInput: ''
|
39
|
-
});
|
58
|
+
this.onDayToClick = day => {
|
59
|
+
let change = moment(day) >= moment(this.props.from);
|
40
60
|
|
41
|
-
if (this.props.
|
42
|
-
|
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.
|
47
|
-
|
48
|
-
|
49
|
-
|
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
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
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
|
-
}
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
componentWillUnmount() {
|
101
|
-
clearTimeout(this.timeout);
|
102
|
-
}
|
109
|
+
}
|
103
110
|
|
104
|
-
|
105
|
-
|
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
|
-
|
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
|
-
|
131
|
-
|
132
|
-
|
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
|
-
|
126
|
+
date.setHours(23, 59);
|
137
127
|
}
|
138
128
|
}
|
139
|
-
|
140
|
-
this.props.onChange(name, day);
|
141
129
|
}
|
142
130
|
|
143
|
-
|
144
|
-
|
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
|
-
|
217
|
-
|
218
|
-
|
135
|
+
this.handleCurrentMonthChange = day => {
|
136
|
+
this.setState({
|
137
|
+
currentMonth: day,
|
138
|
+
openedPanel: 'calendar'
|
139
|
+
});
|
140
|
+
};
|
219
141
|
|
220
|
-
|
221
|
-
|
142
|
+
this.handleDayPickerFocus = name => {
|
143
|
+
this.setState({
|
144
|
+
focusedInput: name
|
145
|
+
});
|
146
|
+
};
|
222
147
|
|
223
|
-
|
224
|
-
this.
|
225
|
-
|
226
|
-
|
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
|
-
|
234
|
-
|
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
|
-
|
243
|
-
|
244
|
-
|
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
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
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
|
-
|
256
|
-
|
257
|
-
|
174
|
+
this.openPanel = panel => {
|
175
|
+
this.setState({
|
176
|
+
openedPanel: panel
|
177
|
+
});
|
178
|
+
};
|
258
179
|
|
259
|
-
|
260
|
-
|
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
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
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
|
-
|
271
|
-
|
272
|
-
|
194
|
+
this.renderOverlay = (name, propsOverlay, staticPosition) => {
|
195
|
+
const rangeOverlayProps = _objectSpread({}, propsOverlay, {
|
196
|
+
side: name,
|
197
|
+
staticPosition
|
198
|
+
});
|
273
199
|
|
274
|
-
|
275
|
-
|
276
|
-
|
200
|
+
switch (this.state['openedPanel']) {
|
201
|
+
case 'time':
|
202
|
+
return this.renderTimePickerOverlay(name, rangeOverlayProps);
|
277
203
|
|
278
|
-
|
279
|
-
|
280
|
-
side: name,
|
281
|
-
staticPosition
|
282
|
-
});
|
204
|
+
case 'months':
|
205
|
+
return this.renderMonthPickerOverlay(name, rangeOverlayProps);
|
283
206
|
|
284
|
-
|
285
|
-
|
286
|
-
return this.renderTimePickerOverlay(name, rangeOverlayProps);
|
207
|
+
case 'years':
|
208
|
+
return this.renderYearPickerOverlay(name, rangeOverlayProps);
|
287
209
|
|
288
|
-
|
289
|
-
|
210
|
+
case 'calendar':
|
211
|
+
return React.createElement(Overlay, rangeOverlayProps);
|
212
|
+
}
|
213
|
+
};
|
290
214
|
|
291
|
-
|
292
|
-
|
215
|
+
this.renderOverlayFrom = propsOverlay => {
|
216
|
+
return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
|
217
|
+
};
|
293
218
|
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
}
|
298
|
-
}
|
219
|
+
this.renderOverlayTo = propsOverlay => {
|
220
|
+
return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
|
221
|
+
};
|
299
222
|
|
300
|
-
|
301
|
-
|
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
|
-
|
305
|
-
|
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
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
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
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
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
|
-
|
330
|
-
|
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", "
|
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);
|
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.
|
433
|
-
|
434
|
-
captionElement: this.
|
435
|
-
disabledDays:
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
}
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
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.
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
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,
|
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,
|
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
|
-
|
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
|
-
|
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.
|
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
|
-
|
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
|
-
|
542
|
-
disableFutureDays: false,
|
464
|
+
disableFutureDays: true,
|
543
465
|
staticPosition: false,
|
544
466
|
enableTime: false,
|
545
|
-
|
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
|
-
*
|
503
|
+
* Ajoute la gestion de l'heure
|
582
504
|
*/
|
583
|
-
|
505
|
+
enableTime: PropTypes.bool,
|
584
506
|
|
585
507
|
/**
|
586
|
-
*
|
508
|
+
* Texte de l'erreur
|
587
509
|
*/
|
588
|
-
|
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.
|
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.
|
596
|
+
to: PropTypes.instanceOf(Date),
|
597
|
+
|
598
|
+
/**
|
599
|
+
* Erreur sur date to
|
600
|
+
*/
|
601
|
+
toError: PropTypes.bool,
|
653
602
|
|
654
603
|
/**
|
655
604
|
* Traductions
|