index.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.DescriptionsProps = exports.DescriptionsItem = exports.DescriptionsItemProps = undefined;
  6. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  7. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  8. var _typeof2 = require('babel-runtime/helpers/typeof');
  9. var _typeof3 = _interopRequireDefault(_typeof2);
  10. var _warning = require('../_util/warning');
  11. var _warning2 = _interopRequireDefault(_warning);
  12. var _responsiveObserve = require('../_util/responsiveObserve');
  13. var _responsiveObserve2 = _interopRequireDefault(_responsiveObserve);
  14. var _configConsumerProps = require('../config-provider/configConsumerProps');
  15. var _Col = require('./Col');
  16. var _Col2 = _interopRequireDefault(_Col);
  17. var _vueTypes = require('../_util/vue-types');
  18. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  19. var _propsUtil = require('../_util/props-util');
  20. var _BaseMixin = require('../_util/BaseMixin');
  21. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  22. var _base = require('../base');
  23. var _base2 = _interopRequireDefault(_base);
  24. var _vnode = require('../_util/vnode');
  25. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  26. var DescriptionsItemProps = exports.DescriptionsItemProps = {
  27. prefixCls: _vueTypes2['default'].string,
  28. label: _vueTypes2['default'].any,
  29. span: _vueTypes2['default'].number
  30. };
  31. function toArray(value) {
  32. var ret = value;
  33. if (value === undefined) {
  34. ret = [];
  35. } else if (!Array.isArray(value)) {
  36. ret = [value];
  37. }
  38. return ret;
  39. }
  40. var DescriptionsItem = exports.DescriptionsItem = {
  41. name: 'ADescriptionsItem',
  42. props: (0, _propsUtil.initDefaultProps)(DescriptionsItemProps, { span: 1 })
  43. };
  44. var DescriptionsProps = exports.DescriptionsProps = {
  45. prefixCls: _vueTypes2['default'].string,
  46. bordered: _vueTypes2['default'].bool,
  47. size: _vueTypes2['default'].oneOf(['default', 'middle', 'small']).def('default'),
  48. title: _vueTypes2['default'].any,
  49. column: _vueTypes2['default'].oneOfType([_vueTypes2['default'].number, _vueTypes2['default'].object]),
  50. layout: _vueTypes2['default'].oneOf(['horizontal', 'vertical']),
  51. colon: _vueTypes2['default'].bool
  52. };
  53. /**
  54. * Convert children into `column` groups.
  55. * @param children: DescriptionsItem
  56. * @param column: number
  57. */
  58. var generateChildrenRows = function generateChildrenRows(children, column) {
  59. var rows = [];
  60. var columns = null;
  61. var leftSpans = void 0;
  62. var itemNodes = toArray(children);
  63. itemNodes.forEach(function (node, index) {
  64. var itemProps = (0, _propsUtil.getOptionProps)(node);
  65. var itemNode = node;
  66. if (!columns) {
  67. leftSpans = column;
  68. columns = [];
  69. rows.push(columns);
  70. }
  71. // Always set last span to align the end of Descriptions
  72. var lastItem = index === itemNodes.length - 1;
  73. var lastSpanSame = true;
  74. if (lastItem) {
  75. lastSpanSame = !itemProps.span || itemProps.span === leftSpans;
  76. itemNode = (0, _vnode.cloneElement)(itemNode, {
  77. props: {
  78. span: leftSpans
  79. }
  80. });
  81. }
  82. // Calculate left fill span
  83. var _itemProps$span = itemProps.span,
  84. span = _itemProps$span === undefined ? 1 : _itemProps$span;
  85. columns.push(itemNode);
  86. leftSpans -= span;
  87. if (leftSpans <= 0) {
  88. columns = null;
  89. (0, _warning2['default'])(leftSpans === 0 && lastSpanSame, 'Descriptions', 'Sum of column `span` in a line exceeds `column` of Descriptions.');
  90. }
  91. });
  92. return rows;
  93. };
  94. var defaultColumnMap = {
  95. xxl: 3,
  96. xl: 3,
  97. lg: 3,
  98. md: 3,
  99. sm: 2,
  100. xs: 1
  101. };
  102. var Descriptions = {
  103. name: 'ADescriptions',
  104. Item: DescriptionsItem,
  105. mixins: [_BaseMixin2['default']],
  106. inject: {
  107. configProvider: { 'default': function _default() {
  108. return _configConsumerProps.ConfigConsumerProps;
  109. } }
  110. },
  111. props: (0, _propsUtil.initDefaultProps)(DescriptionsProps, {
  112. column: defaultColumnMap
  113. }),
  114. data: function data() {
  115. return {
  116. screens: {},
  117. token: undefined
  118. };
  119. },
  120. methods: {
  121. getColumn: function getColumn() {
  122. var column = this.$props.column;
  123. if ((typeof column === 'undefined' ? 'undefined' : (0, _typeof3['default'])(column)) === 'object') {
  124. for (var i = 0; i < _responsiveObserve.responsiveArray.length; i++) {
  125. var breakpoint = _responsiveObserve.responsiveArray[i];
  126. if (this.screens[breakpoint] && column[breakpoint] !== undefined) {
  127. return column[breakpoint] || defaultColumnMap[breakpoint];
  128. }
  129. }
  130. }
  131. // If the configuration is not an object, it is a number, return number
  132. if (typeof column === 'number') {
  133. return column;
  134. }
  135. // If it is an object, but no response is found, this happens only in the test.
  136. // Maybe there are some strange environments
  137. return 3;
  138. },
  139. renderRow: function renderRow(children, index, _ref, bordered, layout, colon) {
  140. var prefixCls = _ref.prefixCls;
  141. var h = this.$createElement;
  142. var renderCol = function renderCol(colItem, type, idx) {
  143. return h(_Col2['default'], {
  144. attrs: {
  145. child: colItem,
  146. bordered: bordered,
  147. colon: colon,
  148. type: type,
  149. layout: layout
  150. },
  151. key: type + '-' + (colItem.key || idx) });
  152. };
  153. var cloneChildren = [];
  154. var cloneContentChildren = [];
  155. toArray(children).forEach(function (childrenItem, idx) {
  156. cloneChildren.push(renderCol(childrenItem, 'label', idx));
  157. if (layout === 'vertical') {
  158. cloneContentChildren.push(renderCol(childrenItem, 'content', idx));
  159. } else if (bordered) {
  160. cloneChildren.push(renderCol(childrenItem, 'content', idx));
  161. }
  162. });
  163. if (layout === 'vertical') {
  164. return [h(
  165. 'tr',
  166. { 'class': prefixCls + '-row', key: 'label-' + index },
  167. [cloneChildren]
  168. ), h(
  169. 'tr',
  170. { 'class': prefixCls + '-row', key: 'content-' + index },
  171. [cloneContentChildren]
  172. )];
  173. }
  174. return h(
  175. 'tr',
  176. { 'class': prefixCls + '-row', key: index },
  177. [cloneChildren]
  178. );
  179. }
  180. },
  181. mounted: function mounted() {
  182. var _this = this;
  183. var column = this.$props.column;
  184. this.token = _responsiveObserve2['default'].subscribe(function (screens) {
  185. if ((typeof column === 'undefined' ? 'undefined' : (0, _typeof3['default'])(column)) !== 'object') {
  186. return;
  187. }
  188. _this.setState({
  189. screens: screens
  190. });
  191. });
  192. },
  193. beforeDestroy: function beforeDestroy() {
  194. _responsiveObserve2['default'].unsubscribe(this.token);
  195. },
  196. render: function render() {
  197. var _ref2,
  198. _this2 = this;
  199. var h = arguments[0];
  200. var _$props = this.$props,
  201. customizePrefixCls = _$props.prefixCls,
  202. size = _$props.size,
  203. _$props$bordered = _$props.bordered,
  204. bordered = _$props$bordered === undefined ? false : _$props$bordered,
  205. _$props$layout = _$props.layout,
  206. layout = _$props$layout === undefined ? 'horizontal' : _$props$layout,
  207. _$props$colon = _$props.colon,
  208. colon = _$props$colon === undefined ? true : _$props$colon;
  209. var title = (0, _propsUtil.getComponentFromProp)(this, 'title') || null;
  210. var getPrefixCls = this.configProvider.getPrefixCls;
  211. var prefixCls = getPrefixCls('descriptions', customizePrefixCls);
  212. var column = this.getColumn();
  213. var children = this.$slots['default'];
  214. var cloneChildren = toArray(children).map(function (child) {
  215. if ((0, _propsUtil.isValidElement)(child)) {
  216. return (0, _vnode.cloneElement)(child, {
  217. props: {
  218. prefixCls: prefixCls
  219. }
  220. });
  221. }
  222. return null;
  223. }).filter(function (node) {
  224. return node;
  225. });
  226. var childrenArray = generateChildrenRows(cloneChildren, column);
  227. return h(
  228. 'div',
  229. {
  230. 'class': [prefixCls, (_ref2 = {}, (0, _defineProperty3['default'])(_ref2, prefixCls + '-' + size, size !== 'default'), (0, _defineProperty3['default'])(_ref2, prefixCls + '-bordered', !!bordered), _ref2)]
  231. },
  232. [title && h(
  233. 'div',
  234. { 'class': prefixCls + '-title' },
  235. [title]
  236. ), h(
  237. 'div',
  238. { 'class': prefixCls + '-view' },
  239. [h('table', [h('tbody', [childrenArray.map(function (child, index) {
  240. return _this2.renderRow(child, index, {
  241. prefixCls: prefixCls
  242. }, bordered, layout, colon);
  243. })])])]
  244. )]
  245. );
  246. }
  247. };
  248. Descriptions.install = function (Vue) {
  249. Vue.use(_base2['default']);
  250. Vue.component(Descriptions.name, Descriptions);
  251. Vue.component(Descriptions.Item.name, Descriptions.Item);
  252. };
  253. exports['default'] = Descriptions;