mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
6 years ago
|
import React from 'react'
|
||
|
|
import enhanceWithClickOutside from 'react-click-outside'
|
||
|
|
|
||
|
|
import WindowPointer from './WindowPointer'
|
||
|
|
import { COLORS } from '../lib/constants'
|
||
|
|
|
||
|
|
class Popout extends React.PureComponent {
|
||
|
|
static defaultProps = {
|
||
|
|
borderColor: COLORS.SECONDARY,
|
||
|
|
style: {},
|
||
|
|
onClickOutside: () => {}
|
||
|
|
}
|
||
|
|
|
||
|
|
handleClickOutside = e => !this.props.hidden && this.props.onClickOutside(e)
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props
|
||
|
|
|
||
|
|
if (hidden) {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="popout" style={style}>
|
||
|
|
<WindowPointer fromLeft={pointerLeft} fromRight={pointerRight} color={borderColor} />
|
||
|
|
{children}
|
||
|
|
<style jsx>
|
||
|
|
{`
|
||
|
|
.popout {
|
||
|
|
position: absolute;
|
||
|
|
background-color: ${COLORS.BLACK};
|
||
|
|
border: 2px solid ${borderColor};
|
||
|
|
border-radius: 3px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default enhanceWithClickOutside(Popout)
|