feat(marimekko): improve motion configuration

plouc · Nov 16, 2020 · 7df0580 · 7df0580
1 parent 66d2f4f
commit 7df0580
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 8 deletions.
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -139,9 +139,18 @@ declare module '@nivo/core' {
 
     export type ModernMotionProps = Partial<{
         animate: boolean
-        motionConfig: string
+        motionConfig: string | SpringConfig
     }>
 
+    export function useMotionConfig(): {
+        animate: boolean
+        config: SpringConfig
+        springConfig: {
+            stiffness: number
+            damping: number
+        }
+    }
+
     export type SvgFillMatcher<T> = (datum: T) => boolean
     export interface SvgDefsAndFill<T> {
         defs?: {

diff --git a/packages/marimekko/src/Bars.tsx b/packages/marimekko/src/Bars.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { useTransition, config } from 'react-spring'
+import { useTransition } from 'react-spring'
+import { useMotionConfig } from '@nivo/core'
 import { BarDatum, MouseEventHandlers } from './types'
 import { Bar } from './Bar'
 
@@ -16,6 +17,8 @@ export const Bars = <RawDatum,>({
     onMouseMove,
     onMouseLeave,
 }: BarsProps<RawDatum>) => {
+    const { animate, config: springConfig } = useMotionConfig()
+
     const transition = useTransition<
         BarDatum<RawDatum>,
         {
@@ -73,8 +76,8 @@ export const Bars = <RawDatum,>({
             height: bar.height,
             color: bar.color,
         }),
-        config: config.wobbly,
-        //immediate: !animate,
+        config: springConfig,
+        immediate: !animate,
     })
 
     return (

diff --git a/packages/marimekko/src/Marimekko.tsx b/packages/marimekko/src/Marimekko.tsx
@@ -99,7 +99,12 @@ export const Marimekko = <RawDatum,>({
     animate = defaultProps.animate,
     ...otherProps
 }: SvgProps<RawDatum>) => (
-    <Container theme={otherProps.theme} isInteractive={isInteractive} animate={animate}>
+    <Container
+        theme={otherProps.theme}
+        isInteractive={isInteractive}
+        animate={animate}
+        motionConfig={otherProps.motionConfig}
+    >
         <InnerMarimekko<RawDatum> isInteractive={isInteractive} animate={animate} {...otherProps} />
     </Container>
 )
diff --git a/packages/marimekko/src/props.ts b/packages/marimekko/src/props.ts
@@ -15,4 +15,5 @@ export const defaultProps = {
     isInteractive: true,
 
     animate: true,
+    motionConfig: 'gentle',
 }
diff --git a/packages/marimekko/src/types.ts b/packages/marimekko/src/types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Dimensions, Theme, SvgDefsAndFill } from '@nivo/core'
+import { Box, Dimensions, Theme, SvgDefsAndFill, ModernMotionProps } from '@nivo/core'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 
@@ -95,8 +95,6 @@ export type CommonProps<RawDatum> = {
 
     legends: LegendProps[]
 
-    animate: boolean
-
     role: string
 }
 
@@ -115,6 +113,7 @@ export type MouseEventHandlers<RawDatum, ElementType> = Partial<{
 export type SvgProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
     Partial<CommonProps<RawDatum>> &
+    ModernMotionProps &
     SvgDefsAndFill<ComputedDatum<RawDatum>> &
     MouseEventHandlers<RawDatum, SVGRectElement> & {
         layers?: Layer<RawDatum>[]
@@ -123,6 +122,7 @@ export type SvgProps<RawDatum> = DataProps<RawDatum> &
 export type CompleteSvgProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
     CommonProps<RawDatum> &
+    ModernMotionProps &
     SvgDefsAndFill<ComputedDatum<RawDatum>> &
     MouseEventHandlers<RawDatum, SVGRectElement> & {
         layers: Layer<RawDatum>[]

diff --git a/website/src/data/components/marimekko/props.js b/website/src/data/components/marimekko/props.js
@@ -4,6 +4,7 @@ import {
     defsProperties,
     groupProperties,
     getLegendsProps,
+    motionProperties,
 } from '../../../lib/componentProperties'
 
 const props = [
@@ -264,6 +265,7 @@ const props = [
         controlType: 'switch',
         group: 'Interactivity',
     },
+    ...motionProperties(['svg'], defaults, 'react-spring'),
     {
         key: 'legends',
         flavors: ['svg', 'canvas'],

diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js
@@ -61,6 +61,9 @@ const initialProperties = {
     defs: [],
     fill: [],
 
+    animate: defaultProps.animate,
+    motionConfig: defaultProps.motionConfig,
+
     legends: [
         {
             anchor: 'bottom',