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

import {ContextMenuContainer} from './ContextMenuContainer.jsx';
import {scalesCenterAndK, dictItems, dictFromTuples, dictValues, dictKeys} from './utils.js';
import {getTrackPositionByUid, getTrackByUid} from './utils.js';
import {positionedTracksToAllTracks} from './utils.js';
import {usedServer, tracksInfo, tracksInfoByType} from './config.js';
import {SHORT_DRAG_TIMEOUT, LONG_DRAG_TIMEOUT} from './config.js';
import {GenomePositionSearchBox} from './GenomePositionSearchBox.jsx';
import {ExportLinkModal} from './ExportLinkModal.jsx';
import {createSymbolIcon} from './symbol.js';

import crossImg from 'file!../images/cross.svg';
import cogImg from 'file!../images/cog.svg';
import copyImg from 'file!../images/content_copy.svg';
import plusImg from 'file!../images/plus.svg';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

export class HiGlassComponent extends React.Component {
    constructor(props) {
        super(props);

        this.minHorizontalHeight = 20;
        this.minVerticalWidth = 20;

        this.tempCanvas = document.createElement('canvas');

        this.uid = slugid.nice();
        this.yPositionOffset = 0;
        this.rowHeight = 40;
        this.tiledPlots = {};

        // keep track of the xScales of each Track Renderer

// Libraries
import React, {Component} from 'react'
import {withRouter, WithRouterProps} from 'react-router'
import ReactGridLayout, {WidthProvider, Layout} from 'react-grid-layout'

// Components
const Grid = WidthProvider(ReactGridLayout)
import CellComponent from 'src/shared/components/cells/Cell'

// Utils
import {fastMap} from 'src/utils/fast'

// Constants
import {
  LAYOUT_MARGIN,
  PAGE_HEADER_HEIGHT,
  PAGE_CONTAINER_MARGIN,
  STATUS_PAGE_ROW_COUNT,
  DASHBOARD_LAYOUT_ROW_HEIGHT,
} from 'src/shared/constants'

// Types
import {Cell} from 'src/types/v2'

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import _get from 'lodash/get'
import _map from 'lodash/map'
import _isFunction from 'lodash/isFunction'
import ReactGridLayout, { WidthProvider } from 'react-grid-layout'
import { widgetComponent } from '../../services/Widget/Widget'
import WithWidgetManagement
       from '../HOCs/WithWidgetManagement/WithWidgetManagement'
import WidgetPicker from '../WidgetPicker/WidgetPicker'
import "../../../node_modules/react-grid-layout/css/styles.css"
import "../../../node_modules/react-resizable/css/styles.css"
import './WidgetGrid.scss'

const GridLayout = WidthProvider(ReactGridLayout)

export class WidgetGrid extends Component {
  render() {
    // Setup each widget. Note that we assign a z-index to each widget so that
    // widgets closer to the top of the page have a higher z-index than widgets
    // closer to the bottom of the page. This is so that an open dropdown menu
    // in a widget can extend below it and overlap the widget immediately
    // below. The z-index is necessary because react-grid-layout starts a new
    // stacking context for each widget, so by default widgets lower on the
    // page would be rendered on top of widgets higher on the page since they
    // appear lower in the DOM, thus breaking drop-down menus that extend below
    // a widget
    const highestY = Math.max(
      ..._map(this.props.workspace.widgets, (w, i) => this.props.workspace.layout[i].y)
    )

import React from "react";
import _ from "lodash";
import RGL, { WidthProvider } from "react-grid-layout";

const ReactGridLayout = WidthProvider(RGL);

class BasicLayout extends React.PureComponent {
  static defaultProps = {
    className: "layout",
    items: 20,
    rowHeight: 30,
    onLayoutChange: function() {},
    cols: 12
  };

  constructor(props) {
    super(props);

    const layout = this.generateLayout();
    this.state = { layout };
  }

import React from 'react'
import _ from 'lodash'
import ReactGridLayout, { WidthProvider } from 'react-grid-layout'
import Cell from '../components/Cell'
import DashboardWrap from '../wrap'

const GridLayout = WidthProvider(ReactGridLayout)

@DashboardWrap('dashboard.container')
class Grid extends React.Component {

  shouldComponentUpdate() {
    return this.props.editMode
  }
  
  getLayerProps = () => {
    const { cols=36, yheight=10, margin=15, gridMargin=0, verticalFree=false, layout, editMode, selectedCell, selectedChild } = this.props
    return {
      className: 'layout',
      style: { margin: -1 * gridMargin },
      margin: [ margin, margin ],
      draggableHandle: '.widget-ctl-bar',
      cols: cols,

import reducer from './store/reducer';
//Menu and torrentlist imports
import TopMenu from './TopMenu/topMenu';
import BottomMenu from './BottomMenu/bottomMenu';
import LeftMenu from './leftMenu/leftMenu';
import TorrentList from './torrentlist';
//Notification Element
import Notifications from './notifications';
//Login Box
import Login from './login';


const reduxStore = createStore(reducer);


const ReactGridLayout = WidthProvider(RGL);

var background = {
  backgroundColor: '#e5e5e5',
  boxShadow: '0 0 20px #000',
}    

class BasicLayout extends React.PureComponent {

  static propTypes = {
    onLayoutChange: PropTypes.func.isRequired
  };

  static defaultProps = {
    className: "layout",
    items: 4,
    rowHeight: 100,

import AttackPatternsDistribution from './AttackPatternsDistribution';

const styles = theme => ({
  container: {
    margin: '0 0 80px 0',
    padding: 0,
  },
  bottomNav: {
    zIndex: 1000,
    padding: '10px 274px 10px 84px',
    backgroundColor: theme.palette.navBottom.background,
    display: 'flex',
  },
});

const ResponsiveReactGridLayout = WidthProvider(Responsive);

class WorkspaceExploreSpaceComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { openConfig: false, currentWidget: {} };
  }

  saveWorkspace(workspaceData) {
    const JSONData = JSON.stringify(workspaceData);
    commitMutation({
      mutation: workspaceMutationFieldPatch,
      variables: {
        id: this.props.workspace.id,
        input: {
          key: 'workspace_data',
          value: Buffer.from(JSONData).toString('base64'),

const data = [...Array(25).keys()];

  return data.map((item, i) => {
    const y = Math.ceil(Math.random() * 4) + 1;
    return {
      x: (random(0, 5) * 2) % 12,
      y: Math.floor(i / 6) * y,
      w: 2,
      h: y,
      i: i.toString(),
      static: Math.random() < 0.05,
    };
  });
}

const ResponsiveReactGridLayout = WidthProvider(Responsive);

export default function BasicGridLayout(props) {
  const [mounted] = useState(true);
  const [currentBreakpoint, setCurrentBreakpoint] = useState('lg');
  const [compactType, setCompactType] = useState('vertical');
  const [layouts, setLayouts] = useState({ lg: props.initialLayout });

  const generateDOM = () => {
    return layouts.lg.map((l, i) => {
      return (
        <div>
          {l.static ? (
            <span title="This item is static and cannot be removed or resized."></span></div>

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 pure from 'lib/modules/pure'
import styles from './styles/Layout.css'
import './styles/vendor/react-grid-layout'
import { Responsive, WidthProvider } from 'react-grid-layout'
import EventEmitter from 'eventemitter3'

const ReactGridLayout = WidthProvider(Responsive)

const { React, PropTypes } = pure

export default pure (
  { displayName: 'Layout'
  , propTypes:  { children: PropTypes.array.isRequired
                }
  , state:  { metaOverrides: {}
            }
  , defaultProps: { className: 'layout'
                  , rowHeight: 30
                  , breakpoints: { xl: 1100, lg: 768, md: 600 }
                  , cols: { xl: 3, lg: 2, md: 1 }

                  , onLayoutChange: layout => {