generateCalendar.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import { createVNode as _createVNode } from "vue";
  5. import useMergedState from '../_util/hooks/useMergedState';
  6. import padStart from 'lodash-es/padStart';
  7. import { PickerPanel } from '../vc-picker';
  8. import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
  9. import enUS from './locale/en_US';
  10. import CalendarHeader from './Header';
  11. import { computed, defineComponent, toRef } from 'vue';
  12. import useConfigInject from '../_util/hooks/useConfigInject';
  13. import classNames from '../_util/classNames';
  14. function generateCalendar(generateConfig) {
  15. function isSameYear(date1, date2) {
  16. return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
  17. }
  18. function isSameMonth(date1, date2) {
  19. return isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2);
  20. }
  21. function isSameDate(date1, date2) {
  22. return isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2);
  23. }
  24. var Calendar = defineComponent({
  25. name: 'ACalendar',
  26. inheritAttrs: false,
  27. props: ['prefixCls', 'locale', 'validRange', 'disabledDate', 'dateFullCellRender', 'dateCellRender', 'monthFullCellRender', 'monthCellRender', 'headerRender', 'value', 'defaultValue', 'mode', 'fullscreen', 'onChange', 'onPanelChange', 'onSelect', 'valueFormat'],
  28. slots: ['dateFullCellRender', 'dateCellRender', 'monthFullCellRender', 'monthCellRender', 'headerRender'],
  29. setup: function setup(props, _ref) {
  30. var emit = _ref.emit,
  31. slots = _ref.slots,
  32. attrs = _ref.attrs;
  33. var _useConfigInject = useConfigInject('picker', props),
  34. prefixCls = _useConfigInject.prefixCls,
  35. direction = _useConfigInject.direction;
  36. var calendarPrefixCls = computed(function () {
  37. return "".concat(prefixCls.value, "-calendar");
  38. });
  39. var maybeToString = function maybeToString(date) {
  40. return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
  41. };
  42. var value = computed(function () {
  43. if (props.value) {
  44. return props.valueFormat ? generateConfig.toDate(props.value, props.valueFormat) : props.value;
  45. }
  46. return props.value === '' ? undefined : props.value;
  47. });
  48. var defaultValue = computed(function () {
  49. if (props.defaultValue) {
  50. return props.valueFormat ? generateConfig.toDate(props.defaultValue, props.valueFormat) : props.defaultValue;
  51. }
  52. return props.defaultValue === '' ? undefined : props.defaultValue;
  53. });
  54. // Value
  55. var _useMergedState = useMergedState(function () {
  56. return value.value || generateConfig.getNow();
  57. }, {
  58. defaultValue: defaultValue.value,
  59. value: value
  60. }),
  61. _useMergedState2 = _slicedToArray(_useMergedState, 2),
  62. mergedValue = _useMergedState2[0],
  63. setMergedValue = _useMergedState2[1];
  64. // Mode
  65. var _useMergedState3 = useMergedState('month', {
  66. value: toRef(props, 'mode')
  67. }),
  68. _useMergedState4 = _slicedToArray(_useMergedState3, 2),
  69. mergedMode = _useMergedState4[0],
  70. setMergedMode = _useMergedState4[1];
  71. var panelMode = computed(function () {
  72. return mergedMode.value === 'year' ? 'month' : 'date';
  73. });
  74. var mergedDisabledDate = computed(function () {
  75. return function (date) {
  76. var _props$disabledDate;
  77. var notInRange = props.validRange ? generateConfig.isAfter(props.validRange[0], date) || generateConfig.isAfter(date, props.validRange[1]) : false;
  78. return notInRange || !!((_props$disabledDate = props.disabledDate) !== null && _props$disabledDate !== void 0 && _props$disabledDate.call(props, date));
  79. };
  80. });
  81. // ====================== Events ======================
  82. var triggerPanelChange = function triggerPanelChange(date, newMode) {
  83. emit('panelChange', maybeToString(date), newMode);
  84. };
  85. var triggerChange = function triggerChange(date) {
  86. setMergedValue(date);
  87. if (!isSameDate(date, mergedValue.value)) {
  88. // Trigger when month panel switch month
  89. if (panelMode.value === 'date' && !isSameMonth(date, mergedValue.value) || panelMode.value === 'month' && !isSameYear(date, mergedValue.value)) {
  90. triggerPanelChange(date, mergedMode.value);
  91. }
  92. var val = maybeToString(date);
  93. emit('update:value', val);
  94. emit('change', val);
  95. }
  96. };
  97. var triggerModeChange = function triggerModeChange(newMode) {
  98. setMergedMode(newMode);
  99. triggerPanelChange(mergedValue.value, newMode);
  100. };
  101. var onInternalSelect = function onInternalSelect(date) {
  102. triggerChange(date);
  103. emit('select', maybeToString(date));
  104. };
  105. // ====================== Locale ======================
  106. var defaultLocale = computed(function () {
  107. var locale = props.locale;
  108. var result = _objectSpread(_objectSpread({}, enUS), locale);
  109. result.lang = _objectSpread(_objectSpread({}, result.lang), (locale || {}).lang);
  110. return result;
  111. });
  112. var _useLocaleReceiver = useLocaleReceiver('Calendar', defaultLocale),
  113. _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
  114. mergedLocale = _useLocaleReceiver2[0];
  115. return function () {
  116. var _classNames3;
  117. var today = generateConfig.getNow();
  118. var _props$dateFullCellRe = props.dateFullCellRender,
  119. dateFullCellRender = _props$dateFullCellRe === void 0 ? slots === null || slots === void 0 ? void 0 : slots.dateFullCellRender : _props$dateFullCellRe,
  120. _props$dateCellRender = props.dateCellRender,
  121. dateCellRender = _props$dateCellRender === void 0 ? slots === null || slots === void 0 ? void 0 : slots.dateCellRender : _props$dateCellRender,
  122. _props$monthFullCellR = props.monthFullCellRender,
  123. monthFullCellRender = _props$monthFullCellR === void 0 ? slots === null || slots === void 0 ? void 0 : slots.monthFullCellRender : _props$monthFullCellR,
  124. _props$monthCellRende = props.monthCellRender,
  125. monthCellRender = _props$monthCellRende === void 0 ? slots === null || slots === void 0 ? void 0 : slots.monthCellRender : _props$monthCellRende,
  126. _props$headerRender = props.headerRender,
  127. headerRender = _props$headerRender === void 0 ? slots === null || slots === void 0 ? void 0 : slots.headerRender : _props$headerRender,
  128. _props$fullscreen = props.fullscreen,
  129. fullscreen = _props$fullscreen === void 0 ? true : _props$fullscreen,
  130. validRange = props.validRange;
  131. // ====================== Render ======================
  132. var dateRender = function dateRender(_ref2) {
  133. var date = _ref2.current;
  134. if (dateFullCellRender) {
  135. return dateFullCellRender({
  136. current: date
  137. });
  138. }
  139. return _createVNode("div", {
  140. "class": classNames("".concat(prefixCls.value, "-cell-inner"), "".concat(calendarPrefixCls.value, "-date"), _defineProperty({}, "".concat(calendarPrefixCls.value, "-date-today"), isSameDate(today, date)))
  141. }, [_createVNode("div", {
  142. "class": "".concat(calendarPrefixCls.value, "-date-value")
  143. }, [padStart(String(generateConfig.getDate(date)), 2, '0')]), _createVNode("div", {
  144. "class": "".concat(calendarPrefixCls.value, "-date-content")
  145. }, [dateCellRender && dateCellRender({
  146. current: date
  147. })])]);
  148. };
  149. var monthRender = function monthRender(_ref3, locale) {
  150. var date = _ref3.current;
  151. if (monthFullCellRender) {
  152. return monthFullCellRender({
  153. current: date
  154. });
  155. }
  156. var months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale);
  157. return _createVNode("div", {
  158. "class": classNames("".concat(prefixCls.value, "-cell-inner"), "".concat(calendarPrefixCls.value, "-date"), _defineProperty({}, "".concat(calendarPrefixCls.value, "-date-today"), isSameMonth(today, date)))
  159. }, [_createVNode("div", {
  160. "class": "".concat(calendarPrefixCls.value, "-date-value")
  161. }, [months[generateConfig.getMonth(date)]]), _createVNode("div", {
  162. "class": "".concat(calendarPrefixCls.value, "-date-content")
  163. }, [monthCellRender && monthCellRender({
  164. current: date
  165. })])]);
  166. };
  167. return _createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  168. "class": classNames(calendarPrefixCls.value, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(calendarPrefixCls.value, "-full"), fullscreen), _defineProperty(_classNames3, "".concat(calendarPrefixCls.value, "-mini"), !fullscreen), _defineProperty(_classNames3, "".concat(calendarPrefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames3), attrs.class)
  169. }), [headerRender ? headerRender({
  170. value: mergedValue.value,
  171. type: mergedMode.value,
  172. onChange: onInternalSelect,
  173. onTypeChange: triggerModeChange
  174. }) : _createVNode(CalendarHeader, {
  175. "prefixCls": calendarPrefixCls.value,
  176. "value": mergedValue.value,
  177. "generateConfig": generateConfig,
  178. "mode": mergedMode.value,
  179. "fullscreen": fullscreen,
  180. "locale": mergedLocale.value.lang,
  181. "validRange": validRange,
  182. "onChange": onInternalSelect,
  183. "onModeChange": triggerModeChange
  184. }, null), _createVNode(PickerPanel, {
  185. "value": mergedValue.value,
  186. "prefixCls": prefixCls.value,
  187. "locale": mergedLocale.value.lang,
  188. "generateConfig": generateConfig,
  189. "dateRender": dateRender,
  190. "monthCellRender": function monthCellRender(obj) {
  191. return monthRender(obj, mergedLocale.value.lang);
  192. },
  193. "onSelect": onInternalSelect,
  194. "mode": panelMode.value,
  195. "picker": panelMode.value,
  196. "disabledDate": mergedDisabledDate.value,
  197. "hideHeader": true
  198. }, null)]);
  199. };
  200. }
  201. });
  202. Calendar.install = function (app) {
  203. app.component(Calendar.name, Calendar);
  204. return app;
  205. };
  206. return Calendar;
  207. }
  208. export default generateCalendar;