index.js 5.8 KB

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