index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.HeaderProps = exports.CalendarProps = exports.CalendarMode = undefined;
  6. var _extends2 = require('babel-runtime/helpers/extends');
  7. var _extends3 = _interopRequireDefault(_extends2);
  8. var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
  9. var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
  10. var _Header = require('./Header');
  11. Object.defineProperty(exports, 'HeaderProps', {
  12. enumerable: true,
  13. get: function get() {
  14. return _Header.HeaderProps;
  15. }
  16. });
  17. var _vueTypes = require('../_util/vue-types');
  18. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  19. var _BaseMixin = require('../_util/BaseMixin');
  20. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  21. var _propsUtil = require('../_util/props-util');
  22. var _moment = require('moment');
  23. var moment = _interopRequireWildcard(_moment);
  24. var _FullCalendar = require('../vc-calendar/src/FullCalendar');
  25. var _FullCalendar2 = _interopRequireDefault(_FullCalendar);
  26. var _Header2 = _interopRequireDefault(_Header);
  27. var _LocaleReceiver = require('../locale-provider/LocaleReceiver');
  28. var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);
  29. var _interopDefault = require('../_util/interopDefault');
  30. var _interopDefault2 = _interopRequireDefault(_interopDefault);
  31. var _configConsumerProps = require('../config-provider/configConsumerProps');
  32. var _en_US = require('./locale/en_US');
  33. var _en_US2 = _interopRequireDefault(_en_US);
  34. var _base = require('../base');
  35. var _base2 = _interopRequireDefault(_base);
  36. var _momentUtil = require('../_util/moment-util');
  37. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
  38. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  39. function noop() {
  40. return null;
  41. }
  42. function zerofixed(v) {
  43. if (v < 10) {
  44. return '0' + v;
  45. }
  46. return '' + v;
  47. }
  48. function isMomentArray(value) {
  49. return Array.isArray(value) && !!value.find(function (val) {
  50. return moment.isMoment(val);
  51. });
  52. }
  53. var CalendarMode = exports.CalendarMode = _vueTypes2['default'].oneOf(['month', 'year']);
  54. var CalendarProps = exports.CalendarProps = function CalendarProps() {
  55. return {
  56. prefixCls: _vueTypes2['default'].string,
  57. value: _momentUtil.TimeType,
  58. defaultValue: _momentUtil.TimeType,
  59. mode: CalendarMode,
  60. fullscreen: _vueTypes2['default'].bool,
  61. // dateCellRender: PropTypes.func,
  62. // monthCellRender: PropTypes.func,
  63. // dateFullCellRender: PropTypes.func,
  64. // monthFullCellRender: PropTypes.func,
  65. locale: _vueTypes2['default'].object,
  66. // onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
  67. // onSelect?: (date?: moment.Moment) => void;
  68. disabledDate: _vueTypes2['default'].func,
  69. validRange: _vueTypes2['default'].custom(isMomentArray),
  70. headerRender: _vueTypes2['default'].func,
  71. valueFormat: _vueTypes2['default'].string
  72. };
  73. };
  74. var Calendar = {
  75. name: 'ACalendar',
  76. mixins: [_BaseMixin2['default']],
  77. props: (0, _propsUtil.initDefaultProps)(CalendarProps(), {
  78. locale: {},
  79. fullscreen: true
  80. }),
  81. model: {
  82. prop: 'value',
  83. event: 'change'
  84. },
  85. inject: {
  86. configProvider: { 'default': function _default() {
  87. return _configConsumerProps.ConfigConsumerProps;
  88. } }
  89. },
  90. data: function data() {
  91. var value = this.value,
  92. defaultValue = this.defaultValue,
  93. valueFormat = this.valueFormat;
  94. var sValue = value || defaultValue || (0, _interopDefault2['default'])(moment)();
  95. (0, _momentUtil.checkValidate)('Calendar', defaultValue, 'defaultValue', valueFormat);
  96. (0, _momentUtil.checkValidate)('Calendar', value, 'value', valueFormat);
  97. this._sPrefixCls = undefined;
  98. return {
  99. sValue: (0, _momentUtil.stringToMoment)(sValue, valueFormat),
  100. sMode: this.mode || 'month'
  101. };
  102. },
  103. watch: {
  104. value: function value(val) {
  105. (0, _momentUtil.checkValidate)('Calendar', val, 'value', this.valueFormat);
  106. this.setState({
  107. sValue: (0, _momentUtil.stringToMoment)(val, this.valueFormat)
  108. });
  109. },
  110. mode: function mode(val) {
  111. this.setState({
  112. sMode: val
  113. });
  114. }
  115. },
  116. methods: {
  117. onHeaderValueChange: function onHeaderValueChange(value) {
  118. this.setValue(value, 'changePanel');
  119. },
  120. onHeaderTypeChange: function onHeaderTypeChange(mode) {
  121. this.sMode = mode;
  122. this.onPanelChange(this.sValue, mode);
  123. },
  124. onPanelChange: function onPanelChange(value, mode) {
  125. var val = this.valueFormat ? (0, _momentUtil.momentToString)(value, this.valueFormat) : value;
  126. this.$emit('panelChange', val, mode);
  127. if (value !== this.sValue) {
  128. this.$emit('change', val);
  129. }
  130. },
  131. onSelect: function onSelect(value) {
  132. this.setValue(value, 'select');
  133. },
  134. setValue: function setValue(value, way) {
  135. var prevValue = this.value ? (0, _momentUtil.stringToMoment)(this.value, this.valueFormat) : this.sValue;
  136. var mode = this.sMode,
  137. valueFormat = this.valueFormat;
  138. if (!(0, _propsUtil.hasProp)(this, 'value')) {
  139. this.setState({ sValue: value });
  140. }
  141. if (way === 'select') {
  142. if (prevValue && prevValue.month() !== value.month()) {
  143. this.onPanelChange(value, mode);
  144. }
  145. this.$emit('select', valueFormat ? (0, _momentUtil.momentToString)(value, valueFormat) : value);
  146. } else if (way === 'changePanel') {
  147. this.onPanelChange(value, mode);
  148. }
  149. },
  150. getDateRange: function getDateRange(validRange, disabledDate) {
  151. return function (current) {
  152. if (!current) {
  153. return false;
  154. }
  155. var _validRange = (0, _slicedToArray3['default'])(validRange, 2),
  156. startDate = _validRange[0],
  157. endDate = _validRange[1];
  158. var inRange = !current.isBetween(startDate, endDate, 'days', '[]');
  159. if (disabledDate) {
  160. return disabledDate(current) || inRange;
  161. }
  162. return inRange;
  163. };
  164. },
  165. getDefaultLocale: function getDefaultLocale() {
  166. var result = (0, _extends3['default'])({}, _en_US2['default'], this.$props.locale);
  167. result.lang = (0, _extends3['default'])({}, result.lang, (this.$props.locale || {}).lang);
  168. return result;
  169. },
  170. monthCellRender2: function monthCellRender2(value) {
  171. var h = this.$createElement;
  172. var _sPrefixCls = this._sPrefixCls,
  173. $scopedSlots = this.$scopedSlots;
  174. var monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender || noop;
  175. return h(
  176. 'div',
  177. { 'class': _sPrefixCls + '-month' },
  178. [h(
  179. 'div',
  180. { 'class': _sPrefixCls + '-value' },
  181. [value.localeData().monthsShort(value)]
  182. ), h(
  183. 'div',
  184. { 'class': _sPrefixCls + '-content' },
  185. [monthCellRender(value)]
  186. )]
  187. );
  188. },
  189. dateCellRender2: function dateCellRender2(value) {
  190. var h = this.$createElement;
  191. var _sPrefixCls = this._sPrefixCls,
  192. $scopedSlots = this.$scopedSlots;
  193. var dateCellRender = this.dateCellRender || $scopedSlots.dateCellRender || noop;
  194. return h(
  195. 'div',
  196. { 'class': _sPrefixCls + '-date' },
  197. [h(
  198. 'div',
  199. { 'class': _sPrefixCls + '-value' },
  200. [zerofixed(value.date())]
  201. ), h(
  202. 'div',
  203. { 'class': _sPrefixCls + '-content' },
  204. [dateCellRender(value)]
  205. )]
  206. );
  207. },
  208. renderCalendar: function renderCalendar(locale, localeCode) {
  209. var h = this.$createElement;
  210. var props = (0, _propsUtil.getOptionProps)(this);
  211. var value = this.sValue,
  212. mode = this.sMode,
  213. $scopedSlots = this.$scopedSlots;
  214. if (value && localeCode) {
  215. value.locale(localeCode);
  216. }
  217. var customizePrefixCls = props.prefixCls,
  218. fullscreen = props.fullscreen,
  219. dateFullCellRender = props.dateFullCellRender,
  220. monthFullCellRender = props.monthFullCellRender;
  221. var headerRender = this.headerRender || $scopedSlots.headerRender;
  222. var getPrefixCls = this.configProvider.getPrefixCls;
  223. var prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
  224. // To support old version react.
  225. // Have to add prefixCls on the instance.
  226. // https://github.com/facebook/react/issues/12397
  227. this._sPrefixCls = prefixCls;
  228. var cls = '';
  229. if (fullscreen) {
  230. cls += ' ' + prefixCls + '-fullscreen';
  231. }
  232. var monthCellRender = monthFullCellRender || $scopedSlots.monthFullCellRender || this.monthCellRender2;
  233. var dateCellRender = dateFullCellRender || $scopedSlots.dateFullCellRender || this.dateCellRender2;
  234. var disabledDate = props.disabledDate;
  235. if (props.validRange) {
  236. disabledDate = this.getDateRange(props.validRange, disabledDate);
  237. }
  238. var fullCalendarProps = {
  239. props: (0, _extends3['default'])({}, props, {
  240. Select: {},
  241. locale: locale.lang,
  242. type: mode === 'year' ? 'month' : 'date',
  243. prefixCls: prefixCls,
  244. showHeader: false,
  245. value: value,
  246. monthCellRender: monthCellRender,
  247. dateCellRender: dateCellRender,
  248. disabledDate: disabledDate
  249. }),
  250. on: (0, _extends3['default'])({}, (0, _propsUtil.getListeners)(this), {
  251. select: this.onSelect
  252. })
  253. };
  254. return h(
  255. 'div',
  256. { 'class': cls },
  257. [h(_Header2['default'], {
  258. attrs: {
  259. fullscreen: fullscreen,
  260. type: mode,
  261. headerRender: headerRender,
  262. value: value,
  263. locale: locale.lang,
  264. prefixCls: prefixCls,
  265. validRange: props.validRange
  266. },
  267. on: {
  268. 'typeChange': this.onHeaderTypeChange,
  269. 'valueChange': this.onHeaderValueChange
  270. }
  271. }), h(_FullCalendar2['default'], fullCalendarProps)]
  272. );
  273. }
  274. },
  275. render: function render() {
  276. var h = arguments[0];
  277. return h(_LocaleReceiver2['default'], {
  278. attrs: {
  279. componentName: 'Calendar',
  280. defaultLocale: this.getDefaultLocale
  281. },
  282. scopedSlots: { 'default': this.renderCalendar }
  283. });
  284. }
  285. };
  286. /* istanbul ignore next */
  287. Calendar.install = function (Vue) {
  288. Vue.use(_base2['default']);
  289. Vue.component(Calendar.name, Calendar);
  290. };
  291. exports['default'] = Calendar;