Header.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. import Select from '../select';
  5. import { Group, Button } from '../radio';
  6. import { defineComponent, ref } from 'vue';
  7. import { FormItemInputContext } from '../form/FormItemContext';
  8. const YearSelectOffset = 10;
  9. const YearSelectTotal = 20;
  10. function YearSelect(props) {
  11. const {
  12. fullscreen,
  13. validRange,
  14. generateConfig,
  15. locale,
  16. prefixCls,
  17. value,
  18. onChange,
  19. divRef
  20. } = props;
  21. const year = generateConfig.getYear(value || generateConfig.getNow());
  22. let start = year - YearSelectOffset;
  23. let end = start + YearSelectTotal;
  24. if (validRange) {
  25. start = generateConfig.getYear(validRange[0]);
  26. end = generateConfig.getYear(validRange[1]) + 1;
  27. }
  28. const suffix = locale && locale.year === '年' ? '年' : '';
  29. const options = [];
  30. for (let index = start; index < end; index++) {
  31. options.push({
  32. label: `${index}${suffix}`,
  33. value: index
  34. });
  35. }
  36. return _createVNode(Select, {
  37. "size": fullscreen ? undefined : 'small',
  38. "options": options,
  39. "value": year,
  40. "class": `${prefixCls}-year-select`,
  41. "onChange": numYear => {
  42. let newDate = generateConfig.setYear(value, numYear);
  43. if (validRange) {
  44. const [startDate, endDate] = validRange;
  45. const newYear = generateConfig.getYear(newDate);
  46. const newMonth = generateConfig.getMonth(newDate);
  47. if (newYear === generateConfig.getYear(endDate) && newMonth > generateConfig.getMonth(endDate)) {
  48. newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
  49. }
  50. if (newYear === generateConfig.getYear(startDate) && newMonth < generateConfig.getMonth(startDate)) {
  51. newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
  52. }
  53. }
  54. onChange(newDate);
  55. },
  56. "getPopupContainer": () => divRef.value
  57. }, null);
  58. }
  59. YearSelect.inheritAttrs = false;
  60. function MonthSelect(props) {
  61. const {
  62. prefixCls,
  63. fullscreen,
  64. validRange,
  65. value,
  66. generateConfig,
  67. locale,
  68. onChange,
  69. divRef
  70. } = props;
  71. const month = generateConfig.getMonth(value || generateConfig.getNow());
  72. let start = 0;
  73. let end = 11;
  74. if (validRange) {
  75. const [rangeStart, rangeEnd] = validRange;
  76. const currentYear = generateConfig.getYear(value);
  77. if (generateConfig.getYear(rangeEnd) === currentYear) {
  78. end = generateConfig.getMonth(rangeEnd);
  79. }
  80. if (generateConfig.getYear(rangeStart) === currentYear) {
  81. start = generateConfig.getMonth(rangeStart);
  82. }
  83. }
  84. const months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale);
  85. const options = [];
  86. for (let index = start; index <= end; index += 1) {
  87. options.push({
  88. label: months[index],
  89. value: index
  90. });
  91. }
  92. return _createVNode(Select, {
  93. "size": fullscreen ? undefined : 'small',
  94. "class": `${prefixCls}-month-select`,
  95. "value": month,
  96. "options": options,
  97. "onChange": newMonth => {
  98. onChange(generateConfig.setMonth(value, newMonth));
  99. },
  100. "getPopupContainer": () => divRef.value
  101. }, null);
  102. }
  103. MonthSelect.inheritAttrs = false;
  104. function ModeSwitch(props) {
  105. const {
  106. prefixCls,
  107. locale,
  108. mode,
  109. fullscreen,
  110. onModeChange
  111. } = props;
  112. return _createVNode(Group, {
  113. "onChange": _ref => {
  114. let {
  115. target: {
  116. value
  117. }
  118. } = _ref;
  119. onModeChange(value);
  120. },
  121. "value": mode,
  122. "size": fullscreen ? undefined : 'small',
  123. "class": `${prefixCls}-mode-switch`
  124. }, {
  125. default: () => [_createVNode(Button, {
  126. "value": "month"
  127. }, {
  128. default: () => [locale.month]
  129. }), _createVNode(Button, {
  130. "value": "year"
  131. }, {
  132. default: () => [locale.year]
  133. })]
  134. });
  135. }
  136. ModeSwitch.inheritAttrs = false;
  137. export default defineComponent({
  138. name: 'CalendarHeader',
  139. inheritAttrs: false,
  140. props: ['mode', 'prefixCls', 'value', 'validRange', 'generateConfig', 'locale', 'mode', 'fullscreen'],
  141. setup(_props, _ref2) {
  142. let {
  143. attrs
  144. } = _ref2;
  145. const divRef = ref(null);
  146. const formItemInputContext = FormItemInputContext.useInject();
  147. FormItemInputContext.useProvide(formItemInputContext, {
  148. isFormItemInput: false
  149. });
  150. return () => {
  151. const props = _extends(_extends({}, _props), attrs);
  152. const {
  153. prefixCls,
  154. fullscreen,
  155. mode,
  156. onChange,
  157. onModeChange
  158. } = props;
  159. const sharedProps = _extends(_extends({}, props), {
  160. fullscreen,
  161. divRef
  162. });
  163. return _createVNode("div", {
  164. "class": `${prefixCls}-header`,
  165. "ref": divRef
  166. }, [_createVNode(YearSelect, _objectSpread(_objectSpread({}, sharedProps), {}, {
  167. "onChange": v => {
  168. onChange(v, 'year');
  169. }
  170. }), null), mode === 'month' && _createVNode(MonthSelect, _objectSpread(_objectSpread({}, sharedProps), {}, {
  171. "onChange": v => {
  172. onChange(v, 'month');
  173. }
  174. }), null), _createVNode(ModeSwitch, _objectSpread(_objectSpread({}, sharedProps), {}, {
  175. "onModeChange": onModeChange
  176. }), null)]);
  177. };
  178. }
  179. });