ant-design/components/layout/row.jsx

44 lines
1.2 KiB
React
Raw Normal View History

2016-02-23 17:34:46 +08:00
import React, { Children, cloneElement } from 'react';
import classNames from 'classnames';
2015-10-27 23:52:17 +08:00
export default class Row extends React.Component {
static defaultProps = {
gutter: 0,
}
static propTypes = {
2015-10-27 23:52:17 +08:00
type: React.PropTypes.string,
align: React.PropTypes.string,
justify: React.PropTypes.string,
className: React.PropTypes.string,
2015-10-27 23:52:17 +08:00
children: React.PropTypes.node,
2016-02-23 17:34:46 +08:00
gutter: React.PropTypes.number,
}
2015-10-27 23:52:17 +08:00
render() {
2016-02-23 17:34:46 +08:00
const { type, justify, align, className, gutter, style, children, ...others } = this.props;
const classes = classNames({
2016-06-06 11:40:54 +08:00
'ant-row': !type,
[`ant-row-${type}`]: type,
[`ant-row-${type}-${justify}`]: justify,
[`ant-row-${type}-${align}`]: align,
[className]: className,
});
2016-02-23 17:34:46 +08:00
const rowStyle = gutter > 0 ? {
marginLeft: gutter / -2,
marginRight: gutter / -2,
...style,
} : style;
2016-03-10 09:35:09 +08:00
const cols = Children.map(children, col => {
2016-05-20 13:55:00 +08:00
if (!col) return null;
2016-03-10 09:35:09 +08:00
return cloneElement(col, {
2016-02-23 17:34:46 +08:00
style: gutter > 0 ? {
paddingLeft: gutter / 2,
paddingRight: gutter / 2,
2016-05-11 09:32:33 +08:00
...col.props.style,
2016-02-25 18:03:48 +08:00
} : col.props.style,
2016-03-10 09:35:09 +08:00
});
});
2016-02-23 17:34:46 +08:00
return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
}
}