index.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import TimeHeader from './TimeHeader';
  4. import TimeBody from './TimeBody';
  5. import { createKeydownHandler } from '../../utils/uiUtil';
  6. import classNames from '../../../_util/classNames';
  7. import { ref } from 'vue';
  8. import useMergeProps from '../../hooks/useMergeProps';
  9. const countBoolean = boolList => boolList.filter(bool => bool !== false).length;
  10. function TimePanel(_props) {
  11. const props = useMergeProps(_props);
  12. const {
  13. generateConfig,
  14. format = 'HH:mm:ss',
  15. prefixCls,
  16. active,
  17. operationRef,
  18. showHour,
  19. showMinute,
  20. showSecond,
  21. use12Hours = false,
  22. onSelect,
  23. value
  24. } = props;
  25. const panelPrefixCls = `${prefixCls}-time-panel`;
  26. const bodyOperationRef = ref();
  27. // ======================= Keyboard =======================
  28. const activeColumnIndex = ref(-1);
  29. const columnsCount = countBoolean([showHour, showMinute, showSecond, use12Hours]);
  30. operationRef.value = {
  31. onKeydown: event => createKeydownHandler(event, {
  32. onLeftRight: diff => {
  33. activeColumnIndex.value = (activeColumnIndex.value + diff + columnsCount) % columnsCount;
  34. },
  35. onUpDown: diff => {
  36. if (activeColumnIndex.value === -1) {
  37. activeColumnIndex.value = 0;
  38. } else if (bodyOperationRef.value) {
  39. bodyOperationRef.value.onUpDown(diff);
  40. }
  41. },
  42. onEnter: () => {
  43. onSelect(value || generateConfig.getNow(), 'key');
  44. activeColumnIndex.value = -1;
  45. }
  46. }),
  47. onBlur: () => {
  48. activeColumnIndex.value = -1;
  49. }
  50. };
  51. return _createVNode("div", {
  52. "class": classNames(panelPrefixCls, {
  53. [`${panelPrefixCls}-active`]: active
  54. })
  55. }, [_createVNode(TimeHeader, _objectSpread(_objectSpread({}, props), {}, {
  56. "format": format,
  57. "prefixCls": prefixCls
  58. }), null), _createVNode(TimeBody, _objectSpread(_objectSpread({}, props), {}, {
  59. "prefixCls": prefixCls,
  60. "activeColumnIndex": activeColumnIndex.value,
  61. "operationRef": bodyOperationRef
  62. }), null)]);
  63. }
  64. TimePanel.displayName = 'TimePanel';
  65. TimePanel.inheritAttrs = false;
  66. export default TimePanel;