Header.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.HeaderProps = undefined;
  6. var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
  7. var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
  8. var _select = require('../select');
  9. var _select2 = _interopRequireDefault(_select);
  10. var _radio = require('../radio');
  11. var _vueTypes = require('../_util/vue-types');
  12. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  13. var _propsUtil = require('../_util/props-util');
  14. var _configConsumerProps = require('../config-provider/configConsumerProps');
  15. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  16. var Option = _select2['default'].Option;
  17. function getMonthsLocale(value) {
  18. var current = value.clone();
  19. var localeData = value.localeData();
  20. var months = [];
  21. for (var i = 0; i < 12; i++) {
  22. current.month(i);
  23. months.push(localeData.monthsShort(current));
  24. }
  25. return months;
  26. }
  27. var HeaderProps = exports.HeaderProps = {
  28. prefixCls: _vueTypes2['default'].string,
  29. locale: _vueTypes2['default'].any,
  30. fullscreen: _vueTypes2['default'].boolean,
  31. yearSelectOffset: _vueTypes2['default'].number,
  32. yearSelectTotal: _vueTypes2['default'].number,
  33. type: _vueTypes2['default'].string,
  34. // onValueChange: PropTypes.(value: moment.Moment) => void,
  35. // onTypeChange: PropTypes.(type: string) => void,
  36. value: _vueTypes2['default'].any,
  37. validRange: _vueTypes2['default'].array,
  38. headerRender: _vueTypes2['default'].func
  39. };
  40. exports['default'] = {
  41. props: (0, _propsUtil.initDefaultProps)(HeaderProps, {
  42. yearSelectOffset: 10,
  43. yearSelectTotal: 20
  44. }),
  45. inject: {
  46. configProvider: { 'default': function _default() {
  47. return _configConsumerProps.ConfigConsumerProps;
  48. } }
  49. },
  50. // private calenderHeaderNode: HTMLDivElement;
  51. methods: {
  52. getYearSelectElement: function getYearSelectElement(prefixCls, year) {
  53. var _this = this;
  54. var h = this.$createElement;
  55. var yearSelectOffset = this.yearSelectOffset,
  56. yearSelectTotal = this.yearSelectTotal,
  57. _locale = this.locale,
  58. locale = _locale === undefined ? {} : _locale,
  59. fullscreen = this.fullscreen,
  60. validRange = this.validRange;
  61. var start = year - yearSelectOffset;
  62. var end = start + yearSelectTotal;
  63. if (validRange) {
  64. start = validRange[0].get('year');
  65. end = validRange[1].get('year') + 1;
  66. }
  67. var suffix = locale.year === '年' ? '年' : '';
  68. var options = [];
  69. for (var index = start; index < end; index++) {
  70. options.push(h(
  71. Option,
  72. { key: '' + index },
  73. [index + suffix]
  74. ));
  75. }
  76. return h(
  77. _select2['default'],
  78. {
  79. attrs: {
  80. size: fullscreen ? 'default' : 'small',
  81. dropdownMatchSelectWidth: false,
  82. value: String(year),
  83. getPopupContainer: function getPopupContainer() {
  84. return _this.getCalenderHeaderNode();
  85. }
  86. },
  87. 'class': prefixCls + '-year-select',
  88. on: {
  89. 'change': this.onYearChange
  90. }
  91. },
  92. [options]
  93. );
  94. },
  95. getMonthSelectElement: function getMonthSelectElement(prefixCls, month, months) {
  96. var _this2 = this;
  97. var h = this.$createElement;
  98. var fullscreen = this.fullscreen,
  99. validRange = this.validRange,
  100. value = this.value;
  101. var options = [];
  102. var start = 0;
  103. var end = 12;
  104. if (validRange) {
  105. var _validRange = (0, _slicedToArray3['default'])(validRange, 2),
  106. rangeStart = _validRange[0],
  107. rangeEnd = _validRange[1];
  108. var currentYear = value.get('year');
  109. if (rangeEnd.get('year') === currentYear) {
  110. end = rangeEnd.get('month') + 1;
  111. }
  112. if (rangeStart.get('year') === currentYear) {
  113. start = rangeStart.get('month');
  114. }
  115. }
  116. for (var index = start; index < end; index++) {
  117. options.push(h(
  118. Option,
  119. { key: '' + index },
  120. [months[index]]
  121. ));
  122. }
  123. return h(
  124. _select2['default'],
  125. {
  126. attrs: {
  127. size: fullscreen ? 'default' : 'small',
  128. dropdownMatchSelectWidth: false,
  129. value: String(month),
  130. getPopupContainer: function getPopupContainer() {
  131. return _this2.getCalenderHeaderNode();
  132. }
  133. },
  134. 'class': prefixCls + '-month-select', on: {
  135. 'change': this.onMonthChange
  136. }
  137. },
  138. [options]
  139. );
  140. },
  141. onYearChange: function onYearChange(year) {
  142. var value = this.value,
  143. validRange = this.validRange;
  144. var newValue = value.clone();
  145. newValue.year(parseInt(year, 10));
  146. // switch the month so that it remains within range when year changes
  147. if (validRange) {
  148. var _validRange2 = (0, _slicedToArray3['default'])(validRange, 2),
  149. start = _validRange2[0],
  150. end = _validRange2[1];
  151. var newYear = newValue.get('year');
  152. var newMonth = newValue.get('month');
  153. if (newYear === end.get('year') && newMonth > end.get('month')) {
  154. newValue.month(end.get('month'));
  155. }
  156. if (newYear === start.get('year') && newMonth < start.get('month')) {
  157. newValue.month(start.get('month'));
  158. }
  159. }
  160. this.$emit('valueChange', newValue);
  161. },
  162. onMonthChange: function onMonthChange(month) {
  163. var newValue = this.value.clone();
  164. newValue.month(parseInt(month, 10));
  165. this.$emit('valueChange', newValue);
  166. },
  167. onInternalTypeChange: function onInternalTypeChange(e) {
  168. this.onTypeChange(e.target.value);
  169. },
  170. onTypeChange: function onTypeChange(val) {
  171. this.$emit('typeChange', val);
  172. },
  173. getCalenderHeaderNode: function getCalenderHeaderNode() {
  174. return this.$refs.calenderHeaderNode;
  175. },
  176. getMonthYearSelections: function getMonthYearSelections(getPrefixCls) {
  177. var _$props = this.$props,
  178. customizePrefixCls = _$props.prefixCls,
  179. type = _$props.type,
  180. value = _$props.value;
  181. var prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
  182. var yearReactNode = this.getYearSelectElement(prefixCls, value.year());
  183. var monthReactNode = type === 'month' ? this.getMonthSelectElement(prefixCls, value.month(), getMonthsLocale(value)) : null;
  184. return {
  185. yearReactNode: yearReactNode,
  186. monthReactNode: monthReactNode
  187. };
  188. },
  189. getTypeSwitch: function getTypeSwitch() {
  190. var h = this.$createElement;
  191. var _$props2 = this.$props,
  192. _$props2$locale = _$props2.locale,
  193. locale = _$props2$locale === undefined ? {} : _$props2$locale,
  194. type = _$props2.type,
  195. fullscreen = _$props2.fullscreen;
  196. var size = fullscreen ? 'default' : 'small';
  197. return h(
  198. _radio.Group,
  199. {
  200. on: {
  201. 'change': this.onInternalTypeChange
  202. },
  203. attrs: { value: type, size: size }
  204. },
  205. [h(
  206. _radio.Button,
  207. {
  208. attrs: { value: 'month' }
  209. },
  210. [locale.month]
  211. ), h(
  212. _radio.Button,
  213. {
  214. attrs: { value: 'year' }
  215. },
  216. [locale.year]
  217. )]
  218. );
  219. },
  220. onValueChange: function onValueChange() {
  221. this.$emit.apply(this, ['valueChange'].concat(Array.prototype.slice.call(arguments)));
  222. },
  223. headerRenderCustom: function headerRenderCustom(headerRender) {
  224. var _$props3 = this.$props,
  225. type = _$props3.type,
  226. value = _$props3.value;
  227. return headerRender({
  228. value: value,
  229. type: type || 'month',
  230. onChange: this.onValueChange,
  231. onTypeChange: this.onTypeChange
  232. });
  233. }
  234. },
  235. render: function render() {
  236. var h = arguments[0];
  237. var customizePrefixCls = this.prefixCls,
  238. headerRender = this.headerRender;
  239. var getPrefixCls = this.configProvider.getPrefixCls;
  240. var prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
  241. var typeSwitch = this.getTypeSwitch();
  242. var _getMonthYearSelectio = this.getMonthYearSelections(getPrefixCls),
  243. yearReactNode = _getMonthYearSelectio.yearReactNode,
  244. monthReactNode = _getMonthYearSelectio.monthReactNode;
  245. return headerRender ? this.headerRenderCustom(headerRender) : h(
  246. 'div',
  247. { 'class': prefixCls + '-header', ref: 'calenderHeaderNode' },
  248. [yearReactNode, monthReactNode, typeSwitch]
  249. );
  250. }
  251. };