Merge pull request #2 from k2fl/master

Add prop title for Popover
someden · Jan 20, 2020 · 488a740 · 488a740
2 parents 0246704 + 6a9d4cc
commit 488a740
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/Popover/Content.jsx b/src/components/Popover/Content.jsx
@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import { Consumer } from './context';
 import Popper from './Popper';
 
-const Content = ({ children }) => (
+const Content = ({ title, children }) => (
   <Consumer>
     {({ placement, referenceNode, showContent, onMouseEnter, onMouseLeave }) =>
       (showContent ? (
         <Popper
+          title={title}
           placement={placement}
           reference={referenceNode}
           onMouseEnter={onMouseEnter}
@@ -22,6 +23,7 @@ const Content = ({ children }) => (
 );
 
 Content.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   children: PropTypes.node.isRequired,
 };
 

diff --git a/src/components/Popover/Popper.jsx b/src/components/Popover/Popper.jsx
@@ -4,6 +4,7 @@ import PopperJS from 'popper.js';
 
 class Popper extends Component {
   static propTypes = {
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     placement: PropTypes.oneOf(['top', 'left', 'bottom', 'right']).isRequired,
     reference: PropTypes.instanceOf(Element).isRequired,
     onMouseEnter: PropTypes.func.isRequired,
@@ -75,7 +76,7 @@ class Popper extends Component {
   };
 
   render() {
-    const { onMouseEnter, onMouseLeave, children } = this.props;
+    const { onMouseEnter, onMouseLeave, title, children } = this.props;
     const { placement } = this.state;
 
     return (
@@ -87,6 +88,7 @@ class Popper extends Component {
         onMouseLeave={onMouseLeave}
       >
         <div ref={this.setArrowNode} className='arrow' />
+        {title ? <div className='popover-header'>{title}</div> : null}
         <div className='popover-body'>{children}</div>
       </div>
     );