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.

Sign up for GitHub

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

Fix types for @types/react@18 #1798

Merged
merged 3 commits into from
Jan 28, 2023
Merged

Fix types for @types/react@18 #1798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dbe076c
Fix types for React v18
karlhorky Apr 24, 2022
c847feb
Merge branch 'master' into pr/1798
jeetiss Jan 28, 2023
4547994
add changeset
jeetiss Jan 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/nice-buttons-joke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@react-pdf/renderer': patch
---

fix types for @types/react@18
52 changes: 26 additions & 26 deletions packages/renderer/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ declare namespace ReactPDF {
* used as children of another react-pdf component. In addition, it should
* only have childs of type <Page />.
*/
class Document extends React.Component<DocumentProps> {}
class Document extends React.Component<React.PropsWithChildren<DocumentProps>> {}

interface NodeProps {
id?: string;
Expand Down Expand Up @@ -85,7 +85,7 @@ declare namespace ReactPDF {
* you want, but ensure not rendering a page inside any component besides
* Document.
*/
class Page extends React.Component<PageProps> {}
class Page extends React.Component<React.PropsWithChildren<PageProps>> {}

interface ViewProps extends NodeProps {
id?: string;
Expand All @@ -110,7 +110,7 @@ declare namespace ReactPDF {
* The most fundamental component for building a UI and is designed to be
* nested inside other views and can have 0 to many children.
*/
class View extends React.Component<ViewProps> {}
class View extends React.Component<React.PropsWithChildren<ViewProps>> {}

interface BaseImageProps extends NodeProps {
/**
Expand All @@ -135,7 +135,7 @@ declare namespace ReactPDF {
* A React component for displaying network or local (Node only) JPG or
* PNG images, as well as base64 encoded image strings.
*/
class Image extends React.Component<ImageProps> {}
class Image extends React.Component<React.PropsWithChildren<ImageProps>> {}

interface TextProps extends NodeProps {
id?: string;
Expand Down Expand Up @@ -188,7 +188,7 @@ declare namespace ReactPDF {
* A React component for displaying text. Text supports nesting of other
* Text or Link components to create inline styling.
*/
class Text extends React.Component<TextProps | SVGTextProps> {}
class Text extends React.Component<React.PropsWithChildren<TextProps> | SVGTextProps> {}

interface LinkProps extends NodeProps {
/**
Expand All @@ -209,13 +209,13 @@ declare namespace ReactPDF {
* A React component for displaying a hyperlink. Link’s can be nested
* inside a Text component, or being inside any other valid primitive.
*/
class Link extends React.Component<LinkProps> {}
class Link extends React.Component<React.PropsWithChildren<LinkProps>> {}

interface NoteProps extends NodeProps {
children: string;
}

class Note extends React.Component<NoteProps> {}
class Note extends React.Component<React.PropsWithChildren<NoteProps>> {}

interface CanvasProps extends NodeProps {
/**
Expand All @@ -230,7 +230,7 @@ declare namespace ReactPDF {
) => null;
}

class Canvas extends React.Component<CanvasProps> {}
class Canvas extends React.Component<React.PropsWithChildren<CanvasProps>> {}

interface SVGProps extends NodeProps {
/**
Expand All @@ -247,7 +247,7 @@ declare namespace ReactPDF {
/**
* The <SVG /> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents.
*/
class Svg extends React.Component<SVGProps> {}
class Svg extends React.Component<React.PropsWithChildren<SVGProps>> {}

interface LineProps extends SVGPresentationAttributes {
style?: SVGPresentationAttributes;
Expand All @@ -260,7 +260,7 @@ declare namespace ReactPDF {
/**
* The <Line /> element is used to create a line.
*/
class Line extends React.Component<LineProps> {}
class Line extends React.Component<React.PropsWithChildren<LineProps>> {}

interface PolylineProps extends SVGPresentationAttributes {
style?: SVGPresentationAttributes;
Expand All @@ -270,7 +270,7 @@ declare namespace ReactPDF {
/**
* The <Polyline /> element is used to create any shape that consists of only straight lines (that is connected at several points).
*/
class Polyline extends React.Component<PolylineProps> {}
class Polyline extends React.Component<React.PropsWithChildren<PolylineProps>> {}

interface PolygonProps extends SVGPresentationAttributes {
style?: SVGPresentationAttributes;
Expand All @@ -281,7 +281,7 @@ declare namespace ReactPDF {
* The <Polygon /> element is used to create a graphic that contains at least three sides.
* Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
*/
class Polygon extends React.Component<PolygonProps> {}
class Polygon extends React.Component<React.PropsWithChildren<PolygonProps>> {}

interface PathProps extends SVGPresentationAttributes {
style?: SVGPresentationAttributes;
Expand All @@ -291,7 +291,7 @@ declare namespace ReactPDF {
/**
* The <Path /> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.
*/
class Path extends React.Component<PathProps> {}
class Path extends React.Component<React.PropsWithChildren<PathProps>> {}

interface RectProps extends SVGPresentationAttributes {
style?: SVGPresentationAttributes;
Expand All @@ -306,7 +306,7 @@ declare namespace ReactPDF {
/**
* The <Rect /> element is used to create a rectangle and variations of a rectangle shape.
*/
class Rect extends React.Component<RectProps> {}
class Rect extends React.Component<React.PropsWithChildren<RectProps>> {}

interface CircleProps extends SVGPresentationAttributes {
style?: SVGPresentationAttributes;
Expand All @@ -318,7 +318,7 @@ declare namespace ReactPDF {
/**
* The <Circle /> element is used to create a circle.
*/
class Circle extends React.Component<CircleProps> {}
class Circle extends React.Component<React.PropsWithChildren<CircleProps>> {}

interface EllipseProps extends SVGPresentationAttributes {
style?: SVGPresentationAttributes;
Expand All @@ -332,7 +332,7 @@ declare namespace ReactPDF {
* The <Ellipse /> element is used to create an ellipse.
* An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
*/
class Ellipse extends React.Component<EllipseProps> {}
class Ellipse extends React.Component<React.PropsWithChildren<EllipseProps>> {}

interface TspanProps extends SVGPresentationAttributes {
x?: string | number;
Expand All @@ -343,15 +343,15 @@ declare namespace ReactPDF {
* The <Tspan /> element defines a subtext within a <Text /> element or another <Tspan /> element.
* It allows for adjustment of the style and/or position of that subtext as needed.
*/
class Tspan extends React.Component<TspanProps> {}
class Tspan extends React.Component<React.PropsWithChildren<TspanProps>> {}

interface GProps extends SVGPresentationAttributes {}

/**
* The <G /> SVG element is a container used to group other SVG elements.
* Transformations applied to the <G /> element are performed on its child elements, and its attributes are inherited by its children.
*/
class G extends React.Component<GProps> {}
class G extends React.Component<React.PropsWithChildren<GProps>> {}

interface StopProps {
offset: string | number;
Expand All @@ -362,14 +362,14 @@ declare namespace ReactPDF {
/**
* The SVG <Stop /> element defines a color and its position to use on a gradient. This element is always a child of a <LinearGradient /> or <RadialGradient /> element
*/
class Stop extends React.Component<StopProps> {}
class Stop extends React.Component<React.PropsWithChildren<StopProps>> {}

interface DefsProps {}

/**
* The <Defs /> element is used to store graphical objects that will be used at a later time. Objects created inside a <Defs /> element are not rendered directly. To display them you have to reference them
*/
class Defs extends React.Component<DefsProps> {}
class Defs extends React.Component<React.PropsWithChildren<DefsProps>> {}

interface ClipPathProps {
id?: string;
Expand All @@ -379,7 +379,7 @@ declare namespace ReactPDF {
* The <ClipPath /> SVG element defines a clipping path, to be used by the clipPath property.
* A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
*/
class ClipPath extends React.Component<ClipPathProps> {}
class ClipPath extends React.Component<React.PropsWithChildren<ClipPathProps>> {}

interface LinearGradientProps {
id: string;
Expand All @@ -392,7 +392,7 @@ declare namespace ReactPDF {
/**
* The <LinearGradient /> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
*/
class LinearGradient extends React.Component<LinearGradientProps> {}
class LinearGradient extends React.Component<React.PropsWithChildren<LinearGradientProps>> {}

interface RadialGradientProps {
id: string;
Expand All @@ -406,7 +406,7 @@ declare namespace ReactPDF {
/**
* The <RadialGradient /> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
*/
class RadialGradient extends React.Component<RadialGradientProps> {}
class RadialGradient extends React.Component<React.PropsWithChildren<RadialGradientProps>> {}

interface BlobProviderParams {
blob: Blob | null;
Expand All @@ -425,7 +425,7 @@ declare namespace ReactPDF {
* @see https://react-pdf.org/advanced#on-the-fly-rendering
* @platform web
*/
class BlobProvider extends React.Component<BlobProviderProps> {}
class BlobProvider extends React.Component<React.PropsWithChildren<BlobProviderProps>> {}

interface PDFViewerProps {
width?: number | string;
Expand All @@ -441,7 +441,7 @@ declare namespace ReactPDF {
* Iframe PDF viewer for client-side generated documents.
* @platform web
*/
class PDFViewer extends React.Component<PDFViewerProps> {}
class PDFViewer extends React.Component<React.PropsWithChildren<PDFViewerProps>> {}

interface PDFDownloadLinkProps {
document: React.ReactElement<DocumentProps>;
Expand All @@ -459,7 +459,7 @@ declare namespace ReactPDF {
* @see https://react-pdf.org/advanced#on-the-fly-rendering
* @platform web
*/
class PDFDownloadLink extends React.Component<PDFDownloadLinkProps> {}
class PDFDownloadLink extends React.Component<React.PropsWithChildren<PDFDownloadLinkProps>> {}

interface UsePDFInstance {
loading: boolean;
Expand Down