Breadcrumb.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  2. import PropTypes from '../_util/vue-types';
  3. import { cloneElement } from '../_util/vnode';
  4. import { filterEmpty, getComponentFromProp, getSlotOptions } from '../_util/props-util';
  5. import warning from '../_util/warning';
  6. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  7. import BreadcrumbItem from './BreadcrumbItem';
  8. import Menu from '../menu';
  9. var Route = PropTypes.shape({
  10. path: PropTypes.string,
  11. breadcrumbName: PropTypes.string,
  12. children: PropTypes.array
  13. }).loose;
  14. var BreadcrumbProps = {
  15. prefixCls: PropTypes.string,
  16. routes: PropTypes.arrayOf(Route),
  17. params: PropTypes.any,
  18. separator: PropTypes.any,
  19. itemRender: PropTypes.func
  20. };
  21. function getBreadcrumbName(route, params) {
  22. if (!route.breadcrumbName) {
  23. return null;
  24. }
  25. var paramsKeys = Object.keys(params).join('|');
  26. var name = route.breadcrumbName.replace(new RegExp(':(' + paramsKeys + ')', 'g'), function (replacement, key) {
  27. return params[key] || replacement;
  28. });
  29. return name;
  30. }
  31. export default {
  32. name: 'ABreadcrumb',
  33. props: BreadcrumbProps,
  34. inject: {
  35. configProvider: { 'default': function _default() {
  36. return ConfigConsumerProps;
  37. } }
  38. },
  39. methods: {
  40. defaultItemRender: function defaultItemRender(_ref) {
  41. var route = _ref.route,
  42. params = _ref.params,
  43. routes = _ref.routes,
  44. paths = _ref.paths;
  45. var h = this.$createElement;
  46. var isLastItem = routes.indexOf(route) === routes.length - 1;
  47. var name = getBreadcrumbName(route, params);
  48. return isLastItem ? h('span', [name]) : h(
  49. 'a',
  50. {
  51. attrs: { href: '#/' + paths.join('/') }
  52. },
  53. [name]
  54. );
  55. },
  56. getPath: function getPath(path, params) {
  57. path = (path || '').replace(/^\//, '');
  58. Object.keys(params).forEach(function (key) {
  59. path = path.replace(':' + key, params[key]);
  60. });
  61. return path;
  62. },
  63. addChildPath: function addChildPath(paths, childPath, params) {
  64. var originalPaths = [].concat(_toConsumableArray(paths));
  65. var path = this.getPath(childPath, params);
  66. if (path) {
  67. originalPaths.push(path);
  68. }
  69. return originalPaths;
  70. },
  71. genForRoutes: function genForRoutes(_ref2) {
  72. var _this = this;
  73. var _ref2$routes = _ref2.routes,
  74. routes = _ref2$routes === undefined ? [] : _ref2$routes,
  75. _ref2$params = _ref2.params,
  76. params = _ref2$params === undefined ? {} : _ref2$params,
  77. separator = _ref2.separator,
  78. _ref2$itemRender = _ref2.itemRender,
  79. itemRender = _ref2$itemRender === undefined ? this.defaultItemRender : _ref2$itemRender;
  80. var h = this.$createElement;
  81. var paths = [];
  82. return routes.map(function (route) {
  83. var path = _this.getPath(route.path, params);
  84. if (path) {
  85. paths.push(path);
  86. }
  87. // generated overlay by route.children
  88. var overlay = null;
  89. if (route.children && route.children.length) {
  90. overlay = h(Menu, [route.children.map(function (child) {
  91. return h(
  92. Menu.Item,
  93. { key: child.path || child.breadcrumbName },
  94. [itemRender({
  95. route: child,
  96. params: params,
  97. routes: routes,
  98. paths: _this.addChildPath(paths, child.path, params),
  99. h: _this.$createElement
  100. })]
  101. );
  102. })]);
  103. }
  104. return h(
  105. BreadcrumbItem,
  106. {
  107. attrs: {
  108. overlay: overlay,
  109. separator: separator
  110. },
  111. key: path || route.breadcrumbName
  112. },
  113. [itemRender({ route: route, params: params, routes: routes, paths: paths, h: _this.$createElement })]
  114. );
  115. });
  116. }
  117. },
  118. render: function render() {
  119. var h = arguments[0];
  120. var crumbs = void 0;
  121. var customizePrefixCls = this.prefixCls,
  122. routes = this.routes,
  123. _params = this.params,
  124. params = _params === undefined ? {} : _params,
  125. $slots = this.$slots,
  126. $scopedSlots = this.$scopedSlots;
  127. var getPrefixCls = this.configProvider.getPrefixCls;
  128. var prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
  129. var children = filterEmpty($slots['default']);
  130. var separator = getComponentFromProp(this, 'separator');
  131. var itemRender = this.itemRender || $scopedSlots.itemRender || this.defaultItemRender;
  132. if (routes && routes.length > 0) {
  133. // generated by route
  134. crumbs = this.genForRoutes({
  135. routes: routes,
  136. params: params,
  137. separator: separator,
  138. itemRender: itemRender
  139. });
  140. } else if (children.length) {
  141. crumbs = children.map(function (element, index) {
  142. warning(getSlotOptions(element).__ANT_BREADCRUMB_ITEM || getSlotOptions(element).__ANT_BREADCRUMB_SEPARATOR, 'Breadcrumb', "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children");
  143. return cloneElement(element, {
  144. props: { separator: separator },
  145. key: index
  146. });
  147. });
  148. }
  149. return h(
  150. 'div',
  151. { 'class': prefixCls },
  152. [crumbs]
  153. );
  154. }
  155. };