Skip to content

Commit

Permalink
feat: add lockAspectRatio props in GridItem Component
Browse files Browse the repository at this point in the history
  • Loading branch information
Kun8018 committed Sep 20, 2022
1 parent 2e1387b commit 1792d77
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 13 deletions.
33 changes: 20 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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']
Expand Down
5 changes: 5 additions & 0 deletions lib/GridItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ type Props = {
isDraggable: boolean,
isResizable: boolean,
isBounded: boolean,
lockAspectRatio?: boolean,
static?: boolean,
useCSSTransforms?: boolean,
usePercentages?: boolean,
Expand Down Expand Up @@ -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
Expand All @@ -198,6 +200,7 @@ export default class GridItem extends React.Component<Props, State> {
className: "",
cancel: "",
handle: "",
lockAspectRatio: false,
minH: 1,
minW: 1,
maxH: Infinity,
Expand Down Expand Up @@ -370,6 +373,7 @@ export default class GridItem extends React.Component<Props, State> {
const {
cols,
x,
lockAspectRatio,
minW,
minH,
maxW,
Expand Down Expand Up @@ -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}
Expand Down
7 changes: 7 additions & 0 deletions lib/ReactGridLayout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -551,6 +552,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
isDraggable,
isResizable,
isBounded,
lockAspectRatio,
useCSSTransforms,
transformScale,
draggableCancel,
Expand All @@ -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
Expand All @@ -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}
Expand Down

0 comments on commit 1792d77

Please sign in to comment.