How to use the react-grid-layout.Responsive function in react-grid-layout

import * as React from 'react';

import { DataSourceConnector, IDataSourceDictionary } from '../../../data-sources';
import ElementConnector from  '../../ElementConnector';
import ElementConnectorGQL from  '../../ElementConnectorForGQL';

import DialogsActions from './DialogsActions';
import DialogsStore from './DialogsStore';

import MDDialog from 'react-md/lib/Dialogs';
import Button from 'react-md/lib/Buttons/Button';
import List from 'react-md/lib/Lists/List';
import ListItem from 'react-md/lib/Lists/ListItem';

import * as ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

var e =  new ElementConnectorGQL();

interface IDialogProps {
  dialogData: IVisualDialog; // IDialog;
  dashboard: IDashboardConfig;
}

interface IDialogState {
  dialogId?: string;
  dialogArgs?: IDictionary;
  mounted?: boolean;
  currentBreakpoint?: string;
  layouts?: ILayouts;

import '../styles/ContextMenu.css';

import { SubMenu, ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
import {
  save, saveLayout, timer,
  loadCustomLayout_0, loadCustomLayout_1, loadCustomLayout_2, loadCustomLayout_3,
  resetLayout, fullscreen_matrix, fullscreen_graphics
} from '../keyFunctions'

import rollStore from '../stores/rollStore';

// Grid Layout Initialization
let ReactGridLayout = require('react-grid-layout');
let WidthProvider = ReactGridLayout.WidthProvider;
WidthProvider.measureBeforeMount = true;
let ResponsiveReactGridLayout = WidthProvider(ReactGridLayout.Responsive);

let keymaster = require('keymaster');

@inject('layoutStore', 'sceneStore', 'channelStore')
@observer
export default class Home extends React.Component {  
  componentDidMount() {
    keymaster('⌘+s, ctrl+s', save);
    keymaster('⌘+shift+s, ctrl+shift+s', saveLayout);
    keymaster('ctrl+enter', timer);

    keymaster('shift+r', resetLayout);
    keymaster('shift+g', fullscreen_graphics);
    keymaster('shift+f', fullscreen_matrix);
    keymaster('shift+1', loadCustomLayout_0);
    keymaster('shift+2', loadCustomLayout_1);

import * as React from 'react';

import { DataSourceConnector, IDataSourceDictionary } from '../../../data-sources'
import ElementConnector from  '../../ElementConnector';

import DialogsActions from './DialogsActions';
import DialogsStore from './DialogsStore';

import MDDialog from 'react-md/lib/Dialogs';
import Button from 'react-md/lib/Buttons/Button';
import List from 'react-md/lib/Lists/List';
import ListItem from 'react-md/lib/Lists/ListItem';

import * as ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

interface IDialogProps {
  dialogData: IDialog;
  dashboard: IDashboardConfig;
}

interface IDialogState {
  dialogId?: string;
  dialogArgs?: IDictionary;
  mounted?: boolean;
  currentBreakpoint?: string;
  layouts?: ILayouts;
}

Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const generic_1 = require("../../../generic");
const DialogsActions_1 = require("./DialogsActions");
const DialogsStore_1 = require("./DialogsStore");
const Dialogs_1 = require("react-md/lib/Dialogs");
const ListItem_1 = require("react-md/lib/Lists/ListItem");
const ReactGridLayout = require("react-grid-layout");
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);
class Dialog extends React.PureComponent {
    constructor(props) {
        super(props);
        this.layouts = {};
        this.dataSources = {};
        this.onBreakpointChange = (breakpoint) => {
            var layouts = this.state.layouts;
            layouts[breakpoint] = layouts[breakpoint] || this.layouts[breakpoint];
            this.setState({
                currentBreakpoint: breakpoint,
                layouts: layouts
            });
        };
        this.closeDialog = () => {

import React, { Component } from 'react';
import classnames from 'classnames';
import _ from 'lodash';

//import {Container, Grid, Breakpoint, Span} from 'react-responsive-grid'
import ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

import Timeline from './Graphs/Timeline';
import ChannelsPie from './Graphs/ChannelsPie';
import IntentsGraph from './Graphs/IntentsGraph';
import ConversionPie from './Graphs/ConversionPie';
import SentimentPie from './Graphs/SentimentPie';
import Timespan from './Timespan';
import Errors from './Errors';
import Users from './Users';

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css'
import './style.css';

import * as React from 'react';
import * as _ from 'lodash';

import Toolbar from 'react-md/lib/Toolbars';
import Button from 'react-md/lib/Buttons';
import Dialog from 'react-md/lib/Dialogs';

import { Spinner } from '../Spinner';
import { AutoRefreshSelector } from '../AutoRefreshSelector';

import * as ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

import ElementConnector from '../ElementConnector';
import { loadDialogsFromDashboard } from '../generic/Dialogs';
import { downloadBlob } from './DownloadFile';

import { SettingsButton } from '../Settings';
import ConfigurationsActions from '../../actions/ConfigurationsActions';
import ConfigurationsStore from '../../stores/ConfigurationsStore';
import VisibilityStore from '../../stores/VisibilityStore';

import {Editor, EditorActions} from './Editor';
import { Settings } from '../Card/Settings';

const renderHTML = require('react-render-html');

import * as React from 'react';

import { DataSourceConnector, IDataSourceDictionary } from '../../../data-sources';
import ElementConnector from  '../../ElementConnector';

import DialogsActions from './DialogsActions';
import DialogsStore from './DialogsStore';

import MDDialog from 'react-md/lib/Dialogs';
import Button from 'react-md/lib/Buttons/Button';
import List from 'react-md/lib/Lists/List';
import ListItem from 'react-md/lib/Lists/ListItem';

import * as ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

interface IDialogProps {
  dialogData: IDialog;
  dashboard: IDashboardConfig;
}

interface IDialogState {
  dialogId?: string;
  dialogArgs?: IDictionary;
  mounted?: boolean;
  currentBreakpoint?: string;
  layouts?: ILayouts;
}

import * as React from 'react';
import * as _ from 'lodash';

import Toolbar from 'react-md/lib/Toolbars';
import Button from 'react-md/lib/Buttons';
import Dialog from 'react-md/lib/Dialogs';
import Divider from 'react-md/lib/Dividers';

import { Spinner } from '../Spinner';

import * as ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

import ElementConnector from '../ElementConnector';
import { loadDialogsFromDashboard } from '../generic/Dialogs';

import SettingsButton from '../ConfigDashboard/SettingsButton';
import ConfigurationsActions from '../../actions/ConfigurationsActions';
import ConfigurationsStore from '../../stores/ConfigurationsStore';
import VisibilityStore from '../../stores/VisibilityStore';

interface IDashboardState {
  editMode?: boolean,
  askDelete?: boolean,
  mounted?: boolean;
  currentBreakpoint?: string;

import React, { Component } from 'react';
import { Editor, EditorState, ContentState } from 'draft-js';
import moment from 'moment';
import ContentEditable from './ContentEditable';
import './styles.css';

const WidthProvider = require('react-grid-layout').WidthProvider;
let ResponsiveReactGridLayout = require('react-grid-layout').Responsive;

ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

/**
* @method: guid
* @desc: Generates unique guid
**/
function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

import * as React from 'react';
import * as _ from 'lodash';

import Toolbar from 'react-md/lib/Toolbars';
import Button from 'react-md/lib/Buttons';
import Dialog from 'react-md/lib/Dialogs';

import { Spinner } from '../Spinner';

import * as ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

import ElementConnector from '../ElementConnector';
import ElementConnectorGQL from '../ElementConnectorForGQL';

import { loadDialogsFromDashboard } from '../generic/Dialogs';
import IDownloadFile, { exportDataSources, createDownloadFiles, downloadBlob } from './DownloadFile';

import { SettingsButton } from '../Settings';
import ConfigurationsActions from '../../actions/ConfigurationsActions';
import ConfigurationsStore from '../../stores/ConfigurationsStore';
import VisibilityStore from '../../stores/VisibilityStore';

import {Editor, EditorActions} from './Editor';