Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need for casting types over an over again in barComponent callback (TS) #1155

Closed
eggei opened this issue Oct 9, 2020 · 0 comments · Fixed by #1163
Closed

Need for casting types over an over again in barComponent callback (TS) #1155

eggei opened this issue Oct 9, 2020 · 0 comments · Fixed by #1163

Comments

@eggei
Copy link
Contributor

eggei commented Oct 9, 2020

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:

export type BarMouseEventHandler<T = HTMLCanvasElement> = (
datum: BarExtendedDatum,
event: React.MouseEvent<T>
) => void
export type TooltipProp = React.StatelessComponent<BarExtendedDatum>
export interface BarItemProps {
data: {
id: string | number
value: number
indexValue: string | number
}
x: number
y: number
width: number
height: number
color: string
borderRadius: number
borderWidth: number
borderColor: string
label: string
shouldRenderLabel: boolean
labelColor: string
onClick: BarMouseEventHandler
onMouseEnter: BarMouseEventHandler
onMouseLeave: BarMouseEventHandler
tooltipFormat: string | ValueFormatter
tooltip: TooltipProp
showTooltip: (tooltip: React.ReactNode, event: React.MouseEvent<HTMLCanvasElement>) => void
hideTooltip: () => void
theme: Theme
}

Also, this is showTooltip event is hardcoded:

showTooltip: (tooltip: React.ReactNode, event: React.MouseEvent<HTMLCanvasElement>) => void

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:

var data: {
    id: string | number;
    value: number;
    indexValue: string | number;
}

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

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
- 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant