TimeUnitColumn.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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 _uiUtil = require("../../utils/uiUtil");
  9. var _PanelContext = require("../../PanelContext");
  10. var _classNames = _interopRequireDefault(require("../../../_util/classNames"));
  11. var _default = exports.default = (0, _vue.defineComponent)({
  12. name: 'TimeUnitColumn',
  13. props: ['prefixCls', 'units', 'onSelect', 'value', 'active', 'hideDisabledOptions'],
  14. setup(props) {
  15. const {
  16. open
  17. } = (0, _PanelContext.useInjectPanel)();
  18. const ulRef = (0, _vue.shallowRef)(null);
  19. const liRefs = (0, _vue.ref)(new Map());
  20. const scrollRef = (0, _vue.ref)();
  21. (0, _vue.watch)(() => props.value, () => {
  22. const li = liRefs.value.get(props.value);
  23. if (li && open.value !== false) {
  24. (0, _uiUtil.scrollTo)(ulRef.value, li.offsetTop, 120);
  25. }
  26. });
  27. (0, _vue.onBeforeUnmount)(() => {
  28. var _a;
  29. (_a = scrollRef.value) === null || _a === void 0 ? void 0 : _a.call(scrollRef);
  30. });
  31. (0, _vue.watch)(open, () => {
  32. var _a;
  33. (_a = scrollRef.value) === null || _a === void 0 ? void 0 : _a.call(scrollRef);
  34. (0, _vue.nextTick)(() => {
  35. if (open.value) {
  36. const li = liRefs.value.get(props.value);
  37. if (li) {
  38. scrollRef.value = (0, _uiUtil.waitElementReady)(li, () => {
  39. (0, _uiUtil.scrollTo)(ulRef.value, li.offsetTop, 0);
  40. });
  41. }
  42. }
  43. });
  44. }, {
  45. immediate: true,
  46. flush: 'post'
  47. });
  48. return () => {
  49. const {
  50. prefixCls,
  51. units,
  52. onSelect,
  53. value,
  54. active,
  55. hideDisabledOptions
  56. } = props;
  57. const cellPrefixCls = `${prefixCls}-cell`;
  58. return (0, _vue.createVNode)("ul", {
  59. "class": (0, _classNames.default)(`${prefixCls}-column`, {
  60. [`${prefixCls}-column-active`]: active
  61. }),
  62. "ref": ulRef,
  63. "style": {
  64. position: 'relative'
  65. }
  66. }, [units.map(unit => {
  67. if (hideDisabledOptions && unit.disabled) {
  68. return null;
  69. }
  70. return (0, _vue.createVNode)("li", {
  71. "key": unit.value,
  72. "ref": element => {
  73. liRefs.value.set(unit.value, element);
  74. },
  75. "class": (0, _classNames.default)(cellPrefixCls, {
  76. [`${cellPrefixCls}-disabled`]: unit.disabled,
  77. [`${cellPrefixCls}-selected`]: value === unit.value
  78. }),
  79. "onClick": () => {
  80. if (unit.disabled) {
  81. return;
  82. }
  83. onSelect(unit.value);
  84. }
  85. }, [(0, _vue.createVNode)("div", {
  86. "class": `${cellPrefixCls}-inner`
  87. }, [unit.label])]);
  88. })]);
  89. };
  90. }
  91. });