@elliemae/ds-date-picker 2.2.0-next.4 → 2.3.0-alpha.2
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/cjs/DSDatePicker.js +219 -221
- package/cjs/DSDatePicker.js.map +7 -0
- package/cjs/components/DSDatePickerImpl.js +128 -208
- package/cjs/components/DSDatePickerImpl.js.map +7 -0
- package/cjs/components/DatePickerController/DatePickerController.js +204 -242
- package/cjs/components/DatePickerController/DatePickerController.js.map +7 -0
- package/cjs/components/DatePickerDay/DatePickerDay.js +48 -23
- package/cjs/components/DatePickerDay/DatePickerDay.js.map +7 -0
- package/cjs/components/DatePickerDropdown.js +74 -54
- package/cjs/components/DatePickerDropdown.js.map +7 -0
- package/cjs/components/DatePickerHeader/DatePickerHeader.js +62 -44
- package/cjs/components/DatePickerHeader/DatePickerHeader.js.map +7 -0
- package/cjs/components/DatePickerNavigation/DatePickerNavigation.js +62 -31
- package/cjs/components/DatePickerNavigation/DatePickerNavigation.js.map +7 -0
- package/cjs/components/DatePickerPicker/DatePickerPicker.js +82 -71
- package/cjs/components/DatePickerPicker/DatePickerPicker.js.map +7 -0
- package/cjs/components/DatePickerRange/DatePickerRange.js +84 -93
- package/cjs/components/DatePickerRange/DatePickerRange.js.map +7 -0
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +91 -97
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +7 -0
- package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js +60 -45
- package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +7 -0
- package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js +88 -77
- package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js.map +7 -0
- package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +69 -48
- package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +7 -0
- package/cjs/components/index.js +53 -27
- package/cjs/components/index.js.map +7 -0
- package/cjs/defaultPhrases.js +77 -92
- package/cjs/defaultPhrases.js.map +7 -0
- package/cjs/index.js +38 -35
- package/cjs/index.js.map +7 -0
- package/esm/DSDatePicker.js +171 -169
- package/esm/DSDatePicker.js.map +7 -0
- package/esm/components/DSDatePickerImpl.js +88 -189
- package/esm/components/DSDatePickerImpl.js.map +7 -0
- package/esm/components/DatePickerController/DatePickerController.js +141 -198
- package/esm/components/DatePickerController/DatePickerController.js.map +7 -0
- package/esm/components/DatePickerDay/DatePickerDay.js +19 -17
- package/esm/components/DatePickerDay/DatePickerDay.js.map +7 -0
- package/esm/components/DatePickerDropdown.js +45 -46
- package/esm/components/DatePickerDropdown.js.map +7 -0
- package/esm/components/DatePickerHeader/DatePickerHeader.js +31 -35
- package/esm/components/DatePickerHeader/DatePickerHeader.js.map +7 -0
- package/esm/components/DatePickerNavigation/DatePickerNavigation.js +36 -24
- package/esm/components/DatePickerNavigation/DatePickerNavigation.js.map +7 -0
- package/esm/components/DatePickerPicker/DatePickerPicker.js +44 -48
- package/esm/components/DatePickerPicker/DatePickerPicker.js.map +7 -0
- package/esm/components/DatePickerRange/DatePickerRange.js +49 -79
- package/esm/components/DatePickerRange/DatePickerRange.js.map +7 -0
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +50 -78
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +7 -0
- package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js +31 -37
- package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +7 -0
- package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js +56 -66
- package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js.map +7 -0
- package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +40 -42
- package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +7 -0
- package/esm/components/index.js +24 -10
- package/esm/components/index.js.map +7 -0
- package/esm/defaultPhrases.js +48 -80
- package/esm/defaultPhrases.js.map +7 -0
- package/esm/index.js +9 -13
- package/esm/index.js.map +7 -0
- package/package.json +10 -10
- package/types/components/DSDatePickerImpl.d.ts +2 -1
- package/types/components/DatePickerController/DatePickerController.d.ts +1 -1
- package/types/components/DatePickerDay/DatePickerDay.d.ts +1 -0
- package/types/components/DatePickerDropdown.d.ts +1 -0
- package/types/components/DatePickerHeader/DatePickerHeader.d.ts +1 -0
- package/types/components/DatePickerNavigation/DatePickerNavigation.d.ts +4 -3
- package/types/components/DatePickerPicker/DatePickerPicker.d.ts +2 -1
- package/types/components/DatePickerRange/DatePickerRange.d.ts +1 -0
- package/types/components/DatePickerRangeHeader/DatePickerRangeHeader.d.ts +1 -0
- package/types/components/DatePickerSingleDate/DatePickerSingleDate.d.ts +1 -0
- package/types/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.d.ts +1 -0
|
@@ -1,105 +1,61 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const FORMAT = 'MMDDYYYY';
|
|
10
|
-
class DSdatePickerImpl extends React.Component {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import moment from "moment";
|
|
4
|
+
import { DSInputGroup, DSDateInputV2 } from "@elliemae/ds-form";
|
|
5
|
+
import { DSDatePickerController } from "./DatePickerController/DatePickerController";
|
|
6
|
+
import { DatePickerDropdown } from "./DatePickerDropdown";
|
|
7
|
+
const FORMAT = "MMDDYYYY";
|
|
8
|
+
class DSDatePickerImpl extends React2.Component {
|
|
11
9
|
constructor(props) {
|
|
12
10
|
super(props);
|
|
13
|
-
|
|
14
11
|
this.onClickPicker = () => {
|
|
15
|
-
this.setState({
|
|
16
|
-
inputFocused: true
|
|
17
|
-
});
|
|
12
|
+
this.setState({ inputFocused: true });
|
|
18
13
|
};
|
|
19
|
-
|
|
20
14
|
this.getSafeValue = () => {
|
|
21
|
-
const {
|
|
22
|
-
|
|
23
|
-
date,
|
|
24
|
-
defaultValue
|
|
25
|
-
} = this.props;
|
|
26
|
-
const {
|
|
27
|
-
selectedDate
|
|
28
|
-
} = this.state;
|
|
29
|
-
|
|
15
|
+
const { value, date, defaultValue } = this.props;
|
|
16
|
+
const { selectedDate } = this.state;
|
|
30
17
|
if (value) {
|
|
31
18
|
return moment(value, FORMAT, true);
|
|
32
19
|
}
|
|
33
|
-
|
|
34
20
|
if (date) {
|
|
35
21
|
return moment(date, FORMAT, true);
|
|
36
22
|
}
|
|
37
|
-
|
|
38
23
|
if (defaultValue) {
|
|
39
24
|
return moment(defaultValue, FORMAT, true);
|
|
40
25
|
}
|
|
41
|
-
|
|
42
26
|
if (selectedDate) {
|
|
43
27
|
return selectedDate;
|
|
44
28
|
}
|
|
45
|
-
|
|
46
29
|
return null;
|
|
47
30
|
};
|
|
48
|
-
|
|
49
31
|
this.getSafeInputValue = () => {
|
|
50
32
|
const safeValue = this.getSafeValue();
|
|
51
|
-
|
|
52
33
|
if (safeValue && safeValue.isValid()) {
|
|
53
34
|
return safeValue.format(FORMAT);
|
|
54
35
|
}
|
|
55
|
-
|
|
56
|
-
const {
|
|
57
|
-
dataInput
|
|
58
|
-
} = this.state;
|
|
36
|
+
const { dataInput } = this.state;
|
|
59
37
|
return dataInput;
|
|
60
38
|
};
|
|
61
|
-
|
|
62
39
|
this.isControlled = () => {
|
|
63
|
-
const {
|
|
64
|
-
value,
|
|
65
|
-
date
|
|
66
|
-
} = this.props;
|
|
40
|
+
const { value, date } = this.props;
|
|
67
41
|
return Boolean(value) || Boolean(date);
|
|
68
42
|
};
|
|
69
|
-
|
|
70
43
|
this.handleDateChange = (date, event) => {
|
|
71
|
-
const {
|
|
72
|
-
readOnly,
|
|
73
|
-
onDateChange,
|
|
74
|
-
keepOpenOnDateSelect,
|
|
75
|
-
onChange,
|
|
76
|
-
onBlur
|
|
77
|
-
} = this.props;
|
|
78
|
-
|
|
44
|
+
const { readOnly, onDateChange, keepOpenOnDateSelect, onChange, onBlur } = this.props;
|
|
79
45
|
if (!readOnly) {
|
|
80
46
|
if (!this.isControlled()) {
|
|
81
|
-
this.setState({
|
|
82
|
-
dataInput: date.format(FORMAT),
|
|
83
|
-
selectedDate: date
|
|
84
|
-
});
|
|
47
|
+
this.setState({ dataInput: date.format(FORMAT), selectedDate: date });
|
|
85
48
|
}
|
|
86
|
-
|
|
87
49
|
onChange(date.format(FORMAT), date);
|
|
88
50
|
onDateChange(date);
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
this.setState({
|
|
92
|
-
inputFocused: false
|
|
93
|
-
});
|
|
51
|
+
if (!keepOpenOnDateSelect || event.key === "Enter") {
|
|
52
|
+
this.setState({ inputFocused: false });
|
|
94
53
|
onBlur(date.format(FORMAT), date);
|
|
95
54
|
}
|
|
96
55
|
}
|
|
97
56
|
};
|
|
98
|
-
|
|
99
57
|
this.handleInputChange = (dataInput, newDate) => {
|
|
100
|
-
const {
|
|
101
|
-
onChange
|
|
102
|
-
} = this.props;
|
|
58
|
+
const { onChange } = this.props;
|
|
103
59
|
const newState = {
|
|
104
60
|
dataInput,
|
|
105
61
|
selectedDate: newDate
|
|
@@ -107,117 +63,71 @@ class DSdatePickerImpl extends React.Component {
|
|
|
107
63
|
this.setState(() => newState);
|
|
108
64
|
onChange(dataInput, newDate);
|
|
109
65
|
};
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const {
|
|
114
|
-
onDateChange
|
|
115
|
-
} = this.props;
|
|
66
|
+
this.handleChange = (newDate) => {
|
|
67
|
+
if (!newDate)
|
|
68
|
+
return;
|
|
69
|
+
const { onDateChange } = this.props;
|
|
116
70
|
const momentValue = moment(newDate, FORMAT, true);
|
|
117
|
-
if (!momentValue.isValid())
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
});
|
|
71
|
+
if (!momentValue.isValid())
|
|
72
|
+
return;
|
|
73
|
+
this.setState({ selectedDate: momentValue });
|
|
121
74
|
onDateChange(momentValue);
|
|
122
75
|
};
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
let {
|
|
126
|
-
focused
|
|
127
|
-
} = _ref;
|
|
128
|
-
this.setState({
|
|
129
|
-
inputFocused: focused
|
|
130
|
-
});
|
|
76
|
+
this.handleFocus = ({ focused }) => {
|
|
77
|
+
this.setState({ inputFocused: focused });
|
|
131
78
|
};
|
|
132
|
-
|
|
133
79
|
this.handleCalendarClose = () => {
|
|
134
|
-
const {
|
|
135
|
-
|
|
136
|
-
} = this.props;
|
|
137
|
-
this.setState({
|
|
138
|
-
inputFocused: false
|
|
139
|
-
});
|
|
80
|
+
const { onClose } = this.props;
|
|
81
|
+
this.setState({ inputFocused: false });
|
|
140
82
|
this.handleOnBlur();
|
|
141
83
|
onClose();
|
|
142
84
|
};
|
|
143
|
-
|
|
144
85
|
this.handleClickEscape = () => {
|
|
145
|
-
const {
|
|
146
|
-
|
|
147
|
-
} = this.props;
|
|
148
|
-
this.setState({
|
|
149
|
-
inputFocused: false
|
|
150
|
-
});
|
|
86
|
+
const { onClose } = this.props;
|
|
87
|
+
this.setState({ inputFocused: false });
|
|
151
88
|
this.handleOnBlur();
|
|
152
89
|
onClose();
|
|
153
90
|
};
|
|
154
|
-
|
|
155
91
|
this.handleOnBlur = () => {
|
|
156
92
|
setTimeout(() => {
|
|
157
|
-
const {
|
|
158
|
-
|
|
159
|
-
autoClear
|
|
160
|
-
} = this.props;
|
|
161
|
-
const {
|
|
162
|
-
dataInput,
|
|
163
|
-
selectedDate
|
|
164
|
-
} = this.state;
|
|
165
|
-
|
|
93
|
+
const { onBlur, autoClear } = this.props;
|
|
94
|
+
const { dataInput, selectedDate } = this.state;
|
|
166
95
|
if (moment(selectedDate, FORMAT, true).isValid()) {
|
|
167
96
|
onBlur(dataInput, selectedDate);
|
|
168
97
|
} else {
|
|
169
98
|
if (autoClear) {
|
|
170
|
-
this.setState({
|
|
171
|
-
dataInput: undefined
|
|
172
|
-
});
|
|
99
|
+
this.setState({ dataInput: void 0 });
|
|
173
100
|
}
|
|
174
|
-
|
|
175
101
|
onBlur(dataInput, null);
|
|
176
102
|
}
|
|
177
103
|
});
|
|
178
104
|
};
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
const {
|
|
182
|
-
onFocus
|
|
183
|
-
} = this.props;
|
|
105
|
+
this.handleInputFocus = (dataInput) => {
|
|
106
|
+
const { onFocus } = this.props;
|
|
184
107
|
onFocus(dataInput);
|
|
185
108
|
};
|
|
186
|
-
|
|
187
109
|
this.state = {
|
|
188
|
-
pickerRef:
|
|
189
|
-
dataInput:
|
|
110
|
+
pickerRef: React2.createRef(),
|
|
111
|
+
dataInput: "",
|
|
190
112
|
selectedDate: null,
|
|
191
113
|
inputFocused: false
|
|
192
114
|
};
|
|
193
115
|
}
|
|
194
|
-
|
|
195
116
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
196
|
-
const {
|
|
197
|
-
|
|
198
|
-
selectedDate: prevDate
|
|
199
|
-
} = prevState || {};
|
|
200
|
-
const {
|
|
201
|
-
value: nextVal,
|
|
202
|
-
date: nextDate
|
|
203
|
-
} = nextProps;
|
|
117
|
+
const { dataInput: prevVal, selectedDate: prevDate } = prevState || {};
|
|
118
|
+
const { value: nextVal, date: nextDate } = nextProps;
|
|
204
119
|
const isPrevValMoment = prevVal instanceof moment;
|
|
205
120
|
const isPrevDateMoment = prevDate instanceof moment;
|
|
206
|
-
const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal;
|
|
207
|
-
|
|
121
|
+
const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal;
|
|
208
122
|
if (nextVal == null && nextDate == null) {
|
|
209
123
|
return {
|
|
210
|
-
dataInput:
|
|
124
|
+
dataInput: "",
|
|
211
125
|
selectedDate: null
|
|
212
126
|
};
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
if ((prevValAsString === null || prevValAsString === void 0 ? void 0 : prevValAsString.length) < 8) {
|
|
127
|
+
}
|
|
128
|
+
if (prevValAsString?.length < 8) {
|
|
218
129
|
return null;
|
|
219
130
|
}
|
|
220
|
-
|
|
221
131
|
const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
|
|
222
132
|
const isNextValMoment = nextVal instanceof moment;
|
|
223
133
|
const isNextDateMoment = nextDate instanceof moment;
|
|
@@ -228,31 +138,23 @@ class DSdatePickerImpl extends React.Component {
|
|
|
228
138
|
const hasValChanged = nextValAsString !== prevValAsString;
|
|
229
139
|
const hasDateChanged = nextDateAsString !== prevDateAsString;
|
|
230
140
|
const newState = {};
|
|
231
|
-
let skipStateChange = true;
|
|
232
|
-
// as such, order of condition is meaningful
|
|
233
|
-
|
|
141
|
+
let skipStateChange = true;
|
|
234
142
|
if (hasDateChanged) {
|
|
235
143
|
skipStateChange = false;
|
|
236
144
|
newState.dataInput = nextDateAsString;
|
|
237
145
|
newState.selectedDate = nextDateAsMoment;
|
|
238
146
|
}
|
|
239
|
-
|
|
240
147
|
if (hasValChanged) {
|
|
241
148
|
skipStateChange = false;
|
|
242
149
|
newState.dataInput = nextValAsString;
|
|
243
150
|
newState.selectedDate = nextValAsMoment;
|
|
244
151
|
}
|
|
245
|
-
|
|
246
|
-
|
|
152
|
+
if (skipStateChange)
|
|
153
|
+
return null;
|
|
247
154
|
return newState;
|
|
248
155
|
}
|
|
249
|
-
|
|
250
156
|
render() {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
const {
|
|
254
|
-
inputFocused
|
|
255
|
-
} = this.state;
|
|
157
|
+
const { inputFocused } = this.state;
|
|
256
158
|
const {
|
|
257
159
|
disabled,
|
|
258
160
|
numberOfMonths,
|
|
@@ -280,67 +182,64 @@ class DSdatePickerImpl extends React.Component {
|
|
|
280
182
|
const safedate = this.getSafeValue();
|
|
281
183
|
const safeInputValue = this.getSafeInputValue();
|
|
282
184
|
const hasSelectedDate = !!safedate;
|
|
283
|
-
return
|
|
284
|
-
rightAddon:
|
|
185
|
+
return /* @__PURE__ */ React2.createElement(DSInputGroup, {
|
|
186
|
+
rightAddon: /* @__PURE__ */ React2.createElement(DatePickerDropdown, {
|
|
285
187
|
pickerRef: this.state.pickerRef,
|
|
286
|
-
disabled
|
|
188
|
+
disabled,
|
|
287
189
|
isOpen: inputFocused,
|
|
288
|
-
menu:
|
|
289
|
-
style: {
|
|
290
|
-
|
|
291
|
-
zIndex: 1
|
|
292
|
-
},
|
|
293
|
-
className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
|
|
190
|
+
menu: /* @__PURE__ */ React2.createElement("div", {
|
|
191
|
+
style: { minHeight: "310px", zIndex: 1 },
|
|
192
|
+
className: hasSelectedDate ? "has-selected-date" : "without-selected-date",
|
|
294
193
|
"data-testid": "date-picker-portal-wrapper"
|
|
295
|
-
},
|
|
194
|
+
}, /* @__PURE__ */ React2.createElement(DSDatePickerController, {
|
|
296
195
|
date: safedate,
|
|
297
|
-
displayFormatDay
|
|
298
|
-
enableOutsideDays
|
|
299
|
-
firstDayOfWeek
|
|
300
|
-
hideKeyboardShortcutsPanel
|
|
301
|
-
isDayBlocked
|
|
302
|
-
isDayHighlighted
|
|
303
|
-
isOutsideRange
|
|
304
|
-
keepOpenOnDateSelect
|
|
305
|
-
numberOfMonths
|
|
196
|
+
displayFormatDay,
|
|
197
|
+
enableOutsideDays,
|
|
198
|
+
firstDayOfWeek,
|
|
199
|
+
hideKeyboardShortcutsPanel,
|
|
200
|
+
isDayBlocked,
|
|
201
|
+
isDayHighlighted,
|
|
202
|
+
isOutsideRange,
|
|
203
|
+
keepOpenOnDateSelect,
|
|
204
|
+
numberOfMonths,
|
|
306
205
|
onClickEscape: this.handleClickEscape,
|
|
307
|
-
onClose:
|
|
308
|
-
if (
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
inputFocused: false
|
|
313
|
-
});
|
|
206
|
+
onClose: (...args) => {
|
|
207
|
+
if (this.state.pickerRef.current)
|
|
208
|
+
this.state.pickerRef.current.focus();
|
|
209
|
+
onClose(...args);
|
|
210
|
+
this.setState({ inputFocused: false });
|
|
314
211
|
},
|
|
315
212
|
onDateChange: this.handleDateChange,
|
|
316
213
|
onFocusChange: this.handleFocus,
|
|
317
|
-
onNextMonthClick
|
|
214
|
+
onNextMonthClick,
|
|
318
215
|
onOutsideClick: this.handleCalendarClose,
|
|
319
|
-
onPrevMonthClick
|
|
320
|
-
phrases
|
|
321
|
-
transitionDuration
|
|
322
|
-
calendarProps
|
|
323
|
-
focusCurrentDate
|
|
216
|
+
onPrevMonthClick,
|
|
217
|
+
phrases,
|
|
218
|
+
transitionDuration,
|
|
219
|
+
calendarProps,
|
|
220
|
+
focusCurrentDate
|
|
324
221
|
})),
|
|
325
222
|
onClick: this.onClickPicker,
|
|
326
|
-
readOnly
|
|
327
|
-
zIndex
|
|
328
|
-
pickerProps
|
|
223
|
+
readOnly,
|
|
224
|
+
zIndex,
|
|
225
|
+
pickerProps
|
|
329
226
|
})
|
|
330
|
-
},
|
|
227
|
+
}, /* @__PURE__ */ React2.createElement(DSDateInputV2, {
|
|
331
228
|
"data-testid": "datepicker-input",
|
|
332
|
-
"aria-label": placeholder ||
|
|
333
|
-
disabled
|
|
229
|
+
"aria-label": placeholder || "Date Picker Input",
|
|
230
|
+
disabled,
|
|
334
231
|
onBlur: this.handleOnBlur,
|
|
335
232
|
onChange: this.handleInputChange,
|
|
336
233
|
onDateChange: this.handleChange,
|
|
337
234
|
onFocus: this.handleInputFocus,
|
|
338
|
-
placeholder
|
|
339
|
-
tabIndex
|
|
235
|
+
placeholder,
|
|
236
|
+
tabIndex,
|
|
340
237
|
value: safeInputValue
|
|
341
238
|
}));
|
|
342
239
|
}
|
|
343
|
-
|
|
344
240
|
}
|
|
345
|
-
|
|
346
|
-
|
|
241
|
+
export {
|
|
242
|
+
DSDatePickerImpl,
|
|
243
|
+
DSDatePickerImpl as default
|
|
244
|
+
};
|
|
245
|
+
//# sourceMappingURL=DSDatePickerImpl.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSDatePickerImpl.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable react/state-in-constructor */\n/* eslint-disable no-restricted-globals */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport moment from 'moment';\nimport { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';\nimport { DSDatePickerController } from './DatePickerController/DatePickerController';\nimport { DatePickerDropdown } from './DatePickerDropdown';\n\nconst FORMAT = 'MMDDYYYY';\nexport default class DSDatePickerImpl extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n pickerRef: React.createRef(),\n dataInput: '',\n selectedDate: null,\n inputFocused: false,\n };\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const { dataInput: prevVal, selectedDate: prevDate } = prevState || {};\n const { value: nextVal, date: nextDate } = nextProps;\n\n const isPrevValMoment = prevVal instanceof moment;\n const isPrevDateMoment = prevDate instanceof moment;\n const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal;\n\n // if users wants to clear, we use '==' to catch both undefined AND null\n if (nextVal == null && nextDate == null) {\n return {\n dataInput: '',\n selectedDate: null,\n };\n }\n\n // when val is an incomplete state, we don't want to mess with the state\n // it's incomplete when length is not the full mmddyyyy (length === 8)\n if (prevValAsString?.length < 8) {\n return null;\n }\n\n const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;\n\n const isNextValMoment = nextVal instanceof moment;\n const isNextDateMoment = nextDate instanceof moment;\n const nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;\n const nextValAsMoment = isNextValMoment ? nextVal : moment(nextVal);\n const nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;\n const nextDateAsMoment = isNextDateMoment ? nextDate : moment(nextDate);\n\n const hasValChanged = nextValAsString !== prevValAsString;\n const hasDateChanged = nextDateAsString !== prevDateAsString;\n\n const newState = {};\n let skipStateChange = true;\n\n // value has priority over date, if both date and value change we take date\n // as such, order of condition is meaningful\n if (hasDateChanged) {\n skipStateChange = false;\n newState.dataInput = nextDateAsString;\n newState.selectedDate = nextDateAsMoment;\n }\n\n if (hasValChanged) {\n skipStateChange = false;\n newState.dataInput = nextValAsString;\n newState.selectedDate = nextValAsMoment;\n }\n\n if (skipStateChange) return null;\n return newState;\n }\n\n onClickPicker = () => {\n this.setState({ inputFocused: true });\n };\n\n getSafeValue = () => {\n const { value, date, defaultValue } = this.props;\n const { selectedDate } = this.state;\n if (value) {\n return moment(value, FORMAT, true);\n }\n if (date) {\n return moment(date, FORMAT, true);\n }\n if (defaultValue) {\n return moment(defaultValue, FORMAT, true);\n }\n if (selectedDate) {\n return selectedDate;\n }\n return null;\n };\n\n getSafeInputValue = () => {\n const safeValue = this.getSafeValue();\n if (safeValue && safeValue.isValid()) {\n return safeValue.format(FORMAT);\n }\n const { dataInput } = this.state;\n return dataInput;\n };\n\n isControlled = () => {\n const { value, date } = this.props;\n return Boolean(value) || Boolean(date);\n };\n\n handleDateChange = (date, event) => {\n const { readOnly, onDateChange, keepOpenOnDateSelect, onChange, onBlur } = this.props;\n\n if (!readOnly) {\n if (!this.isControlled()) {\n this.setState({ dataInput: date.format(FORMAT), selectedDate: date });\n }\n onChange(date.format(FORMAT), date);\n onDateChange(date);\n if (!keepOpenOnDateSelect || event.key === 'Enter') {\n this.setState({ inputFocused: false });\n onBlur(date.format(FORMAT), date);\n }\n }\n };\n\n handleInputChange = (dataInput, newDate) => {\n const { onChange } = this.props;\n const newState = {\n dataInput,\n selectedDate: newDate,\n };\n this.setState(() => newState);\n onChange(dataInput, newDate);\n };\n\n handleChange = (newDate) => {\n if (!newDate) return;\n const { onDateChange } = this.props;\n const momentValue = moment(newDate, FORMAT, true);\n if (!momentValue.isValid()) return;\n this.setState({ selectedDate: momentValue });\n\n onDateChange(momentValue);\n };\n\n handleFocus = ({ focused }) => {\n this.setState({ inputFocused: focused });\n };\n\n handleCalendarClose = () => {\n const { onClose } = this.props;\n\n this.setState({ inputFocused: false });\n this.handleOnBlur();\n onClose();\n };\n\n handleClickEscape = () => {\n const { onClose } = this.props;\n\n this.setState({ inputFocused: false });\n this.handleOnBlur();\n onClose();\n };\n\n handleOnBlur = () => {\n setTimeout(() => {\n const { onBlur, autoClear } = this.props;\n const { dataInput, selectedDate } = this.state;\n\n if (moment(selectedDate, FORMAT, true).isValid()) {\n onBlur(dataInput, selectedDate);\n } else {\n if (autoClear) {\n this.setState({ dataInput: undefined });\n }\n onBlur(dataInput, null);\n }\n });\n };\n\n handleInputFocus = (dataInput) => {\n const { onFocus } = this.props;\n onFocus(dataInput);\n };\n\n render() {\n const { inputFocused } = this.state;\n const {\n disabled,\n numberOfMonths,\n readOnly,\n enableOutsideDays,\n transitionDuration,\n firstDayOfWeek,\n keepOpenOnDateSelect,\n hideKeyboardShortcutsPanel,\n onPrevMonthClick,\n onNextMonthClick,\n onClose,\n phrases,\n placeholder,\n displayFormatDay,\n isDayBlocked,\n isOutsideRange,\n isDayHighlighted,\n tabIndex,\n zIndex,\n pickerProps,\n calendarProps,\n focusCurrentDate,\n } = this.props;\n const safedate = this.getSafeValue();\n const safeInputValue = this.getSafeInputValue();\n const hasSelectedDate = !!safedate;\n return (\n <DSInputGroup\n rightAddon={\n <DatePickerDropdown\n pickerRef={this.state.pickerRef}\n disabled={disabled}\n isOpen={inputFocused}\n menu={\n <div\n style={{ minHeight: '310px', zIndex: 1 }}\n className={hasSelectedDate ? 'has-selected-date' : 'without-selected-date'}\n data-testid=\"date-picker-portal-wrapper\"\n >\n <DSDatePickerController\n date={safedate}\n displayFormatDay={displayFormatDay}\n enableOutsideDays={enableOutsideDays}\n firstDayOfWeek={firstDayOfWeek}\n hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}\n isDayBlocked={isDayBlocked}\n isDayHighlighted={isDayHighlighted}\n isOutsideRange={isOutsideRange}\n keepOpenOnDateSelect={keepOpenOnDateSelect}\n numberOfMonths={numberOfMonths}\n onClickEscape={this.handleClickEscape}\n onClose={(...args) => {\n if (this.state.pickerRef.current) this.state.pickerRef.current.focus();\n onClose(...args);\n this.setState({ inputFocused: false });\n }}\n onDateChange={this.handleDateChange}\n onFocusChange={this.handleFocus}\n onNextMonthClick={onNextMonthClick}\n onOutsideClick={this.handleCalendarClose}\n onPrevMonthClick={onPrevMonthClick}\n phrases={phrases}\n transitionDuration={transitionDuration}\n calendarProps={calendarProps}\n focusCurrentDate={focusCurrentDate}\n />\n </div>\n }\n onClick={this.onClickPicker}\n readOnly={readOnly}\n zIndex={zIndex}\n pickerProps={pickerProps}\n />\n }\n >\n <DSDateInputV2\n data-testid=\"datepicker-input\"\n aria-label={placeholder || 'Date Picker Input'}\n disabled={disabled}\n onBlur={this.handleOnBlur}\n onChange={this.handleInputChange}\n onDateChange={this.handleChange}\n onFocus={this.handleInputFocus}\n placeholder={placeholder}\n tabIndex={tabIndex}\n value={safeInputValue}\n />\n </DSInputGroup>\n );\n }\n}\n\nexport { DSDatePickerImpl };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|