73 lines
1.8 KiB
JavaScript
73 lines
1.8 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 is from 'styled-is';
|
|
|
|
import style from '../tooltip/style';
|
|
import { default as BaseTarget } from '../tooltip/target';
|
|
import Baseline from '../baseline';
|
|
|
|
const arrowClassName = rndId();
|
|
|
|
const Popper = styled(BasePopper)`
|
|
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)} ${remcalc(3)} ${remcalc(18)};
|
|
|
|
${style({
|
|
background: 'white',
|
|
color: 'text',
|
|
border: 'grey',
|
|
arrow: arrowClassName
|
|
})};
|
|
`;
|
|
|
|
const StyledTarget = styled(BaseTarget)`
|
|
${is('box')`
|
|
cursor: pointer;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`};
|
|
`;
|
|
|
|
export const Target = Baseline(({ children, box = false, ...rest }) => (
|
|
<StyledTarget box={box} tag={box ? 'div' : false} {...rest}>
|
|
{children}
|
|
</StyledTarget>
|
|
));
|
|
|
|
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';
|