69 lines
1.8 KiB
JavaScript
69 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 style from './style';
|
|
|
|
const arrowClassName = rndId();
|
|
|
|
const Popper = styled(BasePopper)`
|
|
padding: ${remcalc(13)} ${remcalc(18)};
|
|
font-weight: normal;
|
|
|
|
${style({
|
|
background: 'text',
|
|
color: 'white',
|
|
border: 'transparent',
|
|
arrow: arrowClassName
|
|
})};
|
|
`;
|
|
|
|
export default class Tooltip extends Component {
|
|
static propTypes = {
|
|
// List of accepted placements to use as values of the `placement` option. Variations are interpreted easily if you think of them as the left to right written languages. Horizontally (`top` and `bottom`), `start` is left and `end` is right. Vertically (`left` and `right`), `start` is top and `end` is bottom.
|
|
placement: PropTypes.oneOf([
|
|
'auto-start',
|
|
'auto',
|
|
'auto-end',
|
|
'top-start',
|
|
'top',
|
|
'top-end',
|
|
'right-start',
|
|
'right',
|
|
'right-end',
|
|
'bottom-end',
|
|
'bottom',
|
|
'bottom-start',
|
|
'left-end',
|
|
'left',
|
|
'left-start'
|
|
])
|
|
};
|
|
|
|
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 Container } from './container';
|
|
export { default as Target } from './target';
|