index.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import PropTypes from '../_util/vue-types';
  3. import { getComponentFromProp, getOptionProps } from '../_util/props-util';
  4. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  5. import Icon from '../icon';
  6. import Breadcrumb from '../breadcrumb';
  7. import Avatar from '../avatar';
  8. import TransButton from '../_util/transButton';
  9. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  10. import Base from '../base';
  11. export var PageHeaderProps = {
  12. backIcon: PropTypes.any,
  13. prefixCls: PropTypes.string,
  14. title: PropTypes.any,
  15. subTitle: PropTypes.any,
  16. breadcrumb: PropTypes.object,
  17. tags: PropTypes.any,
  18. footer: PropTypes.any,
  19. extra: PropTypes.any,
  20. avatar: PropTypes.object,
  21. ghost: PropTypes.bool
  22. };
  23. var renderBack = function renderBack(instance, prefixCls, backIcon, onBack) {
  24. // eslint-disable-next-line no-unused-vars
  25. var h = instance.$createElement;
  26. if (!backIcon || !onBack) {
  27. return null;
  28. }
  29. return h(
  30. LocaleReceiver,
  31. {
  32. attrs: { componentName: 'PageHeader' }
  33. },
  34. [function (_ref) {
  35. var back = _ref.back;
  36. return h(
  37. 'div',
  38. { 'class': prefixCls + '-back' },
  39. [h(
  40. TransButton,
  41. {
  42. on: {
  43. 'click': function click(e) {
  44. instance.$emit('back', e);
  45. }
  46. },
  47. 'class': prefixCls + '-back-button',
  48. attrs: { 'aria-label': back
  49. }
  50. },
  51. [backIcon]
  52. )]
  53. );
  54. }]
  55. );
  56. };
  57. var renderBreadcrumb = function renderBreadcrumb(h, breadcrumb) {
  58. return h(Breadcrumb, breadcrumb);
  59. };
  60. var renderTitle = function renderTitle(h, prefixCls, instance) {
  61. var avatar = instance.avatar;
  62. var title = getComponentFromProp(instance, 'title');
  63. var subTitle = getComponentFromProp(instance, 'subTitle');
  64. var tags = getComponentFromProp(instance, 'tags');
  65. var extra = getComponentFromProp(instance, 'extra');
  66. var backIcon = getComponentFromProp(instance, 'backIcon') !== undefined ? getComponentFromProp(instance, 'backIcon') : h(Icon, {
  67. attrs: { type: 'arrow-left' }
  68. });
  69. var onBack = instance.$listeners.back;
  70. var headingPrefixCls = prefixCls + '-heading';
  71. if (title || subTitle || tags || extra) {
  72. var backIconDom = renderBack(instance, prefixCls, backIcon, onBack);
  73. return h(
  74. 'div',
  75. { 'class': headingPrefixCls },
  76. [backIconDom, avatar && h(Avatar, avatar), title && h(
  77. 'span',
  78. { 'class': headingPrefixCls + '-title' },
  79. [title]
  80. ), subTitle && h(
  81. 'span',
  82. { 'class': headingPrefixCls + '-sub-title' },
  83. [subTitle]
  84. ), tags && h(
  85. 'span',
  86. { 'class': headingPrefixCls + '-tags' },
  87. [tags]
  88. ), extra && h(
  89. 'span',
  90. { 'class': headingPrefixCls + '-extra' },
  91. [extra]
  92. )]
  93. );
  94. }
  95. return null;
  96. };
  97. var renderFooter = function renderFooter(h, prefixCls, footer) {
  98. if (footer) {
  99. return h(
  100. 'div',
  101. { 'class': prefixCls + '-footer' },
  102. [footer]
  103. );
  104. }
  105. return null;
  106. };
  107. var renderChildren = function renderChildren(h, prefixCls, children) {
  108. return h(
  109. 'div',
  110. { 'class': prefixCls + '-content' },
  111. [children]
  112. );
  113. };
  114. var PageHeader = {
  115. name: 'APageHeader',
  116. props: PageHeaderProps,
  117. inject: {
  118. configProvider: { 'default': function _default() {
  119. return ConfigConsumerProps;
  120. } }
  121. },
  122. render: function render(h) {
  123. var _configProvider = this.configProvider,
  124. getPrefixCls = _configProvider.getPrefixCls,
  125. pageHeader = _configProvider.pageHeader;
  126. var props = getOptionProps(this);
  127. var customizePrefixCls = props.prefixCls,
  128. breadcrumb = props.breadcrumb;
  129. var footer = getComponentFromProp(this, 'footer');
  130. var children = this.$slots['default'];
  131. var ghost = true;
  132. // Use `ghost` from `props` or from `ConfigProvider` instead.
  133. if ('ghost' in props) {
  134. ghost = props.ghost;
  135. } else if (pageHeader && 'ghost' in pageHeader) {
  136. ghost = pageHeader.ghost;
  137. }
  138. var prefixCls = getPrefixCls('page-header', customizePrefixCls);
  139. var breadcrumbDom = breadcrumb && breadcrumb.props && breadcrumb.props.routes ? renderBreadcrumb(h, breadcrumb) : null;
  140. var className = [prefixCls, _defineProperty({
  141. 'has-breadcrumb': breadcrumbDom,
  142. 'has-footer': footer
  143. }, prefixCls + '-ghost', ghost)];
  144. return h(
  145. 'div',
  146. { 'class': className },
  147. [breadcrumbDom, renderTitle(h, prefixCls, this), children && renderChildren(h, prefixCls, children), renderFooter(h, prefixCls, footer)]
  148. );
  149. }
  150. };
  151. /* istanbul ignore next */
  152. PageHeader.install = function (Vue) {
  153. Vue.use(Base);
  154. Vue.component(PageHeader.name, PageHeader);
  155. };
  156. export default PageHeader;