d86453f7a076152deb0b5e00eaa9c54ab5e7423633bc73d41d408a72e72908256b20d7185afb3efe384d2fa976483c02a1e4f8f6ed5ba3cb654d7165787d3e 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import { getCurrentInstance, inject, ref, unref, watch } from 'vue';
  2. import dayjs from 'dayjs';
  3. import { isEqual } from 'lodash-unified';
  4. import { isValidRange, getDefaultValue } from '../utils.mjs';
  5. import { ROOT_PICKER_INJECTION_KEY } from '../constants.mjs';
  6. import { useShortcut } from './use-shortcut.mjs';
  7. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  8. import { useLocale } from '../../../../hooks/use-locale/index.mjs';
  9. import { isArray } from '@vue/shared';
  10. const useRangePicker = (props, {
  11. defaultValue,
  12. defaultTime,
  13. leftDate,
  14. rightDate,
  15. step,
  16. unit,
  17. sortDates
  18. }) => {
  19. const { emit } = getCurrentInstance();
  20. const { pickerNs } = inject(ROOT_PICKER_INJECTION_KEY);
  21. const drpNs = useNamespace("date-range-picker");
  22. const { t, lang } = useLocale();
  23. const handleShortcutClick = useShortcut(lang);
  24. const minDate = ref();
  25. const maxDate = ref();
  26. const rangeState = ref({
  27. endDate: null,
  28. selecting: false
  29. });
  30. const handleChangeRange = (val) => {
  31. rangeState.value = val;
  32. };
  33. const handleRangeConfirm = (visible = false) => {
  34. const _minDate = unref(minDate);
  35. const _maxDate = unref(maxDate);
  36. if (isValidRange([_minDate, _maxDate])) {
  37. emit("pick", [_minDate, _maxDate], visible);
  38. }
  39. };
  40. const onSelect = (selecting) => {
  41. rangeState.value.selecting = selecting;
  42. if (!selecting) {
  43. rangeState.value.endDate = null;
  44. }
  45. };
  46. const parseValue = (parsedValue) => {
  47. if (isArray(parsedValue) && parsedValue.length === 2) {
  48. const [start, end] = parsedValue;
  49. minDate.value = start;
  50. leftDate.value = start;
  51. maxDate.value = end;
  52. sortDates(unref(minDate), unref(maxDate));
  53. } else {
  54. restoreDefault();
  55. }
  56. };
  57. const restoreDefault = () => {
  58. let [start, end] = getDefaultValue(unref(defaultValue), {
  59. lang: unref(lang),
  60. step,
  61. unit,
  62. unlinkPanels: props.unlinkPanels
  63. });
  64. const getShift = (day) => {
  65. return day.diff(day.startOf("d"), "ms");
  66. };
  67. const maybeTimes = unref(defaultTime);
  68. if (maybeTimes) {
  69. let leftShift = 0;
  70. let rightShift = 0;
  71. if (isArray(maybeTimes)) {
  72. const [timeStart, timeEnd] = maybeTimes.map(dayjs);
  73. leftShift = getShift(timeStart);
  74. rightShift = getShift(timeEnd);
  75. } else {
  76. const shift = getShift(dayjs(maybeTimes));
  77. leftShift = shift;
  78. rightShift = shift;
  79. }
  80. start = start.startOf("d").add(leftShift, "ms");
  81. end = end.startOf("d").add(rightShift, "ms");
  82. }
  83. minDate.value = void 0;
  84. maxDate.value = void 0;
  85. leftDate.value = start;
  86. rightDate.value = end;
  87. };
  88. watch(defaultValue, (val) => {
  89. if (val) {
  90. restoreDefault();
  91. }
  92. }, { immediate: true });
  93. watch(() => props.parsedValue, (parsedValue) => {
  94. if (!(parsedValue == null ? void 0 : parsedValue.length) || !isEqual(parsedValue, [minDate.value, maxDate.value])) {
  95. parseValue(parsedValue);
  96. }
  97. }, {
  98. immediate: true
  99. });
  100. watch(() => props.visible, () => {
  101. if (props.visible) {
  102. parseValue(props.parsedValue);
  103. }
  104. }, { immediate: true });
  105. return {
  106. minDate,
  107. maxDate,
  108. rangeState,
  109. lang,
  110. ppNs: pickerNs,
  111. drpNs,
  112. handleChangeRange,
  113. handleRangeConfirm,
  114. handleShortcutClick,
  115. onSelect,
  116. parseValue,
  117. t
  118. };
  119. };
  120. export { useRangePicker };
  121. //# sourceMappingURL=use-range-picker.mjs.map