diff --git a/CHANGELOG.md b/CHANGELOG.md index 190a099..30a7579 100644 --- 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 index 13785f5..9ce5288 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,26 @@ You might still want to use selection events to control whether the Popover is s >Hey there ``` +### Using Popover inside a scrollable element + +Some applications have scrollable elements inside them other than ``. 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
+
+
+ My popover +
+ } +} +``` + For more info on how to use the `Popover` component, please see below :) ## `` Props @@ -95,6 +115,7 @@ For more info on how to use the `Popover` component, please see below :) | 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 index 6686676..a2c938c 100644 --- 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 index 3ac86d2..f98882a 100644 --- 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} />, + , + , this.setState({ mousePressed: false })} />,