useRangePickerValue.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import { useMergedState } from 'rc-util';
  3. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  4. import * as React from 'react';
  5. import { fillTime, isSame } from "../../utils/dateUtil";
  6. export function offsetPanelDate(generateConfig, picker, date, offset) {
  7. switch (picker) {
  8. case 'date':
  9. case 'week':
  10. return generateConfig.addMonth(date, offset);
  11. case 'month':
  12. case 'quarter':
  13. return generateConfig.addYear(date, offset);
  14. case 'year':
  15. return generateConfig.addYear(date, offset * 10);
  16. case 'decade':
  17. return generateConfig.addYear(date, offset * 100);
  18. default:
  19. return date;
  20. }
  21. }
  22. var EMPTY_LIST = [];
  23. export default function useRangePickerValue(generateConfig, locale, calendarValue, modes, open, activeIndex, pickerMode, multiplePanel) {
  24. var defaultPickerValue = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : EMPTY_LIST;
  25. var pickerValue = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : EMPTY_LIST;
  26. var timeDefaultValue = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : EMPTY_LIST;
  27. var onPickerValueChange = arguments.length > 11 ? arguments[11] : undefined;
  28. var minDate = arguments.length > 12 ? arguments[12] : undefined;
  29. var maxDate = arguments.length > 13 ? arguments[13] : undefined;
  30. var isTimePicker = pickerMode === 'time';
  31. // ======================== Active ========================
  32. // `activeIndex` must be valid to avoid getting empty `pickerValue`
  33. var mergedActiveIndex = activeIndex || 0;
  34. // ===================== Picker Value =====================
  35. var getDefaultPickerValue = function getDefaultPickerValue(index) {
  36. var now = generateConfig.getNow();
  37. if (isTimePicker) {
  38. now = fillTime(generateConfig, now);
  39. }
  40. return defaultPickerValue[index] || calendarValue[index] || now;
  41. };
  42. // Align `pickerValue` with `showTime.defaultValue`
  43. var _pickerValue = _slicedToArray(pickerValue, 2),
  44. startPickerValue = _pickerValue[0],
  45. endPickerValue = _pickerValue[1];
  46. // PickerValue state
  47. var _useMergedState = useMergedState(function () {
  48. return getDefaultPickerValue(0);
  49. }, {
  50. value: startPickerValue
  51. }),
  52. _useMergedState2 = _slicedToArray(_useMergedState, 2),
  53. mergedStartPickerValue = _useMergedState2[0],
  54. setStartPickerValue = _useMergedState2[1];
  55. var _useMergedState3 = useMergedState(function () {
  56. return getDefaultPickerValue(1);
  57. }, {
  58. value: endPickerValue
  59. }),
  60. _useMergedState4 = _slicedToArray(_useMergedState3, 2),
  61. mergedEndPickerValue = _useMergedState4[0],
  62. setEndPickerValue = _useMergedState4[1];
  63. // Current PickerValue
  64. var currentPickerValue = React.useMemo(function () {
  65. var current = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex];
  66. // Merge the `showTime.defaultValue` into `pickerValue`
  67. return isTimePicker ? current : fillTime(generateConfig, current, timeDefaultValue[mergedActiveIndex]);
  68. }, [isTimePicker, mergedStartPickerValue, mergedEndPickerValue, mergedActiveIndex, generateConfig, timeDefaultValue]);
  69. var setCurrentPickerValue = function setCurrentPickerValue(nextPickerValue) {
  70. var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'panel';
  71. var updater = [setStartPickerValue, setEndPickerValue][mergedActiveIndex];
  72. updater(nextPickerValue);
  73. var clone = [mergedStartPickerValue, mergedEndPickerValue];
  74. clone[mergedActiveIndex] = nextPickerValue;
  75. if (onPickerValueChange && (!isSame(generateConfig, locale, mergedStartPickerValue, clone[0], pickerMode) || !isSame(generateConfig, locale, mergedEndPickerValue, clone[1], pickerMode))) {
  76. onPickerValueChange(clone, {
  77. source: source,
  78. range: mergedActiveIndex === 1 ? 'end' : 'start',
  79. mode: modes
  80. });
  81. }
  82. };
  83. // ======================== Effect ========================
  84. /**
  85. * EndDate pickerValue is little different. It should be:
  86. * - If date picker (without time), endDate is not same year & month as startDate
  87. * - pickerValue minus one month
  88. * - Else pass directly
  89. */
  90. var getEndDatePickerValue = function getEndDatePickerValue(startDate, endDate) {
  91. if (multiplePanel) {
  92. // Basic offset
  93. var SAME_CHECKER = {
  94. date: 'month',
  95. week: 'month',
  96. month: 'year',
  97. quarter: 'year'
  98. };
  99. var mode = SAME_CHECKER[pickerMode];
  100. if (mode && !isSame(generateConfig, locale, startDate, endDate, mode)) {
  101. return offsetPanelDate(generateConfig, pickerMode, endDate, -1);
  102. }
  103. // Year offset
  104. if (pickerMode === 'year' && startDate) {
  105. var srcYear = Math.floor(generateConfig.getYear(startDate) / 10);
  106. var tgtYear = Math.floor(generateConfig.getYear(endDate) / 10);
  107. if (srcYear !== tgtYear) {
  108. return offsetPanelDate(generateConfig, pickerMode, endDate, -1);
  109. }
  110. }
  111. }
  112. return endDate;
  113. };
  114. // >>> When switch field, reset the picker value as prev field picker value
  115. var prevActiveIndexRef = React.useRef(null);
  116. useLayoutEffect(function () {
  117. if (open) {
  118. if (!defaultPickerValue[mergedActiveIndex]) {
  119. var nextPickerValue = isTimePicker ? null : generateConfig.getNow();
  120. /**
  121. * 1. If has prevActiveIndex, use it to avoid panel jump
  122. * 2. If current field has value
  123. * - If `activeIndex` is 1 and `calendarValue[0]` is not same panel as `calendarValue[1]`,
  124. * offset `calendarValue[1]` and set it
  125. * - Else use `calendarValue[activeIndex]`
  126. * 3. If current field has no value but another field has value, use another field value
  127. * 4. Else use now (not any `calendarValue` can ref)
  128. */
  129. if (prevActiveIndexRef.current !== null && prevActiveIndexRef.current !== mergedActiveIndex) {
  130. // If from another field, not jump picker value
  131. nextPickerValue = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex ^ 1];
  132. } else if (calendarValue[mergedActiveIndex]) {
  133. // Current field has value
  134. nextPickerValue = mergedActiveIndex === 0 ? calendarValue[0] : getEndDatePickerValue(calendarValue[0], calendarValue[1]);
  135. } else if (calendarValue[mergedActiveIndex ^ 1]) {
  136. // Current field has no value but another field has value
  137. nextPickerValue = calendarValue[mergedActiveIndex ^ 1];
  138. }
  139. // Only sync when has value, this will sync in the `min-max` logic
  140. if (nextPickerValue) {
  141. // nextPickerValue < minDate
  142. if (minDate && generateConfig.isAfter(minDate, nextPickerValue)) {
  143. nextPickerValue = minDate;
  144. }
  145. // maxDate < nextPickerValue
  146. var offsetPickerValue = multiplePanel ? offsetPanelDate(generateConfig, pickerMode, nextPickerValue, 1) : nextPickerValue;
  147. if (maxDate && generateConfig.isAfter(offsetPickerValue, maxDate)) {
  148. nextPickerValue = multiplePanel ? offsetPanelDate(generateConfig, pickerMode, maxDate, -1) : maxDate;
  149. }
  150. setCurrentPickerValue(nextPickerValue, 'reset');
  151. }
  152. }
  153. }
  154. }, [open, mergedActiveIndex, calendarValue[mergedActiveIndex]]);
  155. // >>> Reset prevActiveIndex when panel closed
  156. React.useEffect(function () {
  157. if (open) {
  158. prevActiveIndexRef.current = mergedActiveIndex;
  159. } else {
  160. prevActiveIndexRef.current = null;
  161. }
  162. }, [open, mergedActiveIndex]);
  163. // >>> defaultPickerValue: Resync to `defaultPickerValue` for each panel focused
  164. useLayoutEffect(function () {
  165. if (open && defaultPickerValue) {
  166. if (defaultPickerValue[mergedActiveIndex]) {
  167. setCurrentPickerValue(defaultPickerValue[mergedActiveIndex], 'reset');
  168. }
  169. }
  170. }, [open, mergedActiveIndex]);
  171. return [currentPickerValue, setCurrentPickerValue];
  172. }