index.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _typeof from "@babel/runtime/helpers/esm/typeof";
  4. import { createVNode as _createVNode } from "vue";
  5. import DatePanel from '../DatePanel';
  6. import TimePanel from '../TimePanel';
  7. import { tuple } from '../../utils/miscUtil';
  8. import { setDateTime as setTime } from '../../utils/timeUtil';
  9. import KeyCode from '../../../_util/KeyCode';
  10. import classNames from '../../../_util/classNames';
  11. import { ref } from 'vue';
  12. import useMergeProps from '../../hooks/useMergeProps';
  13. var ACTIVE_PANEL = tuple('date', 'time');
  14. function DatetimePanel(_props) {
  15. var props = useMergeProps(_props);
  16. var prefixCls = props.prefixCls,
  17. operationRef = props.operationRef,
  18. generateConfig = props.generateConfig,
  19. value = props.value,
  20. defaultValue = props.defaultValue,
  21. disabledTime = props.disabledTime,
  22. showTime = props.showTime,
  23. onSelect = props.onSelect;
  24. var panelPrefixCls = "".concat(prefixCls, "-datetime-panel");
  25. var activePanel = ref(null);
  26. var dateOperationRef = ref({});
  27. var timeOperationRef = ref({});
  28. var timeProps = _typeof(showTime) === 'object' ? _objectSpread({}, showTime) : {};
  29. // ======================= Keyboard =======================
  30. function getNextActive(offset) {
  31. var activeIndex = ACTIVE_PANEL.indexOf(activePanel.value) + offset;
  32. var nextActivePanel = ACTIVE_PANEL[activeIndex] || null;
  33. return nextActivePanel;
  34. }
  35. var onBlur = function onBlur(e) {
  36. if (timeOperationRef.value.onBlur) {
  37. timeOperationRef.value.onBlur(e);
  38. }
  39. activePanel.value = null;
  40. };
  41. operationRef.value = {
  42. onKeydown: function onKeydown(event) {
  43. // Switch active panel
  44. if (event.which === KeyCode.TAB) {
  45. var nextActivePanel = getNextActive(event.shiftKey ? -1 : 1);
  46. activePanel.value = nextActivePanel;
  47. if (nextActivePanel) {
  48. event.preventDefault();
  49. }
  50. return true;
  51. }
  52. // Operate on current active panel
  53. if (activePanel.value) {
  54. var _ref = activePanel.value === 'date' ? dateOperationRef : timeOperationRef;
  55. if (_ref.value && _ref.value.onKeydown) {
  56. _ref.value.onKeydown(event);
  57. }
  58. return true;
  59. }
  60. // Switch first active panel if operate without panel
  61. if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(event.which)) {
  62. activePanel.value = 'date';
  63. return true;
  64. }
  65. return false;
  66. },
  67. onBlur: onBlur,
  68. onClose: onBlur
  69. };
  70. // ======================== Events ========================
  71. var onInternalSelect = function onInternalSelect(date, source) {
  72. var selectedDate = date;
  73. if (source === 'date' && !value && timeProps.defaultValue) {
  74. // Date with time defaultValue
  75. selectedDate = generateConfig.setHour(selectedDate, generateConfig.getHour(timeProps.defaultValue));
  76. selectedDate = generateConfig.setMinute(selectedDate, generateConfig.getMinute(timeProps.defaultValue));
  77. selectedDate = generateConfig.setSecond(selectedDate, generateConfig.getSecond(timeProps.defaultValue));
  78. } else if (source === 'time' && !value && defaultValue) {
  79. selectedDate = generateConfig.setYear(selectedDate, generateConfig.getYear(defaultValue));
  80. selectedDate = generateConfig.setMonth(selectedDate, generateConfig.getMonth(defaultValue));
  81. selectedDate = generateConfig.setDate(selectedDate, generateConfig.getDate(defaultValue));
  82. }
  83. if (onSelect) {
  84. onSelect(selectedDate, 'mouse');
  85. }
  86. };
  87. // ======================== Render ========================
  88. var disabledTimes = disabledTime ? disabledTime(value || null) : {};
  89. return _createVNode("div", {
  90. "class": classNames(panelPrefixCls, _defineProperty({}, "".concat(panelPrefixCls, "-active"), activePanel.value))
  91. }, [_createVNode(DatePanel, _objectSpread(_objectSpread({}, props), {}, {
  92. "operationRef": dateOperationRef,
  93. "active": activePanel.value === 'date',
  94. "onSelect": function onSelect(date) {
  95. onInternalSelect(setTime(generateConfig, date, !value && _typeof(showTime) === 'object' ? showTime.defaultValue : null), 'date');
  96. }
  97. }), null), _createVNode(TimePanel, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), {}, {
  98. "format": undefined
  99. }, timeProps), disabledTimes), {}, {
  100. "disabledTime": null,
  101. "defaultValue": undefined,
  102. "operationRef": timeOperationRef,
  103. "active": activePanel.value === 'time',
  104. "onSelect": function onSelect(date) {
  105. onInternalSelect(date, 'time');
  106. }
  107. }), null)]);
  108. }
  109. DatetimePanel.displayName = 'DatetimePanel';
  110. DatetimePanel.inheritAttrs = false;
  111. export default DatetimePanel;