index.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import MonthHeader from './MonthHeader';
  4. import MonthBody, { MONTH_COL_COUNT } from './MonthBody';
  5. import { createKeydownHandler } from '../../utils/uiUtil';
  6. import useMergeProps from '../../hooks/useMergeProps';
  7. function MonthPanel(_props) {
  8. const props = useMergeProps(_props);
  9. const {
  10. prefixCls,
  11. operationRef,
  12. onViewDateChange,
  13. generateConfig,
  14. value,
  15. viewDate,
  16. onPanelChange,
  17. onSelect
  18. } = props;
  19. const panelPrefixCls = `${prefixCls}-month-panel`;
  20. // ======================= Keyboard =======================
  21. operationRef.value = {
  22. onKeydown: event => createKeydownHandler(event, {
  23. onLeftRight: diff => {
  24. onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
  25. },
  26. onCtrlLeftRight: diff => {
  27. onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
  28. },
  29. onUpDown: diff => {
  30. onSelect(generateConfig.addMonth(value || viewDate, diff * MONTH_COL_COUNT), 'key');
  31. },
  32. onEnter: () => {
  33. onPanelChange('date', value || viewDate);
  34. }
  35. })
  36. };
  37. // ==================== View Operation ====================
  38. const onYearChange = diff => {
  39. const newDate = generateConfig.addYear(viewDate, diff);
  40. onViewDateChange(newDate);
  41. onPanelChange(null, newDate);
  42. };
  43. return _createVNode("div", {
  44. "class": panelPrefixCls
  45. }, [_createVNode(MonthHeader, _objectSpread(_objectSpread({}, props), {}, {
  46. "prefixCls": prefixCls,
  47. "onPrevYear": () => {
  48. onYearChange(-1);
  49. },
  50. "onNextYear": () => {
  51. onYearChange(1);
  52. },
  53. "onYearClick": () => {
  54. onPanelChange('year', viewDate);
  55. }
  56. }), null), _createVNode(MonthBody, _objectSpread(_objectSpread({}, props), {}, {
  57. "prefixCls": prefixCls,
  58. "onSelect": date => {
  59. onSelect(date, 'mouse');
  60. onPanelChange('date', date);
  61. }
  62. }), null)]);
  63. }
  64. MonthPanel.displayName = 'MonthPanel';
  65. MonthPanel.inheritAttrs = false;
  66. export default MonthPanel;