Migrate @nivo/line to TypeScript

packages/line/index.d.ts → packages/line/__old_index.d.ts

@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import * as React from 'react'
 import {
     Dimensions,

packages/line/package.json

@@ -21,11 +21,12 @@
   ],
   "main": "./dist/nivo-line.cjs.js",
   "module": "./dist/nivo-line.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
-    "dist/"
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
     "@nivo/annotations": "0.79.1",

packages/line/src/Areas.tsx

@@ -0,0 +1,69 @@
+import { memo } from 'react'
+import { useSpring, animated } from '@react-spring/web'
+import { useAnimatedPath, useMotionConfig, CssMixBlendMode } from '@nivo/core'
+import { AreaGenerator, LineDatum } from './types'
+
+const AreaPath = ({
+    blendMode,
+    opacity,
+    color,
+    fill,
+    path,
+}: {
+    blendMode: CssMixBlendMode
+    opacity: number
+    color: string
+    fill?: string
+    path: string
+}) => {
+    const { animate, config: springConfig } = useMotionConfig()
+
+    const animatedPath = useAnimatedPath(path)
+    const animatedProps = useSpring({
+        color,
+        config: springConfig,
+        immediate: !animate,
+    })
+
+    return (
+        <animated.path
+            d={animatedPath}
+            fill={fill ? fill : animatedProps.color}
+            fillOpacity={opacity}
+            strokeWidth={0}
+            style={{
+                mixBlendMode: blendMode,
+            }}
+        />
+    )
+}
+
+const NonMemoizedAreas = <Datum extends LineDatum>({
+    areaGenerator,
+    areaOpacity,
+    areaBlendMode,
+    lines,
+}: {
+    areaGenerator: AreaGenerator<Datum>
+    areaOpacity: number
+    areaBlendMode: CssMixBlendMode
+    lines: any[]
+}) => {
+    const computedLines = lines.slice(0).reverse()
+
+    return (
+        <g>
+            {computedLines.map(line => (
+                <AreaPath
+                    key={line.id}
+                    path={areaGenerator(line.data.map(d => d.position))}
+                    opacity={areaOpacity}
+                    blendMode={areaBlendMode}
+                    {...line}
+                />
+            ))}
+        </g>
+    )
+}
+
+export const Areas = memo(NonMemoizedAreas) as typeof NonMemoizedAreas