tp-react-elements-dev 1.12.35 → 1.14.0

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 (59) hide show
  1. package/dist/_virtual/_commonjsHelpers.esm.js +30 -0
  2. package/dist/_virtual/defaultRanges.esm.js +3 -0
  3. package/dist/_virtual/index.esm.esm.js +6 -0
  4. package/dist/_virtual/index.esm.js +5 -0
  5. package/dist/_virtual/index.esm10.js +3 -0
  6. package/dist/_virtual/index.esm11.js +3 -0
  7. package/dist/_virtual/index.esm12.js +3 -0
  8. package/dist/_virtual/index.esm13.js +3 -0
  9. package/dist/_virtual/index.esm14.js +3 -0
  10. package/dist/_virtual/index.esm2.js +3 -0
  11. package/dist/_virtual/index.esm3.js +3 -0
  12. package/dist/_virtual/index.esm4.js +3 -0
  13. package/dist/_virtual/index.esm5.js +3 -0
  14. package/dist/_virtual/index.esm6.js +3 -0
  15. package/dist/_virtual/index.esm7.js +3 -0
  16. package/dist/_virtual/index.esm8.js +3 -0
  17. package/dist/_virtual/index.esm9.js +3 -0
  18. package/dist/_virtual/react-is.development.esm.js +3 -0
  19. package/dist/_virtual/react-is.production.min.esm.js +3 -0
  20. package/dist/_virtual/react-list.esm.js +3 -0
  21. package/dist/_virtual/styles.esm.js +3 -0
  22. package/dist/_virtual/utils.esm.js +3 -0
  23. package/dist/components/DateRangePicker/DateRangePicker.d.ts +6 -0
  24. package/dist/components/DateRangePicker/DateRangePicker.esm.js +83 -0
  25. package/dist/components/DateRangePicker/index.d.ts +2 -0
  26. package/dist/components/DateRangePicker/index.esm.js +5 -0
  27. package/dist/components/Form/FormConstants.esm.js +1 -0
  28. package/dist/components/Form/FormRender.esm.js +4 -0
  29. package/dist/components/Form/FormRenderWrapper.esm.js +1 -1
  30. package/dist/components/FormComponents/FormTextFieldWithSelect/FormTextFieldWithSelect.esm.js +11 -15
  31. package/dist/index.esm.css +1 -1
  32. package/dist/node_modules/classnames/index.esm.js +85 -0
  33. package/dist/node_modules/object-assign/index.esm.js +99 -0
  34. package/dist/node_modules/prop-types/checkPropTypes.esm.js +115 -0
  35. package/dist/node_modules/prop-types/factoryWithThrowingShims.esm.js +74 -0
  36. package/dist/node_modules/prop-types/factoryWithTypeCheckers.esm.js +625 -0
  37. package/dist/node_modules/prop-types/index.esm.js +33 -0
  38. package/dist/node_modules/prop-types/lib/ReactPropTypesSecret.esm.js +21 -0
  39. package/dist/node_modules/prop-types/lib/has.esm.js +11 -0
  40. package/dist/node_modules/prop-types/node_modules/react-is/cjs/react-is.development.esm.js +190 -0
  41. package/dist/node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.esm.js +26 -0
  42. package/dist/node_modules/prop-types/node_modules/react-is/index.esm.js +19 -0
  43. package/dist/node_modules/react-date-range/dist/accessibility/index.esm.js +29 -0
  44. package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js +644 -0
  45. package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js +153 -0
  46. package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js +212 -0
  47. package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js +72 -0
  48. package/dist/node_modules/react-date-range/dist/components/DayCell/index.esm.js +252 -0
  49. package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js +166 -0
  50. package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js +91 -0
  51. package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js +146 -0
  52. package/dist/node_modules/react-date-range/dist/defaultRanges.esm.js +111 -0
  53. package/dist/node_modules/react-date-range/dist/index.esm.js +70 -0
  54. package/dist/node_modules/react-date-range/dist/styles.esm.js +69 -0
  55. package/dist/node_modules/react-date-range/dist/utils.esm.js +93 -0
  56. package/dist/node_modules/react-list/react-list.esm.js +647 -0
  57. package/dist/node_modules/shallow-equal/dist/index.esm.esm.js +53 -0
  58. package/dist/utils/Interface/FormInterface.d.ts +2 -1
  59. package/package.json +5 -11
@@ -0,0 +1,644 @@
1
+ import { __exports as Calendar } from '../../../../../_virtual/index.esm3.js';
2
+ import React__default from 'react';
3
+ import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
+ import { __require as requireDayCell } from '../DayCell/index.esm.js';
5
+ import { __require as requireMonth } from '../Month/index.esm.js';
6
+ import { __require as requireDateInput } from '../DateInput/index.esm.js';
7
+ import { __require as requireUtils } from '../../utils.esm.js';
8
+ import { __require as requireClassnames } from '../../../../classnames/index.esm.js';
9
+ import { __require as requireReactList } from '../../../../react-list/react-list.esm.js';
10
+ import require$$8 from '../../../../../_virtual/index.esm.esm.js';
11
+ import require$$3 from 'date-fns';
12
+ import require$$10 from 'date-fns/locale/en-US';
13
+ import { __require as requireStyles } from '../../styles.esm.js';
14
+ import { __require as requireAccessibility } from '../../accessibility/index.esm.js';
15
+
16
+ var hasRequiredCalendar;
17
+
18
+ function requireCalendar () {
19
+ if (hasRequiredCalendar) return Calendar;
20
+ hasRequiredCalendar = 1;
21
+
22
+ Object.defineProperty(Calendar, "__esModule", {
23
+ value: true
24
+ });
25
+ Calendar.default = void 0;
26
+ var _react = _interopRequireWildcard(React__default);
27
+ var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
28
+ var _DayCell = requireDayCell();
29
+ var _Month = _interopRequireDefault(requireMonth());
30
+ var _DateInput = _interopRequireDefault(requireDateInput());
31
+ var _utils = requireUtils();
32
+ var _classnames = _interopRequireDefault(requireClassnames());
33
+ var _reactList = _interopRequireDefault(requireReactList());
34
+ var _shallowEqual = require$$8;
35
+ var _dateFns = require$$3;
36
+ var _enUS = require$$10;
37
+ var _styles = _interopRequireDefault(requireStyles());
38
+ var _accessibility = requireAccessibility();
39
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
40
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
41
+ function _interopRequireWildcard(e, r) { if (e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
42
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
43
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
44
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
45
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
46
+ let Calendar$1 = class Calendar extends _react.PureComponent {
47
+ constructor(_props, context) {
48
+ var _this;
49
+ super(_props, context);
50
+ _this = this;
51
+ _defineProperty(this, "focusToDate", function (date) {
52
+ let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props;
53
+ let preventUnnecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
54
+ if (!props.scroll.enabled) {
55
+ if (preventUnnecessary && props.preventSnapRefocus) {
56
+ const focusedDateDiff = (0, _dateFns.differenceInCalendarMonths)(date, _this.state.focusedDate);
57
+ const isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0;
58
+ const isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0;
59
+ if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) {
60
+ return;
61
+ }
62
+ }
63
+ _this.setState({
64
+ focusedDate: date
65
+ });
66
+ return;
67
+ }
68
+ const targetMonthIndex = (0, _dateFns.differenceInCalendarMonths)(date, props.minDate, _this.dateOptions);
69
+ const visibleMonths = _this.list.getVisibleRange();
70
+ if (preventUnnecessary && visibleMonths.includes(targetMonthIndex)) return;
71
+ _this.isFirstRender = true;
72
+ _this.list.scrollTo(targetMonthIndex);
73
+ _this.setState({
74
+ focusedDate: date
75
+ });
76
+ });
77
+ _defineProperty(this, "updateShownDate", function () {
78
+ let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
79
+ const newProps = props.scroll.enabled ? {
80
+ ...props,
81
+ months: _this.list.getVisibleRange().length
82
+ } : props;
83
+ const newFocus = (0, _utils.calcFocusDate)(_this.state.focusedDate, newProps);
84
+ _this.focusToDate(newFocus, newProps);
85
+ });
86
+ _defineProperty(this, "updatePreview", val => {
87
+ if (!val) {
88
+ this.setState({
89
+ preview: null
90
+ });
91
+ return;
92
+ }
93
+ const preview = {
94
+ startDate: val,
95
+ endDate: val,
96
+ color: this.props.color
97
+ };
98
+ this.setState({
99
+ preview
100
+ });
101
+ });
102
+ _defineProperty(this, "changeShownDate", function (value) {
103
+ let mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set';
104
+ const {
105
+ focusedDate
106
+ } = _this.state;
107
+ const {
108
+ onShownDateChange,
109
+ minDate,
110
+ maxDate
111
+ } = _this.props;
112
+ const modeMapper = {
113
+ monthOffset: () => (0, _dateFns.addMonths)(focusedDate, value),
114
+ setMonth: () => (0, _dateFns.setMonth)(focusedDate, value),
115
+ setYear: () => (0, _dateFns.setYear)(focusedDate, value),
116
+ set: () => value
117
+ };
118
+ const newDate = (0, _dateFns.min)([(0, _dateFns.max)([modeMapper[mode](), minDate]), maxDate]);
119
+ _this.focusToDate(newDate, _this.props, false);
120
+ onShownDateChange && onShownDateChange(newDate);
121
+ });
122
+ _defineProperty(this, "handleRangeFocusChange", (rangesIndex, rangeItemIndex) => {
123
+ this.props.onRangeFocusChange && this.props.onRangeFocusChange([rangesIndex, rangeItemIndex]);
124
+ });
125
+ _defineProperty(this, "handleScroll", () => {
126
+ const {
127
+ onShownDateChange,
128
+ minDate
129
+ } = this.props;
130
+ const {
131
+ focusedDate
132
+ } = this.state;
133
+ const {
134
+ isFirstRender
135
+ } = this;
136
+ const visibleMonths = this.list.getVisibleRange();
137
+ // prevent scroll jump with wrong visible value
138
+ if (visibleMonths[0] === undefined) return;
139
+ const visibleMonth = (0, _dateFns.addMonths)(minDate, visibleMonths[0] || 0);
140
+ const isFocusedToDifferent = !(0, _dateFns.isSameMonth)(visibleMonth, focusedDate);
141
+ if (isFocusedToDifferent && !isFirstRender) {
142
+ this.setState({
143
+ focusedDate: visibleMonth
144
+ });
145
+ onShownDateChange && onShownDateChange(visibleMonth);
146
+ }
147
+ this.isFirstRender = false;
148
+ });
149
+ _defineProperty(this, "renderMonthAndYear", (focusedDate, changeShownDate, props) => {
150
+ const {
151
+ showMonthArrow,
152
+ minDate,
153
+ maxDate,
154
+ showMonthAndYearPickers,
155
+ ariaLabels
156
+ } = props;
157
+ const upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear();
158
+ const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
159
+ const styles = this.styles;
160
+ return /*#__PURE__*/_react.default.createElement("div", {
161
+ onMouseUp: e => e.stopPropagation(),
162
+ className: styles.monthAndYearWrapper
163
+ }, showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", {
164
+ type: "button",
165
+ className: (0, _classnames.default)(styles.nextPrevButton, styles.prevButton),
166
+ onClick: () => changeShownDate(-1, 'monthOffset'),
167
+ "aria-label": ariaLabels.prevButton
168
+ }, /*#__PURE__*/_react.default.createElement("i", null)) : null, showMonthAndYearPickers ? /*#__PURE__*/_react.default.createElement("span", {
169
+ className: styles.monthAndYearPickers
170
+ }, /*#__PURE__*/_react.default.createElement("span", {
171
+ className: styles.monthPicker
172
+ }, /*#__PURE__*/_react.default.createElement("select", {
173
+ value: focusedDate.getMonth(),
174
+ onChange: e => changeShownDate(e.target.value, 'setMonth'),
175
+ "aria-label": ariaLabels.monthPicker
176
+ }, this.state.monthNames.map((monthName, i) => /*#__PURE__*/_react.default.createElement("option", {
177
+ key: i,
178
+ value: i
179
+ }, monthName)))), /*#__PURE__*/_react.default.createElement("span", {
180
+ className: styles.monthAndYearDivider
181
+ }), /*#__PURE__*/_react.default.createElement("span", {
182
+ className: styles.yearPicker
183
+ }, /*#__PURE__*/_react.default.createElement("select", {
184
+ value: focusedDate.getFullYear(),
185
+ onChange: e => changeShownDate(e.target.value, 'setYear'),
186
+ "aria-label": ariaLabels.yearPicker
187
+ }, new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map((val, i) => {
188
+ const year = val - i;
189
+ return /*#__PURE__*/_react.default.createElement("option", {
190
+ key: year,
191
+ value: year
192
+ }, year);
193
+ })))) : /*#__PURE__*/_react.default.createElement("span", {
194
+ className: styles.monthAndYearPickers
195
+ }, this.state.monthNames[focusedDate.getMonth()], " ", focusedDate.getFullYear()), showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", {
196
+ type: "button",
197
+ className: (0, _classnames.default)(styles.nextPrevButton, styles.nextButton),
198
+ onClick: () => changeShownDate(1, 'monthOffset'),
199
+ "aria-label": ariaLabels.nextButton
200
+ }, /*#__PURE__*/_react.default.createElement("i", null)) : null);
201
+ });
202
+ _defineProperty(this, "renderDateDisplay", () => {
203
+ const {
204
+ focusedRange,
205
+ color,
206
+ ranges,
207
+ rangeColors,
208
+ dateDisplayFormat,
209
+ editableDateInputs,
210
+ startDatePlaceholder,
211
+ endDatePlaceholder,
212
+ ariaLabels
213
+ } = this.props;
214
+ const defaultColor = rangeColors[focusedRange[0]] || color;
215
+ const styles = this.styles;
216
+ return /*#__PURE__*/_react.default.createElement("div", {
217
+ className: styles.dateDisplayWrapper
218
+ }, ranges.map((range, i) => {
219
+ if (range.showDateDisplay === false || range.disabled && !range.showDateDisplay) return null;
220
+ return /*#__PURE__*/_react.default.createElement("div", {
221
+ className: styles.dateDisplay,
222
+ key: i,
223
+ style: {
224
+ color: range.color || defaultColor
225
+ }
226
+ }, /*#__PURE__*/_react.default.createElement(_DateInput.default, {
227
+ className: (0, _classnames.default)(styles.dateDisplayItem, {
228
+ [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 0
229
+ }),
230
+ readOnly: !editableDateInputs,
231
+ disabled: range.disabled,
232
+ value: range.startDate,
233
+ placeholder: startDatePlaceholder,
234
+ dateOptions: this.dateOptions,
235
+ dateDisplayFormat: dateDisplayFormat,
236
+ ariaLabel: ariaLabels.dateInput && ariaLabels.dateInput[range.key] && ariaLabels.dateInput[range.key].startDate,
237
+ onChange: this.onDragSelectionEnd,
238
+ onFocus: () => this.handleRangeFocusChange(i, 0)
239
+ }), /*#__PURE__*/_react.default.createElement(_DateInput.default, {
240
+ className: (0, _classnames.default)(styles.dateDisplayItem, {
241
+ [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 1
242
+ }),
243
+ readOnly: !editableDateInputs,
244
+ disabled: range.disabled,
245
+ value: range.endDate,
246
+ placeholder: endDatePlaceholder,
247
+ dateOptions: this.dateOptions,
248
+ dateDisplayFormat: dateDisplayFormat,
249
+ ariaLabel: ariaLabels.dateInput && ariaLabels.dateInput[range.key] && ariaLabels.dateInput[range.key].endDate,
250
+ onChange: this.onDragSelectionEnd,
251
+ onFocus: () => this.handleRangeFocusChange(i, 1)
252
+ }));
253
+ }));
254
+ });
255
+ _defineProperty(this, "onDragSelectionStart", date => {
256
+ const {
257
+ onChange,
258
+ dragSelectionEnabled
259
+ } = this.props;
260
+ if (dragSelectionEnabled) {
261
+ this.setState({
262
+ drag: {
263
+ status: true,
264
+ range: {
265
+ startDate: date,
266
+ endDate: date
267
+ },
268
+ disablePreview: true
269
+ }
270
+ });
271
+ } else {
272
+ onChange && onChange(date);
273
+ }
274
+ });
275
+ _defineProperty(this, "onDragSelectionEnd", date => {
276
+ const {
277
+ updateRange,
278
+ displayMode,
279
+ onChange,
280
+ dragSelectionEnabled
281
+ } = this.props;
282
+ if (!dragSelectionEnabled) return;
283
+ if (displayMode === 'date' || !this.state.drag.status) {
284
+ onChange && onChange(date);
285
+ return;
286
+ }
287
+ const newRange = {
288
+ startDate: this.state.drag.range.startDate,
289
+ endDate: date
290
+ };
291
+ if (displayMode !== 'dateRange' || (0, _dateFns.isSameDay)(newRange.startDate, date)) {
292
+ this.setState({
293
+ drag: {
294
+ status: false,
295
+ range: {}
296
+ }
297
+ }, () => onChange && onChange(date));
298
+ } else {
299
+ this.setState({
300
+ drag: {
301
+ status: false,
302
+ range: {}
303
+ }
304
+ }, () => {
305
+ updateRange && updateRange(newRange);
306
+ });
307
+ }
308
+ });
309
+ _defineProperty(this, "onDragSelectionMove", date => {
310
+ const {
311
+ drag
312
+ } = this.state;
313
+ if (!drag.status || !this.props.dragSelectionEnabled) return;
314
+ this.setState({
315
+ drag: {
316
+ status: drag.status,
317
+ range: {
318
+ startDate: drag.range.startDate,
319
+ endDate: date
320
+ },
321
+ disablePreview: true
322
+ }
323
+ });
324
+ });
325
+ _defineProperty(this, "estimateMonthSize", (index, cache) => {
326
+ const {
327
+ direction,
328
+ minDate
329
+ } = this.props;
330
+ const {
331
+ scrollArea
332
+ } = this.state;
333
+ if (cache) {
334
+ this.listSizeCache = cache;
335
+ if (cache[index]) return cache[index];
336
+ }
337
+ if (direction === 'horizontal') return scrollArea.monthWidth;
338
+ const monthStep = (0, _dateFns.addMonths)(minDate, index);
339
+ const {
340
+ start,
341
+ end
342
+ } = (0, _utils.getMonthDisplayRange)(monthStep, this.dateOptions);
343
+ const isLongMonth = (0, _dateFns.differenceInDays)(end, start, this.dateOptions) + 1 > 7 * 5;
344
+ return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight;
345
+ });
346
+ this.dateOptions = {
347
+ locale: _props.locale
348
+ };
349
+ if (_props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = _props.weekStartsOn;
350
+ this.styles = (0, _utils.generateStyles)([_styles.default, _props.classNames]);
351
+ this.listSizeCache = {};
352
+ this.isFirstRender = true;
353
+ this.state = {
354
+ monthNames: this.getMonthNames(),
355
+ focusedDate: (0, _utils.calcFocusDate)(null, _props),
356
+ drag: {
357
+ status: false,
358
+ range: {
359
+ startDate: null,
360
+ endDate: null
361
+ },
362
+ disablePreview: false
363
+ },
364
+ scrollArea: this.calcScrollArea(_props)
365
+ };
366
+ }
367
+ getMonthNames() {
368
+ return [...Array(12).keys()].map(i => this.props.locale.localize.month(i));
369
+ }
370
+ calcScrollArea(props) {
371
+ const {
372
+ direction,
373
+ months,
374
+ scroll
375
+ } = props;
376
+ if (!scroll.enabled) return {
377
+ enabled: false
378
+ };
379
+ const longMonthHeight = scroll.longMonthHeight || scroll.monthHeight;
380
+ if (direction === 'vertical') {
381
+ return {
382
+ enabled: true,
383
+ monthHeight: scroll.monthHeight || 220,
384
+ longMonthHeight: longMonthHeight || 260,
385
+ calendarWidth: 'auto',
386
+ calendarHeight: (scroll.calendarHeight || longMonthHeight || 240) * months
387
+ };
388
+ }
389
+ return {
390
+ enabled: true,
391
+ monthWidth: scroll.monthWidth || 332,
392
+ calendarWidth: (scroll.calendarWidth || scroll.monthWidth || 332) * months,
393
+ monthHeight: longMonthHeight || 300,
394
+ calendarHeight: longMonthHeight || 300
395
+ };
396
+ }
397
+ componentDidMount() {
398
+ if (this.props.scroll.enabled) {
399
+ // prevent react-list's initial render focus problem
400
+ setTimeout(() => this.focusToDate(this.state.focusedDate));
401
+ }
402
+ }
403
+ componentDidUpdate(prevProps) {
404
+ const propMapper = {
405
+ dateRange: 'ranges',
406
+ date: 'date'
407
+ };
408
+ const targetProp = propMapper[this.props.displayMode];
409
+ if (this.props[targetProp] !== prevProps[targetProp]) {
410
+ this.updateShownDate(this.props);
411
+ }
412
+ if (prevProps.locale !== this.props.locale || prevProps.weekStartsOn !== this.props.weekStartsOn) {
413
+ this.dateOptions = {
414
+ locale: this.props.locale
415
+ };
416
+ if (this.props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = this.props.weekStartsOn;
417
+ this.setState({
418
+ monthNames: this.getMonthNames()
419
+ });
420
+ }
421
+ if (!(0, _shallowEqual.shallowEqualObjects)(prevProps.scroll, this.props.scroll)) {
422
+ this.setState({
423
+ scrollArea: this.calcScrollArea(this.props)
424
+ });
425
+ }
426
+ }
427
+ renderWeekdays() {
428
+ const now = new Date();
429
+ return /*#__PURE__*/_react.default.createElement("div", {
430
+ className: this.styles.weekDays
431
+ }, (0, _dateFns.eachDayOfInterval)({
432
+ start: (0, _dateFns.startOfWeek)(now, this.dateOptions),
433
+ end: (0, _dateFns.endOfWeek)(now, this.dateOptions)
434
+ }).map((day, i) => /*#__PURE__*/_react.default.createElement("span", {
435
+ className: this.styles.weekDay,
436
+ key: i
437
+ }, (0, _dateFns.format)(day, this.props.weekdayDisplayFormat, this.dateOptions))));
438
+ }
439
+ render() {
440
+ const {
441
+ showDateDisplay,
442
+ onPreviewChange,
443
+ scroll,
444
+ direction,
445
+ disabledDates,
446
+ disabledDay,
447
+ maxDate,
448
+ minDate,
449
+ rangeColors,
450
+ color,
451
+ navigatorRenderer,
452
+ className,
453
+ preview
454
+ } = this.props;
455
+ const {
456
+ scrollArea,
457
+ focusedDate
458
+ } = this.state;
459
+ const isVertical = direction === 'vertical';
460
+ const monthAndYearRenderer = navigatorRenderer || this.renderMonthAndYear;
461
+ const ranges = this.props.ranges.map((range, i) => ({
462
+ ...range,
463
+ color: range.color || rangeColors[i] || color
464
+ }));
465
+ return /*#__PURE__*/_react.default.createElement("div", {
466
+ className: (0, _classnames.default)(this.styles.calendarWrapper, className),
467
+ onMouseUp: () => this.setState({
468
+ drag: {
469
+ status: false,
470
+ range: {}
471
+ }
472
+ }),
473
+ onMouseLeave: () => {
474
+ this.setState({
475
+ drag: {
476
+ status: false,
477
+ range: {}
478
+ }
479
+ });
480
+ }
481
+ }, showDateDisplay && this.renderDateDisplay(), monthAndYearRenderer(focusedDate, this.changeShownDate, this.props), scroll.enabled ? /*#__PURE__*/_react.default.createElement("div", null, isVertical && this.renderWeekdays(this.dateOptions), /*#__PURE__*/_react.default.createElement("div", {
482
+ className: (0, _classnames.default)(this.styles.infiniteMonths, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal),
483
+ onMouseLeave: () => onPreviewChange && onPreviewChange(),
484
+ style: {
485
+ width: scrollArea.calendarWidth + 11,
486
+ height: scrollArea.calendarHeight + 11
487
+ },
488
+ onScroll: this.handleScroll
489
+ }, /*#__PURE__*/_react.default.createElement(_reactList.default, {
490
+ length: (0, _dateFns.differenceInCalendarMonths)((0, _dateFns.endOfMonth)(maxDate), (0, _dateFns.addDays)((0, _dateFns.startOfMonth)(minDate), -1), this.dateOptions),
491
+ treshold: 500,
492
+ type: "variable",
493
+ ref: target => this.list = target,
494
+ itemSizeEstimator: this.estimateMonthSize,
495
+ axis: isVertical ? 'y' : 'x',
496
+ itemRenderer: (index, key) => {
497
+ const monthStep = (0, _dateFns.addMonths)(minDate, index);
498
+ return /*#__PURE__*/_react.default.createElement(_Month.default, _extends({}, this.props, {
499
+ onPreviewChange: onPreviewChange || this.updatePreview,
500
+ preview: preview || this.state.preview,
501
+ ranges: ranges,
502
+ key: key,
503
+ drag: this.state.drag,
504
+ dateOptions: this.dateOptions,
505
+ disabledDates: disabledDates,
506
+ disabledDay: disabledDay,
507
+ month: monthStep,
508
+ onDragSelectionStart: this.onDragSelectionStart,
509
+ onDragSelectionEnd: this.onDragSelectionEnd,
510
+ onDragSelectionMove: this.onDragSelectionMove,
511
+ onMouseLeave: () => onPreviewChange && onPreviewChange(),
512
+ styles: this.styles,
513
+ style: isVertical ? {
514
+ height: this.estimateMonthSize(index)
515
+ } : {
516
+ height: scrollArea.monthHeight,
517
+ width: this.estimateMonthSize(index)
518
+ },
519
+ showMonthName: true,
520
+ showWeekDays: !isVertical
521
+ }));
522
+ }
523
+ }))) : /*#__PURE__*/_react.default.createElement("div", {
524
+ className: (0, _classnames.default)(this.styles.months, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal)
525
+ }, new Array(this.props.months).fill(null).map((_, i) => {
526
+ let monthStep = (0, _dateFns.addMonths)(this.state.focusedDate, i);
527
+ if (this.props.calendarFocus === 'backwards') {
528
+ monthStep = (0, _dateFns.subMonths)(this.state.focusedDate, this.props.months - 1 - i);
529
+ }
530
+ return /*#__PURE__*/_react.default.createElement(_Month.default, _extends({}, this.props, {
531
+ onPreviewChange: onPreviewChange || this.updatePreview,
532
+ preview: preview || this.state.preview,
533
+ ranges: ranges,
534
+ key: i,
535
+ drag: this.state.drag,
536
+ dateOptions: this.dateOptions,
537
+ disabledDates: disabledDates,
538
+ disabledDay: disabledDay,
539
+ month: monthStep,
540
+ onDragSelectionStart: this.onDragSelectionStart,
541
+ onDragSelectionEnd: this.onDragSelectionEnd,
542
+ onDragSelectionMove: this.onDragSelectionMove,
543
+ onMouseLeave: () => onPreviewChange && onPreviewChange(),
544
+ styles: this.styles,
545
+ showWeekDays: !isVertical || i === 0,
546
+ showMonthName: !isVertical || i > 0
547
+ }));
548
+ })));
549
+ }
550
+ };
551
+ Calendar$1.defaultProps = {
552
+ showMonthArrow: true,
553
+ showMonthAndYearPickers: true,
554
+ disabledDates: [],
555
+ disabledDay: () => {},
556
+ classNames: {},
557
+ locale: _enUS.enUS,
558
+ ranges: [],
559
+ focusedRange: [0, 0],
560
+ dateDisplayFormat: 'MMM d, yyyy',
561
+ monthDisplayFormat: 'MMM yyyy',
562
+ weekdayDisplayFormat: 'E',
563
+ dayDisplayFormat: 'd',
564
+ showDateDisplay: true,
565
+ showPreview: true,
566
+ displayMode: 'date',
567
+ months: 1,
568
+ color: '#3d91ff',
569
+ scroll: {
570
+ enabled: false
571
+ },
572
+ direction: 'vertical',
573
+ maxDate: (0, _dateFns.addYears)(new Date(), 20),
574
+ minDate: (0, _dateFns.addYears)(new Date(), -100),
575
+ rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
576
+ startDatePlaceholder: 'Early',
577
+ endDatePlaceholder: 'Continuous',
578
+ editableDateInputs: false,
579
+ dragSelectionEnabled: true,
580
+ fixedHeight: false,
581
+ calendarFocus: 'forwards',
582
+ preventSnapRefocus: false,
583
+ ariaLabels: {}
584
+ };
585
+ Calendar$1.propTypes = {
586
+ showMonthArrow: _propTypes.default.bool,
587
+ showMonthAndYearPickers: _propTypes.default.bool,
588
+ disabledDates: _propTypes.default.array,
589
+ disabledDay: _propTypes.default.func,
590
+ minDate: _propTypes.default.object,
591
+ maxDate: _propTypes.default.object,
592
+ date: _propTypes.default.object,
593
+ onChange: _propTypes.default.func,
594
+ onPreviewChange: _propTypes.default.func,
595
+ onRangeFocusChange: _propTypes.default.func,
596
+ classNames: _propTypes.default.object,
597
+ locale: _propTypes.default.object,
598
+ shownDate: _propTypes.default.object,
599
+ onShownDateChange: _propTypes.default.func,
600
+ ranges: _propTypes.default.arrayOf(_DayCell.rangeShape),
601
+ preview: _propTypes.default.shape({
602
+ startDate: _propTypes.default.object,
603
+ endDate: _propTypes.default.object,
604
+ color: _propTypes.default.string
605
+ }),
606
+ dateDisplayFormat: _propTypes.default.string,
607
+ monthDisplayFormat: _propTypes.default.string,
608
+ weekdayDisplayFormat: _propTypes.default.string,
609
+ weekStartsOn: _propTypes.default.number,
610
+ dayDisplayFormat: _propTypes.default.string,
611
+ focusedRange: _propTypes.default.arrayOf(_propTypes.default.number),
612
+ initialFocusedRange: _propTypes.default.arrayOf(_propTypes.default.number),
613
+ months: _propTypes.default.number,
614
+ className: _propTypes.default.string,
615
+ showDateDisplay: _propTypes.default.bool,
616
+ showPreview: _propTypes.default.bool,
617
+ displayMode: _propTypes.default.oneOf(['dateRange', 'date']),
618
+ color: _propTypes.default.string,
619
+ updateRange: _propTypes.default.func,
620
+ scroll: _propTypes.default.shape({
621
+ enabled: _propTypes.default.bool,
622
+ monthHeight: _propTypes.default.number,
623
+ longMonthHeight: _propTypes.default.number,
624
+ monthWidth: _propTypes.default.number,
625
+ calendarWidth: _propTypes.default.number,
626
+ calendarHeight: _propTypes.default.number
627
+ }),
628
+ direction: _propTypes.default.oneOf(['vertical', 'horizontal']),
629
+ startDatePlaceholder: _propTypes.default.string,
630
+ endDatePlaceholder: _propTypes.default.string,
631
+ navigatorRenderer: _propTypes.default.func,
632
+ rangeColors: _propTypes.default.arrayOf(_propTypes.default.string),
633
+ editableDateInputs: _propTypes.default.bool,
634
+ dragSelectionEnabled: _propTypes.default.bool,
635
+ fixedHeight: _propTypes.default.bool,
636
+ calendarFocus: _propTypes.default.string,
637
+ preventSnapRefocus: _propTypes.default.bool,
638
+ ariaLabels: _accessibility.ariaLabelsShape
639
+ };
640
+ Calendar.default = Calendar$1;
641
+ return Calendar;
642
+ }
643
+
644
+ export { requireCalendar as __require };