react-grid-layout 1.3.4 → 1.4.1

package/build/calculateUtils.js

@@ -9,9 +9,7 @@ exports.calcGridItemWHPx = calcGridItemWHPx;
 exports.calcWH = calcWH;
 exports.calcXY = calcXY;
 exports.clamp = clamp;
-
 /*:: import type { Position } from "./utils";*/
-
 /*:: export type PositionParams = {
   margin: [number, number],
   containerPadding: [number, number],
@@ -21,35 +19,26 @@ exports.clamp = clamp;
   maxRows: number
 };*/
 // Helper for generating column width
-function calcGridColWidth(positionParams
-/*: PositionParams*/
-)
-/*: number*/
-{
-  var margin = positionParams.margin,
-      containerPadding = positionParams.containerPadding,
-      containerWidth = positionParams.containerWidth,
-      cols = positionParams.cols;
+function calcGridColWidth(positionParams /*: PositionParams*/) /*: number*/{
+  const {
+    margin,
+    containerPadding,
+    containerWidth,
+    cols
+  } = positionParams;
   return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
-} // This can either be called:
+}
+
+// This can either be called:
 // calcGridItemWHPx(w, colWidth, margin[0])
 // or
 // calcGridItemWHPx(h, rowHeight, margin[1])
-
-
-function calcGridItemWHPx(gridUnits
-/*: number*/
-, colOrRowSize
-/*: number*/
-, marginPx
-/*: number*/
-)
-/*: number*/
-{
+function calcGridItemWHPx(gridUnits /*: number*/, colOrRowSize /*: number*/, marginPx /*: number*/) /*: number*/{
   // 0 * Infinity === NaN, which causes problems with resize contraints
   if (!Number.isFinite(gridUnits)) return gridUnits;
   return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
 }
+
 /**
  * Return position on the page given an x, y, w, h.
  * left, top, width, height are all in pixels.
@@ -60,50 +49,42 @@ function calcGridItemWHPx(gridUnits
  * @param  {Number}  h                      H coordinate in grid units.
  * @return {Position}                       Object containing coords.
  */
-
-
-function calcGridItemPosition(positionParams
-/*: PositionParams*/
-, x
-/*: number*/
-, y
-/*: number*/
-, w
-/*: number*/
-, h
-/*: number*/
-, state
-/*: ?Object*/
-)
-/*: Position*/
-{
-  var margin = positionParams.margin,
-      containerPadding = positionParams.containerPadding,
-      rowHeight = positionParams.rowHeight;
-  var colWidth = calcGridColWidth(positionParams);
-  var out = {}; // If resizing, use the exact width and height as returned from resizing callbacks.
-
+function calcGridItemPosition(positionParams /*: PositionParams*/, x /*: number*/, y /*: number*/, w /*: number*/, h /*: number*/, state /*: ?Object*/) /*: Position*/{
+  const {
+    margin,
+    containerPadding,
+    rowHeight
+  } = positionParams;
+  const colWidth = calcGridColWidth(positionParams);
+  const out = {};
+
+  // If resizing, use the exact width and height as returned from resizing callbacks.
   if (state && state.resizing) {
     out.width = Math.round(state.resizing.width);
     out.height = Math.round(state.resizing.height);
-  } // Otherwise, calculate from grid units.
+  }
+  // Otherwise, calculate from grid units.
   else {
     out.width = calcGridItemWHPx(w, colWidth, margin[0]);
     out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
-  } // If dragging, use the exact width and height as returned from dragging callbacks.
-
+  }
 
+  // If dragging, use the exact width and height as returned from dragging callbacks.
   if (state && state.dragging) {
     out.top = Math.round(state.dragging.top);
     out.left = Math.round(state.dragging.left);
-  } // Otherwise, calculate from grid units.
+  } else if (state && state.resizing && typeof state.resizing.top === "number" && typeof state.resizing.left === "number") {
+    out.top = Math.round(state.resizing.top);
+    out.left = Math.round(state.resizing.left);
+  }
+  // Otherwise, calculate from grid units.
   else {
     out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
     out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
   }
-
   return out;
 }
+
 /**
  * Translate x and y coordinates from pixels to grid units.
  * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calculations.
@@ -113,43 +94,34 @@ function calcGridItemPosition(positionParams
  * @param  {Number} h                       H coordinate in grid units.
  * @return {Object}                         x and y in grid units.
  */
-
-
-function calcXY(positionParams
-/*: PositionParams*/
-, top
-/*: number*/
-, left
-/*: number*/
-, w
-/*: number*/
-, h
-/*: number*/
-)
-/*: { x: number, y: number }*/
-{
-  var margin = positionParams.margin,
-      cols = positionParams.cols,
-      rowHeight = positionParams.rowHeight,
-      maxRows = positionParams.maxRows;
-  var colWidth = calcGridColWidth(positionParams); // left = colWidth * x + margin * (x + 1)
+function calcXY(positionParams /*: PositionParams*/, top /*: number*/, left /*: number*/, w /*: number*/, h /*: number*/) /*: { x: number, y: number }*/{
+  const {
+    margin,
+    cols,
+    rowHeight,
+    maxRows
+  } = positionParams;
+  const colWidth = calcGridColWidth(positionParams);
+
+  // left = colWidth * x + margin * (x + 1)
   // l = cx + m(x+1)
   // l = cx + mx + m
   // l - m = cx + mx
   // l - m = x(c + m)
   // (l - m) / (c + m) = x
   // x = (left - margin) / (coldWidth + margin)
+  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
+  let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
 
-  var x = Math.round((left - margin[0]) / (colWidth + margin[0]));
-  var y = Math.round((top - margin[1]) / (rowHeight + margin[1])); // Capping
-
+  // Capping
   x = clamp(x, 0, cols - w);
   y = clamp(y, 0, maxRows - h);
   return {
-    x: x,
-    y: y
+    x,
+    y
   };
 }
+
 /**
  * Given a height and width in pixel values, calculate grid units.
  * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calcluations.
@@ -157,51 +129,40 @@ function calcXY(positionParams
  * @param  {Number} width                   Width in pixels.
  * @param  {Number} x                       X coordinate in grid units.
  * @param  {Number} y                       Y coordinate in grid units.
+ * @param {String} handle Resize Handle.
  * @return {Object}                         w, h as grid units.
  */
-
-
-function calcWH(positionParams
-/*: PositionParams*/
-, width
-/*: number*/
-, height
-/*: number*/
-, x
-/*: number*/
-, y
-/*: number*/
-)
-/*: { w: number, h: number }*/
-{
-  var margin = positionParams.margin,
-      maxRows = positionParams.maxRows,
-      cols = positionParams.cols,
-      rowHeight = positionParams.rowHeight;
-  var colWidth = calcGridColWidth(positionParams); // width = colWidth * w - (margin * (w - 1))
+function calcWH(positionParams /*: PositionParams*/, width /*: number*/, height /*: number*/, x /*: number*/, y /*: number*/, handle /*: string*/) /*: { w: number, h: number }*/{
+  const {
+    margin,
+    maxRows,
+    cols,
+    rowHeight
+  } = positionParams;
+  const colWidth = calcGridColWidth(positionParams);
+
+  // width = colWidth * w - (margin * (w - 1))
   // ...
   // w = (width + margin) / (colWidth + margin)
-
-  var w = Math.round((width + margin[0]) / (colWidth + margin[0]));
-  var h = Math.round((height + margin[1]) / (rowHeight + margin[1])); // Capping
-
-  w = clamp(w, 0, cols - x);
-  h = clamp(h, 0, maxRows - y);
+  let w = Math.round((width + margin[0]) / (colWidth + margin[0]));
+  let h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
+
+  // Capping
+  let _w = clamp(w, 0, cols - x);
+  let _h = clamp(h, 0, maxRows - y);
+  if (["sw", "w", "nw"].indexOf(handle) !== -1) {
+    _w = clamp(w, 0, cols);
+  }
+  if (["nw", "n", "ne"].indexOf(handle) !== -1) {
+    _h = clamp(h, 0, maxRows);
+  }
   return {
-    w: w,
-    h: h
+    w: _w,
+    h: _h
   };
-} // Similar to _.clamp
-
+}
 
-function clamp(num
-/*: number*/
-, lowerBound
-/*: number*/
-, upperBound
-/*: number*/
-)
-/*: number*/
-{
+// Similar to _.clamp
+function clamp(num /*: number*/, lowerBound /*: number*/, upperBound /*: number*/) /*: number*/{
   return Math.max(Math.min(num, upperBound), lowerBound);
 }

package/build/components/WidthProvider.js

@@ -1,151 +1,108 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = WidthProvideRGL;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 var _clsx = _interopRequireDefault(require("clsx"));
-
-var _excluded = ["measureBeforeMount"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/*:: import type { ReactRef } from "../ReactGridLayoutPropTypes";*/
+/*:: type WPDefaultProps = {|
+  measureBeforeMount: boolean
+|};*/
+/*:: type WPProps = {|
+  className?: string,
+  style?: Object,
+  ...WPDefaultProps
+|};*/
+// eslint-disable-next-line no-unused-vars
+/*:: type WPState = {|
+  width: number
+|};*/
+/*:: type ComposedProps<Config> = {|
+  ...Config,
+  measureBeforeMount?: boolean,
+  className?: string,
+  style?: Object,
+  width?: number
+|};*/
+const layoutClassName = "react-grid-layout";
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var layoutClassName = "react-grid-layout";
 /*
  * A simple HOC that provides facility for listening to container resizes.
  *
  * The Flow type is pretty janky here. I can't just spread `WPProps` into this returned object - I wish I could - but it triggers
  * a flow bug of some sort that causes it to stop typechecking.
  */
-
-function WidthProvideRGL
-/*:: <Config>*/
-(ComposedComponent
-/*: React.AbstractComponent<Config>*/
-)
-/*: React.AbstractComponent<ComposedProps<Config>>*/
-{
+function WidthProvideRGL /*:: <Config>*/(ComposedComponent /*: React.AbstractComponent<Config>*/) /*: React.AbstractComponent<ComposedProps<Config>>*/{
   var _class;
-
-  return _class = /*#__PURE__*/function (_React$Component) {
-    _inherits(WidthProvider, _React$Component);
-
-    var _super = _createSuper(WidthProvider);
-
-    function WidthProvider() {
-      var _this;
-
-      _classCallCheck(this, WidthProvider);
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _super.call.apply(_super, [this].concat(args));
-
-      _defineProperty(_assertThisInitialized(_this), "state", {
+  return _class = class WidthProvider extends React.Component
+  /*:: <
+      ComposedProps<Config>,
+      WPState
+    >*/
+  {
+    constructor() {
+      super(...arguments);
+      _defineProperty(this, "state", {
         width: 1280
       });
-
-      _defineProperty(_assertThisInitialized(_this), "elementRef", /*#__PURE__*/React.createRef());
-
-      _defineProperty(_assertThisInitialized(_this), "mounted", false);
-
-      _defineProperty(_assertThisInitialized(_this), "onWindowResize", function () {
-        if (!_this.mounted) return;
-        var node = _this.elementRef.current; // Flow casts this to Text | Element
-        // fix: grid position error when node or parentNode display is none by window resize
-        // #924 #1084
-
-        if (node instanceof HTMLElement && node.offsetWidth) {
-          _this.setState({
-            width: node.offsetWidth
+      _defineProperty(this, "elementRef", /*#__PURE__*/React.createRef());
+      _defineProperty(this, "mounted", false);
+      _defineProperty(this, "resizeObserver", void 0);
+    }
+    componentDidMount() {
+      this.mounted = true;
+      this.resizeObserver = new _resizeObserverPolyfill.default(entries => {
+        const node = this.elementRef.current;
+        if (node instanceof HTMLElement) {
+          const width = entries[0].contentRect.width;
+          this.setState({
+            width
           });
         }
       });
-
-      return _this;
-    }
-
-    _createClass(WidthProvider, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        this.mounted = true;
-        window.addEventListener("resize", this.onWindowResize); // Call to properly set the breakpoint and resize the elements.
-        // Note that if you're doing a full-width element, this can get a little wonky if a scrollbar
-        // appears because of the grid. In that case, fire your own resize event, or set `overflow: scroll` on your body.
-
-        this.onWindowResize();
+      const node = this.elementRef.current;
+      if (node instanceof HTMLElement) {
+        this.resizeObserver.observe(node);
       }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        this.mounted = false;
-        window.removeEventListener("resize", this.onWindowResize);
+    }
+    componentWillUnmount() {
+      this.mounted = false;
+      const node = this.elementRef.current;
+      if (node instanceof HTMLElement) {
+        this.resizeObserver.unobserve(node);
       }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-            measureBeforeMount = _this$props.measureBeforeMount,
-            rest = _objectWithoutProperties(_this$props, _excluded);
-
-        if (measureBeforeMount && !this.mounted) {
-          return /*#__PURE__*/React.createElement("div", {
-            className: (0, _clsx.default)(this.props.className, layoutClassName),
-            style: this.props.style // $FlowIgnore ref types
-            ,
-            ref: this.elementRef
-          });
-        }
-
-        return /*#__PURE__*/React.createElement(ComposedComponent, _extends({
-          innerRef: this.elementRef
-        }, rest, this.state));
+      this.resizeObserver.disconnect();
+    }
+    render() {
+      const {
+        measureBeforeMount,
+        ...rest
+      } = this.props;
+      if (measureBeforeMount && !this.mounted) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: (0, _clsx.default)(this.props.className, layoutClassName),
+          style: this.props.style
+          // $FlowIgnore ref types
+          ,
+          ref: this.elementRef
+        });
       }
-    }]);
-
-    return WidthProvider;
-  }(React.Component), _defineProperty(_class, "defaultProps", {
+      return /*#__PURE__*/React.createElement(ComposedComponent, _extends({
+        innerRef: this.elementRef
+      }, rest, this.state));
+    }
+  }, _defineProperty(_class, "defaultProps", {
     measureBeforeMount: false
   }), _defineProperty(_class, "propTypes", {
     // If true, will not render children until mounted. Useful for getting the exact width before

package/build/responsiveUtils.js

@@ -7,9 +7,21 @@ exports.findOrGenerateResponsiveLayout = findOrGenerateResponsiveLayout;
 exports.getBreakpointFromWidth = getBreakpointFromWidth;
 exports.getColsFromBreakpoint = getColsFromBreakpoint;
 exports.sortBreakpoints = sortBreakpoints;
-
 var _utils = require("./utils");
-
+/*:: import type { CompactType, Layout } from "./utils";*/
+/*:: export type Breakpoint = string;*/
+/*:: export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";*/
+/*:: export type ResponsiveLayout<T: Breakpoint> = {
+  +[breakpoint: T]: Layout
+};*/
+// + indicates read-only
+/*:: export type Breakpoints<T: Breakpoint> = {
+  +[breakpoint: T]: number
+};*/
+/*:: export type OnLayoutChangeCallback = (
+  Layout,
+  { [key: Breakpoint]: Layout }
+) => void;*/
 /**
  * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
  *
@@ -17,44 +29,29 @@ var _utils = require("./utils");
  * @param  {Number} width Screen width.
  * @return {String}       Highest breakpoint that is less than width.
  */
-function getBreakpointFromWidth(breakpoints
-/*: Breakpoints<Breakpoint>*/
-, width
-/*: number*/
-)
-/*: Breakpoint*/
-{
-  var sorted = sortBreakpoints(breakpoints);
-  var matching = sorted[0];
-
-  for (var i = 1, len = sorted.length; i < len; i++) {
-    var breakpointName = sorted[i];
+function getBreakpointFromWidth(breakpoints /*: Breakpoints<Breakpoint>*/, width /*: number*/) /*: Breakpoint*/{
+  const sorted = sortBreakpoints(breakpoints);
+  let matching = sorted[0];
+  for (let i = 1, len = sorted.length; i < len; i++) {
+    const breakpointName = sorted[i];
     if (width > breakpoints[breakpointName]) matching = breakpointName;
   }
-
   return matching;
 }
+
 /**
  * Given a breakpoint, get the # of cols set for it.
  * @param  {String} breakpoint Breakpoint name.
  * @param  {Object} cols       Map of breakpoints to cols.
  * @return {Number}            Number of cols.
  */
-
-
-function getColsFromBreakpoint(breakpoint
-/*: Breakpoint*/
-, cols
-/*: Breakpoints<Breakpoint>*/
-)
-/*: number*/
-{
+function getColsFromBreakpoint(breakpoint /*: Breakpoint*/, cols /*: Breakpoints<Breakpoint>*/) /*: number*/{
   if (!cols[breakpoint]) {
     throw new Error("ResponsiveReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!");
   }
-
   return cols[breakpoint];
 }
+
 /**
  * Given existing layouts and a new breakpoint, find or generate a new layout.
  *
@@ -69,45 +66,26 @@ function getColsFromBreakpoint(breakpoint
  *   vertically.
  * @return {Array}             New layout.
  */
-
-
-function findOrGenerateResponsiveLayout(layouts
-/*: ResponsiveLayout<Breakpoint>*/
-, breakpoints
-/*: Breakpoints<Breakpoint>*/
-, breakpoint
-/*: Breakpoint*/
-, lastBreakpoint
-/*: Breakpoint*/
-, cols
-/*: number*/
-, compactType
-/*: CompactType*/
-)
-/*: Layout*/
-{
+function findOrGenerateResponsiveLayout(layouts /*: ResponsiveLayout<Breakpoint>*/, breakpoints /*: Breakpoints<Breakpoint>*/, breakpoint /*: Breakpoint*/, lastBreakpoint /*: Breakpoint*/, cols /*: number*/, compactType /*: CompactType*/) /*: Layout*/{
   // If it already exists, just return it.
-  if (layouts[breakpoint]) return (0, _utils.cloneLayout)(layouts[breakpoint]); // Find or generate the next layout
-
-  var layout = layouts[lastBreakpoint];
-  var breakpointsSorted = sortBreakpoints(breakpoints);
-  var breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
-
-  for (var i = 0, len = breakpointsAbove.length; i < len; i++) {
-    var b = breakpointsAbove[i];
-
+  if (layouts[breakpoint]) return (0, _utils.cloneLayout)(layouts[breakpoint]);
+  // Find or generate the next layout
+  let layout = layouts[lastBreakpoint];
+  const breakpointsSorted = sortBreakpoints(breakpoints);
+  const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
+  for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
+    const b = breakpointsAbove[i];
     if (layouts[b]) {
       layout = layouts[b];
       break;
     }
   }
-
   layout = (0, _utils.cloneLayout)(layout || []); // clone layout so we don't modify existing items
-
   return (0, _utils.compact)((0, _utils.correctBounds)(layout, {
     cols: cols
   }), compactType, cols);
 }
+
 /**
  * Given breakpoints, return an array of breakpoints sorted by width. This is usually
  * e.g. ['xxs', 'xs', 'sm', ...]
@@ -115,16 +93,8 @@ function findOrGenerateResponsiveLayout(layouts
  * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
  * @return {Array}              Sorted breakpoints.
  */
-
-
-function sortBreakpoints(breakpoints
-/*: Breakpoints<Breakpoint>*/
-)
-/*: Array<Breakpoint>*/
-{
-  var keys
-  /*: Array<string>*/
-  = Object.keys(breakpoints);
+function sortBreakpoints(breakpoints /*: Breakpoints<Breakpoint>*/) /*: Array<Breakpoint>*/{
+  const keys /*: Array<string>*/ = Object.keys(breakpoints);
   return keys.sort(function (a, b) {
     return breakpoints[a] - breakpoints[b];
   });