@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.
- package/HiCell/CellSentinel.js +33 -109
- package/HiCell/CellSentinelScore.js +100 -0
- package/HiChip/HiChip.js +11 -4
- package/HiColoredLabel/HiColoredLabel.js +14 -4
- package/HiDatePicker/HiDatePicker.js +1 -1
- package/HiDatePicker/HiDateRangePicker.js +339 -420
- package/HiDatePicker/HiDateRangeSelector.js +81 -61
- 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/HiPin/HiPin.js +1 -1
- package/HiSelectNew/HiSelect.js +4 -1
- package/HiSelectableList/HiSelectableListItem.js +9 -1
- package/HiSwitch/HiSwitch.js +2 -1
- package/HiTable/HiCellBuilder.js +14 -7
- package/HiTable/constants.js +7 -5
- package/es/HiCell/CellSentinel.js +32 -108
- package/es/HiCell/CellSentinelScore.js +60 -0
- package/es/HiChip/HiChip.js +11 -4
- package/es/HiColoredLabel/HiColoredLabel.js +14 -3
- package/es/HiDatePicker/HiDatePicker.js +1 -1
- package/es/HiDatePicker/HiDateRangePicker.js +304 -364
- package/es/HiDatePicker/HiDateRangeSelector.js +71 -55
- 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/HiPin/HiPin.js +1 -1
- package/es/HiSelectNew/HiSelect.js +4 -1
- package/es/HiSelectableList/HiSelectableListItem.js +9 -1
- package/es/HiSwitch/HiSwitch.js +2 -1
- package/es/HiTable/HiCellBuilder.js +13 -7
- 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 +3 -2
- package/styles/createPalette.js +3 -3
- package/umd/hipay-material-ui.development.js +919 -1136
- 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.
|
26
|
-
|
27
|
-
|
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
|
-
|
31
|
-
|
32
|
-
|
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.
|
37
|
-
this.
|
38
|
-
|
39
|
-
});
|
54
|
+
this.handleInputChange = inputName => event => {
|
55
|
+
this.handleChange(inputName, event.target.value);
|
56
|
+
};
|
40
57
|
|
41
|
-
|
42
|
-
|
43
|
-
|
58
|
+
this.onDayToClick = day => {
|
59
|
+
this.handleDayChange('to', day);
|
60
|
+
document.activeElement.blur();
|
44
61
|
};
|
45
62
|
|
46
|
-
this.
|
47
|
-
|
48
|
-
|
49
|
-
|
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
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
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
|
-
}
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
componentWillUnmount() {
|
101
|
-
clearTimeout(this.timeout);
|
102
|
-
}
|
100
|
+
}
|
103
101
|
|
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
|
-
}
|
102
|
+
if (date) {
|
103
|
+
let comparativeDate = name === 'to' ? moment(this.props.from) : moment(this.props.to);
|
118
104
|
|
119
|
-
|
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
|
-
|
131
|
-
|
132
|
-
|
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
|
-
|
117
|
+
date.setHours(23, 59);
|
137
118
|
}
|
138
119
|
}
|
139
|
-
|
140
|
-
this.props.onChange(name, day);
|
141
120
|
}
|
142
121
|
|
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
|
-
}
|
122
|
+
this.props.onChange(name, date);
|
123
|
+
this.props.onChange(`${name}Error`, error);
|
124
|
+
};
|
215
125
|
|
216
|
-
|
217
|
-
|
218
|
-
|
126
|
+
this.handleCurrentMonthChange = day => {
|
127
|
+
this.setState({
|
128
|
+
currentMonth: day,
|
129
|
+
openedPanel: 'calendar'
|
130
|
+
});
|
131
|
+
};
|
219
132
|
|
220
|
-
|
221
|
-
|
133
|
+
this.handleDayPickerFocus = name => {
|
134
|
+
this.setState({
|
135
|
+
focusedInput: name
|
136
|
+
});
|
137
|
+
};
|
222
138
|
|
223
|
-
|
224
|
-
this.
|
225
|
-
|
226
|
-
|
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
|
-
|
234
|
-
|
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
|
-
|
243
|
-
|
244
|
-
|
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
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
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
|
-
|
256
|
-
|
257
|
-
|
165
|
+
this.openPanel = panel => {
|
166
|
+
this.setState({
|
167
|
+
openedPanel: panel
|
168
|
+
});
|
169
|
+
};
|
258
170
|
|
259
|
-
|
260
|
-
|
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
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
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
|
-
|
271
|
-
|
272
|
-
|
185
|
+
this.renderOverlay = (name, propsOverlay, staticPosition) => {
|
186
|
+
const rangeOverlayProps = _objectSpread({}, propsOverlay, {
|
187
|
+
side: name,
|
188
|
+
staticPosition
|
189
|
+
});
|
273
190
|
|
274
|
-
|
275
|
-
|
276
|
-
|
191
|
+
switch (this.state['openedPanel']) {
|
192
|
+
case 'time':
|
193
|
+
return this.renderTimePickerOverlay(name, rangeOverlayProps);
|
277
194
|
|
278
|
-
|
279
|
-
|
280
|
-
side: name,
|
281
|
-
staticPosition
|
282
|
-
});
|
195
|
+
case 'months':
|
196
|
+
return this.renderMonthPickerOverlay(name, rangeOverlayProps);
|
283
197
|
|
284
|
-
|
285
|
-
|
286
|
-
return this.renderTimePickerOverlay(name, rangeOverlayProps);
|
198
|
+
case 'years':
|
199
|
+
return this.renderYearPickerOverlay(name, rangeOverlayProps);
|
287
200
|
|
288
|
-
|
289
|
-
|
201
|
+
case 'calendar':
|
202
|
+
return React.createElement(Overlay, rangeOverlayProps);
|
203
|
+
}
|
204
|
+
};
|
290
205
|
|
291
|
-
|
292
|
-
|
206
|
+
this.renderOverlayFrom = propsOverlay => {
|
207
|
+
return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
|
208
|
+
};
|
293
209
|
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
}
|
298
|
-
}
|
210
|
+
this.renderOverlayTo = propsOverlay => {
|
211
|
+
return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
|
212
|
+
};
|
299
213
|
|
300
|
-
|
301
|
-
|
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
|
-
|
305
|
-
|
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
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
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
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
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
|
-
|
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));
|
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", "
|
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);
|
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.
|
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);
|
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.
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
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,
|
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,
|
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
|
-
|
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
|
-
|
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.
|
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
|
-
|
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
|
-
|
542
|
-
disableFutureDays: false,
|
455
|
+
disableFutureDays: true,
|
543
456
|
staticPosition: false,
|
544
457
|
enableTime: false,
|
545
|
-
|
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
|
-
*
|
494
|
+
* Ajoute la gestion de l'heure
|
582
495
|
*/
|
583
|
-
|
496
|
+
enableTime: PropTypes.bool,
|
584
497
|
|
585
498
|
/**
|
586
|
-
*
|
499
|
+
* Texte de l'erreur
|
587
500
|
*/
|
588
|
-
|
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.
|
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.
|
587
|
+
to: PropTypes.instanceOf(Date),
|
588
|
+
|
589
|
+
/**
|
590
|
+
* Erreur sur date to
|
591
|
+
*/
|
592
|
+
toError: PropTypes.bool,
|
653
593
|
|
654
594
|
/**
|
655
595
|
* Traductions
|