index.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import classNames from 'classnames';
  5. import * as React from 'react';
  6. import { formatValue, getWeekStartDate, isSameDate, isSameMonth, WEEK_DAY_COUNT } from "../../utils/dateUtil";
  7. import { PanelContext, useInfo } from "../context";
  8. import PanelBody from "../PanelBody";
  9. import PanelHeader from "../PanelHeader";
  10. export default function DatePanel(props) {
  11. var prefixCls = props.prefixCls,
  12. _props$panelName = props.panelName,
  13. panelName = _props$panelName === void 0 ? 'date' : _props$panelName,
  14. locale = props.locale,
  15. generateConfig = props.generateConfig,
  16. pickerValue = props.pickerValue,
  17. onPickerValueChange = props.onPickerValueChange,
  18. onModeChange = props.onModeChange,
  19. _props$mode = props.mode,
  20. mode = _props$mode === void 0 ? 'date' : _props$mode,
  21. disabledDate = props.disabledDate,
  22. onSelect = props.onSelect,
  23. onHover = props.onHover,
  24. showWeek = props.showWeek;
  25. var panelPrefixCls = "".concat(prefixCls, "-").concat(panelName, "-panel");
  26. var cellPrefixCls = "".concat(prefixCls, "-cell");
  27. var isWeek = mode === 'week';
  28. // ========================== Base ==========================
  29. var _useInfo = useInfo(props, mode),
  30. _useInfo2 = _slicedToArray(_useInfo, 2),
  31. info = _useInfo2[0],
  32. now = _useInfo2[1];
  33. var weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
  34. var monthStartDate = generateConfig.setDate(pickerValue, 1);
  35. var baseDate = getWeekStartDate(locale.locale, generateConfig, monthStartDate);
  36. var month = generateConfig.getMonth(pickerValue);
  37. // =========================== PrefixColumn ===========================
  38. var showPrefixColumn = showWeek === undefined ? isWeek : showWeek;
  39. var prefixColumn = showPrefixColumn ? function (date) {
  40. // >>> Additional check for disabled
  41. var disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, {
  42. type: 'week'
  43. });
  44. return /*#__PURE__*/React.createElement("td", {
  45. key: "week",
  46. className: classNames(cellPrefixCls, "".concat(cellPrefixCls, "-week"), _defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled))
  47. // Operation: Same as code in PanelBody
  48. ,
  49. onClick: function onClick() {
  50. if (!disabled) {
  51. onSelect(date);
  52. }
  53. },
  54. onMouseEnter: function onMouseEnter() {
  55. if (!disabled) {
  56. onHover === null || onHover === void 0 || onHover(date);
  57. }
  58. },
  59. onMouseLeave: function onMouseLeave() {
  60. if (!disabled) {
  61. onHover === null || onHover === void 0 || onHover(null);
  62. }
  63. }
  64. }, /*#__PURE__*/React.createElement("div", {
  65. className: "".concat(cellPrefixCls, "-inner")
  66. }, generateConfig.locale.getWeek(locale.locale, date)));
  67. } : null;
  68. // ========================= Cells ==========================
  69. // >>> Header Cells
  70. var headerCells = [];
  71. var weekDaysLocale = locale.shortWeekDays || (generateConfig.locale.getShortWeekDays ? generateConfig.locale.getShortWeekDays(locale.locale) : []);
  72. if (prefixColumn) {
  73. headerCells.push( /*#__PURE__*/React.createElement("th", {
  74. key: "empty"
  75. }, /*#__PURE__*/React.createElement("span", {
  76. style: {
  77. width: 0,
  78. height: 0,
  79. position: 'absolute',
  80. overflow: 'hidden',
  81. opacity: 0
  82. }
  83. }, locale.week)));
  84. }
  85. for (var i = 0; i < WEEK_DAY_COUNT; i += 1) {
  86. headerCells.push( /*#__PURE__*/React.createElement("th", {
  87. key: i
  88. }, weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]));
  89. }
  90. // >>> Body Cells
  91. var getCellDate = function getCellDate(date, offset) {
  92. return generateConfig.addDate(date, offset);
  93. };
  94. var getCellText = function getCellText(date) {
  95. return formatValue(date, {
  96. locale: locale,
  97. format: locale.cellDateFormat,
  98. generateConfig: generateConfig
  99. });
  100. };
  101. var getCellClassName = function getCellClassName(date) {
  102. var classObj = _defineProperty(_defineProperty({}, "".concat(prefixCls, "-cell-in-view"), isSameMonth(generateConfig, date, pickerValue)), "".concat(prefixCls, "-cell-today"), isSameDate(generateConfig, date, now));
  103. return classObj;
  104. };
  105. // ========================= Header =========================
  106. var monthsLocale = locale.shortMonths || (generateConfig.locale.getShortMonths ? generateConfig.locale.getShortMonths(locale.locale) : []);
  107. var yearNode = /*#__PURE__*/React.createElement("button", {
  108. type: "button",
  109. "aria-label": locale.yearSelect,
  110. key: "year",
  111. onClick: function onClick() {
  112. onModeChange('year', pickerValue);
  113. },
  114. tabIndex: -1,
  115. className: "".concat(prefixCls, "-year-btn")
  116. }, formatValue(pickerValue, {
  117. locale: locale,
  118. format: locale.yearFormat,
  119. generateConfig: generateConfig
  120. }));
  121. var monthNode = /*#__PURE__*/React.createElement("button", {
  122. type: "button",
  123. "aria-label": locale.monthSelect,
  124. key: "month",
  125. onClick: function onClick() {
  126. onModeChange('month', pickerValue);
  127. },
  128. tabIndex: -1,
  129. className: "".concat(prefixCls, "-month-btn")
  130. }, locale.monthFormat ? formatValue(pickerValue, {
  131. locale: locale,
  132. format: locale.monthFormat,
  133. generateConfig: generateConfig
  134. }) : monthsLocale[month]);
  135. var monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode];
  136. // ========================= Render =========================
  137. return /*#__PURE__*/React.createElement(PanelContext.Provider, {
  138. value: info
  139. }, /*#__PURE__*/React.createElement("div", {
  140. className: classNames(panelPrefixCls, showWeek && "".concat(panelPrefixCls, "-show-week"))
  141. }, /*#__PURE__*/React.createElement(PanelHeader, {
  142. offset: function offset(distance) {
  143. return generateConfig.addMonth(pickerValue, distance);
  144. },
  145. superOffset: function superOffset(distance) {
  146. return generateConfig.addYear(pickerValue, distance);
  147. },
  148. onChange: onPickerValueChange
  149. // Limitation
  150. ,
  151. getStart: function getStart(date) {
  152. return generateConfig.setDate(date, 1);
  153. },
  154. getEnd: function getEnd(date) {
  155. var clone = generateConfig.setDate(date, 1);
  156. clone = generateConfig.addMonth(clone, 1);
  157. return generateConfig.addDate(clone, -1);
  158. }
  159. }, monthYearNodes), /*#__PURE__*/React.createElement(PanelBody, _extends({
  160. titleFormat: locale.fieldDateFormat
  161. }, props, {
  162. colNum: WEEK_DAY_COUNT,
  163. rowNum: 6,
  164. baseDate: baseDate
  165. // Header
  166. ,
  167. headerCells: headerCells
  168. // Body
  169. ,
  170. getCellDate: getCellDate,
  171. getCellText: getCellText,
  172. getCellClassName: getCellClassName,
  173. prefixColumn: prefixColumn,
  174. cellSelection: !isWeek
  175. }))));
  176. }