index.js 2.6 KB

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