53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
import { Popper as BasePopper, Arrow } from 'react-popper';
|
||
|
|
import rndId from 'rnd-id';
|
||
|
|
import remcalc from 'remcalc';
|
||
|
|
|
||
|
|
import style from '../tooltip/style';
|
||
|
|
|
||
|
|
const arrowClassName = rndId();
|
||
|
|
|
||
|
|
const Popper = styled(BasePopper)`
|
||
|
|
min-width: ${remcalc(152)};
|
||
|
|
box-shadow: 0 ${remcalc(2)} ${remcalc(6)} rgba(0, 0, 0, 0.1);
|
||
|
|
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||
|
|
|
||
|
|
padding: ${remcalc(15)} ${remcalc(18)};
|
||
|
|
|
||
|
|
${style({
|
||
|
|
background: 'white',
|
||
|
|
color: 'text',
|
||
|
|
border: 'grey',
|
||
|
|
arrow: arrowClassName
|
||
|
|
})};
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default class Popover extends Component {
|
||
|
|
static contextTypes = {
|
||
|
|
ttpContMangr: PropTypes.object.isRequired
|
||
|
|
};
|
||
|
|
|
||
|
|
render = () => {
|
||
|
|
const { children, placement = 'auto', ...rest } = this.props;
|
||
|
|
const { isOpen, setRef } = this.context.ttpContMangr;
|
||
|
|
|
||
|
|
return (
|
||
|
|
isOpen() && (
|
||
|
|
<Popper innerRef={setRef('popper')} placement={placement} {...rest}>
|
||
|
|
{children}
|
||
|
|
<Arrow>
|
||
|
|
<span className={arrowClassName} />
|
||
|
|
</Arrow>
|
||
|
|
</Popper>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export { default as Divider } from './divider';
|
||
|
|
export { default as Item } from './item';
|
||
|
|
export { default as Container } from '../tooltip/container';
|
||
|
|
export { default as Target } from '../tooltip/target';
|