Timeline.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import _extends from 'babel-runtime/helpers/extends';
  2. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  3. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  4. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  5. import classNames from 'classnames';
  6. import PropTypes from '../_util/vue-types';
  7. import { getOptionProps, getPropsData, initDefaultProps, filterEmpty, getComponentFromProp, getListeners } from '../_util/props-util';
  8. import { cloneElement } from '../_util/vnode';
  9. import TimelineItem from './TimelineItem';
  10. import Icon from '../icon';
  11. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  12. export var TimelineProps = {
  13. prefixCls: PropTypes.string,
  14. /** 指定最后一个幽灵节点是否存在或内容 */
  15. pending: PropTypes.any,
  16. pendingDot: PropTypes.string,
  17. reverse: PropTypes.bool,
  18. mode: PropTypes.oneOf(['left', 'alternate', 'right', ''])
  19. };
  20. export default {
  21. name: 'ATimeline',
  22. props: initDefaultProps(TimelineProps, {
  23. reverse: false,
  24. mode: ''
  25. }),
  26. inject: {
  27. configProvider: { 'default': function _default() {
  28. return ConfigConsumerProps;
  29. } }
  30. },
  31. render: function render() {
  32. var _classNames;
  33. var h = arguments[0];
  34. var _getOptionProps = getOptionProps(this),
  35. customizePrefixCls = _getOptionProps.prefixCls,
  36. reverse = _getOptionProps.reverse,
  37. mode = _getOptionProps.mode,
  38. restProps = _objectWithoutProperties(_getOptionProps, ['prefixCls', 'reverse', 'mode']);
  39. var getPrefixCls = this.configProvider.getPrefixCls;
  40. var prefixCls = getPrefixCls('timeline', customizePrefixCls);
  41. var pendingDot = getComponentFromProp(this, 'pendingDot');
  42. var pending = getComponentFromProp(this, 'pending');
  43. var pendingNode = typeof pending === 'boolean' ? null : pending;
  44. var classString = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-pending', !!pending), _defineProperty(_classNames, prefixCls + '-reverse', !!reverse), _defineProperty(_classNames, prefixCls + '-' + mode, !!mode), _classNames));
  45. var children = filterEmpty(this.$slots['default']);
  46. // // Remove falsy items
  47. // const falsylessItems = filterEmpty(this.$slots.default)
  48. // const items = falsylessItems.map((item, idx) => {
  49. // return cloneElement(item, {
  50. // props: {
  51. // last: falsylessItems.length - 1 === idx,
  52. // },
  53. // })
  54. // })
  55. var pendingItem = pending ? h(
  56. TimelineItem,
  57. {
  58. attrs: { pending: !!pending }
  59. },
  60. [h(
  61. 'template',
  62. { slot: 'dot' },
  63. [pendingDot || h(Icon, {
  64. attrs: { type: 'loading' }
  65. })]
  66. ), pendingNode]
  67. ) : null;
  68. var timeLineItems = reverse ? [pendingItem].concat(_toConsumableArray(children.reverse())) : [].concat(_toConsumableArray(children), [pendingItem]);
  69. var getPositionCls = function getPositionCls(ele, idx) {
  70. var eleProps = getPropsData(ele);
  71. if (mode === 'alternate') {
  72. if (eleProps.position === 'right') return prefixCls + '-item-right';
  73. if (eleProps.position === 'left') return prefixCls + '-item-left';
  74. return idx % 2 === 0 ? prefixCls + '-item-left' : prefixCls + '-item-right';
  75. }
  76. if (mode === 'left') return prefixCls + '-item-left';
  77. if (mode === 'right') return prefixCls + '-item-right';
  78. if (eleProps.position === 'right') return prefixCls + '-item-right';
  79. return '';
  80. };
  81. // Remove falsy items
  82. var truthyItems = timeLineItems.filter(function (item) {
  83. return !!item;
  84. });
  85. var itemsCount = truthyItems.length;
  86. var lastCls = prefixCls + '-item-last';
  87. var items = truthyItems.map(function (ele, idx) {
  88. var pendingClass = idx === itemsCount - 2 ? lastCls : '';
  89. var readyClass = idx === itemsCount - 1 ? lastCls : '';
  90. return cloneElement(ele, {
  91. 'class': classNames([!reverse && !!pending ? pendingClass : readyClass, getPositionCls(ele, idx)])
  92. });
  93. });
  94. var timelineProps = {
  95. props: _extends({}, restProps),
  96. 'class': classString,
  97. on: getListeners(this)
  98. };
  99. return h(
  100. 'ul',
  101. timelineProps,
  102. [items]
  103. );
  104. }
  105. };