From 5578dc104ff1381d4e5629c24426202a488ba517 Mon Sep 17 00:00:00 2001
From: Manav Mishra <30835480+manav-m@users.noreply.github.com>
Date: Tue, 29 Jan 2019 01:00:43 +0530
Subject: [PATCH] Breakpoints can be arbitrary according to documentation.
 (#32414)

Change Typings to accomodate that.
---
 types/react-grid-layout/index.d.ts            | 19 +++++++-------
 .../react-grid-layout-tests.tsx               | 25 +++++++++++++++++++
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/types/react-grid-layout/index.d.ts b/types/react-grid-layout/index.d.ts
index 91c8ad1f9c..c643e976c3 100644
--- a/types/react-grid-layout/index.d.ts
+++ b/types/react-grid-layout/index.d.ts
@@ -4,6 +4,7 @@
 //                 Ali Taheri <https://github.com/alitaheri>,
 //                 Zheyang Song <https://github.com/ZheyangSong>,
 //                 Andrew Hathaway <https://github.com/andrewhathaway>
+//                 Manav Mishra <https://github.com/manav-m>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -12,11 +13,11 @@ import * as React from "react";
 export as namespace ReactGridLayout;
 export = ReactGridLayout;
 
-declare class ReactGridLayout extends React.Component<ReactGridLayout.ReactGridLayoutProps> { }
+declare class ReactGridLayout extends React.Component<
+    ReactGridLayout.ReactGridLayoutProps
+> {}
 
 declare namespace ReactGridLayout {
-    type Breakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
-
     interface Layout {
         /**
          * A string corresponding to the component key.
@@ -85,9 +86,9 @@ declare namespace ReactGridLayout {
         isResizable?: boolean;
     }
 
-    type Layouts = {
-        [P in Breakpoints]?: Layout[];
-    };
+    interface Layouts {
+        [P: string]: Layout[];
+    }
 
     type ItemCallback = (
         layout: Layout[],
@@ -263,12 +264,12 @@ declare namespace ReactGridLayout {
          *
          * Breakpoint names are arbitrary but must match in the cols and layouts objects.
          */
-        breakpoints?: {[P in Breakpoints]: number };
+        breakpoints?: { [P: string]: number };
 
         /**
          * Number of cols. This is a breakpoint -> cols map, e.g. `{lg: 12, md: 10, ...}`.
          */
-        cols?: {[P in Breakpoints]: number };
+        cols?: { [P: string]: number };
 
         /**
          * layouts is an object mapping breakpoints to layouts.
@@ -298,7 +299,7 @@ declare namespace ReactGridLayout {
         ): void;
     }
 
-    class Responsive extends React.Component<ResponsiveProps> { }
+    class Responsive extends React.Component<ResponsiveProps> {}
 
     interface WidthProviderProps {
         /**
diff --git a/types/react-grid-layout/react-grid-layout-tests.tsx b/types/react-grid-layout/react-grid-layout-tests.tsx
index 78ecf594ef..70c88bae0d 100644
--- a/types/react-grid-layout/react-grid-layout-tests.tsx
+++ b/types/react-grid-layout/react-grid-layout-tests.tsx
@@ -54,6 +54,31 @@ class ResponsiveGridTest extends React.Component {
   }
 }
 
+class ResponsiveGridTestWithCustomBreakpoints extends React.Component {
+  render() {
+    const layouts = {
+      lg: [
+        { i: '1', x: 0, y: 0, w: 1, h: 2, static: true },
+        { i: '2', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+        { i: '3', x: 4, y: 0, w: 1, h: 2 }
+      ]
+    };
+
+    return (
+      <Responsive
+        layouts={layouts}
+        width={800}
+        breakpoints={{ lg: 468, sm: 0 }}
+        cols={{ lg: 12, sm: 6 }}
+      >
+        <div key="1">a</div>
+        <div key="2">b</div>
+        <div key="3">c</div>
+      </Responsive>
+    );
+  }
+}
+
 class ResponsiveGridWidthProviderTest extends React.Component {
   render() {
     return (