58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
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() {
|
|
let {
|
|
children, background,
|
|
borderTop, borderBottom, borderLeft, borderRight,
|
|
border, radius } = this.props
|
|
const flatten = (border) => {
|
|
if (!border) {
|
|
return null
|
|
}
|
|
|
|
border.style = border.style || 'solid'
|
|
border.width = border.width || 1
|
|
border.color = border.color || 'black'
|
|
|
|
return (border.width.toString() + 'px ' + border.style + ' ' + border.color)
|
|
}
|
|
|
|
if (border) {
|
|
borderTop = borderBottom = borderLeft = borderRight = flatten(border)
|
|
} else {
|
|
borderTop = flatten(borderTop)
|
|
borderBottom = flatten(borderBottom)
|
|
borderLeft = flatten(borderLeft)
|
|
borderRight = flatten(borderRight)
|
|
}
|
|
|
|
return (
|
|
<div style={[
|
|
{ height: '100%', width: '100%', borderTop, borderBottom, borderLeft, borderRight },
|
|
background && { backgroundColor: background },
|
|
radius && { borderRadius: radius },
|
|
]}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Radium(Box)
|