37 lines
973 B
JavaScript
37 lines
973 B
JavaScript
import Radium from 'radium'
|
|
import PropTypes from 'prop-types'
|
|
import React, { Component } from 'react'
|
|
|
|
// TODO: Refactor this to allow setting each border property separately
|
|
|
|
class Box extends Component {
|
|
static propTypes = {
|
|
borderTop: PropTypes.object,
|
|
borderBottom: PropTypes.object,
|
|
borderRight: PropTypes.object,
|
|
borderLeft: PropTypes.object,
|
|
border: PropTypes.object,
|
|
radius: PropTypes.number,
|
|
background: PropTypes.string,
|
|
children: PropTypes.node,
|
|
}
|
|
|
|
render() {
|
|
const { children, background, borderTop, borderBottom, borderLeft,
|
|
borderRight, border, radius } = this.props
|
|
|
|
return (
|
|
<div style={[
|
|
{ height: '100%', width: '100%' },
|
|
background && { backgroundColor: background },
|
|
radius && { borderRadius: radius },
|
|
border ? { border } : { borderTop, borderBottom, borderLeft, borderRight },
|
|
]}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Radium(Box)
|