react-minimal-pie-chart icon indicating copy to clipboard operation
react-minimal-pie-chart copied to clipboard

Expose the Typescript Types 🙏

Open majelbstoat opened this issue 3 years ago • 6 comments

Do you want to request a feature or report a bug?

request a feature

What is the current behaviour?

Many of the types are not exposed, so if I want to write, for example a strongly typed label function, i believe i have to duplicate the types. e.g.

type DataEntry = {
  title?: string | number
  value: number
  color: string
  percentage?: number
  filterId?: string
}
type Data = DataEntry[]

type LabelProps = {
  data: Data
  dataIndex: number
}

const label = ({ data, dataIndex }: LabelProps) => {
  const percentage = data[dataIndex].percentage
  if (!percentage || percentage < 10) return ''
  return Math.round(data[dataIndex].percentage || 0) + '%'
}

(This example from 7.3.1, but persists in the newest version too)

What is the expected behaviour?

Please export what is now called LabelRenderProps :)

majelbstoat avatar Aug 21 '21 12:08 majelbstoat

Hi @majelbstoat, I'd expect 2 solutions to be currently available.

First, in case label function is inlined (as a jsx prop) the provided function should already receive a full type check.

In case you wanted to declare a standalone function then you might extract components' prop types like:

import React from 'react';
import { PieChart } from 'react-minimal-pie-chart';

type LabelProp = React.ComponentProps<typeof PieChart>['label']
const label: LabelProp = //...

More info about accessing React components' props here.

toomuchdesign avatar Aug 21 '21 17:08 toomuchdesign

Hi @majelbstoat, what's the current status of this?

toomuchdesign avatar Sep 01 '21 10:09 toomuchdesign

any update on this ?

bryanprimus avatar Sep 10 '21 04:09 bryanprimus

I went and tried that approach, and it didn't immediately work for me, though I don't exactly recall why right now. It really would be very nice if you could just add an export or two ;)

majelbstoat avatar Sep 10 '21 21:09 majelbstoat

I'll consider it as soon as I have time to do so 👍 In the meanwhile I confirm the mentioned approach works in a CodeSandbox repro.

toomuchdesign avatar Sep 11 '21 19:09 toomuchdesign

Might be a bit harder than originally thought: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/default_props/#consuming-props-of-a-component-with-defaultprops

If we can't find a proper TS workaround, we might consider removing component's defaultProps.

toomuchdesign avatar Oct 19 '21 21:10 toomuchdesign

Implemented in v8.4.0. Prop types exposed as:

import type { PieChartProps } from 'react-minimal-pie-chart';

toomuchdesign avatar Oct 30 '22 17:10 toomuchdesign