react-grid-layout 1.5.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/README.md +1075 -432
  2. package/css/styles.css +6 -4
  3. package/dist/ResponsiveGridLayout-CH4s0tKj.d.ts +124 -0
  4. package/dist/ResponsiveGridLayout-D6lFRE3f.d.mts +124 -0
  5. package/dist/calculate-CwYDW8na.d.mts +168 -0
  6. package/dist/calculate-mgLpNJ5O.d.ts +168 -0
  7. package/dist/chunk-2KUHNJXF.mjs +90 -0
  8. package/dist/chunk-2KUHNJXF.mjs.map +1 -0
  9. package/dist/chunk-3WO4SAYB.js +868 -0
  10. package/dist/chunk-3WO4SAYB.js.map +1 -0
  11. package/dist/chunk-4HNUMWQK.mjs +822 -0
  12. package/dist/chunk-4HNUMWQK.mjs.map +1 -0
  13. package/dist/chunk-BFTKGAP3.js +1309 -0
  14. package/dist/chunk-BFTKGAP3.js.map +1 -0
  15. package/dist/chunk-F6NQPYKT.js +98 -0
  16. package/dist/chunk-F6NQPYKT.js.map +1 -0
  17. package/dist/chunk-H5KMDLY3.js +434 -0
  18. package/dist/chunk-H5KMDLY3.js.map +1 -0
  19. package/dist/chunk-PBQSHIID.js +4 -0
  20. package/dist/chunk-PBQSHIID.js.map +1 -0
  21. package/dist/chunk-R35HZZTA.mjs +1300 -0
  22. package/dist/chunk-R35HZZTA.mjs.map +1 -0
  23. package/dist/chunk-ZCXE6SR5.mjs +428 -0
  24. package/dist/chunk-ZCXE6SR5.mjs.map +1 -0
  25. package/dist/chunk-ZWN22PS2.mjs +3 -0
  26. package/dist/chunk-ZWN22PS2.mjs.map +1 -0
  27. package/dist/core.d.mts +33 -0
  28. package/dist/core.d.ts +33 -0
  29. package/dist/core.js +218 -0
  30. package/dist/core.js.map +1 -0
  31. package/dist/core.mjs +5 -0
  32. package/dist/core.mjs.map +1 -0
  33. package/dist/extras.d.mts +78 -0
  34. package/dist/extras.d.ts +78 -0
  35. package/dist/extras.js +91 -0
  36. package/dist/extras.js.map +1 -0
  37. package/dist/extras.mjs +89 -0
  38. package/dist/extras.mjs.map +1 -0
  39. package/dist/index.d.mts +7 -0
  40. package/dist/index.d.ts +7 -0
  41. package/dist/index.js +154 -0
  42. package/dist/index.js.map +1 -0
  43. package/dist/index.mjs +7 -0
  44. package/dist/index.mjs.map +1 -0
  45. package/dist/legacy.d.mts +163 -0
  46. package/dist/legacy.d.ts +163 -0
  47. package/dist/legacy.js +319 -0
  48. package/dist/legacy.js.map +1 -0
  49. package/dist/legacy.mjs +307 -0
  50. package/dist/legacy.mjs.map +1 -0
  51. package/dist/position-BmN1z36J.d.mts +319 -0
  52. package/dist/position-Dk2b4ZMS.d.ts +319 -0
  53. package/dist/react.d.mts +351 -0
  54. package/dist/react.d.ts +351 -0
  55. package/dist/react.js +96 -0
  56. package/dist/react.js.map +1 -0
  57. package/dist/react.mjs +7 -0
  58. package/dist/react.mjs.map +1 -0
  59. package/dist/responsive-C4L1ESlm.d.ts +145 -0
  60. package/dist/responsive-CJxefsYw.d.mts +145 -0
  61. package/dist/types-Cxf4nHNr.d.mts +375 -0
  62. package/dist/types-Cxf4nHNr.d.ts +375 -0
  63. package/index-dev.js +8 -0
  64. package/package.json +132 -39
  65. package/.babelrc.js +0 -22
  66. package/.browserslistrc +0 -3
  67. package/.eslintignore +0 -4
  68. package/.flowconfig +0 -20
  69. package/.prettierignore +0 -4
  70. package/.prettierrc +0 -17
  71. package/CHANGELOG.md +0 -985
  72. package/build/GridItem.js +0 -640
  73. package/build/ReactGridLayout.js +0 -744
  74. package/build/ReactGridLayoutPropTypes.js +0 -210
  75. package/build/ResponsiveReactGridLayout.js +0 -294
  76. package/build/calculateUtils.js +0 -165
  77. package/build/components/WidthProvider.js +0 -111
  78. package/build/fastRGLPropsEqual.js +0 -5
  79. package/build/responsiveUtils.js +0 -101
  80. package/build/utils.js +0 -834
  81. package/dist/react-grid-layout.min.js +0 -2
  82. package/dist/react-grid-layout.min.js.map +0 -1
  83. package/index.js.flow +0 -8
  84. package/ip_fetcher +0 -0
  85. package/ip_fetcher.c +0 -47
  86. package/lib/GridItem.jsx +0 -689
  87. package/lib/ReactGridLayout.jsx +0 -855
  88. package/lib/ReactGridLayoutPropTypes.js +0 -241
  89. package/lib/ResponsiveReactGridLayout.jsx +0 -349
  90. package/lib/calculateUtils.js +0 -169
  91. package/lib/components/WidthProvider.jsx +0 -110
  92. package/lib/fastRGLPropsEqual.js +0 -46
  93. package/lib/responsiveUtils.js +0 -118
  94. package/lib/utils.js +0 -979
@@ -1,744 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
8
- var _fastEquals = require("fast-equals");
9
- var _clsx = _interopRequireDefault(require("clsx"));
10
- var _utils = require("./utils");
11
- var _calculateUtils = require("./calculateUtils");
12
- var _GridItem = _interopRequireDefault(require("./GridItem"));
13
- var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayoutPropTypes"));
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
- 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); }
16
- 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; }
17
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
18
- 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); }
19
- /*:: import type {
20
- ChildrenArray as ReactChildrenArray,
21
- Element as ReactElement
22
- } from "react";*/
23
- /*:: import type {
24
- CompactType,
25
- GridResizeEvent,
26
- GridDragEvent,
27
- DragOverEvent,
28
- Layout,
29
- DroppingPosition,
30
- LayoutItem
31
- } from "./utils";*/
32
- // Types
33
- /*:: import type { PositionParams } from "./calculateUtils";*/
34
- /*:: type State = {
35
- activeDrag: ?LayoutItem,
36
- layout: Layout,
37
- mounted: boolean,
38
- oldDragItem: ?LayoutItem,
39
- oldLayout: ?Layout,
40
- oldResizeItem: ?LayoutItem,
41
- resizing: boolean,
42
- droppingDOMNode: ?ReactElement<any>,
43
- droppingPosition?: DroppingPosition,
44
- // Mirrored props
45
- children: ReactChildrenArray<ReactElement<any>>,
46
- compactType?: CompactType,
47
- propsLayout?: Layout
48
- };*/
49
- /*:: import type { Props, DefaultProps } from "./ReactGridLayoutPropTypes";*/
50
- // End Types
51
- const layoutClassName = "react-grid-layout";
52
- let isFirefox = false;
53
- // Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
54
- try {
55
- isFirefox = /firefox/i.test(navigator.userAgent);
56
- } catch (e) {
57
- /* Ignore */
58
- }
59
-
60
- /**
61
- * A reactive, fluid grid layout with draggable, resizable components.
62
- */
63
-
64
- class ReactGridLayout extends React.Component /*:: <Props, State>*/{
65
- constructor() {
66
- super(...arguments);
67
- _defineProperty(this, "state", {
68
- activeDrag: null,
69
- layout: (0, _utils.synchronizeLayoutWithChildren)(this.props.layout, this.props.children, this.props.cols,
70
- // Legacy support for verticalCompact: false
71
- (0, _utils.compactType)(this.props), this.props.allowOverlap),
72
- mounted: false,
73
- oldDragItem: null,
74
- oldLayout: null,
75
- oldResizeItem: null,
76
- resizing: false,
77
- droppingDOMNode: null,
78
- children: []
79
- });
80
- _defineProperty(this, "dragEnterCounter", 0);
81
- /**
82
- * When dragging starts
83
- * @param {String} i Id of the child
84
- * @param {Number} x X position of the move
85
- * @param {Number} y Y position of the move
86
- * @param {Event} e The mousedown event
87
- * @param {Element} node The current dragging DOM element
88
- */
89
- _defineProperty(this, "onDragStart", (i /*: string*/, x /*: number*/, y /*: number*/, _ref /*:: */) => {
90
- let {
91
- e,
92
- node
93
- } /*: GridDragEvent*/ = _ref /*: GridDragEvent*/;
94
- const {
95
- layout
96
- } = this.state;
97
- const l = (0, _utils.getLayoutItem)(layout, i);
98
- if (!l) return;
99
-
100
- // Create placeholder (display only)
101
- const placeholder = {
102
- w: l.w,
103
- h: l.h,
104
- x: l.x,
105
- y: l.y,
106
- placeholder: true,
107
- i: i
108
- };
109
- this.setState({
110
- oldDragItem: (0, _utils.cloneLayoutItem)(l),
111
- oldLayout: layout,
112
- activeDrag: placeholder
113
- });
114
- return this.props.onDragStart(layout, l, l, null, e, node);
115
- });
116
- /**
117
- * Each drag movement create a new dragelement and move the element to the dragged location
118
- * @param {String} i Id of the child
119
- * @param {Number} x X position of the move
120
- * @param {Number} y Y position of the move
121
- * @param {Event} e The mousedown event
122
- * @param {Element} node The current dragging DOM element
123
- */
124
- _defineProperty(this, "onDrag", (i, x, y, _ref2) => {
125
- let {
126
- e,
127
- node
128
- } = _ref2;
129
- const {
130
- oldDragItem
131
- } = this.state;
132
- let {
133
- layout
134
- } = this.state;
135
- const {
136
- cols,
137
- allowOverlap,
138
- preventCollision
139
- } = this.props;
140
- const l = (0, _utils.getLayoutItem)(layout, i);
141
- if (!l) return;
142
-
143
- // Create placeholder (display only)
144
- const placeholder = {
145
- w: l.w,
146
- h: l.h,
147
- x: l.x,
148
- y: l.y,
149
- placeholder: true,
150
- i: i
151
- };
152
-
153
- // Move the element to the dragged location.
154
- const isUserAction = true;
155
- layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
156
- this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
157
- this.setState({
158
- layout: allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
159
- activeDrag: placeholder
160
- });
161
- });
162
- /**
163
- * When dragging stops, figure out which position the element is closest to and update its x and y.
164
- * @param {String} i Index of the child.
165
- * @param {Number} x X position of the move
166
- * @param {Number} y Y position of the move
167
- * @param {Event} e The mousedown event
168
- * @param {Element} node The current dragging DOM element
169
- */
170
- _defineProperty(this, "onDragStop", (i, x, y, _ref3) => {
171
- let {
172
- e,
173
- node
174
- } = _ref3;
175
- if (!this.state.activeDrag) return;
176
- const {
177
- oldDragItem
178
- } = this.state;
179
- let {
180
- layout
181
- } = this.state;
182
- const {
183
- cols,
184
- preventCollision,
185
- allowOverlap
186
- } = this.props;
187
- const l = (0, _utils.getLayoutItem)(layout, i);
188
- if (!l) return;
189
-
190
- // Move the element here
191
- const isUserAction = true;
192
- layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
193
-
194
- // Set state
195
- const newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
196
- this.props.onDragStop(newLayout, oldDragItem, l, null, e, node);
197
- const {
198
- oldLayout
199
- } = this.state;
200
- this.setState({
201
- activeDrag: null,
202
- layout: newLayout,
203
- oldDragItem: null,
204
- oldLayout: null
205
- });
206
- this.onLayoutMaybeChanged(newLayout, oldLayout);
207
- });
208
- _defineProperty(this, "onResizeStart", (i, w, h, _ref4) => {
209
- let {
210
- e,
211
- node
212
- } = _ref4;
213
- const {
214
- layout
215
- } = this.state;
216
- const l = (0, _utils.getLayoutItem)(layout, i);
217
- if (!l) return;
218
- this.setState({
219
- oldResizeItem: (0, _utils.cloneLayoutItem)(l),
220
- oldLayout: this.state.layout,
221
- resizing: true
222
- });
223
- this.props.onResizeStart(layout, l, l, null, e, node);
224
- });
225
- _defineProperty(this, "onResize", (i, w, h, _ref5) => {
226
- let {
227
- e,
228
- node,
229
- size,
230
- handle
231
- } = _ref5;
232
- const {
233
- oldResizeItem
234
- } = this.state;
235
- const {
236
- layout
237
- } = this.state;
238
- const {
239
- cols,
240
- preventCollision,
241
- allowOverlap
242
- } = this.props;
243
- let shouldMoveItem = false;
244
- let finalLayout;
245
- let x;
246
- let y;
247
- const [newLayout, l] = (0, _utils.withLayoutItem)(layout, i, l => {
248
- let hasCollisions;
249
- x = l.x;
250
- y = l.y;
251
- if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
252
- if (["sw", "nw", "w"].indexOf(handle) !== -1) {
253
- x = l.x + (l.w - w);
254
- w = l.x !== x && x < 0 ? l.w : w;
255
- x = x < 0 ? 0 : x;
256
- }
257
- if (["ne", "n", "nw"].indexOf(handle) !== -1) {
258
- y = l.y + (l.h - h);
259
- h = l.y !== y && y < 0 ? l.h : h;
260
- y = y < 0 ? 0 : y;
261
- }
262
- shouldMoveItem = true;
263
- }
264
-
265
- // Something like quad tree should be used
266
- // to find collisions faster
267
- if (preventCollision && !allowOverlap) {
268
- const collisions = (0, _utils.getAllCollisions)(layout, {
269
- ...l,
270
- w,
271
- h,
272
- x,
273
- y
274
- }).filter(layoutItem => layoutItem.i !== l.i);
275
- hasCollisions = collisions.length > 0;
276
-
277
- // If we're colliding, we need adjust the placeholder.
278
- if (hasCollisions) {
279
- // Reset layoutItem dimensions if there were collisions
280
- y = l.y;
281
- h = l.h;
282
- x = l.x;
283
- w = l.w;
284
- shouldMoveItem = false;
285
- }
286
- }
287
- l.w = w;
288
- l.h = h;
289
- return l;
290
- });
291
-
292
- // Shouldn't ever happen, but typechecking makes it necessary
293
- if (!l) return;
294
- finalLayout = newLayout;
295
- if (shouldMoveItem) {
296
- // Move the element to the new position.
297
- const isUserAction = true;
298
- finalLayout = (0, _utils.moveElement)(newLayout, l, x, y, isUserAction, this.props.preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
299
- }
300
-
301
- // Create placeholder element (display only)
302
- const placeholder = {
303
- w: l.w,
304
- h: l.h,
305
- x: l.x,
306
- y: l.y,
307
- static: true,
308
- i: i
309
- };
310
- this.props.onResize(finalLayout, oldResizeItem, l, placeholder, e, node);
311
-
312
- // Re-compact the newLayout and set the drag placeholder.
313
- this.setState({
314
- layout: allowOverlap ? finalLayout : (0, _utils.compact)(finalLayout, (0, _utils.compactType)(this.props), cols),
315
- activeDrag: placeholder
316
- });
317
- });
318
- _defineProperty(this, "onResizeStop", (i, w, h, _ref6) => {
319
- let {
320
- e,
321
- node
322
- } = _ref6;
323
- const {
324
- layout,
325
- oldResizeItem
326
- } = this.state;
327
- const {
328
- cols,
329
- allowOverlap
330
- } = this.props;
331
- const l = (0, _utils.getLayoutItem)(layout, i);
332
-
333
- // Set state
334
- const newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
335
- this.props.onResizeStop(newLayout, oldResizeItem, l, null, e, node);
336
- const {
337
- oldLayout
338
- } = this.state;
339
- this.setState({
340
- activeDrag: null,
341
- layout: newLayout,
342
- oldResizeItem: null,
343
- oldLayout: null,
344
- resizing: false
345
- });
346
- this.onLayoutMaybeChanged(newLayout, oldLayout);
347
- });
348
- // Called while dragging an element. Part of browser native drag/drop API.
349
- // Native event target might be the layout itself, or an element within the layout.
350
- _defineProperty(this, "onDragOver", e => {
351
- e.preventDefault(); // Prevent any browser native action
352
- e.stopPropagation();
353
-
354
- // we should ignore events from layout's children in Firefox
355
- // to avoid unpredictable jumping of a dropping placeholder
356
- // FIXME remove this hack
357
- if (isFirefox &&
358
- // $FlowIgnore can't figure this out
359
- !e.nativeEvent.target?.classList.contains(layoutClassName)) {
360
- return false;
361
- }
362
- const {
363
- droppingItem,
364
- onDropDragOver,
365
- margin,
366
- cols,
367
- rowHeight,
368
- maxRows,
369
- width,
370
- containerPadding,
371
- transformScale
372
- } = this.props;
373
- // Allow user to customize the dropping item or short-circuit the drop based on the results
374
- // of the `onDragOver(e: Event)` callback.
375
- const onDragOverResult = onDropDragOver?.(e);
376
- if (onDragOverResult === false) {
377
- if (this.state.droppingDOMNode) {
378
- this.removeDroppingPlaceholder();
379
- }
380
- return false;
381
- }
382
- const finalDroppingItem = {
383
- ...droppingItem,
384
- ...onDragOverResult
385
- };
386
- const {
387
- layout
388
- } = this.state;
389
-
390
- // $FlowIgnore missing def
391
- const gridRect = e.currentTarget.getBoundingClientRect(); // The grid's position in the viewport
392
-
393
- // Calculate the mouse position relative to the grid
394
- const layerX = e.clientX - gridRect.left;
395
- const layerY = e.clientY - gridRect.top;
396
- const droppingPosition = {
397
- left: layerX / transformScale,
398
- top: layerY / transformScale,
399
- e
400
- };
401
- if (!this.state.droppingDOMNode) {
402
- const positionParams /*: PositionParams*/ = {
403
- cols,
404
- margin,
405
- maxRows,
406
- rowHeight,
407
- containerWidth: width,
408
- containerPadding: containerPadding || margin
409
- };
410
- const calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
411
- this.setState({
412
- droppingDOMNode: /*#__PURE__*/React.createElement("div", {
413
- key: finalDroppingItem.i
414
- }),
415
- droppingPosition,
416
- layout: [...layout, {
417
- ...finalDroppingItem,
418
- x: calculatedPosition.x,
419
- y: calculatedPosition.y,
420
- static: false,
421
- isDraggable: true
422
- }]
423
- });
424
- } else if (this.state.droppingPosition) {
425
- const {
426
- left,
427
- top
428
- } = this.state.droppingPosition;
429
- const shouldUpdatePosition = left != layerX || top != layerY;
430
- if (shouldUpdatePosition) {
431
- this.setState({
432
- droppingPosition
433
- });
434
- }
435
- }
436
- });
437
- _defineProperty(this, "removeDroppingPlaceholder", () => {
438
- const {
439
- droppingItem,
440
- cols
441
- } = this.props;
442
- const {
443
- layout
444
- } = this.state;
445
- const newLayout = (0, _utils.compact)(layout.filter(l => l.i !== droppingItem.i), (0, _utils.compactType)(this.props), cols, this.props.allowOverlap);
446
- this.setState({
447
- layout: newLayout,
448
- droppingDOMNode: null,
449
- activeDrag: null,
450
- droppingPosition: undefined
451
- });
452
- });
453
- _defineProperty(this, "onDragLeave", e => {
454
- e.preventDefault(); // Prevent any browser native action
455
- e.stopPropagation();
456
- this.dragEnterCounter--;
457
-
458
- // onDragLeave can be triggered on each layout's child.
459
- // But we know that count of dragEnter and dragLeave events
460
- // will be balanced after leaving the layout's container
461
- // so we can increase and decrease count of dragEnter and
462
- // when it'll be equal to 0 we'll remove the placeholder
463
- if (this.dragEnterCounter === 0) {
464
- this.removeDroppingPlaceholder();
465
- }
466
- });
467
- _defineProperty(this, "onDragEnter", e => {
468
- e.preventDefault(); // Prevent any browser native action
469
- e.stopPropagation();
470
- this.dragEnterCounter++;
471
- });
472
- _defineProperty(this, "onDrop", (e /*: Event*/) => {
473
- e.preventDefault(); // Prevent any browser native action
474
- e.stopPropagation();
475
- const {
476
- droppingItem
477
- } = this.props;
478
- const {
479
- layout
480
- } = this.state;
481
- const item = layout.find(l => l.i === droppingItem.i);
482
-
483
- // reset dragEnter counter on drop
484
- this.dragEnterCounter = 0;
485
- this.removeDroppingPlaceholder();
486
- this.props.onDrop(layout, item, e);
487
- });
488
- }
489
- componentDidMount() {
490
- this.setState({
491
- mounted: true
492
- });
493
- // Possibly call back with layout on mount. This should be done after correcting the layout width
494
- // to ensure we don't rerender with the wrong width.
495
- this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
496
- }
497
- static getDerivedStateFromProps(nextProps /*: Props*/, prevState /*: State*/) /*: $Shape<State> | null*/{
498
- let newLayoutBase;
499
- if (prevState.activeDrag) {
500
- return null;
501
- }
502
-
503
- // Legacy support for compactType
504
- // Allow parent to set layout directly.
505
- if (!(0, _fastEquals.deepEqual)(nextProps.layout, prevState.propsLayout) || nextProps.compactType !== prevState.compactType) {
506
- newLayoutBase = nextProps.layout;
507
- } else if (!(0, _utils.childrenEqual)(nextProps.children, prevState.children)) {
508
- // If children change, also regenerate the layout. Use our state
509
- // as the base in case because it may be more up to date than
510
- // what is in props.
511
- newLayoutBase = prevState.layout;
512
- }
513
-
514
- // We need to regenerate the layout.
515
- if (newLayoutBase) {
516
- const newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, (0, _utils.compactType)(nextProps), nextProps.allowOverlap);
517
- return {
518
- layout: newLayout,
519
- // We need to save these props to state for using
520
- // getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)
521
- compactType: nextProps.compactType,
522
- children: nextProps.children,
523
- propsLayout: nextProps.layout
524
- };
525
- }
526
- return null;
527
- }
528
- shouldComponentUpdate(nextProps /*: Props*/, nextState /*: State*/) /*: boolean*/{
529
- return (
530
- // NOTE: this is almost always unequal. Therefore the only way to get better performance
531
- // from SCU is if the user intentionally memoizes children. If they do, and they can
532
- // handle changes properly, performance will increase.
533
- this.props.children !== nextProps.children || !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _fastEquals.deepEqual) || this.state.activeDrag !== nextState.activeDrag || this.state.mounted !== nextState.mounted || this.state.droppingPosition !== nextState.droppingPosition
534
- );
535
- }
536
- componentDidUpdate(prevProps /*: Props*/, prevState /*: State*/) {
537
- if (!this.state.activeDrag) {
538
- const newLayout = this.state.layout;
539
- const oldLayout = prevState.layout;
540
- this.onLayoutMaybeChanged(newLayout, oldLayout);
541
- }
542
- }
543
-
544
- /**
545
- * Calculates a pixel value for the container.
546
- * @return {String} Container height in pixels.
547
- */
548
- containerHeight() /*: ?string*/{
549
- if (!this.props.autoSize) return;
550
- const nbRow = (0, _utils.bottom)(this.state.layout);
551
- const containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
552
- return nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2 + "px";
553
- }
554
- onLayoutMaybeChanged(newLayout /*: Layout*/, oldLayout /*: ?Layout*/) {
555
- if (!oldLayout) oldLayout = this.state.layout;
556
- if (!(0, _fastEquals.deepEqual)(oldLayout, newLayout)) {
557
- this.props.onLayoutChange(newLayout);
558
- }
559
- }
560
- /**
561
- * Create a placeholder object.
562
- * @return {Element} Placeholder div.
563
- */
564
- placeholder() /*: ?ReactElement<any>*/{
565
- const {
566
- activeDrag
567
- } = this.state;
568
- if (!activeDrag) return null;
569
- const {
570
- width,
571
- cols,
572
- margin,
573
- containerPadding,
574
- rowHeight,
575
- maxRows,
576
- useCSSTransforms,
577
- transformScale
578
- } = this.props;
579
-
580
- // {...this.state.activeDrag} is pretty slow, actually
581
- return /*#__PURE__*/React.createElement(_GridItem.default, {
582
- w: activeDrag.w,
583
- h: activeDrag.h,
584
- x: activeDrag.x,
585
- y: activeDrag.y,
586
- i: activeDrag.i,
587
- className: `react-grid-placeholder ${this.state.resizing ? "placeholder-resizing" : ""}`,
588
- containerWidth: width,
589
- cols: cols,
590
- margin: margin,
591
- containerPadding: containerPadding || margin,
592
- maxRows: maxRows,
593
- rowHeight: rowHeight,
594
- isDraggable: false,
595
- isResizable: false,
596
- isBounded: false,
597
- useCSSTransforms: useCSSTransforms,
598
- transformScale: transformScale
599
- }, /*#__PURE__*/React.createElement("div", null));
600
- }
601
-
602
- /**
603
- * Given a grid item, set its style attributes & surround in a <Draggable>.
604
- * @param {Element} child React element.
605
- * @return {Element} Element wrapped in draggable and properly placed.
606
- */
607
- processGridItem(child /*: ReactElement<any>*/, isDroppingItem /*: boolean*/) /*: ?ReactElement<any>*/{
608
- if (!child || !child.key) return;
609
- const l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
610
- if (!l) return null;
611
- const {
612
- width,
613
- cols,
614
- margin,
615
- containerPadding,
616
- rowHeight,
617
- maxRows,
618
- isDraggable,
619
- isResizable,
620
- isBounded,
621
- useCSSTransforms,
622
- transformScale,
623
- draggableCancel,
624
- draggableHandle,
625
- resizeHandles,
626
- resizeHandle
627
- } = this.props;
628
- const {
629
- mounted,
630
- droppingPosition
631
- } = this.state;
632
-
633
- // Determine user manipulations possible.
634
- // If an item is static, it can't be manipulated by default.
635
- // Any properties defined directly on the grid item will take precedence.
636
- const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
637
- const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
638
- const resizeHandlesOptions = l.resizeHandles || resizeHandles;
639
-
640
- // isBounded set on child if set on parent, and child is not explicitly false
641
- const bounded = draggable && isBounded && l.isBounded !== false;
642
- return /*#__PURE__*/React.createElement(_GridItem.default, {
643
- containerWidth: width,
644
- cols: cols,
645
- margin: margin,
646
- containerPadding: containerPadding || margin,
647
- maxRows: maxRows,
648
- rowHeight: rowHeight,
649
- cancel: draggableCancel,
650
- handle: draggableHandle,
651
- onDragStop: this.onDragStop,
652
- onDragStart: this.onDragStart,
653
- onDrag: this.onDrag,
654
- onResizeStart: this.onResizeStart,
655
- onResize: this.onResize,
656
- onResizeStop: this.onResizeStop,
657
- isDraggable: draggable,
658
- isResizable: resizable,
659
- isBounded: bounded,
660
- useCSSTransforms: useCSSTransforms && mounted,
661
- usePercentages: !mounted,
662
- transformScale: transformScale,
663
- w: l.w,
664
- h: l.h,
665
- x: l.x,
666
- y: l.y,
667
- i: l.i,
668
- minH: l.minH,
669
- minW: l.minW,
670
- maxH: l.maxH,
671
- maxW: l.maxW,
672
- static: l.static,
673
- droppingPosition: isDroppingItem ? droppingPosition : undefined,
674
- resizeHandles: resizeHandlesOptions,
675
- resizeHandle: resizeHandle
676
- }, child);
677
- }
678
- render() /*: React.Element<"div">*/{
679
- const {
680
- className,
681
- style,
682
- isDroppable,
683
- innerRef
684
- } = this.props;
685
- const mergedClassName = (0, _clsx.default)(layoutClassName, className);
686
- const mergedStyle = {
687
- height: this.containerHeight(),
688
- ...style
689
- };
690
- return /*#__PURE__*/React.createElement("div", {
691
- ref: innerRef,
692
- className: mergedClassName,
693
- style: mergedStyle,
694
- onDrop: isDroppable ? this.onDrop : _utils.noop,
695
- onDragLeave: isDroppable ? this.onDragLeave : _utils.noop,
696
- onDragEnter: isDroppable ? this.onDragEnter : _utils.noop,
697
- onDragOver: isDroppable ? this.onDragOver : _utils.noop
698
- }, React.Children.map(this.props.children, child => this.processGridItem(child)), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
699
- }
700
- }
701
- exports.default = ReactGridLayout;
702
- // TODO publish internal ReactClass displayName transform
703
- _defineProperty(ReactGridLayout, "displayName", "ReactGridLayout");
704
- // Refactored to another module to make way for preval
705
- _defineProperty(ReactGridLayout, "propTypes", _ReactGridLayoutPropTypes.default);
706
- _defineProperty(ReactGridLayout, "defaultProps", {
707
- autoSize: true,
708
- cols: 12,
709
- className: "",
710
- style: {},
711
- draggableHandle: "",
712
- draggableCancel: "",
713
- containerPadding: null,
714
- rowHeight: 150,
715
- maxRows: Infinity,
716
- // infinite vertical growth
717
- layout: [],
718
- margin: [10, 10],
719
- isBounded: false,
720
- isDraggable: true,
721
- isResizable: true,
722
- allowOverlap: false,
723
- isDroppable: false,
724
- useCSSTransforms: true,
725
- transformScale: 1,
726
- verticalCompact: true,
727
- compactType: "vertical",
728
- preventCollision: false,
729
- droppingItem: {
730
- i: "__dropping-elem__",
731
- h: 1,
732
- w: 1
733
- },
734
- resizeHandles: ["se"],
735
- onLayoutChange: _utils.noop,
736
- onDragStart: _utils.noop,
737
- onDrag: _utils.noop,
738
- onDragStop: _utils.noop,
739
- onResizeStart: _utils.noop,
740
- onResize: _utils.noop,
741
- onResizeStop: _utils.noop,
742
- onDrop: _utils.noop,
743
- onDropDragOver: _utils.noop
744
- });