Row.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _typeof from 'babel-runtime/helpers/typeof';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import PropTypes from '../_util/vue-types';
  5. import BaseMixin from '../_util/BaseMixin';
  6. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  7. import ResponsiveObserve from '../_util/responsiveObserve';
  8. var RowProps = {
  9. gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
  10. type: PropTypes.oneOf(['flex']),
  11. align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
  12. justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
  13. prefixCls: PropTypes.string
  14. };
  15. var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
  16. export default {
  17. name: 'ARow',
  18. mixins: [BaseMixin],
  19. props: _extends({}, RowProps, {
  20. gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0)
  21. }),
  22. provide: function provide() {
  23. return {
  24. rowContext: this
  25. };
  26. },
  27. inject: {
  28. configProvider: { 'default': function _default() {
  29. return ConfigConsumerProps;
  30. } }
  31. },
  32. data: function data() {
  33. return {
  34. screens: {}
  35. };
  36. },
  37. mounted: function mounted() {
  38. var _this = this;
  39. this.$nextTick(function () {
  40. _this.token = ResponsiveObserve.subscribe(function (screens) {
  41. var gutter = _this.gutter;
  42. if ((typeof gutter === 'undefined' ? 'undefined' : _typeof(gutter)) === 'object' || Array.isArray(gutter) && (_typeof(gutter[0]) === 'object' || _typeof(gutter[1]) === 'object')) {
  43. _this.screens = screens;
  44. }
  45. });
  46. });
  47. },
  48. beforeDestroy: function beforeDestroy() {
  49. ResponsiveObserve.unsubscribe(this.token);
  50. },
  51. methods: {
  52. getGutter: function getGutter() {
  53. var results = [0, 0];
  54. var gutter = this.gutter,
  55. screens = this.screens;
  56. var normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
  57. normalizedGutter.forEach(function (g, index) {
  58. if ((typeof g === 'undefined' ? 'undefined' : _typeof(g)) === 'object') {
  59. for (var i = 0; i < responsiveArray.length; i++) {
  60. var breakpoint = responsiveArray[i];
  61. if (screens[breakpoint] && g[breakpoint] !== undefined) {
  62. results[index] = g[breakpoint];
  63. break;
  64. }
  65. }
  66. } else {
  67. results[index] = g || 0;
  68. }
  69. });
  70. return results;
  71. }
  72. },
  73. render: function render() {
  74. var _classes;
  75. var h = arguments[0];
  76. var type = this.type,
  77. justify = this.justify,
  78. align = this.align,
  79. customizePrefixCls = this.prefixCls,
  80. $slots = this.$slots;
  81. var getPrefixCls = this.configProvider.getPrefixCls;
  82. var prefixCls = getPrefixCls('row', customizePrefixCls);
  83. var gutter = this.getGutter();
  84. var classes = (_classes = {}, _defineProperty(_classes, prefixCls, !type), _defineProperty(_classes, prefixCls + '-' + type, type), _defineProperty(_classes, prefixCls + '-' + type + '-' + justify, type && justify), _defineProperty(_classes, prefixCls + '-' + type + '-' + align, type && align), _classes);
  85. var rowStyle = _extends({}, gutter[0] > 0 ? {
  86. marginLeft: gutter[0] / -2 + 'px',
  87. marginRight: gutter[0] / -2 + 'px'
  88. } : {}, gutter[1] > 0 ? {
  89. marginTop: gutter[1] / -2 + 'px',
  90. marginBottom: gutter[1] / -2 + 'px'
  91. } : {});
  92. return h(
  93. 'div',
  94. { 'class': classes, style: rowStyle },
  95. [$slots['default']]
  96. );
  97. }
  98. };