index.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. import DateBody from './DateBody';
  5. import DateHeader from './DateHeader';
  6. import { WEEK_DAY_COUNT } from '../../utils/dateUtil';
  7. import { createKeydownHandler } from '../../utils/uiUtil';
  8. import classNames from '../../../_util/classNames';
  9. import useMergeProps from '../../hooks/useMergeProps';
  10. const DATE_ROW_COUNT = 6;
  11. function DatePanel(_props) {
  12. const props = useMergeProps(_props);
  13. const {
  14. prefixCls,
  15. panelName = 'date',
  16. keyboardConfig,
  17. active,
  18. operationRef,
  19. generateConfig,
  20. value,
  21. viewDate,
  22. onViewDateChange,
  23. onPanelChange,
  24. onSelect
  25. } = props;
  26. const panelPrefixCls = `${prefixCls}-${panelName}-panel`;
  27. // ======================= Keyboard =======================
  28. operationRef.value = {
  29. onKeydown: event => createKeydownHandler(event, _extends({
  30. onLeftRight: diff => {
  31. onSelect(generateConfig.addDate(value || viewDate, diff), 'key');
  32. },
  33. onCtrlLeftRight: diff => {
  34. onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
  35. },
  36. onUpDown: diff => {
  37. onSelect(generateConfig.addDate(value || viewDate, diff * WEEK_DAY_COUNT), 'key');
  38. },
  39. onPageUpDown: diff => {
  40. onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
  41. }
  42. }, keyboardConfig))
  43. };
  44. // ==================== View Operation ====================
  45. const onYearChange = diff => {
  46. const newDate = generateConfig.addYear(viewDate, diff);
  47. onViewDateChange(newDate);
  48. onPanelChange(null, newDate);
  49. };
  50. const onMonthChange = diff => {
  51. const newDate = generateConfig.addMonth(viewDate, diff);
  52. onViewDateChange(newDate);
  53. onPanelChange(null, newDate);
  54. };
  55. return _createVNode("div", {
  56. "class": classNames(panelPrefixCls, {
  57. [`${panelPrefixCls}-active`]: active
  58. })
  59. }, [_createVNode(DateHeader, _objectSpread(_objectSpread({}, props), {}, {
  60. "prefixCls": prefixCls,
  61. "value": value,
  62. "viewDate": viewDate,
  63. "onPrevYear": () => {
  64. onYearChange(-1);
  65. },
  66. "onNextYear": () => {
  67. onYearChange(1);
  68. },
  69. "onPrevMonth": () => {
  70. onMonthChange(-1);
  71. },
  72. "onNextMonth": () => {
  73. onMonthChange(1);
  74. },
  75. "onMonthClick": () => {
  76. onPanelChange('month', viewDate);
  77. },
  78. "onYearClick": () => {
  79. onPanelChange('year', viewDate);
  80. }
  81. }), null), _createVNode(DateBody, _objectSpread(_objectSpread({}, props), {}, {
  82. "onSelect": date => onSelect(date, 'mouse'),
  83. "prefixCls": prefixCls,
  84. "value": value,
  85. "viewDate": viewDate,
  86. "rowCount": DATE_ROW_COUNT
  87. }), null)]);
  88. }
  89. DatePanel.displayName = 'DatePanel';
  90. DatePanel.inheritAttrs = false;
  91. export default DatePanel;