react-grid-layout 1.5.3 → 2.0.0

package/build/ReactGridLayoutPropTypes.js

@@ -1,210 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resizeHandleType = exports.resizeHandleAxesType = exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*:: import type {
-  Ref,
-  ChildrenArray as ReactChildrenArray,
-  Element as ReactElement
-} from "react";*/
-/*:: import type {
-  DragOverEvent,
-  EventCallback,
-  CompactType,
-  Layout,
-  LayoutItem,
-  ResizeHandleAxis
-} from "./utils";*/
-/*:: export type ReactRef<T: HTMLElement> = {|
-  +current: T | null
-|};*/
-// util
-/*:: export type ResizeHandle =
-  | ReactElement<any>
-  | ((
-      resizeHandleAxis: ResizeHandleAxis,
-      ref: ReactRef<HTMLElement>
-    ) => ReactElement<any>);*/
-// Defines which resize handles should be rendered (default: 'se')
-// Allows for any combination of:
-// 's' - South handle (bottom-center)
-// 'w' - West handle (left-center)
-// 'e' - East handle (right-center)
-// 'n' - North handle (top-center)
-// 'sw' - Southwest handle (bottom-left)
-// 'nw' - Northwest handle (top-left)
-// 'se' - Southeast handle (bottom-right)
-// 'ne' - Northeast handle (top-right)
-const resizeHandleAxesType /*: ReactPropsChainableTypeChecker*/ = exports.resizeHandleAxesType = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"]));
-// Custom component for resize handles
-const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = exports.resizeHandleType = _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
-/*:: export type Props = {|
-  className: string,
-  style: Object,
-  width: number,
-  autoSize: boolean,
-  cols: number,
-  draggableCancel: string,
-  draggableHandle: string,
-  verticalCompact: boolean,
-  compactType: CompactType,
-  layout: Layout,
-  margin: [number, number],
-  containerPadding: ?[number, number],
-  rowHeight: number,
-  maxRows: number,
-  isBounded: boolean,
-  isDraggable: boolean,
-  isResizable: boolean,
-  isDroppable: boolean,
-  preventCollision: boolean,
-  useCSSTransforms: boolean,
-  transformScale: number,
-  droppingItem: $Shape<LayoutItem>,
-  resizeHandles: ResizeHandleAxis[],
-  resizeHandle?: ResizeHandle,
-  allowOverlap: boolean,
-
-  // Callbacks
-  onLayoutChange: Layout => void,
-  onDrag: EventCallback,
-  onDragStart: EventCallback,
-  onDragStop: EventCallback,
-  onResize: EventCallback,
-  onResizeStart: EventCallback,
-  onResizeStop: EventCallback,
-  onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
-  onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
-  children: ReactChildrenArray<ReactElement<any>>,
-  innerRef?: Ref<"div">
-|};*/
-/*:: export type DefaultProps = $Diff<
-  Props,
-  {
-    children: ReactChildrenArray<ReactElement<any>>,
-    width: number
-  }
->;*/
-var _default = exports.default = {
-  //
-  // Basic props
-  //
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  // This can be set explicitly. If it is not set, it will automatically
-  // be set to the container width. Note that resizes will *not* cause this to adjust.
-  // If you need that behavior, use WidthProvider.
-  width: _propTypes.default.number,
-  // If true, the container height swells and contracts to fit contents
-  autoSize: _propTypes.default.bool,
-  // # of cols.
-  cols: _propTypes.default.number,
-  // A selector that will not be draggable.
-  draggableCancel: _propTypes.default.string,
-  // A selector for the draggable handler
-  draggableHandle: _propTypes.default.string,
-  // Deprecated
-  verticalCompact: function (props /*: Props*/) {
-    if (props.verticalCompact === false && process.env.NODE_ENV !== "production") {
-      console.warn(
-      // eslint-disable-line no-console
-      "`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. " + 'Use `compactType`: "horizontal" | "vertical" | null.');
-    }
-  },
-  // Choose vertical or hotizontal compaction
-  compactType: (_propTypes.default.oneOf(["vertical", "horizontal"]) /*: ReactPropsChainableTypeChecker*/),
-  // layout is an array of object with the format:
-  // {x: Number, y: Number, w: Number, h: Number, i: String}
-  layout: function (props /*: Props*/) {
-    var layout = props.layout;
-    // I hope you're setting the data-grid property on the grid items
-    if (layout === undefined) return;
-    require("./utils").validateLayout(layout, "layout");
-  },
-  //
-  // Grid Dimensions
-  //
-
-  // Margin between items [x, y] in px
-  margin: (_propTypes.default.arrayOf(_propTypes.default.number) /*: ReactPropsChainableTypeChecker*/),
-  // Padding inside the container [x, y] in px
-  containerPadding: (_propTypes.default.arrayOf(_propTypes.default.number) /*: ReactPropsChainableTypeChecker*/),
-  // Rows have a static height, but you can change this based on breakpoints if you like
-  rowHeight: _propTypes.default.number,
-  // Default Infinity, but you can specify a max here if you like.
-  // Note that this isn't fully fleshed out and won't error if you specify a layout that
-  // extends beyond the row capacity. It will, however, not allow users to drag/resize
-  // an item past the barrier. They can push items beyond the barrier, though.
-  // Intentionally not documented for this reason.
-  maxRows: _propTypes.default.number,
-  //
-  // Flags
-  //
-  isBounded: _propTypes.default.bool,
-  isDraggable: _propTypes.default.bool,
-  isResizable: _propTypes.default.bool,
-  // If true, grid can be placed one over the other.
-  allowOverlap: _propTypes.default.bool,
-  // If true, grid items won't change position when being dragged over.
-  preventCollision: _propTypes.default.bool,
-  // Use CSS transforms instead of top/left
-  useCSSTransforms: _propTypes.default.bool,
-  // parent layout transform scale
-  transformScale: _propTypes.default.number,
-  // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
-  isDroppable: _propTypes.default.bool,
-  // Resize handle options
-  resizeHandles: resizeHandleAxesType,
-  resizeHandle: resizeHandleType,
-  //
-  // Callbacks
-  //
-
-  // Callback so you can save the layout. Calls after each drag & resize stops.
-  onLayoutChange: _propTypes.default.func,
-  // Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e, ?node).
-  // All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
-  onDragStart: _propTypes.default.func,
-  // Calls on each drag movement.
-  onDrag: _propTypes.default.func,
-  // Calls when drag is complete.
-  onDragStop: _propTypes.default.func,
-  //Calls when resize starts.
-  onResizeStart: _propTypes.default.func,
-  // Calls when resize movement happens.
-  onResize: _propTypes.default.func,
-  // Calls when resize is complete.
-  onResizeStop: _propTypes.default.func,
-  // Calls when some element is dropped.
-  onDrop: _propTypes.default.func,
-  //
-  // Other validations
-  //
-
-  droppingItem: (_propTypes.default.shape({
-    i: _propTypes.default.string.isRequired,
-    w: _propTypes.default.number.isRequired,
-    h: _propTypes.default.number.isRequired
-  }) /*: ReactPropsChainableTypeChecker*/),
-  // Children must not have duplicate keys.
-  children: function (props /*: Props*/, propName /*: string*/) {
-    const children = props[propName];
-
-    // Check children keys for duplicates. Throw if found.
-    const keys = {};
-    _react.default.Children.forEach(children, function (child) {
-      if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
-      if (keys[child.key]) {
-        throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
-      }
-      keys[child.key] = true;
-    });
-  },
-  // Optional ref for getting a reference for the wrapping div.
-  innerRef: _propTypes.default.any
-};

package/build/ResponsiveReactGridLayout.js

@@ -1,297 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _fastEquals = require("fast-equals");
-var _utils = require("./utils");
-var _responsiveUtils = require("./responsiveUtils");
-var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
-const _excluded = ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*:: import { type Layout, type Pick } from "./utils";*/ /*:: import { type ResponsiveLayout, type OnLayoutChangeCallback, type Breakpoints } from "./responsiveUtils";*/
-// $FlowFixMe[method-unbinding]
-const type = obj => Object.prototype.toString.call(obj);
-
-/**
- * Get a value of margin or containerPadding.
- *
- * @param  {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
- * @param  {String} breakpoint   Breakpoint: lg, md, sm, xs and etc.
- * @return {Array}
- */
-function getIndentationValue /*:: <T: ?[number, number]>*/(param /*: { [key: string]: T } | T*/, breakpoint /*: string*/) /*: T*/{
-  // $FlowIgnore TODO fix this typedef
-  if (param == null) return null;
-  // $FlowIgnore TODO fix this typedef
-  return Array.isArray(param) ? param : param[breakpoint];
-}
-/*:: type State = {
-  layout: Layout,
-  breakpoint: string,
-  cols: number,
-  layouts?: ResponsiveLayout<string>
-};*/
-/*:: type Props<Breakpoint: string = string> = {|
-  ...React.ElementConfig<typeof ReactGridLayout>,
-
-  // Responsive config
-  breakpoint?: ?Breakpoint,
-  breakpoints: Breakpoints<Breakpoint>,
-  cols: { [key: Breakpoint]: number },
-  layouts: ResponsiveLayout<Breakpoint>,
-  width: number,
-  margin: { [key: Breakpoint]: [number, number] } | [number, number],
-  /* prettier-ignore *-/
-  containerPadding: { [key: Breakpoint]: ?[number, number] } | ?[number, number],
-
-  // Callbacks
-  onBreakpointChange: (Breakpoint, cols: number) => void,
-  onLayoutChange: OnLayoutChangeCallback,
-  onWidthChange: (
-    containerWidth: number,
-    margin: [number, number],
-    cols: number,
-    containerPadding: ?[number, number]
-  ) => void
-|};*/
-/*:: type DefaultProps = Pick<
-  Props<>,
-  {|
-    allowOverlap: 0,
-    breakpoints: 0,
-    cols: 0,
-    containerPadding: 0,
-    layouts: 0,
-    margin: 0,
-    onBreakpointChange: 0,
-    onLayoutChange: 0,
-    onWidthChange: 0
-  |}
->;*/
-class ResponsiveReactGridLayout extends React.Component
-/*:: <
-  Props<>,
-  State
->*/
-{
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", this.generateInitialState());
-    // wrap layouts so we do not need to pass layouts to child
-    _defineProperty(this, "onLayoutChange", (layout /*: Layout*/) => {
-      this.props.onLayoutChange(layout, _objectSpread(_objectSpread({}, this.props.layouts), {}, {
-        [this.state.breakpoint]: layout
-      }));
-    });
-  }
-  generateInitialState() /*: State*/{
-    const {
-      width,
-      breakpoints,
-      layouts,
-      cols
-    } = this.props;
-    const breakpoint = (0, _responsiveUtils.getBreakpointFromWidth)(breakpoints, width);
-    const colNo = (0, _responsiveUtils.getColsFromBreakpoint)(breakpoint, cols);
-    // verticalCompact compatibility, now deprecated
-    const compactType = this.props.verticalCompact === false ? null : this.props.compactType;
-    // Get the initial layout. This can tricky; we try to generate one however possible if one doesn't exist
-    // for this layout.
-    const initialLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType);
-    return {
-      layout: initialLayout,
-      breakpoint: breakpoint,
-      cols: colNo
-    };
-  }
-  static getDerivedStateFromProps(nextProps /*: Props<*>*/, prevState /*: State*/) /*: ?$Shape<State>*/{
-    if (!(0, _fastEquals.deepEqual)(nextProps.layouts, prevState.layouts)) {
-      // Allow parent to set layouts directly.
-      const {
-        breakpoint,
-        cols
-      } = prevState;
-
-      // Since we're setting an entirely new layout object, we must generate a new responsive layout
-      // if one does not exist.
-      const newLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(nextProps.layouts, nextProps.breakpoints, breakpoint, breakpoint, cols, nextProps.compactType);
-      return {
-        layout: newLayout,
-        layouts: nextProps.layouts
-      };
-    }
-    return null;
-  }
-  componentDidUpdate(prevProps /*: Props<*>*/) {
-    // Allow parent to set width or breakpoint directly.
-    if (this.props.width != prevProps.width || this.props.breakpoint !== prevProps.breakpoint || !(0, _fastEquals.deepEqual)(this.props.breakpoints, prevProps.breakpoints) || !(0, _fastEquals.deepEqual)(this.props.cols, prevProps.cols)) {
-      this.onWidthChange(prevProps);
-    }
-  }
-  /**
-   * When the width changes work through breakpoints and reset state with the new width & breakpoint.
-   * Width changes are necessary to figure out the widget widths.
-   */
-  onWidthChange(prevProps /*: Props<*>*/) {
-    const {
-      breakpoints,
-      cols,
-      layouts,
-      compactType
-    } = this.props;
-    const newBreakpoint = this.props.breakpoint || (0, _responsiveUtils.getBreakpointFromWidth)(this.props.breakpoints, this.props.width);
-    const lastBreakpoint = this.state.breakpoint;
-    const newCols /*: number*/ = (0, _responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
-    const newLayouts = _objectSpread({}, layouts);
-
-    // Breakpoint change
-    if (lastBreakpoint !== newBreakpoint || prevProps.breakpoints !== breakpoints || prevProps.cols !== cols) {
-      // Preserve the current layout if the current breakpoint is not present in the next layouts.
-      if (!(lastBreakpoint in newLayouts)) newLayouts[lastBreakpoint] = (0, _utils.cloneLayout)(this.state.layout);
-
-      // Find or generate a new layout.
-      let layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType);
-
-      // This adds missing items.
-      layout = (0, _utils.synchronizeLayoutWithChildren)(layout, this.props.children, newCols, compactType, this.props.allowOverlap);
-
-      // Store the new layout.
-      newLayouts[newBreakpoint] = layout;
-
-      // callbacks
-      this.props.onBreakpointChange(newBreakpoint, newCols);
-      this.props.onLayoutChange(layout, newLayouts);
-      this.setState({
-        breakpoint: newBreakpoint,
-        layout: layout,
-        cols: newCols
-      });
-    }
-    const margin = getIndentationValue(this.props.margin, newBreakpoint);
-    const containerPadding = getIndentationValue(this.props.containerPadding, newBreakpoint);
-
-    //call onWidthChange on every change of width, not only on breakpoint changes
-    this.props.onWidthChange(this.props.width, margin, newCols, containerPadding);
-  }
-  render() /*: React.Element<typeof ReactGridLayout>*/{
-    /* eslint-disable no-unused-vars */
-    const _this$props = this.props,
-      {
-        breakpoint,
-        breakpoints,
-        cols,
-        layouts,
-        margin,
-        containerPadding,
-        onBreakpointChange,
-        onLayoutChange,
-        onWidthChange
-      } = _this$props,
-      other = _objectWithoutProperties(_this$props, _excluded);
-    /* eslint-enable no-unused-vars */
-
-    return /*#__PURE__*/React.createElement(_ReactGridLayout.default, _extends({}, other, {
-      // $FlowIgnore should allow nullable here due to DefaultProps
-      margin: getIndentationValue(margin, this.state.breakpoint),
-      containerPadding: getIndentationValue(containerPadding, this.state.breakpoint),
-      onLayoutChange: this.onLayoutChange,
-      layout: this.state.layout,
-      cols: this.state.cols
-    }));
-  }
-}
-exports.default = ResponsiveReactGridLayout;
-// This should only include propTypes needed in this code; RGL itself
-// will do validation of the rest props passed to it.
-_defineProperty(ResponsiveReactGridLayout, "propTypes", {
-  //
-  // Basic props
-  //
-
-  // Optional, but if you are managing width yourself you may want to set the breakpoint
-  // yourself as well.
-  breakpoint: _propTypes.default.string,
-  // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
-  breakpoints: _propTypes.default.object,
-  allowOverlap: _propTypes.default.bool,
-  // # of cols. This is a breakpoint -> cols map
-  cols: _propTypes.default.object,
-  // # of margin. This is a breakpoint -> margin map
-  // e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
-  // Margin between items [x, y] in px
-  // e.g. [10, 10]
-  margin: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
-  // # of containerPadding. This is a breakpoint -> containerPadding map
-  // e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
-  // Padding inside the container [x, y] in px
-  // e.g. [10, 10]
-  containerPadding: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
-  // layouts is an object mapping breakpoints to layouts.
-  // e.g. {lg: Layout, md: Layout, ...}
-  layouts(props /*: Props<>*/, propName /*: string*/) {
-    if (type(props[propName]) !== "[object Object]") {
-      throw new Error("Layout property must be an object. Received: " + type(props[propName]));
-    }
-    Object.keys(props[propName]).forEach(key => {
-      if (!(key in props.breakpoints)) {
-        throw new Error("Each key in layouts must align with a key in breakpoints.");
-      }
-      (0, _utils.validateLayout)(props.layouts[key], "layouts." + key);
-    });
-  },
-  // The width of this component.
-  // Required in this propTypes stanza because generateInitialState() will fail without it.
-  width: _propTypes.default.number.isRequired,
-  //
-  // Callbacks
-  //
-
-  // Calls back with breakpoint and new # cols
-  onBreakpointChange: _propTypes.default.func,
-  // Callback so you can save the layout.
-  // Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
-  onLayoutChange: _propTypes.default.func,
-  // Calls back with (containerWidth, margin, cols, containerPadding)
-  onWidthChange: _propTypes.default.func
-});
-_defineProperty(ResponsiveReactGridLayout, "defaultProps", {
-  breakpoints: {
-    lg: 1200,
-    md: 996,
-    sm: 768,
-    xs: 480,
-    xxs: 0
-  },
-  cols: {
-    lg: 12,
-    md: 10,
-    sm: 6,
-    xs: 4,
-    xxs: 2
-  },
-  containerPadding: {
-    lg: null,
-    md: null,
-    sm: null,
-    xs: null,
-    xxs: null
-  },
-  layouts: {},
-  margin: [10, 10],
-  allowOverlap: false,
-  onBreakpointChange: _utils.noop,
-  onLayoutChange: _utils.noop,
-  onWidthChange: _utils.noop
-});

package/build/calculateUtils.js

@@ -1,165 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.calcGridColWidth = calcGridColWidth;
-exports.calcGridItemPosition = calcGridItemPosition;
-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],
-  containerWidth: number,
-  cols: number,
-  rowHeight: number,
-  maxRows: number
-};*/
-// Helper for generating column width
-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:
-// calcGridItemWHPx(w, colWidth, margin[0])
-// or
-// calcGridItemWHPx(h, rowHeight, margin[1])
-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.
- * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calculations.
- * @param  {Number}  x                      X coordinate in grid units.
- * @param  {Number}  y                      Y coordinate in grid units.
- * @param  {Number}  w                      W coordinate in grid units.
- * @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*/{
-  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.
-  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 (state && state.dragging) {
-    out.top = Math.round(state.dragging.top);
-    out.left = Math.round(state.dragging.left);
-  } 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.
- * @param  {Number} top                     Top position (relative to parent) in pixels.
- * @param  {Number} left                    Left position (relative to parent) in pixels.
- * @param  {Number} w                       W coordinate in grid units.
- * @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 }*/{
-  const {
-    margin,
-    containerPadding,
-    cols,
-    rowHeight,
-    maxRows
-  } = positionParams;
-  const colWidth = calcGridColWidth(positionParams);
-
-  // left = containerPaddingX + x * (colWidth + marginX)
-  // x * (colWidth + marginX) = left - containerPaddingX
-  // x = (left - containerPaddingX) / (colWidth + marginX)
-  let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
-  let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
-
-  // Capping
-  x = clamp(x, 0, cols - w);
-  y = clamp(y, 0, maxRows - h);
-  return {
-    x,
-    y
-  };
-}
-
-/**
- * Given a height and width in pixel values, calculate grid units.
- * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calcluations.
- * @param  {Number} height                  Height in pixels.
- * @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*/, 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)
-  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
-  };
-}
-
-// Similar to _.clamp
-function clamp(num /*: number*/, lowerBound /*: number*/, upperBound /*: number*/) /*: number*/{
-  return Math.max(Math.min(num, upperBound), lowerBound);
-}