react-grid-layout - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

build/fastRGLPropsEqual.js

 // this file was prevaled
 module.exports = function fastRGLPropsEqual(a, b, isEqualImpl) {
   if (a === b) return true;
-  return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef);
+  return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && isEqualImpl(a.resizeHandle, b.resizeHandle) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef);
 };

build/GridItem.js

@@ -22,2 +22,4 @@ "use strict";
 
+var _ReactGridLayoutPropTypes = require("./ReactGridLayoutPropTypes");
+
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -432,3 +434,4 @@
           transformScale = _this$props6.transformScale,
-          resizeHandles = _this$props6.resizeHandles;
+          resizeHandles = _this$props6.resizeHandles,
+          resizeHandle = _this$props6.resizeHandle;
       var positionParams = this.getPositionParams(); // This is the max possible width - doesn't go to infinity because of the width of the window
@@ -455,3 +458,4 @@
         transformScale: transformScale,
-        resizeHandles: resizeHandles
+        resizeHandles: resizeHandles,
+        handle: resizeHandle
       }, child);
@@ -615,2 +619,5 @@ }
   i: _propTypes.default.string.isRequired,
+  // Resize handle options
+  resizeHandles: _ReactGridLayoutPropTypes.resizeHandlesType,
+  resizeHandle: _ReactGridLayoutPropTypes.resizeHandleType,
   // Functions
@@ -617,0 +624,0 @@ onDragStop: _propTypes.default.func,

build/ReactGridLayout.js

@@ -119,2 +119,4 @@ "use strict";
       if (isFirefox && e.nativeEvent.target.className.indexOf(layoutClassName) === -1) {
+        // without this Firefox will not allow drop if currently over droppingItem
+        e.preventDefault();
         return false;
@@ -224,3 +226,3 @@ }
         return l.i === droppingItem.i;
-      }); // reset gragEnter counter on drop
+      }); // reset dragEnter counter on drop
 
@@ -606,3 +608,4 @@ _this.dragEnterCounter = 0;
           draggableHandle = _this$props6.draggableHandle,
-          resizeHandles = _this$props6.resizeHandles;
+          resizeHandles = _this$props6.resizeHandles,
+          resizeHandle = _this$props6.resizeHandle;
       var _this$state3 = this.state,
@@ -651,3 +654,4 @@ mounted = _this$state3.mounted,
         droppingPosition: isDroppingItem ? droppingPosition : undefined,
-        resizeHandles: resizeHandlesOptions
+        resizeHandles: resizeHandlesOptions,
+        resizeHandle: resizeHandle
       }, child);
@@ -654,0 +658,0 @@ } // Called while dragging an element. Part of browser native drag/drop API.

build/ReactGridLayoutPropTypes.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = exports.resizeHandleType = exports.resizeHandlesType = void 0;
 
@@ -15,2 +15,59 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
+// 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)
+var resizeHandlesType = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])); // Custom component for resize handles
+
+
+exports.resizeHandlesType = resizeHandlesType;
+
+var 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: ResizeHandles,
+  resizeHandle?: ResizeHandle,
+
+  // Callbacks
+  onLayoutChange: Layout => void,
+  onDrag: EventCallback,
+  onDragStart: EventCallback,
+  onDragStop: EventCallback,
+  onResize: EventCallback,
+  onResizeStart: EventCallback,
+  onResizeStop: EventCallback,
+  onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
+  children: ReactChildrenArray<ReactElement<any>>,
+  innerRef?: Ref<"div">
+|};*/
+
+
+exports.resizeHandleType = resizeHandleType;
 var _default = {
@@ -85,13 +142,5 @@ //
   isDroppable: _propTypes.default.bool,
-  // 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)
-  resizeHandles: _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])),
+  // Resize handle options
+  resizeHandles: resizeHandlesType,
+  resizeHandle: resizeHandleType,
   //
@@ -98,0 +147,0 @@ // Callbacks

CHANGELOG.md

 # Changelog
 
+1.2.0 (Nov 17, 2020)
+---
+
+### New Features
+  - You can now customize your resizable handle component as supported by [`react-resizable`](https://github.com/STRML/react-resizable/blob/09fd865c0e1cc570caa8d67e44a2e56172d3d816/examples/ExampleLayout.js#L72). For example:
+  ```js
+    <ReactGridLayout resizeHandle={<span className="custom-handle custom-handle-se" />} {...props} />
+  ````
+  Thanks @typeetfunc [#1303](https://github.com/STRML/react-grid-layout/pull/1303)
+
+### Bugfixes
+  - Fix `onDrop` handler not firing on Firefox if you drop over the placeholder.
+    - Thanks @Charles-Lamoureux [#1333](https://github.com/STRML/react-grid-layout/pull/1333)
+  - Various example style fixes [#1283](https://github.com/STRML/react-grid-layout/pull/1283) [#1299](https://github.com/STRML/react-grid-layout/pull/1299)
+
 1.1.1 (Sep 10, 2020)
@@ -34,6 +49,6 @@ ---
 ### Breaking Changes
-   - `onDrop` callback now has a form more consistent with other callbacks.
-     - Previous type: `(elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void`
-     - New type: `(layout: Layout, item: ?LayoutItem, e: Event) => void`
-     - Thanks @ceberhar [#1169](https://github.com/STRML/react-grid-layout/pull/1169)
+  - `onDrop` callback now has a form more consistent with other callbacks.
+    - Previous type: `(elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void`
+    - New type: `(layout: Layout, item: ?LayoutItem, e: Event) => void`
+    - Thanks @ceberhar [#1169](https://github.com/STRML/react-grid-layout/pull/1169)
   - Dropping Node 8 compatibility and testing due to devDep incompatibilities
@@ -40,0 +55,0 @@

lib/GridItem.jsx

@@ -16,2 +16,6 @@ // @flow
 } from "./calculateUtils";
+import {
+  resizeHandlesType,
+  resizeHandleType
+} from "./ReactGridLayoutPropTypes";
 import classNames from "classnames";
@@ -29,2 +33,3 @@ import type { Element as ReactElement, Node as ReactNode } from "react";
 import type { PositionParams } from "./calculateUtils";
+import type { ResizeHandles, ResizeHandle } from "./ReactGridLayoutPropTypes";
 
@@ -79,3 +84,4 @@ type PartialPosition = { top: number, left: number };
 
-  resizeHandles?: Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'>,
+  resizeHandles?: ResizeHandles,
+  resizeHandle?: ResizeHandle,
 
@@ -144,2 +150,6 @@ onDrag?: GridItemCallback<GridDragEvent>,
 
+    // Resize handle options
+    resizeHandles: resizeHandlesType,
+    resizeHandle: resizeHandleType,
+
     // Functions
@@ -359,3 +369,4 @@ onDragStop: PropTypes.func,
       transformScale,
-      resizeHandles
+      resizeHandles,
+      resizeHandle
     } = this.props;
@@ -391,2 +402,3 @@ const positionParams = this.getPositionParams();
         resizeHandles={resizeHandles}
+        handle={resizeHandle}
       >
@@ -393,0 +405,0 @@ {child}

lib/ReactGridLayout.jsx

@@ -518,3 +518,4 @@ // @flow
       draggableHandle,
-      resizeHandles
+      resizeHandles,
+      resizeHandle
     } = this.props;
@@ -573,2 +574,3 @@ const { mounted, droppingPosition } = this.state;
         resizeHandles={resizeHandlesOptions}
+        resizeHandle={resizeHandle}
       >
@@ -590,2 +592,4 @@ {child}
     ) {
+      // without this Firefox will not allow drop if currently over droppingItem
+      e.preventDefault();
       return false;
@@ -692,3 +696,3 @@ }
 
-    // reset gragEnter counter on drop
+    // reset dragEnter counter on drop
     this.dragEnterCounter = 0;
@@ -695,0 +699,0 @@

lib/ReactGridLayoutPropTypes.js

@@ -11,2 +11,27 @@ // @flow
 
+type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
+export type ResizeHandles = Array<ResizeHandleAxis>;
+export type ResizeHandle =
+  | ReactElement<any>
+  | ((resizeHandleAxis: ResizeHandleAxis) => 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)
+export const resizeHandlesType = PropTypes.arrayOf(
+  PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
+);
+// Custom component for resize handles
+export const resizeHandleType = PropTypes.oneOfType([
+  PropTypes.node,
+  PropTypes.func
+]);
+
 export type Props = {|
@@ -35,3 +60,4 @@ className: string,
   droppingItem: $Shape<LayoutItem>,
-  resizeHandles: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
+  resizeHandles: ResizeHandles,
+  resizeHandle?: ResizeHandle,
 
@@ -129,16 +155,7 @@ // Callbacks
   isDroppable: PropTypes.bool,
-  // 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)
-  resizeHandles: PropTypes.arrayOf(
-    PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
-  ),
 
+  // Resize handle options
+  resizeHandles: resizeHandlesType,
+  resizeHandle: resizeHandleType,
+
   //
@@ -145,0 +162,0 @@ // Callbacks

package.json

 {
   "name": "react-grid-layout",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -344,2 +344,4 @@ # React-Grid-Layout
 resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
+// Custom component for resize handles
+resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>)
 
@@ -346,0 +348,0 @@ //

No alert changes

Improved metrics

Total package byte prevSize

706886

0.94%

Lines of code

6086

2.25%

Number of lines in readme file

531

0.38%

No dependency changes