You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe/explain the bug
I am working on adding tooltip functionality to my custom barComponent (in TypeScript).
I realized that showTooltip, onMouseEnter, onMouseLeave and others won’t accept the event parameter with type
React.MouseEvent<SVGRectElement, MouseEvent>
because I think BarMouseEventHandler is a generic type with a default value HTMLCanvasElement but the generic type was not passed down at onMouseEnter: BarMouseEventHandler in BarItemProps - BarItemProps is not even generic so I can pass it in manually - right here:
And that causes to write this kind of code in TypeScript where I need to cast the types over and over again:
const handleMouseEnter = (
e: React.MouseEvent<SVGRectElement, MouseEvent>,
) => {
onMouseEnter(
data as BarExtendedDatum,
(e as unknown) as React.MouseEvent<HTMLCanvasElement, MouseEvent>,
)
if (tooltip) {
showTooltip(
tooltip(data as BarExtendedDatum),
(e as unknown) as React.MouseEvent<HTMLCanvasElement, MouseEvent>,
)
}
}
As you see I also need to type cast the data, since the callback functions are expecting (and what actually provided data prop is) BarExtendedDatum, however the provided data props is typed as:
- Change data prop type to BarExtendedDatum
- Add SVGRectElement to BarMouseEventHandler generic type
- Update deprecated React.StatelessComponent to React.FC
eggei
added a commit
to eggei/nivo
that referenced
this issue
Oct 17, 2020
- Change data prop type to BarExtendedDatum
- Add SVGRectElement to BarMouseEventHandler generic type
- Update deprecated React.StatelessComponent to React.FC
eggei
added a commit
to eggei/nivo
that referenced
this issue
Oct 17, 2020
- Change data prop type to BarExtendedDatum
- Remove color field in data prop's type - it doesn't exist in data prop
- Create BarTooltipDatum to pass color type to tooltip props along with
BarExtendedDatum
- Add SVGRectElement to BarMouseEventHandler generic type
- Update deprecated React.StatelessComponent to React.FC
Describe/explain the bug
I am working on adding tooltip functionality to my custom barComponent (in TypeScript).
I realized that
showTooltip
,onMouseEnter
,onMouseLeave
and others won’t accept the event parameter with typeReact.MouseEvent<SVGRectElement, MouseEvent>
because I think
BarMouseEventHandler
is a generic type with a default valueHTMLCanvasElement
but the generic type was not passed down atonMouseEnter: BarMouseEventHandler
inBarItemProps
-BarItemProps
is not even generic so I can pass it in manually - right here:nivo/packages/bar/index.d.ts
Lines 54 to 87 in 52c1bc1
Also, this is
showTooltip
event is hardcoded:nivo/packages/bar/index.d.ts
Line 83 in 52c1bc1
And that causes to write this kind of code in TypeScript where I need to cast the types over and over again:
As you see I also need to type cast the data, since the callback functions are expecting (and what actually provided
data
prop is)BarExtendedDatum
, however the provideddata
props is typed as:To Reproduce
Check out the sandbox and try deleting types in
char-enhancers.tsx
to observe the errors.https://codesandbox.io/s/horizontal-bar-chart-xuuy9?file=/src/chart-enhancers.tsx
The text was updated successfully, but these errors were encountered: