From 17a80066453454dce6141f7da2033d348b4d53c8 Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Sat, 28 Jan 2023 13:01:20 +0100 Subject: [PATCH] Fix types for @types/react@18 (#1798) * Fix types for React v18 Ref: https://github.com/diegomura/react-pdf/issues/1062#issuecomment-1092100093 Ref: https://github.com/eps1lon/types-react-codemod#implicit-children Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46691 * add changeset --------- Co-authored-by: Dmitry Ivakhnenko --- .changeset/nice-buttons-joke.md | 5 ++++ packages/renderer/index.d.ts | 52 ++++++++++++++++----------------- 2 files changed, 31 insertions(+), 26 deletions(-) create mode 100644 .changeset/nice-buttons-joke.md diff --git a/.changeset/nice-buttons-joke.md b/.changeset/nice-buttons-joke.md new file mode 100644 index 000000000..f8706ee51 --- /dev/null +++ b/.changeset/nice-buttons-joke.md @@ -0,0 +1,5 @@ +--- +'@react-pdf/renderer': patch +--- + +fix types for @types/react@18 diff --git a/packages/renderer/index.d.ts b/packages/renderer/index.d.ts index 5a34c44e1..3975c061e 100644 --- a/packages/renderer/index.d.ts +++ b/packages/renderer/index.d.ts @@ -38,7 +38,7 @@ declare namespace ReactPDF { * used as children of another react-pdf component. In addition, it should * only have childs of type . */ - class Document extends React.Component {} + class Document extends React.Component> {} interface NodeProps { id?: string; @@ -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 {} + class Page extends React.Component> {} interface ViewProps extends NodeProps { id?: string; @@ -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 {} + class View extends React.Component> {} interface BaseImageProps extends NodeProps { /** @@ -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 {} + class Image extends React.Component> {} interface TextProps extends NodeProps { id?: string; @@ -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 {} + class Text extends React.Component | SVGTextProps> {} interface LinkProps extends NodeProps { /** @@ -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 {} + class Link extends React.Component> {} interface NoteProps extends NodeProps { children: string; } - class Note extends React.Component {} + class Note extends React.Component> {} interface CanvasProps extends NodeProps { /** @@ -230,7 +230,7 @@ declare namespace ReactPDF { ) => null; } - class Canvas extends React.Component {} + class Canvas extends React.Component> {} interface SVGProps extends NodeProps { /** @@ -247,7 +247,7 @@ declare namespace ReactPDF { /** * The 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 {} + class Svg extends React.Component> {} interface LineProps extends SVGPresentationAttributes { style?: SVGPresentationAttributes; @@ -260,7 +260,7 @@ declare namespace ReactPDF { /** * The element is used to create a line. */ - class Line extends React.Component {} + class Line extends React.Component> {} interface PolylineProps extends SVGPresentationAttributes { style?: SVGPresentationAttributes; @@ -270,7 +270,7 @@ declare namespace ReactPDF { /** * The element is used to create any shape that consists of only straight lines (that is connected at several points). */ - class Polyline extends React.Component {} + class Polyline extends React.Component> {} interface PolygonProps extends SVGPresentationAttributes { style?: SVGPresentationAttributes; @@ -281,7 +281,7 @@ declare namespace ReactPDF { * The 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 {} + class Polygon extends React.Component> {} interface PathProps extends SVGPresentationAttributes { style?: SVGPresentationAttributes; @@ -291,7 +291,7 @@ declare namespace ReactPDF { /** * The 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 {} + class Path extends React.Component> {} interface RectProps extends SVGPresentationAttributes { style?: SVGPresentationAttributes; @@ -306,7 +306,7 @@ declare namespace ReactPDF { /** * The element is used to create a rectangle and variations of a rectangle shape. */ - class Rect extends React.Component {} + class Rect extends React.Component> {} interface CircleProps extends SVGPresentationAttributes { style?: SVGPresentationAttributes; @@ -318,7 +318,7 @@ declare namespace ReactPDF { /** * The element is used to create a circle. */ - class Circle extends React.Component {} + class Circle extends React.Component> {} interface EllipseProps extends SVGPresentationAttributes { style?: SVGPresentationAttributes; @@ -332,7 +332,7 @@ declare namespace ReactPDF { * The 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 {} + class Ellipse extends React.Component> {} interface TspanProps extends SVGPresentationAttributes { x?: string | number; @@ -343,7 +343,7 @@ declare namespace ReactPDF { * The element defines a subtext within a element or another element. * It allows for adjustment of the style and/or position of that subtext as needed. */ - class Tspan extends React.Component {} + class Tspan extends React.Component> {} interface GProps extends SVGPresentationAttributes {} @@ -351,7 +351,7 @@ declare namespace ReactPDF { * The SVG element is a container used to group other SVG elements. * Transformations applied to the element are performed on its child elements, and its attributes are inherited by its children. */ - class G extends React.Component {} + class G extends React.Component> {} interface StopProps { offset: string | number; @@ -362,14 +362,14 @@ declare namespace ReactPDF { /** * The SVG element defines a color and its position to use on a gradient. This element is always a child of a or element */ - class Stop extends React.Component {} + class Stop extends React.Component> {} interface DefsProps {} /** * The element is used to store graphical objects that will be used at a later time. Objects created inside a element are not rendered directly. To display them you have to reference them */ - class Defs extends React.Component {} + class Defs extends React.Component> {} interface ClipPathProps { id?: string; @@ -379,7 +379,7 @@ declare namespace ReactPDF { * The 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 {} + class ClipPath extends React.Component> {} interface LinearGradientProps { id: string; @@ -392,7 +392,7 @@ declare namespace ReactPDF { /** * The element lets authors define linear gradients that can be applied to fill or stroke of graphical elements. */ - class LinearGradient extends React.Component {} + class LinearGradient extends React.Component> {} interface RadialGradientProps { id: string; @@ -406,7 +406,7 @@ declare namespace ReactPDF { /** * The element lets authors define radial gradients that can be applied to fill or stroke of graphical elements. */ - class RadialGradient extends React.Component {} + class RadialGradient extends React.Component> {} interface BlobProviderParams { blob: Blob | null; @@ -425,7 +425,7 @@ declare namespace ReactPDF { * @see https://react-pdf.org/advanced#on-the-fly-rendering * @platform web */ - class BlobProvider extends React.Component {} + class BlobProvider extends React.Component> {} interface PDFViewerProps { width?: number | string; @@ -441,7 +441,7 @@ declare namespace ReactPDF { * Iframe PDF viewer for client-side generated documents. * @platform web */ - class PDFViewer extends React.Component {} + class PDFViewer extends React.Component> {} interface PDFDownloadLinkProps { document: React.ReactElement; @@ -459,7 +459,7 @@ declare namespace ReactPDF { * @see https://react-pdf.org/advanced#on-the-fly-rendering * @platform web */ - class PDFDownloadLink extends React.Component {} + class PDFDownloadLink extends React.Component> {} interface UsePDFInstance { loading: boolean;