react-grid-layout 1.5.3 → 2.1.0

package/lib/calculateUtils.js

@@ -1,169 +0,0 @@
-// @flow
-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
-export 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])
-export 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.
- */
-export 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.
- */
-export 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.
- */
-export 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
-export function clamp(
-  num: number,
-  lowerBound: number,
-  upperBound: number
-): number {
-  return Math.max(Math.min(num, upperBound), lowerBound);
-}

package/lib/components/WidthProvider.jsx

@@ -1,110 +0,0 @@
-// @flow
-import * as React from "react";
-import PropTypes from "prop-types";
-import ResizeObserver from "resize-observer-polyfill";
-import clsx from "clsx";
-import type { ReactRef } from "../ReactGridLayoutPropTypes";
-
-type WPDefaultProps = {|
-  measureBeforeMount: boolean
-|};
-
-// eslint-disable-next-line no-unused-vars
-type WPProps = {|
-  className?: string,
-  style?: Object,
-  ...WPDefaultProps
-|};
-
-type WPState = {|
-  width: number
-|};
-
-type ComposedProps<Config> = {|
-  ...Config,
-  measureBeforeMount?: boolean,
-  className?: string,
-  style?: Object,
-  width?: number
-|};
-
-const 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.
- */
-export default function WidthProvideRGL<Config>(
-  ComposedComponent: React.AbstractComponent<Config>
-): React.AbstractComponent<ComposedProps<Config>> {
-  return class WidthProvider extends React.Component<
-    ComposedProps<Config>,
-    WPState
-  > {
-    static defaultProps: WPDefaultProps = {
-      measureBeforeMount: false
-    };
-
-    static propTypes = {
-      // If true, will not render children until mounted. Useful for getting the exact width before
-      // rendering, to prevent any unsightly resizing.
-      measureBeforeMount: PropTypes.bool
-    };
-
-    state: WPState = {
-      width: 1280
-    };
-
-    elementRef: ReactRef<HTMLDivElement> = React.createRef();
-    mounted: boolean = false;
-    resizeObserver: ResizeObserver;
-
-    componentDidMount() {
-      this.mounted = true;
-      this.resizeObserver = new ResizeObserver(entries => {
-        const node = this.elementRef.current;
-        if (node instanceof HTMLElement) {
-          const width = entries[0].contentRect.width;
-          this.setState({ width });
-        }
-      });
-      const node = this.elementRef.current;
-      if (node instanceof HTMLElement) {
-        this.resizeObserver.observe(node);
-      }
-    }
-
-    componentWillUnmount() {
-      this.mounted = false;
-      const node = this.elementRef.current;
-      if (node instanceof HTMLElement) {
-        this.resizeObserver.unobserve(node);
-      }
-      this.resizeObserver.disconnect();
-    }
-
-    render() {
-      const { measureBeforeMount, ...rest } = this.props;
-      if (measureBeforeMount && !this.mounted) {
-        return (
-          <div
-            className={clsx(this.props.className, layoutClassName)}
-            style={this.props.style}
-            // $FlowIgnore ref types
-            ref={this.elementRef}
-          />
-        );
-      }
-
-      return (
-        <ComposedComponent
-          innerRef={this.elementRef}
-          {...rest}
-          {...this.state}
-        />
-      );
-    }
-  };
-}

package/lib/fastRGLPropsEqual.js

@@ -1,46 +0,0 @@
-// @preval
-
-require("@babel/register");
-
-// Fast way to compare RGL props in shouldComponentUpdate.
-// Generates the fastest possible comparison of the type:
-// function (a, b) { return a.className === b.className && a.style === b.style && ... }
-// This avoids enumerating keys, avoids us keeping our own key list, and can be very easily optimized.
-
-const PropTypes = require("prop-types");
-const propTypes = require("./ReactGridLayoutPropTypes").default;
-const keys = Object.keys(propTypes);
-
-// Remove 'children' key as we don't want to compare it
-keys.splice(keys.indexOf("children"), 1);
-
-// Returns a code string indicating what to do here.
-// In most cases we want to do a simple equality comparison,
-// but we have some arrays and tuples and objects we want
-// to do a shallow comparison on.
-function getEqualType(key) {
-  if (
-    [
-      PropTypes.number,
-      PropTypes.bool,
-      PropTypes.string,
-      PropTypes.func
-    ].includes(propTypes[key])
-  ) {
-    return `(a.${key} === b.${key})`;
-  }
-  return `isEqualImpl(a.${key}, b.${key})`;
-}
-
-// Exports a function that compares a and b. `isEqualImpl` is a required
-// third prop, as we can't otherwise access it.
-module.exports = () =>
-  eval(`
-  function fastRGLPropsEqual(a, b, isEqualImpl) {
-    if (a === b) return true;
-    return (
-      ${keys.map(getEqualType).join(" && ")}
-    );
-  }
-  fastRGLPropsEqual;
-`);

package/lib/responsiveUtils.js

@@ -1,118 +0,0 @@
-// @flow
-
-import { cloneLayout, compact, correctBounds } from "./utils";
-
-import type { CompactType, Layout } from "./utils";
-
-export type Breakpoint = string;
-export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
-
-// + indicates read-only
-export type ResponsiveLayout<T: Breakpoint> = {
-  +[breakpoint: T]: Layout
-};
-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).
- *
- * @param  {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
- * @param  {Number} width Screen width.
- * @return {String}       Highest breakpoint that is less than width.
- */
-export 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.
- */
-export 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.
- *
- * This finds the layout above the new one and generates from it, if it exists.
- *
- * @param  {Object} layouts     Existing layouts.
- * @param  {Array} breakpoints All breakpoints.
- * @param  {String} breakpoint New breakpoint.
- * @param  {String} breakpoint Last breakpoint (for fallback).
- * @param  {Number} cols       Column count at new breakpoint.
- * @param  {Boolean} verticalCompact Whether or not to compact the layout
- *   vertically.
- * @return {Array}             New layout.
- */
-export 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 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 = cloneLayout(layout || []); // clone layout so we don't modify existing items
-  return compact(correctBounds(layout, { cols: cols }), compactType, cols);
-}
-
-/**
- * Given breakpoints, return an array of breakpoints sorted by width. This is usually
- * e.g. ['xxs', 'xs', 'sm', ...]
- *
- * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
- * @return {Array}              Sorted breakpoints.
- */
-export 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];
-  });
-}