feat(tooltip): migrate Crosshair component to TypeScript

plouc · Nov 15, 2020 · 1416e8c · 1416e8c
1 parent 6623000
commit 1416e8c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 86 deletions.
diff --git a/packages/tooltip/index.d.ts b/packages/tooltip/index.d.ts
diff --git a/packages/tooltip/src/Crosshair.js → packages/tooltip/src/Crosshair.tsx b/packages/tooltip/src/Crosshair.js → packages/tooltip/src/Crosshair.tsx
@@ -1,7 +1,16 @@
 import React, { memo } from 'react'
 import { CrosshairLine } from './CrosshairLine'
+import { CrosshairType } from './types'
 
-export const Crosshair = memo(({ width, height, type, x, y }) => {
+interface CrosshairProps {
+    width: number
+    height: number
+    type: CrosshairType
+    x: number
+    y: number
+}
+
+export const Crosshair = memo(({ width, height, type, x, y }: CrosshairProps) => {
     let xLine
     let yLine
     if (type === 'cross') {
@@ -40,19 +49,3 @@ export const Crosshair = memo(({ width, height, type, x, y }) => {
         </>
     )
 })
-
-/*
-Crosshair.displayName = 'Crosshair'
-Crosshair.propTypes = {
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    type: crosshairPropTypes.type.isRequired,
-}
-Crosshair.defaultProps = {
-    type: 'cross',
-}
-
-export default Crosshair
-*/
diff --git a/packages/tooltip/src/CrosshairLine.js → packages/tooltip/src/CrosshairLine.tsx b/packages/tooltip/src/CrosshairLine.js → packages/tooltip/src/CrosshairLine.tsx
@@ -1,8 +1,16 @@
 import React, { memo, useMemo } from 'react'
 import { useSpring, animated } from 'react-spring'
+// @ts-ignore
 import { useTheme, useMotionConfig } from '@nivo/core'
 
-export const CrosshairLine = memo(({ x0, x1, y0, y1 }) => {
+interface CrosshairLineProps {
+    x0: number
+    x1: number
+    y0: number
+    y1: number
+}
+
+export const CrosshairLine = memo(({ x0, x1, y0, y1 }: CrosshairLineProps) => {
     const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
     const style = useMemo(
@@ -24,15 +32,3 @@ export const CrosshairLine = memo(({ x0, x1, y0, y1 }) => {
 
     return <animated.line {...animatedProps} fill="none" style={style} />
 })
-
-/*
-CrosshairLine.displayName = 'CrosshairLine'
-CrosshairLine.propTypes = {
-    x0: PropTypes.number.isRequired,
-    x1: PropTypes.number.isRequired,
-    y0: PropTypes.number.isRequired,
-    y1: PropTypes.number.isRequired,
-}
-
-export default CrosshairLine
-*/