DateBody.js 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import { WEEK_DAY_COUNT, getWeekStartDate, isSameDate, isSameMonth, formatValue } from '../../utils/dateUtil';
  4. import useCellClassName from '../../hooks/useCellClassName';
  5. import PanelBody from '../PanelBody';
  6. import { useInjectRange } from '../../RangeContext';
  7. import useMergeProps from '../../hooks/useMergeProps';
  8. function DateBody(_props) {
  9. const props = useMergeProps(_props);
  10. const {
  11. prefixCls,
  12. generateConfig,
  13. prefixColumn,
  14. locale,
  15. rowCount,
  16. viewDate,
  17. value,
  18. dateRender
  19. } = props;
  20. const {
  21. rangedValue,
  22. hoverRangedValue
  23. } = useInjectRange();
  24. const baseDate = getWeekStartDate(locale.locale, generateConfig, viewDate);
  25. const cellPrefixCls = `${prefixCls}-cell`;
  26. const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
  27. const today = generateConfig.getNow();
  28. // ============================== Header ==============================
  29. const headerCells = [];
  30. const weekDaysLocale = locale.shortWeekDays || (generateConfig.locale.getShortWeekDays ? generateConfig.locale.getShortWeekDays(locale.locale) : []);
  31. if (prefixColumn) {
  32. headerCells.push(_createVNode("th", {
  33. "key": "empty",
  34. "aria-label": "empty cell"
  35. }, null));
  36. }
  37. for (let i = 0; i < WEEK_DAY_COUNT; i += 1) {
  38. headerCells.push(_createVNode("th", {
  39. "key": i
  40. }, [weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]]));
  41. }
  42. // =============================== Body ===============================
  43. const getCellClassName = useCellClassName({
  44. cellPrefixCls,
  45. today,
  46. value,
  47. generateConfig,
  48. rangedValue: prefixColumn ? null : rangedValue.value,
  49. hoverRangedValue: prefixColumn ? null : hoverRangedValue.value,
  50. isSameCell: (current, target) => isSameDate(generateConfig, current, target),
  51. isInView: date => isSameMonth(generateConfig, date, viewDate),
  52. offsetCell: (date, offset) => generateConfig.addDate(date, offset)
  53. });
  54. const getCellNode = dateRender ? date => dateRender({
  55. current: date,
  56. today
  57. }) : undefined;
  58. return _createVNode(PanelBody, _objectSpread(_objectSpread({}, props), {}, {
  59. "rowNum": rowCount,
  60. "colNum": WEEK_DAY_COUNT,
  61. "baseDate": baseDate,
  62. "getCellNode": getCellNode,
  63. "getCellText": generateConfig.getDate,
  64. "getCellClassName": getCellClassName,
  65. "getCellDate": generateConfig.addDate,
  66. "titleCell": date => formatValue(date, {
  67. locale,
  68. format: 'YYYY-MM-DD',
  69. generateConfig
  70. }),
  71. "headerCells": headerCells
  72. }), null);
  73. }
  74. DateBody.displayName = 'DateBody';
  75. DateBody.inheritAttrs = false;
  76. DateBody.props = ['prefixCls', 'generateConfig', 'value?', 'viewDate', 'locale', 'rowCount', 'onSelect', 'dateRender?', 'disabledDate?',
  77. // Used for week panel
  78. 'prefixColumn?', 'rowClassName?'];
  79. export default DateBody;