forked from aarongoin/react-flex-component
-
Notifications
You must be signed in to change notification settings - Fork 0
/
flex.js
71 lines (66 loc) · 1.96 KB
/
flex.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var React = require('react'),
Box,
Item;
Box = React.createClass({displayName: "Box",
getDefaultProps: function() {
return {
prefix: (navigator.userAgent.indexOf('AppleWebKit') > -1) ? 'Webkit' : (navigator.userAgent.indexOf('MSIE') > -1) ? 'ms' : null,
justifyContent: 'flex-start',
alignItems: 'stretch'
};
},
getInitialState: function() {
return {
style: { display: (this.props.prefix === 'Webkit') ? '-webkit-flex' : (this.props.prefix === 'ms') ? '-ms-flex' : 'flex' }
};
},
render: function() {
var props = this.props,
prefix = props.prefix,
style = this.state.style;
// update style according to box props
// flex-direction
style[prefix ? prefix + 'FlexDirection' : 'flexDirection'] = props.column ? 'column' : 'row';
// flex-wrap
style[prefix ? prefix + 'FlexWrap' : 'flexWrap'] = props.nowrap ? 'nowrap' : 'wrap';
// justify-content
style[(prefix && prefix !== 'ms') ? prefix + 'JustifyContent' : 'justifyContent'] = props.justifyContent;
// align-items
style[(prefix && prefix !== 'ms') ? prefix + 'AlignItems' : 'alignItems'] = props.alignItems;
return (
React.createElement("div", {style: style},
props.children
)
);
}
});
Item = React.createClass({displayName: "Item",
getDefaultProps: function() {
return {
prefix: (navigator.userAgent.indexOf('AppleWebKit') > -1) ? 'Webkit' : (navigator.userAgent.indexOf('MSIE') > -1) ? 'ms' : null,
flex: '0 1 auto',
alignSelf: 'auto'
};
},
getInitialState: function() {
return {
style: {}
};
},
render: function() {
var props = this.props,
prefix = props.prefix,
style = this.state.style;
// update style according to item flex prop
// flex
style[prefix ? prefix + 'Flex' : 'flex'] = props.flex;
// align-self
style[(prefix && prefix !== 'ms') ? prefix + 'AlignSelf' : 'alignSelf'] = props.alignSelf;
return (
React.createElement("div", {style: style},
props.children
)
);
}
});
module.exports = {Box: Box, Item: Item};