index.js 2.2 KB

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