index.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import dayjs from 'dayjs';
  2. import { useEvent, useState, useMemo } from 'functional-mini/component';
  3. import '../_util/assert-component2';
  4. import { mountComponent } from '../_util/component';
  5. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  6. import { useMixState } from '../_util/hooks/useMixState';
  7. import { resolveEventValues } from '../_util/platform';
  8. import { DatePickerFunctionalProps } from './props';
  9. import { getDateByValue, getRangeData, getValidValue, getValueByDate, } from './util';
  10. function getMin(min) {
  11. return min ? dayjs(min) : dayjs().subtract(10, 'year');
  12. }
  13. function getMax(max) {
  14. return max ? dayjs(max) : dayjs().add(10, 'year');
  15. }
  16. var DatePicker = function (props) {
  17. var _a = useMixState(props.defaultValue, {
  18. value: props.value,
  19. postState: function (value) {
  20. if (value) {
  21. return {
  22. valid: true,
  23. value: dayjs(value).toDate(),
  24. };
  25. }
  26. return {
  27. valid: true,
  28. value: undefined,
  29. };
  30. },
  31. }), realValue = _a[0], _b = _a[1], isControlled = _b.isControlled, update = _b.update;
  32. function defaultFormat(value, valueStr) {
  33. if (props.format && valueStr) {
  34. return valueStr;
  35. }
  36. return '';
  37. }
  38. var _c = useComponentEvent(props), triggerEvent = _c.triggerEvent, triggerEventValues = _c.triggerEventValues, triggerEventOnly = _c.triggerEventOnly;
  39. function onFormatLabel(type, value) {
  40. var onFormatLabel = props.onFormatLabel;
  41. if (typeof onFormatLabel === 'function') {
  42. var formatValueByProps = onFormatLabel(type, value);
  43. if (typeof formatValueByProps !== 'undefined') {
  44. return String(formatValueByProps);
  45. }
  46. }
  47. return defaultFormatLabel(type, value);
  48. }
  49. function defaultFormatLabel(type, value) {
  50. var suffixMap = {
  51. year: '年',
  52. month: '月',
  53. day: '日',
  54. hour: '时',
  55. minute: '分',
  56. second: '秒',
  57. };
  58. return "".concat(value).concat(suffixMap[type]);
  59. }
  60. var _d = useState({
  61. visible: false,
  62. value: [],
  63. columns: [],
  64. }), _e = _d[0], visible = _e.visible, value = _e.value, columns = _e.columns, setState = _d[1];
  65. function generateData(currentValue, currentProps) {
  66. var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max;
  67. var min = getMin(propsMin);
  68. var max = getMax(propsMax);
  69. if (max < min) {
  70. return [];
  71. }
  72. var currentPickerDay = dayjs();
  73. if (currentValue.length > 0) {
  74. currentPickerDay = dayjs(getDateByValue(currentValue));
  75. }
  76. if (currentPickerDay < min || currentPickerDay > max) {
  77. currentPickerDay = min;
  78. }
  79. var newColumns = getRangeData(precision, min, max, currentPickerDay, onFormatLabel);
  80. return newColumns;
  81. }
  82. function getCurrentValueWithCValue(currentProps) {
  83. var min = currentProps.min, max = currentProps.max, precision = currentProps.precision;
  84. if (realValue) {
  85. return getValueByDate(realValue, precision);
  86. }
  87. else {
  88. var now = new Date();
  89. if (!(min && dayjs(now).isBefore(dayjs(min), precision)) &&
  90. !(max && dayjs(now).isAfter(dayjs(max), precision))) {
  91. return getValueByDate(now, precision);
  92. }
  93. else {
  94. return getValueByDate(getMin(min).toDate(), precision);
  95. }
  96. }
  97. }
  98. useEvent('onVisibleChange', function (visible) {
  99. if (visible) {
  100. var currentValue = getCurrentValueWithCValue(props);
  101. var newColumns = generateData(currentValue, props);
  102. setState({
  103. value: currentValue,
  104. columns: newColumns,
  105. visible: true,
  106. });
  107. }
  108. else {
  109. setState({
  110. value: [],
  111. columns: [],
  112. visible: false,
  113. });
  114. }
  115. triggerEvent('visibleChange', visible, {});
  116. });
  117. useEvent('onChange', function (event) {
  118. var selectedIndex = resolveEventValues(event)[0];
  119. selectedIndex = getValidValue(selectedIndex);
  120. var format = props.format, precision = props.precision;
  121. var date = getDateByValue(selectedIndex);
  122. var min = getMin(props.min);
  123. var max = getMax(props.max);
  124. if (dayjs(date).isBefore(min)) {
  125. date = min.toDate();
  126. selectedIndex = getValueByDate(date, precision);
  127. }
  128. if (dayjs(date).isAfter(max)) {
  129. date = max.toDate();
  130. selectedIndex = getValueByDate(date, precision);
  131. }
  132. var newColumns = generateData(selectedIndex, props);
  133. setState({
  134. visible: true,
  135. columns: newColumns,
  136. value: selectedIndex,
  137. });
  138. var pickDate = getDateByValue(selectedIndex);
  139. triggerEventValues('pickerChange', [pickDate, dayjs(pickDate).format(format)], {});
  140. });
  141. useEvent('onCancel', function (e) {
  142. triggerEventOnly('cancel', e);
  143. });
  144. useEvent('onOk', function () {
  145. var format = props.format;
  146. var date = getDateByValue(value);
  147. if (!isControlled) {
  148. update(date);
  149. }
  150. triggerEventValues('ok', [date, dayjs(date).format(format)], {});
  151. });
  152. var formattedValueText = useMemo(function () {
  153. var onFormat = props.onFormat, format = props.format;
  154. if (typeof onFormat === 'function') {
  155. var formatValueByProps = onFormat(realValue, realValue ? dayjs(realValue).format(format) : null);
  156. if (typeof formatValueByProps !== 'undefined') {
  157. return formatValueByProps;
  158. }
  159. }
  160. return defaultFormat(realValue, realValue ? dayjs(realValue).format(format) : null);
  161. }, [realValue]);
  162. return {
  163. formattedValueText: formattedValueText,
  164. currentValue: visible ? value : realValue,
  165. columns: columns,
  166. };
  167. };
  168. mountComponent(DatePicker, DatePickerFunctionalProps);