Header.js 5.1 KB

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