Header.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. "use client";
  2. import * as React from 'react';
  3. import { useContext, useMemo } from 'react';
  4. import { FormItemInputContext } from '../form/context';
  5. import { Button, Group } from '../radio';
  6. import Select from '../select';
  7. const YEAR_SELECT_OFFSET = 10;
  8. const YEAR_SELECT_TOTAL = 20;
  9. function YearSelect(props) {
  10. const {
  11. fullscreen,
  12. validRange,
  13. generateConfig,
  14. locale,
  15. prefixCls,
  16. value,
  17. onChange,
  18. divRef
  19. } = props;
  20. const year = generateConfig.getYear(value || generateConfig.getNow());
  21. let start = year - YEAR_SELECT_OFFSET;
  22. let end = start + YEAR_SELECT_TOTAL;
  23. if (validRange) {
  24. start = generateConfig.getYear(validRange[0]);
  25. end = generateConfig.getYear(validRange[1]) + 1;
  26. }
  27. const suffix = locale && locale.year === '年' ? '年' : '';
  28. const options = [];
  29. for (let index = start; index < end; index++) {
  30. options.push({
  31. label: `${index}${suffix}`,
  32. value: index
  33. });
  34. }
  35. return /*#__PURE__*/React.createElement(Select, {
  36. size: fullscreen ? undefined : 'small',
  37. options: options,
  38. value: year,
  39. className: `${prefixCls}-year-select`,
  40. onChange: numYear => {
  41. let newDate = generateConfig.setYear(value, numYear);
  42. if (validRange) {
  43. const [startDate, endDate] = validRange;
  44. const newYear = generateConfig.getYear(newDate);
  45. const newMonth = generateConfig.getMonth(newDate);
  46. if (newYear === generateConfig.getYear(endDate) && newMonth > generateConfig.getMonth(endDate)) {
  47. newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
  48. }
  49. if (newYear === generateConfig.getYear(startDate) && newMonth < generateConfig.getMonth(startDate)) {
  50. newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
  51. }
  52. }
  53. onChange(newDate);
  54. },
  55. getPopupContainer: () => divRef.current
  56. });
  57. }
  58. function MonthSelect(props) {
  59. const {
  60. prefixCls,
  61. fullscreen,
  62. validRange,
  63. value,
  64. generateConfig,
  65. locale,
  66. onChange,
  67. divRef
  68. } = props;
  69. const month = generateConfig.getMonth(value || generateConfig.getNow());
  70. let start = 0;
  71. let end = 11;
  72. if (validRange) {
  73. const [rangeStart, rangeEnd] = validRange;
  74. const currentYear = generateConfig.getYear(value);
  75. if (generateConfig.getYear(rangeEnd) === currentYear) {
  76. end = generateConfig.getMonth(rangeEnd);
  77. }
  78. if (generateConfig.getYear(rangeStart) === currentYear) {
  79. start = generateConfig.getMonth(rangeStart);
  80. }
  81. }
  82. const months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale);
  83. const options = [];
  84. for (let index = start; index <= end; index += 1) {
  85. options.push({
  86. label: months[index],
  87. value: index
  88. });
  89. }
  90. return /*#__PURE__*/React.createElement(Select, {
  91. size: fullscreen ? undefined : 'small',
  92. className: `${prefixCls}-month-select`,
  93. value: month,
  94. options: options,
  95. onChange: newMonth => {
  96. onChange(generateConfig.setMonth(value, newMonth));
  97. },
  98. getPopupContainer: () => divRef.current
  99. });
  100. }
  101. function ModeSwitch(props) {
  102. const {
  103. prefixCls,
  104. locale,
  105. mode,
  106. fullscreen,
  107. onModeChange
  108. } = props;
  109. return /*#__PURE__*/React.createElement(Group, {
  110. onChange: ({
  111. target: {
  112. value
  113. }
  114. }) => {
  115. onModeChange(value);
  116. },
  117. value: mode,
  118. size: fullscreen ? undefined : 'small',
  119. className: `${prefixCls}-mode-switch`
  120. }, /*#__PURE__*/React.createElement(Button, {
  121. value: "month"
  122. }, locale.month), /*#__PURE__*/React.createElement(Button, {
  123. value: "year"
  124. }, locale.year));
  125. }
  126. function CalendarHeader(props) {
  127. const {
  128. prefixCls,
  129. fullscreen,
  130. mode,
  131. onChange,
  132. onModeChange
  133. } = props;
  134. const divRef = React.useRef(null);
  135. const formItemInputContext = useContext(FormItemInputContext);
  136. const mergedFormItemInputContext = useMemo(() => Object.assign(Object.assign({}, formItemInputContext), {
  137. isFormItemInput: false
  138. }), [formItemInputContext]);
  139. const sharedProps = Object.assign(Object.assign({}, props), {
  140. fullscreen,
  141. divRef
  142. });
  143. return /*#__PURE__*/React.createElement("div", {
  144. className: `${prefixCls}-header`,
  145. ref: divRef
  146. }, /*#__PURE__*/React.createElement(FormItemInputContext.Provider, {
  147. value: mergedFormItemInputContext
  148. }, /*#__PURE__*/React.createElement(YearSelect, Object.assign({}, sharedProps, {
  149. onChange: v => {
  150. onChange(v, 'year');
  151. }
  152. })), mode === 'month' && (/*#__PURE__*/React.createElement(MonthSelect, Object.assign({}, sharedProps, {
  153. onChange: v => {
  154. onChange(v, 'month');
  155. }
  156. })))), /*#__PURE__*/React.createElement(ModeSwitch, Object.assign({}, sharedProps, {
  157. onModeChange: onModeChange
  158. })));
  159. }
  160. export default CalendarHeader;