From 4d906e231ce5133ca314cc5d155c0b47e969acd9 Mon Sep 17 00:00:00 2001
From: Stefano Baldan <singintime@gmail.com>
Date: Thu, 4 Jul 2024 20:28:51 +0200
Subject: [PATCH] Global switch for enabling/disabling animations (#218)

* Global switch for enabling/disabling animations

* Running tests, formatting, documenting, finalizing

* Re-exporting global animation switch functions in react-flip-toolkit
---
 packages/flip-toolkit/src/Flipper.ts     |  2 +-
 packages/flip-toolkit/src/flip/index.ts  | 11 ++++++++++-
 packages/flip-toolkit/src/index.ts       |  2 +-
 packages/react-flip-toolkit/README.md    | 16 ++++++++++++++++
 packages/react-flip-toolkit/src/index.ts |  1 +
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/flip-toolkit/src/Flipper.ts b/packages/flip-toolkit/src/Flipper.ts
index eaa39b1a..9154fbf2 100644
--- a/packages/flip-toolkit/src/Flipper.ts
+++ b/packages/flip-toolkit/src/Flipper.ts
@@ -1,4 +1,4 @@
-import onFlipKeyUpdate from './flip'
+import { onFlipKeyUpdate } from './flip'
 import getFlippedElementPositionsBeforeUpdate from './flip/getFlippedElementPositions/getFlippedElementPositionsBeforeUpdate'
 import { assign } from './utilities'
 import {
diff --git a/packages/flip-toolkit/src/flip/index.ts b/packages/flip-toolkit/src/flip/index.ts
index ece5a566..a4be85e8 100644
--- a/packages/flip-toolkit/src/flip/index.ts
+++ b/packages/flip-toolkit/src/flip/index.ts
@@ -15,6 +15,14 @@ import {
   ScopedSelector
 } from './animateFlippedElements/types'
 
+let enabled = true
+
+const disableFlip = () => (enabled = false)
+
+const enableFlip = () => (enabled = true)
+
+const isFlipEnabled = () => enabled
+
 const createPortalScopedSelector =
   (portalKey: string) => (selector: string) => {
     return toArray(
@@ -73,6 +81,7 @@ const onFlipKeyUpdate = ({
   onComplete,
   onStart
 }: OnFlipKeyUpdateArgs) => {
+  if (!enabled) return
   const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
   if (mediaQuery.matches) return
   const flippedElementPositionsAfterUpdate =
@@ -150,4 +159,4 @@ const onFlipKeyUpdate = ({
   }
 }
 
-export default onFlipKeyUpdate
+export { disableFlip, enableFlip, isFlipEnabled, onFlipKeyUpdate }
diff --git a/packages/flip-toolkit/src/index.ts b/packages/flip-toolkit/src/index.ts
index 87a5bdac..d9d61d2a 100644
--- a/packages/flip-toolkit/src/index.ts
+++ b/packages/flip-toolkit/src/index.ts
@@ -2,6 +2,6 @@ import * as utilities from './utilities'
 import * as constants from './constants'
 export { default as Flipper } from './Flipper'
 export { default as getFlippedElementPositionsBeforeUpdate } from './flip/getFlippedElementPositions/getFlippedElementPositionsBeforeUpdate'
-export { default as onFlipKeyUpdate } from './flip'
+export * from './flip'
 export { utilities, constants }
 export { default as spring } from './Spring'
diff --git a/packages/react-flip-toolkit/README.md b/packages/react-flip-toolkit/README.md
index 0037ef8c..9196b21c 100644
--- a/packages/react-flip-toolkit/README.md
+++ b/packages/react-flip-toolkit/README.md
@@ -278,6 +278,20 @@ That means any layout styles &mdash; padding, flexbox, etc&mdash;should be appli
 - [React-flip-toolkit logo](https://codepen.io/aholachek/pen/ERRpEj)
 - [Using Portals](https://react-flip-toolkit-demos.surge.sh/portal)
 
+## Global configuration
+
+### `disableFlip()`
+
+Global switch to disable all animations in all `Flipper` containers.
+
+### `enableFlip()`
+
+Global switch to (re-)enable all animations in all `Flipper` containers. Animations are enabled by default. Calling this function is needed only if animations were previously disabled with `disableFlip()`.
+
+### `isFlipEnabled()`
+
+Returns a boolean indicating whether animations are globally enabled or disabled.
+
 ## The Components
 
 ### `Flipper`
@@ -486,6 +500,8 @@ spring({
 - If one of your `Flipped` components is wrapping another React component rather than a DOM element, [use a render prop to get the Flipped props](#wrapping-a-react-component) and pass down to the necessary DOM element.
 - Is the element that's receiving props from `Flipped` visible in the DOM? `react-flip-toolkit` attempts to optimize performance by not animating elements that are off-screen or elements that have no width or height.
 - `display:inline` elements cannot be animated. If you want an `inline` element to animate, set `display:inline-block`.
+- Do you have the [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting turned on? As of v7.1.0 that setting will disable all animations.
+- Make sure you didn't disable animations using `disableFlip()`. You can check if animations are enabled or disabled by calling `isFlipEnabled()`. `enableFlip()` will re-enable FLIP animations globally.
 
 ### Problem #2: Things look weird / animations aren't behaving
 
diff --git a/packages/react-flip-toolkit/src/index.ts b/packages/react-flip-toolkit/src/index.ts
index 28748492..ec812cb1 100644
--- a/packages/react-flip-toolkit/src/index.ts
+++ b/packages/react-flip-toolkit/src/index.ts
@@ -1,3 +1,4 @@
+export { disableFlip, enableFlip, isFlipEnabled } from 'flip-toolkit'
 export { default as Flipper } from './Flipper'
 export { default as Flipped } from './Flipped'
 export { default as ExitContainer } from './ExitContainer'