From b572f6518479b3b0c44742528f6353afe8eb5b63 Mon Sep 17 00:00:00 2001 From: Jason Kuhrt Date: Wed, 4 Oct 2017 09:06:10 -0400 Subject: [PATCH] refactor: misc --- README.adoc | 4 ++-- lib/index.js | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/README.adoc b/README.adoc index 32f217e..cf8cf33 100644 --- a/README.adoc +++ b/README.adoc @@ -91,6 +91,6 @@ Defines the size of the tip pointer. Use .01 to disable tip. Defaults to '7'. --- -#### `appendTarget :: DOMNode` +#### `appendTarget :: DOMElement` -- The DOM node which this popover will be appended to. Defaults to 'document.body'. +- The DOM element which the https://reactjs.org/docs/portals.html[portal] will mount into. In effect the popover will become an appended child of this DOM element. Defaults to 'document.body'. diff --git a/lib/index.js b/lib/index.js index 6352d8f..9dec84d 100644 --- a/lib/index.js +++ b/lib/index.js @@ -6,7 +6,7 @@ import throttle from "lodash.throttle" import * as cssVendor from "css-vendor" import resizeEvent from "./on-resize" import Layout from "./layout" -import { isServer, window, document } from "./platform" +import Platform from "./platform" import Utils from "./utils" import Tip from "./tip" @@ -82,7 +82,7 @@ class Popover extends React.Component { enterExitTransitionDurationMs: 500, children: null, refreshIntervalMs: 200, - appendTarget: isServer ? null : document.body + appendTarget: Platform.isClient ? Platform.document.body : null } constructor (props) { super(props) @@ -291,7 +291,7 @@ class Popover extends React.Component { this.setState({ toggle: false }) } enter () { - if (isServer) return + if (Platform.isServer) return log("enter!") this.trackPopover() this.animateEnter() @@ -355,7 +355,7 @@ class Popover extends React.Component { be a nice feature in the future to allow other frames to be used such as local elements that further constrain the popover`s world. */ - this.frameEl = window + this.frameEl = Platform.window this.hasTracked = true /* Set a general interval for checking if target position changed. There is no way @@ -383,8 +383,8 @@ class Popover extends React.Component { /* Track user actions on the page. Anything that occurs _outside_ the Popover boundaries should close the Popover. */ - document.addEventListener("mousedown", this.checkForOuterAction) - document.addEventListener("touchstart", this.checkForOuterAction) + Platform.document.addEventListener("mousedown", this.checkForOuterAction) + Platform.document.addEventListener("touchstart", this.checkForOuterAction) /* Kickstart layout at first boot. */ @@ -406,8 +406,8 @@ class Popover extends React.Component { resizeEvent.off(this.frameEl, this.onFrameResize) resizeEvent.off(this.containerEl, this.onPopoverResize) resizeEvent.off(this.targetEl, this.onTargetResize) - document.removeEventListener("mousedown", this.checkForOuterAction) - document.removeEventListener("touchstart", this.checkForOuterAction) + Platform.document.removeEventListener("mousedown", this.checkForOuterAction) + Platform.document.removeEventListener("touchstart", this.checkForOuterAction) this.hasTracked = false } onTargetResize = () => { @@ -461,7 +461,7 @@ class Popover extends React.Component { ) return [
{this.props.children}
, - !isServer && ReactDOM.createPortal(popover, this.props.appendTarget), + Platform.isClient && ReactDOM.createPortal(popover, this.props.appendTarget), ] } }