layout.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import PropTypes from '../_util/vue-types';
  5. import classNames from 'classnames';
  6. import { getOptionProps, getListeners } from '../_util/props-util';
  7. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  8. export var BasicProps = {
  9. prefixCls: PropTypes.string,
  10. hasSider: PropTypes.boolean,
  11. tagName: PropTypes.string
  12. };
  13. function generator(_ref) {
  14. var suffixCls = _ref.suffixCls,
  15. tagName = _ref.tagName,
  16. name = _ref.name;
  17. return function (BasicComponent) {
  18. return {
  19. name: name,
  20. props: BasicComponent.props,
  21. inject: {
  22. configProvider: { 'default': function _default() {
  23. return ConfigConsumerProps;
  24. } }
  25. },
  26. render: function render() {
  27. var h = arguments[0];
  28. var customizePrefixCls = this.$props.prefixCls;
  29. var getPrefixCls = this.configProvider.getPrefixCls;
  30. var prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
  31. var basicComponentProps = {
  32. props: _extends({
  33. prefixCls: prefixCls
  34. }, getOptionProps(this), {
  35. tagName: tagName
  36. }),
  37. on: getListeners(this)
  38. };
  39. return h(
  40. BasicComponent,
  41. basicComponentProps,
  42. [this.$slots['default']]
  43. );
  44. }
  45. };
  46. };
  47. }
  48. var Basic = {
  49. props: BasicProps,
  50. render: function render() {
  51. var h = arguments[0];
  52. var prefixCls = this.prefixCls,
  53. Tag = this.tagName,
  54. $slots = this.$slots;
  55. var divProps = {
  56. 'class': prefixCls,
  57. on: getListeners(this)
  58. };
  59. return h(
  60. Tag,
  61. divProps,
  62. [$slots['default']]
  63. );
  64. }
  65. };
  66. var BasicLayout = {
  67. props: BasicProps,
  68. data: function data() {
  69. return {
  70. siders: []
  71. };
  72. },
  73. provide: function provide() {
  74. var _this = this;
  75. return {
  76. siderHook: {
  77. addSider: function addSider(id) {
  78. _this.siders = [].concat(_toConsumableArray(_this.siders), [id]);
  79. },
  80. removeSider: function removeSider(id) {
  81. _this.siders = _this.siders.filter(function (currentId) {
  82. return currentId !== id;
  83. });
  84. }
  85. }
  86. };
  87. },
  88. render: function render() {
  89. var h = arguments[0];
  90. var prefixCls = this.prefixCls,
  91. $slots = this.$slots,
  92. hasSider = this.hasSider,
  93. Tag = this.tagName;
  94. var divCls = classNames(prefixCls, _defineProperty({}, prefixCls + '-has-sider', typeof hasSider === 'boolean' ? hasSider : this.siders.length > 0));
  95. var divProps = {
  96. 'class': divCls,
  97. on: getListeners
  98. };
  99. return h(
  100. Tag,
  101. divProps,
  102. [$slots['default']]
  103. );
  104. }
  105. };
  106. var Layout = generator({
  107. suffixCls: 'layout',
  108. tagName: 'section',
  109. name: 'ALayout'
  110. })(BasicLayout);
  111. var Header = generator({
  112. suffixCls: 'layout-header',
  113. tagName: 'header',
  114. name: 'ALayoutHeader'
  115. })(Basic);
  116. var Footer = generator({
  117. suffixCls: 'layout-footer',
  118. tagName: 'footer',
  119. name: 'ALayoutFooter'
  120. })(Basic);
  121. var Content = generator({
  122. suffixCls: 'layout-content',
  123. tagName: 'main',
  124. name: 'ALayoutContent'
  125. })(Basic);
  126. Layout.Header = Header;
  127. Layout.Footer = Footer;
  128. Layout.Content = Content;
  129. export default Layout;