feat: add lockAspectRatio props in GridItem Component

README.md

@@ -21,19 +21,23 @@ RGL is React-only and does not require jQuery.
 
 ## Table of Contents
 
-- [Demos](#demos)
-- [Features](#features)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Responsive Usage](#responsive-usage)
-- [Providing Grid Width](#providing-grid-width)
-- [Grid Layout Props](#grid-layout-props)
-- [Responsive Grid Layout Props](#responsive-grid-layout-props)
-- [Grid Item Props](#grid-item-props)
-- [User Recipes](../../wiki/Users-recipes)
-- [Performance](#performance)
-- [Contribute](#contribute)
-- [TODO List](#todo-list)
+- [React-Grid-Layout](#react-grid-layout)
+ - [Table of Contents](#table-of-contents)
+ - [Demos](#demos)
+ - [Projects Using React-Grid-Layout](#projects-using-react-grid-layout)
+ - [Features](#features)
+ - [Installation](#installation)
+ - [Usage](#usage)
+ - [Usage without Browserify/Webpack](#usage-without-browserifywebpack)
+ - [Responsive Usage](#responsive-usage)
+ - [Providing Grid Width](#providing-grid-width)
+ - [Grid Layout Props](#grid-layout-props)
+ - [Responsive Grid Layout Props](#responsive-grid-layout-props)
+ - [Grid Item Props](#grid-item-props)
+ - [Performance](#performance)
+ - [Custom Child Components and Draggable Handles](#custom-child-components-and-draggable-handles)
+ - [Contribute](#contribute)
+ - [TODO List](#todo-list)
 
 ## Demos
 
@@ -330,6 +334,7 @@ droppingItem?: { i: string, w: number, h: number }
 isDraggable: ?boolean = true,
 isResizable: ?boolean = true,
 isBounded: ?boolean = false,
+lockAspectRatio: ?boolean = false,
 // Uses CSS3 translate() instead of position top/left.
 // This makes about 6x faster paint performance
 useCSSTransforms: ?boolean = true,
@@ -503,6 +508,8 @@ will be draggable, even if the item is marked `static: true`.
  isDraggable: ?boolean = true,
  // If false, will not be resizable. Overrides `static`.
  isResizable: ?boolean = true,
+ // If false, will not lockAspectRatio. Overrides `static`.
+ lockAspectRatio: ?boolean = false,
  // By default, a handle is only shown on the bottom-right (southeast) corner.
  // Note that resizing from the top or left is generally not intuitive.
  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']

lib/GridItem.jsx

@@ -59,6 +59,7 @@ type Props = {
  isDraggable: boolean,
  isResizable: boolean,
  isBounded: boolean,
+ lockAspectRatio?: boolean,
  static?: boolean,
  useCSSTransforms?: boolean,
  usePercentages?: boolean,
@@ -174,6 +175,7 @@ export default class GridItem extends React.Component<Props, State> {
  isDraggable: PropTypes.bool.isRequired,
  isResizable: PropTypes.bool.isRequired,
  isBounded: PropTypes.bool.isRequired,
+ lockAspectRatio: PropTypes.bool,
  static: PropTypes.bool,
 
  // Use CSS transforms instead of top/left
@@ -198,6 +200,7 @@ export default class GridItem extends React.Component<Props, State> {
  className: "",
  cancel: "",
  handle: "",
+ lockAspectRatio: false,
  minH: 1,
  minW: 1,
  maxH: Infinity,
@@ -370,6 +373,7 @@ export default class GridItem extends React.Component<Props, State> {
  const {
  cols,
  x,
+ lockAspectRatio,
  minW,
  minH,
  maxW,
@@ -406,6 +410,7 @@ export default class GridItem extends React.Component<Props, State> {
  className={isResizable ? undefined : "react-resizable-hide"}
  width={position.width}
  height={position.height}
+ lockAspectRatio={lockAspectRatio}
  minConstraints={minConstraints}
  maxConstraints={maxConstraints}
  onResizeStop={this.onResizeStop}

lib/ReactGridLayout.jsx

@@ -94,6 +94,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
  isBounded: false,
  isDraggable: true,
  isResizable: true,
+ lockAspectRatio: false,
  allowOverlap: false,
  isDroppable: false,
  useCSSTransforms: true,
@@ -551,6 +552,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
  isDraggable,
  isResizable,
  isBounded,
+ lockAspectRatio,
  useCSSTransforms,
  transformScale,
  draggableCancel,
@@ -571,6 +573,10 @@ export default class ReactGridLayout extends React.Component<Props, State> {
  typeof l.isResizable === "boolean"
  ? l.isResizable
  : !l.static && isResizable;
+ const itemLockAspectRatio = 
+ typeof l.lockAspectRatio === "boolean"
+ ? l.lockAspectRatio
+ : !l.static && lockAspectRatio;
  const resizeHandlesOptions = l.resizeHandles || resizeHandles;
 
  // isBounded set on child if set on parent, and child is not explicitly false
@@ -595,6 +601,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
  isDraggable={draggable}
  isResizable={resizable}
  isBounded={bounded}
+ lockAspectRatio={itemLockAspectRatio}
  useCSSTransforms={useCSSTransforms && mounted}
  usePercentages={!mounted}
  transformScale={transformScale}