1.2.0

juliankrispel · Sep 19, 2018 · 6784d0c · 6784d0c
1 parent 281e6a1
commit 6784d0c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.2.0
+- Reposition Popover for resize and scroll events on viewport
+- Add scrollRef prop to give control to user for which scroll events to listen to
+
 ## 1.0.2
 - Popover opens even when selectionWidth is 0
 

diff --git a/README.md b/README.md
@@ -88,13 +88,34 @@ You might still want to use selection events to control whether the Popover is s
 >Hey there</Popover>
 ```
 
+### Using Popover inside a scrollable element
+
+Some applications have scrollable elements inside them other than `<body>`. By default Popover repositions itself when the viewport scrolls (`window` that is). If you're using the `Popover` inside a scrollable element you need to define the `scrollRef` prop like so:
+
+```
+class MyApp extends Component {
+  constructor() {
+    this.scrollRef = React.createRef()
+  }
+
+  render() {
+    return <div>
+      <main ref={this.scrollRef}>
+      </main>
+      <Popover scrollRef={this.scrollRef}>My popover</Popover>
+    </div>
+  }
+}
+```
+
 For more info on how to use the `Popover` component, please see below :)
 
 ## `<Popover />` Props
 
 | Property | Type | required? | Description |
 | - | - | - | - |
 | `selectionRef` | `React.ref` | optional | Set this to constrain selection events to a dom element and its children. You need this especially if you use more than one Popover component __(defaults to `document`)__ |
+| `scrollRef` | `React.ref` | optional | By default Popover repositions itself when there's a scroll event for document.body. Set this to reposition the Popover upon scrolling of a given element |
 | `isOpen` | `Boolean` | optional | Is the Popover visible or not __(defaults to `true`)__ |
 | `onTextSelect` | `Function` | optional | Callback for when text is selected (typically used for setting state that opens the modal) |
 | `onTextUnSelect` | `Function` | optional | Callback for when selection collapses (typically used for setting state that closes the modal) |
@@ -120,4 +141,6 @@ write test for all states:
 - Test isOpen overrides anything internal
 - Test placement strategies
 - Test refs
+- Test scroll events
+- Test resize events
 - Test events being only inside selection ref
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-text-selection-popover",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A popover component positioned according to the current selection in a contenteditable element",
   "author": "juliankrispel",
   "license": "MIT",

diff --git a/src/index.js b/src/index.js
@@ -11,6 +11,7 @@ import centerAboveOrBelow from "./centerAboveOrBelow";
 class Popover extends Component {
   static defaultProps = {
     selectionRef: { current: document.body },
+    scrollRef: { current: window },
     placementStrategy: centerAboveOrBelow,
     gap: 5,
   };
@@ -56,6 +57,7 @@ class Popover extends Component {
       selectionRef,
       measureRef,
       gap,
+      scrollRef,
       placementStrategy,
       contentRect,
       windowHeight,
@@ -105,9 +107,19 @@ class Popover extends Component {
         target={document}
         onSelectionChange={this.updatePosition}
       />,
+      <EventListener
+        key="on-resize-window"
+        target={window}
+        onResize={this.updatePosition}
+      />,
+      <EventListener
+        key="on-scroll"
+        target={scrollRef && scrollRef.current ? scrollRef.current : window}
+        onScroll={this.updatePosition}
+      />,
       <EventListener
         key="on-mouse-up"
-        target={selectionRef && selectionRef.current ? selectionRef.current : document}
+        target={selectionRef && selectionRef.current ? selectionRef.current : document.body}
         onMouseUp={() => this.setState({ mousePressed: false })}
       />,
       <EventListener
@@ -137,6 +149,12 @@ Popover.propTypes = {
   selectionRef: PropTypes.shape({
     current: PropTypes.instanceOf(Element)
   }),
+  scrollRef: PropTypes.shape({
+    current: PropTypes.oneOfType([
+      PropTypes.instanceOf(Element),
+      PropTypes.instanceOf(window.constructor)
+    ])
+  }),
   children: PropTypes.node.isRequired,
   onTextSelect: PropTypes.func,
   onTextUnselect: PropTypes.func,