first commit
This commit is contained in:
19
node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs
generated
vendored
Normal file
19
node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs
generated
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
import { isBrowser } from '../is-browser.mjs';
|
||||
import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
|
||||
|
||||
function initPrefersReducedMotion() {
|
||||
hasReducedMotionListener.current = true;
|
||||
if (!isBrowser)
|
||||
return;
|
||||
if (window.matchMedia) {
|
||||
const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
|
||||
const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
|
||||
motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
|
||||
setReducedMotionPreferences();
|
||||
}
|
||||
else {
|
||||
prefersReducedMotion.current = false;
|
||||
}
|
||||
}
|
||||
|
||||
export { initPrefersReducedMotion };
|
||||
5
node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
generated
vendored
Normal file
5
node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
// Does this device prefer reduced motion? Returns `null` server-side.
|
||||
const prefersReducedMotion = { current: null };
|
||||
const hasReducedMotionListener = { current: false };
|
||||
|
||||
export { hasReducedMotionListener, prefersReducedMotion };
|
||||
20
node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs
generated
vendored
Normal file
20
node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs
generated
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
"use client";
|
||||
import { useContext } from 'react';
|
||||
import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
|
||||
import { useReducedMotion } from './use-reduced-motion.mjs';
|
||||
|
||||
function useReducedMotionConfig() {
|
||||
const reducedMotionPreference = useReducedMotion();
|
||||
const { reducedMotion } = useContext(MotionConfigContext);
|
||||
if (reducedMotion === "never") {
|
||||
return false;
|
||||
}
|
||||
else if (reducedMotion === "always") {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return reducedMotionPreference;
|
||||
}
|
||||
}
|
||||
|
||||
export { useReducedMotionConfig };
|
||||
48
node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
generated
vendored
Normal file
48
node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
generated
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
import { warnOnce } from 'motion-utils';
|
||||
import { useState } from 'react';
|
||||
import { initPrefersReducedMotion } from './index.mjs';
|
||||
import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
|
||||
|
||||
/**
|
||||
* A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
|
||||
*
|
||||
* This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
|
||||
* `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
|
||||
*
|
||||
* It will actively respond to changes and re-render your components with the latest setting.
|
||||
*
|
||||
* ```jsx
|
||||
* export function Sidebar({ isOpen }) {
|
||||
* const shouldReduceMotion = useReducedMotion()
|
||||
* const closedX = shouldReduceMotion ? 0 : "-100%"
|
||||
*
|
||||
* return (
|
||||
* <motion.div animate={{
|
||||
* opacity: isOpen ? 1 : 0,
|
||||
* x: isOpen ? 0 : closedX
|
||||
* }} />
|
||||
* )
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @return boolean
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function useReducedMotion() {
|
||||
/**
|
||||
* Lazy initialisation of prefersReducedMotion
|
||||
*/
|
||||
!hasReducedMotionListener.current && initPrefersReducedMotion();
|
||||
const [shouldReduceMotion] = useState(prefersReducedMotion.current);
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
|
||||
}
|
||||
/**
|
||||
* TODO See if people miss automatically updating shouldReduceMotion setting
|
||||
*/
|
||||
return shouldReduceMotion;
|
||||
}
|
||||
|
||||
export { useReducedMotion };
|
||||
Reference in New Issue
Block a user