Timeline.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import { createVNode as _createVNode } from "vue";
  3. import { cloneVNode, defineComponent } from 'vue';
  4. import classNames from '../_util/classNames';
  5. import PropTypes from '../_util/vue-types';
  6. import { filterEmpty } from '../_util/props-util';
  7. import initDefaultProps from '../_util/props-util/initDefaultProps';
  8. import TimelineItem from './TimelineItem';
  9. import LoadingOutlined from "@ant-design/icons-vue/es/icons/LoadingOutlined";
  10. import { tuple } from '../_util/type';
  11. import useConfigInject from '../_util/hooks/useConfigInject';
  12. export var timelineProps = function timelineProps() {
  13. return {
  14. prefixCls: String,
  15. /** 指定最后一个幽灵节点是否存在或内容 */
  16. pending: PropTypes.any,
  17. pendingDot: PropTypes.any,
  18. reverse: {
  19. type: Boolean,
  20. default: undefined
  21. },
  22. mode: PropTypes.oneOf(tuple('left', 'alternate', 'right', ''))
  23. };
  24. };
  25. export default defineComponent({
  26. compatConfig: {
  27. MODE: 3
  28. },
  29. name: 'ATimeline',
  30. props: initDefaultProps(timelineProps(), {
  31. reverse: false,
  32. mode: ''
  33. }),
  34. slots: ['pending', 'pendingDot'],
  35. setup: function setup(props, _ref) {
  36. var slots = _ref.slots;
  37. var _useConfigInject = useConfigInject('timeline', props),
  38. prefixCls = _useConfigInject.prefixCls,
  39. direction = _useConfigInject.direction;
  40. var getPositionCls = function getPositionCls(ele, idx) {
  41. var eleProps = ele.props || {};
  42. if (props.mode === 'alternate') {
  43. if (eleProps.position === 'right') return "".concat(prefixCls.value, "-item-right");
  44. if (eleProps.position === 'left') return "".concat(prefixCls.value, "-item-left");
  45. return idx % 2 === 0 ? "".concat(prefixCls.value, "-item-left") : "".concat(prefixCls.value, "-item-right");
  46. }
  47. if (props.mode === 'left') return "".concat(prefixCls.value, "-item-left");
  48. if (props.mode === 'right') return "".concat(prefixCls.value, "-item-right");
  49. if (eleProps.position === 'right') return "".concat(prefixCls.value, "-item-right");
  50. return '';
  51. };
  52. return function () {
  53. var _slots$pending, _slots$pendingDot, _slots$default, _classNames;
  54. var _props$pending = props.pending,
  55. pending = _props$pending === void 0 ? (_slots$pending = slots.pending) === null || _slots$pending === void 0 ? void 0 : _slots$pending.call(slots) : _props$pending,
  56. _props$pendingDot = props.pendingDot,
  57. pendingDot = _props$pendingDot === void 0 ? (_slots$pendingDot = slots.pendingDot) === null || _slots$pendingDot === void 0 ? void 0 : _slots$pendingDot.call(slots) : _props$pendingDot,
  58. reverse = props.reverse,
  59. mode = props.mode;
  60. var pendingNode = typeof pending === 'boolean' ? null : pending;
  61. var children = filterEmpty((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  62. var pendingItem = pending ? _createVNode(TimelineItem, {
  63. "pending": !!pending,
  64. "dot": pendingDot || _createVNode(LoadingOutlined, null, null)
  65. }, {
  66. default: function _default() {
  67. return [pendingNode];
  68. }
  69. }) : null;
  70. if (pendingItem) {
  71. children.push(pendingItem);
  72. }
  73. var timeLineItems = reverse ? children.reverse() : children;
  74. var itemsCount = timeLineItems.length;
  75. var lastCls = "".concat(prefixCls.value, "-item-last");
  76. var items = timeLineItems.map(function (ele, idx) {
  77. var pendingClass = idx === itemsCount - 2 ? lastCls : '';
  78. var readyClass = idx === itemsCount - 1 ? lastCls : '';
  79. return cloneVNode(ele, {
  80. class: classNames([!reverse && !!pending ? pendingClass : readyClass, getPositionCls(ele, idx)])
  81. });
  82. });
  83. var hasLabelItem = timeLineItems.some(function (item) {
  84. var _item$props, _item$children;
  85. return !!((_item$props = item.props) !== null && _item$props !== void 0 && _item$props.label || (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.label);
  86. });
  87. var classString = classNames(prefixCls.value, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-pending"), !!pending), _defineProperty(_classNames, "".concat(prefixCls.value, "-reverse"), !!reverse), _defineProperty(_classNames, "".concat(prefixCls.value, "-").concat(mode), !!mode && !hasLabelItem), _defineProperty(_classNames, "".concat(prefixCls.value, "-label"), hasLabelItem), _defineProperty(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames));
  88. return _createVNode("ul", {
  89. "class": classString
  90. }, [items]);
  91. };
  92. }
  93. });