Merge pull request #86 from yjose/fixes

Fixes
yjose · May 11, 2019 · 661d87f · 661d87f
2 parents 4920fcb + d44af18
commit 661d87f
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 42 deletions.
diff --git a/__test__/__snapshots__/index.test.js.snap b/__test__/__snapshots__/index.test.js.snap
@@ -56,7 +56,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -245,7 +245,7 @@ exports[`it should render correctly on click and will update the the popup conte
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -402,7 +402,7 @@ exports[`it should render correctly on click and will update the trigger text
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -554,7 +554,7 @@ exports[`it should rendered in the bottom center position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -659,7 +659,7 @@ exports[`it should rendered in the bottom left position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -764,7 +764,7 @@ exports[`it should rendered in the bottom right position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -869,7 +869,7 @@ exports[`it should rendered in the left bottom position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -974,7 +974,7 @@ exports[`it should rendered in the left center position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1079,7 +1079,7 @@ exports[`it should rendered in the left top position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1184,7 +1184,7 @@ exports[`it should rendered in the right bottom position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1289,7 +1289,7 @@ exports[`it should rendered in the right center position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1394,7 +1394,7 @@ exports[`it should rendered in the right top position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1499,7 +1499,7 @@ exports[`it should rendered in the top center position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1604,7 +1604,7 @@ exports[`it should rendered in the top left position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1709,7 +1709,7 @@ exports[`it should rendered in the top right position   1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={
@@ -1813,7 +1813,7 @@ exports[`it shouldn't close on click outside popup  1`] = `
       }
     />
     <div
-      className="popup-overlay"
+      className="popup-overlay "
       key="O"
       onClick={[Function]}
       style={

diff --git a/docs/src/mdPages/3.componentApi.md b/docs/src/mdPages/3.componentApi.md
@@ -35,6 +35,7 @@ The reactjs-popup API is inspired by semantic popup docs
 | contentStyle         |                   | {object}       | Custom popup content style                                                                                                                                                                                                                                            |
 | overlayStyle         |                   | {object}       | Custom overlay style <br/> Note: `top` and `left` property will not be overridden.                                                                                                                                                                                    |
 | arrowStyle           |                   | {object}       | Custom arrow style <br/> Note: `transform` property will not be overridden.                                                                                                                                                                                           |
+| className           |                   | {string}       | Custom Popup ClassName <br/> Note: this class name will be merged with the component element: ex `className='foo'` means  `foo-arrow` to style arrow, `foo-overlay` to style overlay and `foo-content` to style popup content                                                                                                                                                                                           |
 | keepTooltipInside    | true              | {bool,string}  | html selector, class name or id element that the tooltip must be inside (defaults to `window` if keepTooltipInside = true) default false                                                                                                                              |
 
 ### Example : on focus

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
   },
   "peerDependencies": {
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "prop-types": "^15.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

diff --git a/src/index.js b/src/index.js
@@ -202,6 +202,7 @@ export default class Popup extends React.PureComponent {
       offsetY,
       keepTooltipInside,
       arrowStyle,
+      className,
     } = this.props;
     const helper = this.HelperEl.getBoundingClientRect();
     const trigger = this.TriggerEl.getBoundingClientRect();
@@ -232,6 +233,10 @@ export default class Popup extends React.PureComponent {
       this.ArrowEl.style['-webkit-transform'] = cords.transform;
       this.ArrowEl.style.top = arrowStyle.top || cords.arrowTop;
       this.ArrowEl.style.left = arrowStyle.left || cords.arrowLeft;
+      this.ArrowEl.classList.add(`popup-arrow`);
+      if (className !== '') {
+        this.ArrowEl.classList.add(`${className}-arrow`);
+      }
     }
     if (
       /* eslint-disable-next-line no-undef */
@@ -254,7 +259,9 @@ export default class Popup extends React.PureComponent {
       : styles.popupContent.tooltip;
 
     const childrenElementProps = {
-      className: `popup-content ${className}`,
+      className: `popup-content ${
+        className !== '' ? `${className}-content` : ''
+      }`,
       style: Object.assign({}, popupContentStyle, contentStyle),
       ref: this.setContentRef,
       onClick: e => {
@@ -314,7 +321,13 @@ export default class Popup extends React.PureComponent {
   };
 
   render() {
-    const {overlayStyle, closeOnDocumentClick, on, trigger} = this.props;
+    const {
+      overlayStyle,
+      closeOnDocumentClick,
+      className,
+      on,
+      trigger,
+    } = this.props;
     const {modal, isOpen} = this.state;
     const overlay = isOpen && !(on.indexOf('hover') >= 0);
     const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;
@@ -334,7 +347,9 @@ export default class Popup extends React.PureComponent {
       overlay && (
         <div
           key="O"
-          className="popup-overlay"
+          className={`popup-overlay ${
+            className !== '' ? `${className}-overlay` : ''
+          }`}
           style={Object.assign({}, ovStyle, overlayStyle)}
           onClick={closeOnDocumentClick ? this.closePopup : undefined}>
           {modal && this.renderContent()}

diff --git a/stories/src/PopupElement.js b/stories/src/PopupElement.js
@@ -1,44 +1,42 @@
-import React from "react";
-import Popup from "../../src/";
-import { Centred } from "story-router";
+import React from 'react';
+import {Centred} from 'story-router';
+import Popup from '../../src/';
 
 const Button = props => (
   <button {...props}>
-    {" "}
     Button nested with offsetX
-    {props.open ? "open" : "close"}{" "}
+    {props.open ? 'open' : 'close'}{' '}
   </button>
 );
 
 const PopupElement = props => (
   <div>
-    <div style={{ zIndex: "90" }}>
+    <div style={{zIndex: '90'}}>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas s
       <Popup trigger={open => <Button open={open} />} {...props}>
         {close => <Content close={close} />}
       </Popup>
     </div>
 
-    <div style={{ zIndex: "90" }}>
-      {" "}
+    <div style={{zIndex: '90'}}>
+      {' '}
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas ex,
       blanditiis reiciendis dolor numquam pariatur facilis, labore, libero nihil
-      asperiores ae facilis{" "}
+      asperiores ae facilis{' '}
     </div>
   </div>
 );
 
-const Content = ({ close }) => (
+const Content = ({close}) => (
   <div>
     sum dolor sit amet consectetur adipisicing elit. Nemo voluptas ex,
-    blanditiis reiciendir voluptas tempora doloremque!{" "}
+    blanditiis reiciendir voluptas tempora doloremque!{' '}
     <button onClick={close}>close</button>
     <Popup
-      on={["click"]}
-      position={"bottom left"}
-      closeOnDocumentClick={true}
-      trigger={<button>Button nested</button>}
-    >
+      on={['click']}
+      position="bottom left"
+      closeOnDocumentClick
+      trigger={<button>Button nested</button>}>
       <div>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas
         ex, blanditiis reiciendis dolor numquam pariatur facilis, labore, libero
@@ -50,13 +48,13 @@ const Content = ({ close }) => (
 );
 
 const PopupElementStory = {
-  name: "Popup trigger function",
+  name: 'Popup trigger function',
   component: Centred(PopupElement),
   props: {
     offsetX: 0,
     offsetY: 0,
-    position: "top left"
-  }
+    position: 'top left',
+  },
 };
 
 export default PopupElementStory;
diff --git a/stories/src/PopupStyle.js b/stories/src/PopupStyle.js
@@ -0,0 +1,45 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+
+import Popup from '../../src';
+
+const PopupFuncProps = {
+  className: 'test',
+  arrowStyle: {},
+  contentStyle: {},
+  overlayStyle: {},
+  on: 'click',
+};
+
+const PopupStyle = props => (
+  <div>
+    <div style={{height: '800px'}}> scroll to bottom :) </div>
+    <div style={{height: '100px', background: 'red', position: 'relative'}}>
+      <Popup {...props} trigger={<button type="button"> Button 2</button>}>
+        {close => (
+          <div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
+            voluptas s lore Lorem ipsum dolor sit amet consectetur adipisicing
+            elit. Nemo voluptas s loreLorem ipsum dolor sit amet consectetur
+            adipisicing elit. Nemo voluptas s loreLorem ipsum dolor sit amet
+            consectetur adipisicing elit. Nemo voluptas s lore
+            <a
+              className="close"
+              onClick={close}
+              style={{margin: '10px', background: 'red'}}>
+              close here &times;
+            </a>{' '}
+          </div>
+        )}
+      </Popup>
+    </div>
+  </div>
+);
+
+const PopupStyleStory = {
+  name: 'Popup Style',
+  component: PopupStyle,
+  props: PopupFuncProps,
+};
+
+export default PopupStyleStory;
diff --git a/stories/src/index.js b/stories/src/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {Centred} from 'story-router';
 import Story from './Story';
 // import { Centred } from "../../src/utils/";
-
+import Popup from '../../src';
 import PopupElementStory from './PopupElement';
 import PopupFuncStory from './PopupFunc';
 import PopupInputFocusStory from './PopupInputFocus';
@@ -12,14 +12,14 @@ import Menu from './Menu';
 import ControlledModal from './ControlledModal';
 import ControlledTooltip from './ControlledTooltip';
 import BoundedTooltip from './BoundedTooltip';
+import PopupStyle from './PopupStyle';
 
 import CellTablePopupStory from './CellTablePopup';
 
 import PopupHandleEventStory from './PopupHandleEvent';
 
 import NestedLockScrollStory from './NestedLockScroll';
 
-
 const storyProps = {text: 'Parcel Storybook'};
 const buttonProps = {
   name: 'My Button',
@@ -39,7 +39,9 @@ export default [
   },
   {
     name: 'without Prop', // without props
-    component: Centred(() => <button>Test without props</button>),
+    component: Centred(() => (
+      <Popup trigger={<button> trigger</button>}> content</Popup>
+    )),
   },
   {
     name: 'Controlled Modal Component', // without props
@@ -85,4 +87,5 @@ export default [
   CellTablePopupStory,
   PopupHandleEventStory,
   NestedLockScrollStory,
+  PopupStyle,
 ];