From 8e85b694f9523bbea7d6c08a28ca07d84709e1a9 Mon Sep 17 00:00:00 2001
From: Bertrand Caron <bertrand.fx.caron@gmail.com>
Date: Thu, 29 Jul 2021 10:34:54 +1000
Subject: [PATCH] Feature: Attempt at adding support for non full-windowed
 animations

* Useful if using a navbar, or any other component that obscurs part of
  the screen.
---
 README.md      | 21 +++++++++++----------
 src/index.d.ts |  4 ++++
 src/index.js   |  8 ++++++--
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 2093f7c..10574ab 100644
--- a/README.md
+++ b/README.md
@@ -32,16 +32,17 @@ const MyComponent = () => (
 
 ## Props
 
-| Name             | Type                   | Description                                | Required | Default        |
-|------------------|------------------------|--------------------------------------------|----------|----------------|
-| count            | number                 | items count to display                     | required |                |
-| origin           | {x: number, y: number} | animation position origin                  | required |                |
-| explosionSpeed   | number                 | explosion duration (ms) from origin to top |          | 350            |
-| fallSpeed        | number                 | fall duration (ms) from top to bottom      |          | 3000           |
-| fadeOut          | boolean                | make the confettis disappear at the end    |          | false          |
-| colors           | string[]               | give your own colors to the confettis      |          | default colors |
-| autoStart        | boolean                | auto start the animation                   |          | true           |
-| autoStartDelay   | number                 | delay to wait before triggering animation  |          | 0              |
+| Name             | Type                            | Description                                | Required | Default                  |
+|------------------|---------------------------------|--------------------------------------------|----------|--------------------------|
+| count            | number                          | items count to display                     | required |                          |
+| origin           | {x: number, y: number}          | animation position origin                  | required |                          |
+| window           | {width: number, height: number} | width and height of the animation "window" |          | Dimensions.get('window') |
+| explosionSpeed   | number                          | explosion duration (ms) from origin to top |          | 350                      |
+| fallSpeed        | number                          | fall duration (ms) from top to bottom      |          | 3000                     |
+| fadeOut          | boolean                         | make the confettis disappear at the end    |          | false                    |
+| colors           | string[]                        | give your own colors to the confettis      |          | default colors           |
+| autoStart        | boolean                         | auto start the animation                   |          | true                     |
+| autoStartDelay   | number                          | delay to wait before triggering animation  |          | 0                        |
 
 ## Events
 
diff --git a/src/index.d.ts b/src/index.d.ts
index 88814a0..f68e7d5 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -6,6 +6,10 @@ export interface ExplosionProps {
     x: number;
     y: number
   };
+  window?: {
+    width: number,
+    height: number,
+  },
   explosionSpeed?: number;
   fallSpeed?: number;
   colors?: string[];
diff --git a/src/index.js b/src/index.js
index 7092e70..8f5f56b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,6 +14,10 @@ type Props = {|
     x: number,
     y: number
   },
+  window?: {
+    width: number,
+    height: number,
+  },
   explosionSpeed?: number,
   fallSpeed?: number,
   colors?: Array<string>,
@@ -178,9 +182,9 @@ class Explosion extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { origin, fadeOut } = this.props;
+    const { origin, fadeOut, window } = this.props;
     const { items } = this.state;
-    const { height, width } = Dimensions.get('window');
+    const { height, width } = window ?? Dimensions.get('window');
 
     return (
       <React.Fragment>