index.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. import { useState, useEvent, useMemo } from 'functional-mini/component';
  2. import { DateRangePickerFunctionalProps } from './props';
  3. import dayjs from 'dayjs';
  4. import { getRangeData, getDateByValue, getValueByDate, getValidValue, } from '../util';
  5. import { useMixState } from '../../_util/hooks/useMixState';
  6. import { useFormatValue, useMinAndMax, useFormatLabel } from './hooks';
  7. import { useDateState } from './useDateState';
  8. import { mountComponent } from '../../_util/component';
  9. import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
  10. import { resolveEventValues } from '../../_util/platform';
  11. var RangePicker = function (props) {
  12. var _a = useMixState(props.defaultValue, {
  13. value: props.value,
  14. postState: function (value) {
  15. return {
  16. valid: true,
  17. value: value && value[0] && value[1]
  18. ? [
  19. dayjs(value[0]).toDate(),
  20. dayjs(value[1]).toDate(),
  21. ]
  22. : undefined,
  23. };
  24. },
  25. }), realValue = _a[0], _b = _a[1], isControlled = _b.isControlled, update = _b.update;
  26. var _c = useDateState(props), dateState = _c.dateState, init = _c.init, changeType = _c.changeType, updateValue = _c.updateValue;
  27. var _d = useComponentEvent(props), triggerEvent = _d.triggerEvent, triggerEventValues = _d.triggerEventValues, triggerEventOnly = _d.triggerEventOnly;
  28. var _e = useState({
  29. currentValue: [],
  30. columns: [],
  31. }), _f = _e[0], columns = _f.columns, currentValue = _f.currentValue, doUpdateColumns = _e[1];
  32. var onFormat = useFormatValue(props);
  33. var _g = useMemo(function () {
  34. return {
  35. currentStartValueStr: dateState.start
  36. ? dayjs(dateState.start).format(props.format)
  37. : '',
  38. currentEndValueStr: dateState.end
  39. ? dayjs(dateState.end).format(props.format)
  40. : '',
  41. };
  42. }, [props.format, dateState.start, dateState.end]), currentStartValueStr = _g.currentStartValueStr, currentEndValueStr = _g.currentEndValueStr;
  43. var onFormatLabel = useFormatLabel(props.onFormatLabel);
  44. function updateColumns(currentValue, currentProps) {
  45. var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max;
  46. var min = getMin(propsMin);
  47. var max = getMax(propsMax);
  48. if (max < min) {
  49. return [];
  50. }
  51. var currentPickerDay = dayjs();
  52. if (currentValue.length > 0) {
  53. currentPickerDay = dayjs(getDateByValue(currentValue));
  54. }
  55. if (currentPickerDay < min || currentPickerDay > max) {
  56. currentPickerDay = min;
  57. }
  58. var newColumns = getRangeData(precision, min, max, currentPickerDay, onFormatLabel);
  59. doUpdateColumns({ columns: newColumns, currentValue: currentValue });
  60. }
  61. var formattedValueText = onFormat(realValue);
  62. useEvent('onVisibleChange', function (visible) {
  63. if (visible) {
  64. var state = init(realValue);
  65. var currentValue_1 = getValueByDate(state.pickerType === 'start' ? state.start : state.end, props.precision);
  66. updateColumns(currentValue_1, props);
  67. }
  68. triggerEvent('visibleChange', visible);
  69. });
  70. useEvent('onChangeCurrentPickerType', function (e) {
  71. var type = e.currentTarget.dataset.type;
  72. var state = changeType(type);
  73. var currentValue = getValueByDate(state.pickerType === 'start' ? state.start : state.end, props.precision);
  74. updateColumns(currentValue, props);
  75. });
  76. var _h = useMinAndMax(), getMin = _h.getMin, getMax = _h.getMax;
  77. useEvent('onCancel', function (e) {
  78. triggerEventOnly('cancel', e);
  79. });
  80. useEvent('onChange', function (event) {
  81. var selectedIndex = resolveEventValues(event)[0];
  82. selectedIndex = getValidValue(selectedIndex);
  83. var format = props.format, precision = props.precision;
  84. var date = getDateByValue(selectedIndex);
  85. var min = getMin(props.min);
  86. var max = getMax(props.max);
  87. if (dayjs(date).isBefore(min)) {
  88. date = min.toDate();
  89. selectedIndex = getValueByDate(date, precision);
  90. }
  91. if (dayjs(date).isAfter(max)) {
  92. date = max.toDate();
  93. selectedIndex = getValueByDate(date, precision);
  94. }
  95. updateColumns(selectedIndex, props);
  96. updateValue(date);
  97. triggerEventValues('pickerChange', [
  98. dateState.pickerType,
  99. date,
  100. dayjs(date).format(format),
  101. ]);
  102. });
  103. useEvent('onOk', function () {
  104. var format = props.format;
  105. var start = dateState.start, end = dateState.end;
  106. var realValue = [start, end];
  107. if (!isControlled) {
  108. update(realValue);
  109. }
  110. triggerEventValues('ok', [
  111. realValue,
  112. realValue.map(function (v) { return dayjs(v).format(format); }),
  113. ]);
  114. });
  115. return {
  116. formattedValueText: formattedValueText,
  117. realValue: realValue,
  118. columns: columns,
  119. currentValue: currentValue,
  120. currentStartDate: dateState.start,
  121. currentEndDate: dateState.end,
  122. currentEndValueStr: currentEndValueStr,
  123. currentStartValueStr: currentStartValueStr,
  124. pickerType: dateState.pickerType,
  125. };
  126. };
  127. mountComponent(RangePicker, DateRangePickerFunctionalProps);