From 38428c149490f6153908941328813e30b856cf13 Mon Sep 17 00:00:00 2001
From: Dmytro Borysov <dmytro.borysov@jungleminds.nl>
Date: Tue, 28 Aug 2018 18:36:59 +0200
Subject: [PATCH] fix(hedron): withBreakpoints HOC injects  prop

---
 types/hedron/hedron-tests.tsx | 24 +++++++++++++++++++++++-
 types/hedron/index.d.ts       | 14 ++++++++++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/types/hedron/hedron-tests.tsx b/types/hedron/hedron-tests.tsx
index 8b2ce82f01..3fe25ddff1 100644
--- a/types/hedron/hedron-tests.tsx
+++ b/types/hedron/hedron-tests.tsx
@@ -4,7 +4,29 @@ import * as hedron from 'hedron';
 <hedron.BreakpointProvider breakpoints={{ lg: 1, md: 2 }}>
     <hedron.Page debug fluid tagName="div" width="10px">
         <hedron.Row debug tagName="div">
-            <hedron.Column debug divisions={3} fluid lg={3} smShift={2}>test</hedron.Column>
+            <hedron.Column debug divisions={3} fluid lg={3} smShift={2}>
+                test
+            </hedron.Column>
         </hedron.Row>
     </hedron.Page>
 </hedron.BreakpointProvider>;
+
+// withBreakpoints test
+interface Props {
+    numeric: number;
+    str: string;
+}
+
+class ComponentWithBreakpoints extends React.Component<Props & hedron.BreakpointsProps> {
+    render() {
+        // `breakpoints` prop is accessible in component
+        this.props.breakpoints;
+
+        return null;
+    }
+}
+
+const WithBreakpoints = hedron.withBreakpoints(ComponentWithBreakpoints);
+
+// breakpoints props is not needed
+<WithBreakpoints numeric={42} str='str' />;
diff --git a/types/hedron/index.d.ts b/types/hedron/index.d.ts
index 1e19aaee7a..8ce464c017 100644
--- a/types/hedron/index.d.ts
+++ b/types/hedron/index.d.ts
@@ -150,8 +150,14 @@ export interface HiddenProps {
     lg?: boolean;
 }
 
-export interface BreakpointProviderProps {
-    breakpoints: { sm?: number; md?: number; lg?: number };
+export interface Breakpoints {
+    sm?: number;
+    md?: number;
+    lg?: number;
+}
+
+export interface BreakpointsProps {
+    breakpoints: Breakpoints;
 }
 
 export class Column extends React.Component<ColumnProps & React.HTMLProps<HTMLElement>> {}
@@ -159,8 +165,8 @@ export class Page extends React.Component<PageProps & React.HTMLProps<HTMLElemen
 export class Row extends React.Component<RowProps & React.HTMLProps<HTMLElement>> {}
 export class Hidden extends React.Component<HiddenProps & React.HTMLProps<HTMLElement>> {}
 export class BreakpointProvider extends React.Component<
-    BreakpointProviderProps & React.HTMLProps<HTMLElement>
+    BreakpointsProps & React.HTMLProps<HTMLElement>
 > {}
 export function withBreakpoints<T>(
-    wrappedComponent: React.ComponentClass<T>
+    wrappedComponent: React.ComponentClass<T & BreakpointsProps>
 ): React.ComponentClass<T>;