Timeline.js 5.2 KB

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