Header.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _select = _interopRequireDefault(require("../select"));
  11. var _radio = require("../radio");
  12. var _FormItemContext = require("../form/FormItemContext");
  13. const YearSelectOffset = 10;
  14. const YearSelectTotal = 20;
  15. function YearSelect(props) {
  16. const {
  17. fullscreen,
  18. validRange,
  19. generateConfig,
  20. locale,
  21. prefixCls,
  22. value,
  23. onChange,
  24. divRef
  25. } = props;
  26. const year = generateConfig.getYear(value || generateConfig.getNow());
  27. let start = year - YearSelectOffset;
  28. let end = start + YearSelectTotal;
  29. if (validRange) {
  30. start = generateConfig.getYear(validRange[0]);
  31. end = generateConfig.getYear(validRange[1]) + 1;
  32. }
  33. const suffix = locale && locale.year === '年' ? '年' : '';
  34. const options = [];
  35. for (let index = start; index < end; index++) {
  36. options.push({
  37. label: `${index}${suffix}`,
  38. value: index
  39. });
  40. }
  41. return (0, _vue.createVNode)(_select.default, {
  42. "size": fullscreen ? undefined : 'small',
  43. "options": options,
  44. "value": year,
  45. "class": `${prefixCls}-year-select`,
  46. "onChange": numYear => {
  47. let newDate = generateConfig.setYear(value, numYear);
  48. if (validRange) {
  49. const [startDate, endDate] = validRange;
  50. const newYear = generateConfig.getYear(newDate);
  51. const newMonth = generateConfig.getMonth(newDate);
  52. if (newYear === generateConfig.getYear(endDate) && newMonth > generateConfig.getMonth(endDate)) {
  53. newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
  54. }
  55. if (newYear === generateConfig.getYear(startDate) && newMonth < generateConfig.getMonth(startDate)) {
  56. newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
  57. }
  58. }
  59. onChange(newDate);
  60. },
  61. "getPopupContainer": () => divRef.value
  62. }, null);
  63. }
  64. YearSelect.inheritAttrs = false;
  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 (0, _vue.createVNode)(_select.default, {
  98. "size": fullscreen ? undefined : 'small',
  99. "class": `${prefixCls}-month-select`,
  100. "value": month,
  101. "options": options,
  102. "onChange": newMonth => {
  103. onChange(generateConfig.setMonth(value, newMonth));
  104. },
  105. "getPopupContainer": () => divRef.value
  106. }, null);
  107. }
  108. MonthSelect.inheritAttrs = false;
  109. function ModeSwitch(props) {
  110. const {
  111. prefixCls,
  112. locale,
  113. mode,
  114. fullscreen,
  115. onModeChange
  116. } = props;
  117. return (0, _vue.createVNode)(_radio.Group, {
  118. "onChange": _ref => {
  119. let {
  120. target: {
  121. value
  122. }
  123. } = _ref;
  124. onModeChange(value);
  125. },
  126. "value": mode,
  127. "size": fullscreen ? undefined : 'small',
  128. "class": `${prefixCls}-mode-switch`
  129. }, {
  130. default: () => [(0, _vue.createVNode)(_radio.Button, {
  131. "value": "month"
  132. }, {
  133. default: () => [locale.month]
  134. }), (0, _vue.createVNode)(_radio.Button, {
  135. "value": "year"
  136. }, {
  137. default: () => [locale.year]
  138. })]
  139. });
  140. }
  141. ModeSwitch.inheritAttrs = false;
  142. var _default = exports.default = (0, _vue.defineComponent)({
  143. name: 'CalendarHeader',
  144. inheritAttrs: false,
  145. props: ['mode', 'prefixCls', 'value', 'validRange', 'generateConfig', 'locale', 'mode', 'fullscreen'],
  146. setup(_props, _ref2) {
  147. let {
  148. attrs
  149. } = _ref2;
  150. const divRef = (0, _vue.ref)(null);
  151. const formItemInputContext = _FormItemContext.FormItemInputContext.useInject();
  152. _FormItemContext.FormItemInputContext.useProvide(formItemInputContext, {
  153. isFormItemInput: false
  154. });
  155. return () => {
  156. const props = (0, _extends2.default)((0, _extends2.default)({}, _props), attrs);
  157. const {
  158. prefixCls,
  159. fullscreen,
  160. mode,
  161. onChange,
  162. onModeChange
  163. } = props;
  164. const sharedProps = (0, _extends2.default)((0, _extends2.default)({}, props), {
  165. fullscreen,
  166. divRef
  167. });
  168. return (0, _vue.createVNode)("div", {
  169. "class": `${prefixCls}-header`,
  170. "ref": divRef
  171. }, [(0, _vue.createVNode)(YearSelect, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedProps), {}, {
  172. "onChange": v => {
  173. onChange(v, 'year');
  174. }
  175. }), null), mode === 'month' && (0, _vue.createVNode)(MonthSelect, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedProps), {}, {
  176. "onChange": v => {
  177. onChange(v, 'month');
  178. }
  179. }), null), (0, _vue.createVNode)(ModeSwitch, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedProps), {}, {
  180. "onModeChange": onModeChange
  181. }), null)]);
  182. };
  183. }
  184. });