generateCalendar.js 11 KB

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