generateCalendar.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _classnames = _interopRequireDefault(require("classnames"));
  11. var _rcPicker = require("rc-picker");
  12. var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
  13. var _warning = require("../_util/warning");
  14. var _context = require("../config-provider/context");
  15. var _locale = require("../locale");
  16. var _Header = _interopRequireDefault(require("./Header"));
  17. var _en_US = _interopRequireDefault(require("./locale/en_US"));
  18. var _style = _interopRequireDefault(require("./style"));
  19. const isSameYear = (date1, date2, config) => {
  20. const {
  21. getYear
  22. } = config;
  23. return date1 && date2 && getYear(date1) === getYear(date2);
  24. };
  25. const isSameMonth = (date1, date2, config) => {
  26. const {
  27. getMonth
  28. } = config;
  29. return isSameYear(date1, date2, config) && getMonth(date1) === getMonth(date2);
  30. };
  31. const isSameDate = (date1, date2, config) => {
  32. const {
  33. getDate
  34. } = config;
  35. return isSameMonth(date1, date2, config) && getDate(date1) === getDate(date2);
  36. };
  37. const generateCalendar = generateConfig => {
  38. const Calendar = props => {
  39. const {
  40. prefixCls: customizePrefixCls,
  41. className,
  42. rootClassName,
  43. style,
  44. dateFullCellRender,
  45. dateCellRender,
  46. monthFullCellRender,
  47. monthCellRender,
  48. cellRender,
  49. fullCellRender,
  50. headerRender,
  51. value,
  52. defaultValue,
  53. disabledDate,
  54. mode,
  55. validRange,
  56. fullscreen = true,
  57. showWeek,
  58. onChange,
  59. onPanelChange,
  60. onSelect
  61. } = props;
  62. const {
  63. getPrefixCls,
  64. direction,
  65. className: contextClassName,
  66. style: contextStyle
  67. } = (0, _context.useComponentConfig)('calendar');
  68. const prefixCls = getPrefixCls('picker', customizePrefixCls);
  69. const calendarPrefixCls = `${prefixCls}-calendar`;
  70. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls, calendarPrefixCls);
  71. const today = generateConfig.getNow();
  72. // ====================== Warning =======================
  73. if (process.env.NODE_ENV !== 'production') {
  74. const warning = (0, _warning.devUseWarning)('Calendar');
  75. [['dateFullCellRender', 'fullCellRender'], ['dateCellRender', 'cellRender'], ['monthFullCellRender', 'fullCellRender'], ['monthCellRender', 'cellRender']].forEach(([deprecatedName, newName]) => {
  76. warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
  77. });
  78. }
  79. // ====================== State =======================
  80. // Value
  81. const [mergedValue, setMergedValue] = (0, _useMergedState.default)(() => value || generateConfig.getNow(), {
  82. defaultValue,
  83. value
  84. });
  85. // Mode
  86. const [mergedMode, setMergedMode] = (0, _useMergedState.default)('month', {
  87. value: mode
  88. });
  89. const panelMode = React.useMemo(() => mergedMode === 'year' ? 'month' : 'date', [mergedMode]);
  90. // Disabled Date
  91. const mergedDisabledDate = React.useCallback(date => {
  92. const notInRange = validRange ? generateConfig.isAfter(validRange[0], date) || generateConfig.isAfter(date, validRange[1]) : false;
  93. return notInRange || !!(disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date));
  94. }, [disabledDate, validRange]);
  95. // ====================== Events ======================
  96. const triggerPanelChange = (date, newMode) => {
  97. onPanelChange === null || onPanelChange === void 0 ? void 0 : onPanelChange(date, newMode);
  98. };
  99. const triggerChange = date => {
  100. setMergedValue(date);
  101. if (!isSameDate(date, mergedValue, generateConfig)) {
  102. // Trigger when month panel switch month
  103. if (panelMode === 'date' && !isSameMonth(date, mergedValue, generateConfig) || panelMode === 'month' && !isSameYear(date, mergedValue, generateConfig)) {
  104. triggerPanelChange(date, mergedMode);
  105. }
  106. onChange === null || onChange === void 0 ? void 0 : onChange(date);
  107. }
  108. };
  109. const triggerModeChange = newMode => {
  110. setMergedMode(newMode);
  111. triggerPanelChange(mergedValue, newMode);
  112. };
  113. const onInternalSelect = (date, source) => {
  114. triggerChange(date);
  115. onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, {
  116. source
  117. });
  118. };
  119. // ====================== Render ======================
  120. const dateRender = React.useCallback((date, info) => {
  121. if (fullCellRender) {
  122. return fullCellRender(date, info);
  123. }
  124. if (dateFullCellRender) {
  125. return dateFullCellRender(date);
  126. }
  127. return /*#__PURE__*/React.createElement("div", {
  128. className: (0, _classnames.default)(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
  129. [`${calendarPrefixCls}-date-today`]: isSameDate(today, date, generateConfig)
  130. })
  131. }, /*#__PURE__*/React.createElement("div", {
  132. className: `${calendarPrefixCls}-date-value`
  133. }, String(generateConfig.getDate(date)).padStart(2, '0')), /*#__PURE__*/React.createElement("div", {
  134. className: `${calendarPrefixCls}-date-content`
  135. }, cellRender ? cellRender(date, info) : dateCellRender === null || dateCellRender === void 0 ? void 0 : dateCellRender(date)));
  136. }, [dateFullCellRender, dateCellRender, cellRender, fullCellRender]);
  137. const monthRender = React.useCallback((date, info) => {
  138. if (fullCellRender) {
  139. return fullCellRender(date, info);
  140. }
  141. if (monthFullCellRender) {
  142. return monthFullCellRender(date);
  143. }
  144. const months = info.locale.shortMonths || generateConfig.locale.getShortMonths(info.locale.locale);
  145. return /*#__PURE__*/React.createElement("div", {
  146. className: (0, _classnames.default)(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
  147. [`${calendarPrefixCls}-date-today`]: isSameMonth(today, date, generateConfig)
  148. })
  149. }, /*#__PURE__*/React.createElement("div", {
  150. className: `${calendarPrefixCls}-date-value`
  151. }, months[generateConfig.getMonth(date)]), /*#__PURE__*/React.createElement("div", {
  152. className: `${calendarPrefixCls}-date-content`
  153. }, cellRender ? cellRender(date, info) : monthCellRender === null || monthCellRender === void 0 ? void 0 : monthCellRender(date)));
  154. }, [monthFullCellRender, monthCellRender, cellRender, fullCellRender]);
  155. const [contextLocale] = (0, _locale.useLocale)('Calendar', _en_US.default);
  156. const locale = Object.assign(Object.assign({}, contextLocale), props.locale);
  157. const mergedCellRender = (current, info) => {
  158. if (info.type === 'date') {
  159. return dateRender(current, info);
  160. }
  161. if (info.type === 'month') {
  162. return monthRender(current, Object.assign(Object.assign({}, info), {
  163. locale: locale === null || locale === void 0 ? void 0 : locale.lang
  164. }));
  165. }
  166. };
  167. return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
  168. className: (0, _classnames.default)(calendarPrefixCls, {
  169. [`${calendarPrefixCls}-full`]: fullscreen,
  170. [`${calendarPrefixCls}-mini`]: !fullscreen,
  171. [`${calendarPrefixCls}-rtl`]: direction === 'rtl'
  172. }, contextClassName, className, rootClassName, hashId, cssVarCls),
  173. style: Object.assign(Object.assign({}, contextStyle), style)
  174. }, headerRender ? headerRender({
  175. value: mergedValue,
  176. type: mergedMode,
  177. onChange: nextDate => {
  178. onInternalSelect(nextDate, 'customize');
  179. },
  180. onTypeChange: triggerModeChange
  181. }) : (/*#__PURE__*/React.createElement(_Header.default, {
  182. prefixCls: calendarPrefixCls,
  183. value: mergedValue,
  184. generateConfig: generateConfig,
  185. mode: mergedMode,
  186. fullscreen: fullscreen,
  187. locale: locale === null || locale === void 0 ? void 0 : locale.lang,
  188. validRange: validRange,
  189. onChange: onInternalSelect,
  190. onModeChange: triggerModeChange
  191. })), /*#__PURE__*/React.createElement(_rcPicker.PickerPanel, {
  192. value: mergedValue,
  193. prefixCls: prefixCls,
  194. locale: locale === null || locale === void 0 ? void 0 : locale.lang,
  195. generateConfig: generateConfig,
  196. cellRender: mergedCellRender,
  197. onSelect: nextDate => {
  198. onInternalSelect(nextDate, panelMode);
  199. },
  200. mode: panelMode,
  201. picker: panelMode,
  202. disabledDate: mergedDisabledDate,
  203. hideHeader: true,
  204. showWeek: showWeek
  205. })));
  206. };
  207. if (process.env.NODE_ENV !== 'production') {
  208. Calendar.displayName = 'Calendar';
  209. }
  210. return Calendar;
  211. };
  212. var _default = exports.default = generateCalendar;