Disable default centering (#47) and improve typings

README.md

@@ -45,7 +45,7 @@ The `children` contents is what will be rendered into the new popup window. In t
  | `features` | `Object`   | `{}`          | The set of window features ([more details on `windowFeatures`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features)). |
  | `onUnload` | `Function` | `undefined`   | A function to be triggered before the new window unload. |
  | `onBlock`  | `Function` | `undefined`   | A function to be triggered when the new window could not be opened. |
- | `center`   | `String`   | `parent`      | Indicate how to center the new window. Valid values are: `parent` or `screen`. `parent` will center the new window according to its _parent_ window. `screen` will center the new window according to the _screen_. |
+ | `center`   | `String`   | `undefined`      | Indicate how to center the new window. Valid values are: `parent` or `screen`. `parent` will center the new window according to its _parent_ window. `screen` will center the new window according to the _screen_. |
  | `copyStyles`  | `Boolean` | `true`   | If specified, copy styles from parent window's document. |
 
 ## Tests

src/NewWindow.js

@@ -24,7 +24,6 @@ class NewWindow extends React.PureComponent {
     onBlock: null,
     onOpen: null,
     onUnload: null,
-    center: 'parent',
     copyStyles: true
   }
 
@@ -63,37 +62,40 @@ class NewWindow extends React.PureComponent {
     const { url, title, name, features, onBlock, onOpen, center } = this.props
 
     // Prepare position of the new window to be centered against the 'parent' window or 'screen'.
-    if (
-      typeof center === 'string' &&
-      (features.width === undefined || features.height === undefined)
-    ) {
-      console.warn(
-        'width and height window features must be present when a center prop is provided'
-      )
-    } else if (center === 'parent') {
-      features.left =
-        window.top.outerWidth / 2 + window.top.screenX - features.width / 2
-      features.top =
-        window.top.outerHeight / 2 + window.top.screenY - features.height / 2
-    } else if (center === 'screen') {
-      const screenLeft =
-        window.screenLeft !== undefined ? window.screenLeft : window.screen.left
-      const screenTop =
-        window.screenTop !== undefined ? window.screenTop : window.screen.top
-
-      const width = window.innerWidth
-        ? window.innerWidth
-        : document.documentElement.clientWidth
-        ? document.documentElement.clientWidth
-        : window.screen.width
-      const height = window.innerHeight
-        ? window.innerHeight
-        : document.documentElement.clientHeight
-        ? document.documentElement.clientHeight
-        : window.screen.height
-
-      features.left = width / 2 - features.width / 2 + screenLeft
-      features.top = height / 2 - features.height / 2 + screenTop
+    if (typeof center === 'string') {
+      if (features.width == null || features.height == null) {
+        console.warn(
+          'react-new-window: "width" and "height" window features must be present when a center prop is provided.'
+        )
+      } else if (center === 'parent') {
+        features.left =
+          window.top.outerWidth / 2 + window.top.screenX - features.width / 2
+        features.top =
+          window.top.outerHeight / 2 + window.top.screenY - features.height / 2
+      } else if (center === 'screen') {
+        const screenLeft =
+          window.screenLeft != null ? window.screenLeft : window.screen.left
+        const screenTop =
+          window.screenTop != null ? window.screenTop : window.screen.top
+
+        const width = window.innerWidth
+          ? window.innerWidth
+          : document.documentElement.clientWidth
+          ? document.documentElement.clientWidth
+          : window.screen.width
+        const height = window.innerHeight
+          ? window.innerHeight
+          : document.documentElement.clientHeight
+          ? document.documentElement.clientHeight
+          : window.screen.height
+
+        features.left = width / 2 - features.width / 2 + screenLeft
+        features.top = height / 2 - features.height / 2 + screenTop
+      } else {
+        console.warn(
+          'react-new-window: Invalid `center` string provided. Only these strings are permitted: "parent", "screen".'
+        )
+      }
     }
 
     // Open a new window.

stories/default.stories.js

@@ -36,7 +36,7 @@ class DefaultStory extends React.PureComponent {
         {opened && (
           <NewWindow
             onUnload={() => this.newWindowUnloaded()}
-            features={{ left: 200, top: 200, width: 400, height: 400 }}
+            features={{ width: 400, height: 400 }}
           >
             <h2>Hi 👋</h2>
             <h4>Counting here as well {count}...</h4>

stories/features-prop.stories.js

@@ -97,7 +97,6 @@ class FeaturesPropStory extends React.PureComponent {
         </Button>
         {opened && (
           <NewWindow
-            center={false}
             features={features}
             onUnload={() => this.newWindowUnloaded()}
           >

stories/position-centered-to-parent.stories.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import NewWindow from '../src/NewWindow'
+import Button from './components/Button'
+import Container from './components/Container'
+import { storiesOf } from '@storybook/react'
+
+const stories = storiesOf('react-new-window', module)
+
+class CenteredToParentStory extends React.PureComponent {
+  state = {
+    opened: false,
+    count: 0
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState(prevState => ({ count: prevState.count + 1 }))
+    }, 1000)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    const { opened, count } = this.state
+    return (
+      <Container>
+        <h2>React New Window</h2>
+        <h3>prop: center: "parent"</h3>
+        <h4>Counting {count}...</h4>
+        <Button onClick={() => this.toggleOpened()}>
+          {opened ? 'Close the opened window' : 'Open a new window'}
+        </Button>
+        {opened && (
+          <NewWindow
+            onUnload={() => this.newWindowUnloaded()}
+            center="parent"
+            features={{ left: 200, top: 200, width: 400, height: 400 }}
+          >
+            <h2>Hi 👋</h2>
+            <h4>Counting here as well {count}...</h4>
+            <Button>Keeping the same style as my parent</Button>
+          </NewWindow>
+        )}
+      </Container>
+    )
+  }
+
+  toggleOpened() {
+    action(this.state.opened ? 'Closing the window' : 'Opening the window')()
+    this.setState(prevState => ({ opened: !prevState.opened }))
+  }
+
+  newWindowUnloaded() {
+    action('Window unloaded')()
+    this.setState({ opened: false })
+  }
+}
+
+stories.add('Position: Centered To Parent', () => <CenteredToParentStory />)

stories/position-centered-to-screen.stories.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import NewWindow from '../src/NewWindow'
+import Button from './components/Button'
+import Container from './components/Container'
+import { storiesOf } from '@storybook/react'
+
+const stories = storiesOf('react-new-window', module)
+
+class CenteredToScreenStory extends React.PureComponent {
+  state = {
+    opened: false,
+    count: 0
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState(prevState => ({ count: prevState.count + 1 }))
+    }, 1000)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    const { opened, count } = this.state
+    return (
+      <Container>
+        <h2>React New Window</h2>
+        <h3>prop: center: "screen"</h3>
+        <h4>Counting {count}...</h4>
+        <Button onClick={() => this.toggleOpened()}>
+          {opened ? 'Close the opened window' : 'Open a new window'}
+        </Button>
+        {opened && (
+          <NewWindow
+            onUnload={() => this.newWindowUnloaded()}
+            center="screen"
+            features={{ left: 200, top: 200, width: 400, height: 400 }}
+          >
+            <h2>Hi 👋</h2>
+            <h4>Counting here as well {count}...</h4>
+            <Button>Keeping the same style as my parent</Button>
+          </NewWindow>
+        )}
+      </Container>
+    )
+  }
+
+  toggleOpened() {
+    action(this.state.opened ? 'Closing the window' : 'Opening the window')()
+    this.setState(prevState => ({ opened: !prevState.opened }))
+  }
+
+  newWindowUnloaded() {
+    action('Window unloaded')()
+    this.setState({ opened: false })
+  }
+}
+
+stories.add('Position: Centered To Screen', () => <CenteredToScreenStory />)

types/NewWindow.d.ts

@@ -13,6 +13,14 @@ declare module 'react-new-window' {
   export interface IWindowFeatures {
     height: number
     width: number
+    left: number
+    top: number
+    menubar: boolean
+    toolbar: boolean
+    scrollbars: boolean
+    location: boolean
+    status: boolean
+    resizable: boolean
     [i: string]: boolean | number | string
   }
 
@@ -40,7 +48,7 @@ declare module 'react-new-window' {
     /**
      * The set of window features.
      */
-    features?: IWindowFeatures
+    features?: Partial<IWindowFeatures>
 
     /**
      * A function to be triggered before the new window unload.