1 | import classNames from 'classnames';
|
2 | import React, { PropTypes, Component } from 'react';
|
3 |
|
4 | const propTypes = {
|
5 | componentClass: PropTypes.oneOfType([
|
6 | React.PropTypes.element,
|
7 | React.PropTypes.string
|
8 | ]),
|
9 |
|
10 | |
11 |
|
12 |
|
13 | xs: PropTypes.number,
|
14 | |
15 |
|
16 |
|
17 | sm: PropTypes.number,
|
18 | |
19 |
|
20 |
|
21 | md: PropTypes.number,
|
22 | |
23 |
|
24 |
|
25 | lg: PropTypes.number,
|
26 | |
27 |
|
28 |
|
29 | xsOffset: PropTypes.number,
|
30 | |
31 |
|
32 |
|
33 | smOffset: PropTypes.number,
|
34 | |
35 |
|
36 |
|
37 | mdOffset: PropTypes.number,
|
38 | |
39 |
|
40 |
|
41 | lgOffset: PropTypes.number,
|
42 | |
43 |
|
44 |
|
45 | xsPush: PropTypes.number,
|
46 | |
47 |
|
48 |
|
49 | smPush: PropTypes.number,
|
50 | |
51 |
|
52 |
|
53 | mdPush: PropTypes.number,
|
54 | |
55 |
|
56 |
|
57 | lgPush: PropTypes.number,
|
58 | |
59 |
|
60 |
|
61 | xsPull: PropTypes.number,
|
62 | |
63 |
|
64 |
|
65 | smPull: PropTypes.number,
|
66 | |
67 |
|
68 |
|
69 | mdPull: PropTypes.number,
|
70 | |
71 |
|
72 |
|
73 | lgPull: PropTypes.number,
|
74 | };
|
75 |
|
76 | const defaultProps = {
|
77 | componentClass: 'div',
|
78 | clsPrefix: 'u-col'
|
79 | };
|
80 |
|
81 |
|
82 | const DEVICE_SIZES = ['lg', 'md', 'sm', 'xs'];
|
83 |
|
84 | class Col extends Component {
|
85 | render() {
|
86 | const { componentClass: Component, className, clsPrefix, ...others } = this.props;
|
87 |
|
88 | const tbClass = [];
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | DEVICE_SIZES.forEach(size => {
|
94 | function popProp(propSuffix, modifier) {
|
95 | const propName = `${size}${propSuffix}`;
|
96 | const propValue = others[propName];
|
97 |
|
98 | if (propValue != undefined && propValue != null) {
|
99 | tbClass.push( `${clsPrefix}-${size}${modifier}-${propValue}`);
|
100 | }
|
101 |
|
102 | delete others[propName];
|
103 | }
|
104 |
|
105 | popProp('', '');
|
106 | popProp('Offset', '-offset');
|
107 | popProp('Push', '-push');
|
108 | popProp('Pull', '-pull');
|
109 |
|
110 | });
|
111 |
|
112 | return (
|
113 | <Component
|
114 | className={classNames(tbClass, className)}
|
115 | { ...others }>
|
116 | { this.props.children }
|
117 | </Component>
|
118 | );
|
119 | }
|
120 | }
|
121 |
|
122 | Col.propTypes = propTypes;
|
123 | Col.defaultProps = defaultProps;
|
124 |
|
125 | export default Col;
|