From 3c085113e8fa2774ad040c6a9f7cb0701ee58e38 Mon Sep 17 00:00:00 2001
From: Oleg Vaskevich <oleg@osv.im>
Date: Tue, 2 Jul 2019 09:43:38 -0700
Subject: [PATCH] Add wrappedComponentRef prop to react-router withRouter()
 (#36474)

* Add wrappedComponentRef prop to react-router withRouter()

* Support newer refs
---
 types/react-router/index.d.ts          | 12 +++++++++++-
 types/react-router/test/WithRouter.tsx |  7 ++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/types/react-router/index.d.ts b/types/react-router/index.d.ts
index 89bff722c6..3746fa5c50 100644
--- a/types/react-router/index.d.ts
+++ b/types/react-router/index.d.ts
@@ -131,10 +131,20 @@ export function matchPath<Params extends { [K in keyof Params]?: string }>(pathn
 
 export function generatePath(pattern: string, params?: { [paramName: string]: string | number | boolean | undefined }): string;
 
+export type WithRouterProps<C extends React.ComponentType<any>> = C extends React.ComponentClass
+  ? { wrappedComponentRef?: React.Ref<InstanceType<C>> }
+  : {};
+
+export interface WithRouterStatics<C extends React.ComponentType<any>> {
+  WrappedComponent: C;
+}
+
 // There is a known issue in TypeScript, which doesn't allow decorators to change the signature of the classes
 // they are decorating. Due to this, if you are using @withRouter decorator in your code,
 // you will see a bunch of errors from TypeScript. The current workaround is to use withRouter() as a function call
 // on a separate line instead of as a decorator.
-export function withRouter<P extends RouteComponentProps<any>>(component: React.ComponentType<P>): React.ComponentClass<Omit<P, keyof RouteComponentProps<any>>>;
+export function withRouter<P extends RouteComponentProps<any>, C extends React.ComponentType<P>>(
+  component: C & React.ComponentType<P>,
+): React.ComponentClass<Omit<P, keyof RouteComponentProps<any>> & WithRouterProps<C>> & WithRouterStatics<C>;
 
 export const __RouterContext: React.Context<RouteComponentProps>;
diff --git a/types/react-router/test/WithRouter.tsx b/types/react-router/test/WithRouter.tsx
index 5782b08429..fb895be461 100644
--- a/types/react-router/test/WithRouter.tsx
+++ b/types/react-router/test/WithRouter.tsx
@@ -17,11 +17,16 @@ class ComponentClass extends React.Component<TOwnProps> {
 
 const WithRouterComponentFunction = withRouter(ComponentFunction);
 const WithRouterComponentClass = withRouter(ComponentClass);
+WithRouterComponentClass.WrappedComponent; // $ExpectType typeof ComponentClass
 
 const WithRouterTestFunction = () => (
     <WithRouterComponentFunction username="John" />
 );
-const WithRouterTestClass = () => <WithRouterComponentClass username="John" />;
+const OnWrappedRefFn = (ref: ComponentClass | null) => {};
+const WithRouterTestClass = () => <WithRouterComponentClass username="John" wrappedComponentRef={OnWrappedRefFn} />;
+
+const OnWrappedRef = React.createRef<ComponentClass>();
+const WithRouterTestClass2 = () => <WithRouterComponentClass username="John" wrappedComponentRef={OnWrappedRef} />;
 
 // union props
 {