feat(funnel): add the ability to disable animations

plouc · Jun 17, 2020 · 7055d3d · 7055d3d
1 parent 99359f5
commit 7055d3d
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 47 deletions.
diff --git a/packages/funnel/src/Part.js b/packages/funnel/src/Part.js
@@ -12,7 +12,7 @@ import { useSpring, animated } from 'react-spring'
 import { useMotionConfig } from '@nivo/core'
 
 export const Part = ({ part, areaGenerator, borderGenerator }) => {
-    const { config: motionConfig } = useMotionConfig()
+    const { animate, config: motionConfig } = useMotionConfig()
 
     const animatedProps = useSpring({
         areaPath: areaGenerator(part.areaPoints),
@@ -21,6 +21,7 @@ export const Part = ({ part, areaGenerator, borderGenerator }) => {
         borderWidth: part.borderWidth,
         borderColor: part.borderColor,
         config: motionConfig,
+        immediate: !animate,
     })
 
     return (

diff --git a/packages/funnel/src/Separator.js b/packages/funnel/src/Separator.js
@@ -13,14 +13,15 @@ import { useTheme, useMotionConfig } from '@nivo/core'
 
 export const Separator = ({ separator }) => {
     const theme = useTheme()
-    const { config: motionConfig } = useMotionConfig()
+    const { animate, config: motionConfig } = useMotionConfig()
 
     const animatedProps = useSpring({
         x1: separator.x0,
         x2: separator.x1,
         y1: separator.y0,
         y2: separator.y1,
         config: motionConfig,
+        immediate: !animate,
     })
 
     return (

diff --git a/website/src/data/components/funnel/props.js b/website/src/data/components/funnel/props.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { FunnelDefaultProps as defaults } from '@nivo/funnel'
-import { groupProperties } from '../../../lib/componentProperties'
+import { groupProperties, motionProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -353,6 +353,7 @@ const props = [
         type: '(part, event) => void',
         required: false,
     },
+    ...motionProperties(['svg'], defaults, 'react-spring'),
 ]
 
 export const groups = groupProperties(props)
diff --git a/website/src/lib/componentProperties.js b/website/src/lib/componentProperties.js
@@ -39,51 +39,60 @@ export const defsProperties = (group, flavors) => [
     },
 ]
 
-export const motionProperties = (flavors, defaults) => [
-    {
-        key: 'animate',
-        flavors,
-        help: 'Enable/disable transitions.',
-        type: 'boolean',
-        required: false,
-        defaultValue: defaults.animate !== undefined ? defaults.animate : defaultAnimate,
-        controlType: 'switch',
-        group: 'Motion',
-    },
-    {
-        key: 'motionStiffness',
-        flavors,
-        help: 'Motion stiffness.',
-        type: 'number',
-        required: false,
-        defaultValue:
-            defaults.motionStiffness !== undefined
-                ? defaults.motionStiffness
-                : defaultMotionStiffness,
-        controlType: 'range',
-        group: 'Motion',
-        controlOptions: {
-            min: 0,
-            max: 300,
-            step: 5,
-        },
-    },
-    {
-        key: 'motionDamping',
-        flavors,
-        help: 'Motion damping.',
-        type: 'number',
-        required: false,
-        defaultValue:
-            defaults.motionDamping !== undefined ? defaults.motionDamping : defaultMotionDamping,
-        controlType: 'range',
-        group: 'Motion',
-        controlOptions: {
-            min: 0,
-            max: 40,
+export const motionProperties = (flavors, defaults, type = 'react-motion') => {
+    const props = [
+        {
+            key: 'animate',
+            flavors,
+            help: 'Enable/disable transitions.',
+            type: 'boolean',
+            required: false,
+            defaultValue: defaults.animate !== undefined ? defaults.animate : defaultAnimate,
+            controlType: 'switch',
+            group: 'Motion',
         },
-    },
-]
+    ]
+
+    if (type === 'react-motion') {
+        props.push({
+            key: 'motionStiffness',
+            flavors,
+            help: 'Motion stiffness.',
+            type: 'number',
+            required: false,
+            defaultValue:
+                defaults.motionStiffness !== undefined
+                    ? defaults.motionStiffness
+                    : defaultMotionStiffness,
+            controlType: 'range',
+            group: 'Motion',
+            controlOptions: {
+                min: 0,
+                max: 300,
+                step: 5,
+            },
+        })
+        props.push({
+            key: 'motionDamping',
+            flavors,
+            help: 'Motion damping.',
+            type: 'number',
+            required: false,
+            defaultValue:
+                defaults.motionDamping !== undefined
+                    ? defaults.motionDamping
+                    : defaultMotionDamping,
+            controlType: 'range',
+            group: 'Motion',
+            controlOptions: {
+                min: 0,
+                max: 40,
+            },
+        })
+    }
+
+    return props
+}
 
 export const axesProperties = ({ flavors, exclude = [] } = {}) =>
     [