typescript(vx-shape): update types path, update all restProps signatu…

…res to omit own props
airbnb · Sep 20, 2019 · 4ece259 · 4ece259
1 parent 305636e
commit 4ece259
Show file tree

Hide file tree

Showing 30 changed files with 62 additions and 60 deletions.
diff --git a/packages/vx-shape/.notes b/packages/vx-shape/.notes
diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx
@@ -41,7 +41,7 @@ export default function Arc<Datum>({
   children,
   innerRef,
   ...restProps
-}: ArcProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: ArcProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof ArcProps<Datum>>) {
   const arc = d3Arc<Datum>();
   if (innerRadius != null) setNumOrAccessor(arc.innerRadius, innerRadius);
   if (outerRadius != null) setNumOrAccessor(arc.outerRadius, outerRadius);

diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx
@@ -45,7 +45,7 @@ export default function Area<Datum>({
   curve,
   innerRef,
   ...restProps
-}: AreaProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: AreaProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof AreaProps<Datum>>) {
   const path = area<Datum>();
   if (x) path.x(x);
   if (x0) path.x0(x0);
@@ -57,13 +57,6 @@ export default function Area<Datum>({
   if (curve) path.curve(curve);
   if (children) return <>{children({ path })}</>;
   return (
-    <g>
-      <path
-        ref={innerRef}
-        className={cx('vx-area', className)}
-        d={path(data) || ''}
-        {...restProps}
-      />
-    </g>
+    <path ref={innerRef} className={cx('vx-area', className)} d={path(data) || ''} {...restProps} />
   );
 }
diff --git a/packages/vx-shape/src/shapes/AreaClosed.tsx b/packages/vx-shape/src/shapes/AreaClosed.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { area } from 'd3-shape';
 import { AreaProps } from './Area';
-import { ScaleType } from './link/types';
+import { ScaleType } from '../types';
 
 export type AreaClosedProps<Datum> = {
   yScale: ScaleType;
@@ -37,7 +37,7 @@ export default function AreaClosed<Datum>({
   innerRef,
   children,
   ...restProps
-}: AreaClosedProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: AreaClosedProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof AreaClosedProps<Datum>>) {
   const path = area<Datum>();
   if (x) path.x(x);
   if (x0) path.x0(x0);

diff --git a/packages/vx-shape/src/shapes/AreaStack.tsx b/packages/vx-shape/src/shapes/AreaStack.tsx
@@ -42,7 +42,7 @@ export default function AreaStack<Datum>({
   color,
   children,
   ...restProps
-}: AreaStackProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: AreaStackProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof AreaStackProps<Datum>>) {
   return (
     <Stack<Datum>
       className={className}

diff --git a/packages/vx-shape/src/shapes/Bar.tsx b/packages/vx-shape/src/shapes/Bar.tsx
@@ -12,6 +12,6 @@ export default function Bar({
   className,
   innerRef,
   ...restProps
-}: BarProps & React.SVGProps<SVGRectElement>) {
+}: BarProps & Omit<React.SVGProps<SVGRectElement>, keyof BarProps>) {
   return <rect ref={innerRef} className={cx('vx-bar', className)} {...restProps} />;
 }
diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Group } from '@vx/group';
 import Bar from './Bar';
-import { ScaleType } from './link/types';
+import { ScaleType } from '../types';
 
 type Key = string;
 
@@ -112,7 +112,7 @@ export default function BarGroup<Datum extends { [key: string]: number }>({
   height,
   children,
   ...restProps
-}: BarGroupProps<Datum>) {
+}: BarGroupProps<Datum> & Omit<React.SVGProps<SVGRectElement>, keyof BarGroupProps<Datum>>) {
   const x1Range = x1Scale.range();
   const x1Domain = x1Scale.domain();
 

diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Group } from '@vx/group';
 import Bar from './Bar';
 import { BarGroupProps } from './BarGroup';
-import { ScaleType } from './link/types';
+import { ScaleType } from '../types';
 
 type Key = string;
 
@@ -69,7 +69,8 @@ export default function BarGroupHorizontal<Datum extends { [key: string]: number
   width,
   children,
   ...restProps
-}: BarGroupHorizontalProps<Datum>) {
+}: BarGroupHorizontalProps<Datum> &
+  Omit<React.SVGProps<SVGRectElement>, keyof BarGroupHorizontalProps<Datum>>) {
   const y1Range = y1Scale.range();
   const y1Domain = y1Scale.domain();
   const barHeight =

diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx
@@ -7,7 +7,7 @@ import stackOrder from '../util/stackOrder';
 import stackOffset from '../util/stackOffset';
 import Bar from './Bar';
 import { StackProps, Key } from './Stack';
-import { ScaleType } from './link/types';
+import { ScaleType } from '../types';
 
 export type BarStackProps<Datum> = Pick<
   StackProps<Datum>,
@@ -61,7 +61,7 @@ export default function BarStack<Datum>({
   offset,
   children,
   ...restProps
-}: BarStackProps<Datum>) {
+}: BarStackProps<Datum> & Omit<React.SVGProps<SVGRectElement>, keyof BarStackProps<Datum>>) {
   const stack = d3stack<Datum>();
   if (keys) stack.keys(keys);
   if (value) stack.value(value);

diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx
@@ -48,7 +48,8 @@ export default function BarStackHorizontal<Datum>({
   offset,
   children,
   ...restProps
-}: BarStackHorizontalProps<Datum>) {
+}: BarStackHorizontalProps<Datum> &
+  Omit<React.SVGProps<SVGRectElement>, keyof BarStackHorizontalProps<Datum>>) {
   const stack = d3stack<Datum>();
   if (keys) stack.keys(keys);
   if (value) stack.value(value);

diff --git a/packages/vx-shape/src/shapes/Circle.tsx b/packages/vx-shape/src/shapes/Circle.tsx
@@ -12,6 +12,6 @@ export default function Circle({
   className,
   innerRef,
   ...restProps
-}: CircleProps & React.SVGProps<SVGCircleElement>) {
+}: CircleProps & Omit<React.SVGProps<SVGCircleElement>, keyof CircleProps>) {
   return <circle ref={innerRef} className={cx('vx-circle', className)} {...restProps} />;
 }
diff --git a/packages/vx-shape/src/shapes/Line.tsx b/packages/vx-shape/src/shapes/Line.tsx
@@ -26,7 +26,7 @@ export default function Line({
   className,
   innerRef,
   ...restProps
-}: LineProps & Omit<React.SVGProps<SVGLineElement>, 'from' | 'to'>) {
+}: LineProps & Omit<React.SVGProps<SVGLineElement>, keyof LineProps>) {
   return (
     <line
       ref={innerRef}

diff --git a/packages/vx-shape/src/shapes/LinePath.tsx b/packages/vx-shape/src/shapes/LinePath.tsx
@@ -34,7 +34,7 @@ export default function LinePath<Datum>({
   innerRef,
   defined = () => true,
   ...restProps
-}: LinePathProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: LinePathProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof LinePathProps<Datum>>) {
   const path = line<Datum>();
   if (x) path.x(x);
   if (y) path.y(y);

diff --git a/packages/vx-shape/src/shapes/LineRadial.tsx b/packages/vx-shape/src/shapes/LineRadial.tsx
@@ -26,7 +26,7 @@ export default function LineRadial<Datum>({
   children,
   fill = 'transparent',
   ...restProps
-}: LineRadialProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: LineRadialProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof LineRadialProps<Datum>>) {
   const path = radialLine<Datum>();
   if (angle) path.angle(angle);
   if (radius) path.radius(radius);

diff --git a/packages/vx-shape/src/shapes/Pie.tsx b/packages/vx-shape/src/shapes/Pie.tsx
@@ -61,7 +61,7 @@ export default function Pie<Datum>({
   pieValue,
   children,
   ...restProps
-}: PieProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: PieProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof PieProps<Datum>>) {
   const path = d3Arc<PieArcDatum<Datum>>();
 
   if (innerRadius != null) setNumOrAccessor(path.innerRadius, innerRadius);

diff --git a/packages/vx-shape/src/shapes/Polygon.tsx b/packages/vx-shape/src/shapes/Polygon.tsx
@@ -65,7 +65,7 @@ export default function Polygon({
   children,
   innerRef,
   ...restProps
-}: PolygonProps & React.SVGProps<SVGPolygonElement>) {
+}: PolygonProps & Omit<React.SVGProps<SVGPolygonElement>, keyof PolygonProps>) {
   const points: [number, number][] = getPoints({
     sides,
     size,

diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx
@@ -77,7 +77,7 @@ export default function Stack<Datum>({
   color,
   children,
   ...restProps
-}: StackProps<Datum> & React.SVGProps<SVGPathElement>) {
+}: StackProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof StackProps<Datum>>) {
   const stack = d3stack<Datum>();
   if (keys) stack.keys(keys);
   if (value) stack.value(value);

diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { path as d3Path } from 'd3-path';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathHorizontalCurve<Link, Node>({
   source,
@@ -49,7 +49,8 @@ export default function LinkHorizontalCurve<Link, Node>({
   source = (l: any) => l && l.source,
   target = (l: any) => l && l.target,
   ...restProps
-}: LinkHorizontalCurveProps<Link, Node>) {
+}: LinkHorizontalCurveProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkHorizontalCurveProps<Link, Node>>) {
   const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { path as d3Path } from 'd3-path';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathRadialCurve<Link, Node>({
   source,
@@ -59,7 +59,8 @@ export default function LinkRadialCurve<Link, Node>({
   source = (l: any) => l && l.source,
   target = (l: any) => l && l.target,
   ...restProps
-}: LinkRadialCurveProps<Link, Node>) {
+}: LinkRadialCurveProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkRadialCurveProps<Link, Node>>) {
   const pathGen = path || pathRadialCurve({ source, target, x, y, percent });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { path as d3Path } from 'd3-path';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathVerticalCurve<Link, Node>({
   source,
@@ -49,7 +49,8 @@ export default function LinkVerticalCurve<Link, Node>({
   source = (l: any) => l && l.source,
   target = (l: any) => l && l.target,
   ...restProps
-}: LinkVerticalCurveProps<Link, Node>) {
+}: LinkVerticalCurveProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkVerticalCurveProps<Link, Node>>) {
   const pathGen = path || pathVerticalCurve({ source, target, x, y, percent });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { linkHorizontal } from 'd3-shape';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathHorizontalDiagonal<Link, Node>({
   source,
@@ -33,7 +33,8 @@ export default function LinkHorizontalDiagonal<Link, Node>({
   source = (l: any) => l && l.source,
   target = (l: any) => l && l.target,
   ...restProps
-}: LinkHorizontalDiagonalProps<Link, Node>) {
+}: LinkHorizontalDiagonalProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkHorizontalDiagonalProps<Link, Node>>) {
   const pathGen = path || pathHorizontalDiagonal({ source, target, x, y });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
-import { linkRadial } from 'd3-shape';
-import { SharedLinkProps, RadialAccessorProps } from '../types';
+import { linkRadial, LinkRadial } from 'd3-shape';
+import { SharedLinkProps, RadialAccessorProps } from '../../../types';
 
 export function pathRadialDiagonal<Link, Node>({
   source,
@@ -36,7 +36,8 @@ export default function LinkRadialDiagonal<Link, Node>({
   source = (n: any) => n.source,
   target = (n: any) => n.target,
   ...restProps
-}: LinkRadialDiagonalProps<Node, Link>) {
+}: LinkRadialDiagonalProps<Node, Link> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkRadialDiagonalProps<Link, Node>>) {
   const pathGen = path || pathRadialDiagonal({ source, target, angle, radius });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { linkVertical } from 'd3-shape';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathVerticalDiagonal<Link, Node>({
   source,
@@ -32,7 +32,8 @@ export default function LinkVerticalDiagonal<Link, Node>({
   source = (d: any) => d.source,
   target = (d: any) => d.target,
   ...restProps
-}: LinkVerticalDiagonalProps<Link, Node>) {
+}: LinkVerticalDiagonalProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkVerticalDiagonalProps<Link, Node>>) {
   const pathGen = path || pathVerticalDiagonal({ source, target, x, y });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { path as d3Path } from 'd3-path';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathHorizontalLine<Link, Node>({
   source,
@@ -39,7 +39,8 @@ export default function LinkHorizontalLine<Link, Node>({
   source = (d: any) => d.source,
   target = (d: any) => d.target,
   ...restProps
-}: LinkHorizontalLineProps<Link, Node>) {
+}: LinkHorizontalLineProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkHorizontalLineProps<Link, Node>>) {
   const pathGen = path || pathHorizontalLine({ source, target, x, y });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { path as d3Path } from 'd3-path';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathRadialLine<Link, Node>({
   source,
@@ -44,7 +44,8 @@ export default function LinkRadialLine<Link, Node>({
   target = (d: any) => d.target,
   children,
   ...restProps
-}: LinkRadialLineProps<Link, Node>) {
+}: LinkRadialLineProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkRadialLineProps<Link, Node>>) {
   const pathGen = path || pathRadialLine({ source, target, x, y });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { path as d3Path } from 'd3-path';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathVerticalLine<Link, Node>({
   source,
@@ -39,7 +39,8 @@ export default function LinkVerticalLine<Link, Node>({
   target = (d: any) => d.target,
   children,
   ...restProps
-}: LinkVerticalLineProps<Link, Node>) {
+}: LinkVerticalLineProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkVerticalLineProps<Link, Node>>) {
   const pathGen = path || pathVerticalLine({ source, target, x, y });
   if (children) return <>{children({ path })}</>;
   return (

diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { path as d3Path } from 'd3-path';
-import { SharedLinkProps, AccessorProps } from '../types';
+import { SharedLinkProps, AccessorProps } from '../../../types';
 
 export function pathHorizontalStep<Link, Node>({
   source,
@@ -46,7 +46,8 @@ export default function LinkHorizontalStep<Link, Node>({
   target = (d: any) => d.target,
   children,
   ...restProps
-}: LinkHorizontalStepProps<Link, Node>) {
+}: LinkHorizontalStepProps<Link, Node> &
+  Omit<React.SVGProps<SVGPathElement>, keyof LinkHorizontalStepProps<Link, Node>>) {
   const pathGen = path || pathHorizontalStep({ source, target, x, y, percent });
   if (children) return <>{children({ path })}</>;
   return (