Skip to content

Commit 7abdcc6

Browse files
tangjinzhoutangjinzhou
committed
feat: update grid
1 parent c91f709 commit 7abdcc6

File tree

12 files changed

+242
-186
lines changed

12 files changed

+242
-186
lines changed

‎build/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'spin', // dev components
3+
componentName: 'grid', // dev components
44
},
55
};

‎components/grid/Col.jsx

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,11 @@ export default {
5555
let sizeClassObj = {};
5656
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
5757
let sizeProps = {};
58-
if (typeof this[size] === 'number') {
59-
sizeProps.span = this[size];
60-
} else if (typeof this[size] === 'object') {
61-
sizeProps = this[size] || {};
58+
const propSize = this[size];
59+
if (typeof propSize === 'number') {
60+
sizeProps.span = propSize;
61+
} else if (typeof propSize === 'object') {
62+
sizeProps = propSize || {};
6263
}
6364

6465
sizeClassObj = {
@@ -72,6 +73,7 @@ export default {
7273
};
7374
});
7475
const classes = {
76+
[`${prefixCls}`]: true,
7577
[`${prefixCls}-${span}`]: span !== undefined,
7678
[`${prefixCls}-order-${order}`]: order,
7779
[`${prefixCls}-offset-${offset}`]: offset,
@@ -86,10 +88,20 @@ export default {
8688
};
8789
if (rowContext) {
8890
const gutter = rowContext.getGutter();
89-
if (gutter > 0) {
91+
if (gutter) {
9092
divProps.style = {
91-
paddingLeft: `${gutter / 2}px`,
92-
paddingRight: `${gutter / 2}px`,
93+
...(gutter[0] > 0
94+
? {
95+
paddingLeft: `${gutter[0] / 2}px`,
96+
paddingRight: `${gutter[0] / 2}px`,
97+
}
98+
: {}),
99+
...(gutter[1] > 0
100+
? {
101+
paddingTop: `${gutter[1] / 2}px`,
102+
paddingBottom: `${gutter[1] / 2}px`,
103+
}
104+
: {}),
93105
};
94106
}
95107
}

‎components/grid/Row.jsx

Lines changed: 42 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
11
import PropTypes from '../_util/vue-types';
22
import BaseMixin from '../_util/BaseMixin';
33
import { ConfigConsumerProps } from '../config-provider';
4-
5-
// matchMedia polyfill for
6-
// https://github.com/WickyNilliams/enquire.js/issues/82
7-
let enquire = null;
8-
if (typeof window !== 'undefined') {
9-
const matchMediaPolyfill = mediaQuery => {
10-
return {
11-
media: mediaQuery,
12-
matches: false,
13-
addListener() {},
14-
removeListener() {},
15-
};
16-
};
17-
window.matchMedia = window.matchMedia || matchMediaPolyfill;
18-
enquire = require('enquire.js');
19-
}
4+
import ResponsiveObserve from '../_util/responsiveObserve';
205

216
const BreakpointMap = PropTypes.shape({
227
xs: PropTypes.number,
@@ -28,30 +13,21 @@ const BreakpointMap = PropTypes.shape({
2813
}).loose;
2914

3015
const RowProps = {
31-
gutter: PropTypes.oneOfType([PropTypes.number, BreakpointMap]),
16+
gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
3217
type: PropTypes.oneOf(['flex']),
33-
align: PropTypes.oneOf(['top', 'middle', 'bottom']),
18+
align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
3419
justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
3520
prefixCls: PropTypes.string,
3621
};
3722

3823
const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
3924

40-
const responsiveMap = {
41-
xs: '(max-width: 575px)',
42-
sm: '(min-width: 576px)',
43-
md: '(min-width: 768px)',
44-
lg: '(min-width: 992px)',
45-
xl: '(min-width: 1200px)',
46-
xxl: '(min-width: 1600px)',
47-
};
48-
4925
export default {
5026
name: 'ARow',
5127
mixins: [BaseMixin],
5228
props: {
5329
...RowProps,
54-
gutter: PropTypes.oneOfType([PropTypes.number, BreakpointMap]).def(0),
30+
gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
5531
},
5632
provide() {
5733
return {
@@ -69,51 +45,40 @@ export default {
6945

7046
mounted() {
7147
this.$nextTick(() => {
72-
Object.keys(responsiveMap).map(screen =>
73-
enquire.register(responsiveMap[screen], {
74-
match: () => {
75-
if (typeof this.gutter !== 'object') {
76-
return;
77-
}
78-
this.setState(prevState => ({
79-
screens: {
80-
...prevState.screens,
81-
[screen]: true,
82-
},
83-
}));
84-
},
85-
unmatch: () => {
86-
if (typeof this.gutter !== 'object') {
87-
return;
88-
}
89-
this.setState(prevState => ({
90-
screens: {
91-
...prevState.screens,
92-
[screen]: false,
93-
},
94-
}));
95-
},
96-
// Keep a empty destory to avoid triggering unmatch when unregister
97-
destroy() {},
98-
}),
99-
);
48+
this.token = ResponsiveObserve.subscribe(screens => {
49+
const { gutter } = this;
50+
if (
51+
typeof gutter === 'object' ||
52+
(Array.isArray(gutter) &&
53+
(typeof gutter[0] === 'object' || typeof gutter[1] === 'object'))
54+
) {
55+
this.screens = screens;
56+
}
57+
});
10058
});
10159
},
10260
beforeDestroy() {
103-
Object.keys(responsiveMap).map(screen => enquire.unregister(responsiveMap[screen]));
61+
ResponsiveObserve.unsubscribe(this.token);
10462
},
10563
methods: {
10664
getGutter() {
107-
const { gutter } = this;
108-
if (typeof gutter === 'object') {
109-
for (let i = 0; i < responsiveArray.length; i++) {
110-
const breakpoint = responsiveArray[i];
111-
if (this.screens[breakpoint] && gutter[breakpoint] !== undefined) {
112-
return gutter[breakpoint];
65+
const results = [0, 0];
66+
const { gutter, screens } = this;
67+
const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
68+
normalizedGutter.forEach((g, index) => {
69+
if (typeof g === 'object') {
70+
for (let i = 0; i < responsiveArray.length; i++) {
71+
const breakpoint = responsiveArray[i];
72+
if (screens[breakpoint] && g[breakpoint] !== undefined) {
73+
results[index] = g[breakpoint];
74+
break;
75+
}
11376
}
77+
} else {
78+
results[index] = g || 0;
11479
}
115-
}
116-
return gutter;
80+
});
81+
return results;
11782
},
11883
},
11984

@@ -129,13 +94,20 @@ export default {
12994
[`${prefixCls}-${type}-${justify}`]: type && justify,
13095
[`${prefixCls}-${type}-${align}`]: type && align,
13196
};
132-
const rowStyle =
133-
gutter > 0
97+
const rowStyle = {
98+
...(gutter[0] > 0
13499
? {
135-
marginLeft: `${gutter / -2}px`,
136-
marginRight: `${gutter / -2}px`,
100+
marginLeft: `${gutter[0] / -2}px`,
101+
marginRight: `${gutter[0] / -2}px`,
137102
}
138-
: {};
103+
: {}),
104+
...(gutter[1] > 0
105+
? {
106+
marginTop: `${gutter[1] / -2}px`,
107+
marginBottom: `${gutter[1] / -2}px`,
108+
}
109+
: {}),
110+
};
139111
return (
140112
<div class={classes} style={rowStyle}>
141113
{$slots.default}

0 commit comments

Comments
 (0)