@upendradevsingh/webcore/src/Popover/Popover.js

UI Core Components for web

/* ========================================================================
 *
 * Popovers
 * 
 * ======================================================================== */

import React, { Component } from 'react';

export default class Popover extends Component {
    constructor(){
        super();
        this.state = {
            show: false,
            visibleStyle: {
                display: 'block',
                left: -9999,
                top: 0,
                opacity: 0
            }
        }
    }

    onMouseEnter(e){
        const visibleStyle = this.state.visibleStyle;
        const offset = this.calcLeft(e.target);
        this.setState({
            visibleStyle: Object.assign({}, visibleStyle, offset, { opacity: 1 })
        });
    }

    onMouseLeave(){
        this.setState({
            visibleStyle: {
                display: 'block',
                left: -9999,
                top: 0,
                opacity: 0
            }
        });
    }

    calcLeft(el) {
        switch(this.props.placement){
            case 'left': {
                let offset = el.parentNode.querySelector('.popover').getBoundingClientRect();
                return { 
                    left: -(offset.width),
                    top: -(offset.height / 2)
                };
            }
            case 'right': {
                const offsetTarget = el.getBoundingClientRect();
                let offset = el.parentNode.querySelector('.popover').getBoundingClientRect();
                return {
                    left: offsetTarget.width,
                    top: -(offset.height / 2)
                };
            }
            default : {
                let offset = el.parentNode.querySelector('.popover').getBoundingClientRect();
                const offsetTarget = el.getBoundingClientRect();
                return {
                    left: -(offsetTarget.width / 2),
                    top: -(offset.height)
                };
            }
        }
    }

    render() {
        const cssClasses = ['popover', 'fade', this.props.placement, 'in'].join(" ");
        const onMouseLeave = this.onMouseLeave.bind(this);
        const onMouseEnter = this.onMouseEnter.bind(this);
        const styles = {
            wrapper: {
                position: 'relative',
                display: this.props.inline ? 'inline-block' : 'block'
            }
        };
        return (
            <div className="popover-options" style={styles.wrapper}> 
                <PopoverContent 
                    cssClasses={cssClasses}
                    visibleStyle={this.state.visibleStyle}
                    placement={this.props.placement}
                    title={this.props.title}
                    content={this.props.children}/>
                <span 
                    class={['popover-btn', this.props.targetClass || ''].join(" ")}
                    onMouseLeave={onMouseLeave} 
                    onMouseEnter={onMouseEnter}>
                        {this.props.targetText} 
                </span>
            </div>
        );
    } 
}


const PopoverContent = (props) => {
    const styles = {
        top : {
            left: "50%"
        },
        right: {
            left: -11
        },
        left: {
            right: -11
        }
    };
    return(
        <div className={props.cssClasses} role="tooltip" style={props.visibleStyle}>
            <div className="arrow" style={styles[props.placement]}></div>
            <h3 className="popover-title hide">{props.title}</h3>
            <div className="popover-content">{props.content}</div>
        </div>
    );
}