修正布局不统一的bug

dist/src/lib/dragact.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     }
     return t;
 };
-import * as React from "react";
+import * as React from 'react';
 import GridItem from './GridItem';
 import { compactLayout } from './util/compact';
 import { getMaxContainerHeight } from './util/sort';
@@ -44,7 +44,8 @@ var Dragact = /** @class */ (function (_super) {
                     dragType: 'resize'
                 });
             }
-            _this.props.onDragStart && _this.props.onDragStart(layoutItem, _this.state.layout);
+            _this.props.onDragStart &&
+                _this.props.onDragStart(layoutItem, _this.state.layout);
         };
         _this.onResizing = function (layoutItem) {
             var newLayout = layoutCheck(_this.state.layout, layoutItem, layoutItem.UniqueKey + '', layoutItem.UniqueKey + '', 0);
@@ -108,7 +109,8 @@ var Dragact = /** @class */ (function (_super) {
                 dragType: 'drag'
             });
         }
-        this.props.onDragStart && this.props.onDragStart(bundles, this.state.layout);
+        this.props.onDragStart &&
+            this.props.onDragStart(bundles, this.state.layout);
     };
     Dragact.prototype.onDrag = function (layoutItem) {
         var GridY = layoutItem.GridY, UniqueKey = layoutItem.UniqueKey;
@@ -143,33 +145,38 @@ var Dragact = /** @class */ (function (_super) {
             return null;
         if (!padding)
             padding = 0;
-        return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: GridXMoving, GridY: GridYMoving, w: wMoving, h: hMoving, style: { background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s ease-out' }, isUserMove: !placeholderMoving, dragType: dragType, canDrag: false, canResize: false }, function (p, resizerProps) { return React.createElement("div", __assign({}, p)); }));
+        return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: GridXMoving, GridY: GridYMoving, w: wMoving, h: hMoving, style: {
+                background: 'rgba(15,15,15,0.3)',
+                zIndex: dragType === 'drag' ? 1 : 10,
+                transition: ' all .15s ease-out'
+            }, isUserMove: !placeholderMoving, dragType: dragType, canDrag: false, canResize: false }, function (p, resizerProps) { return React.createElement("div", __assign({}, p)); }));
     };
     Dragact.prototype.componentWillReceiveProps = function (nextProps) {
+        var _this = this;
         if (this.props.layout.length > nextProps.layout.length) {
+            //remove
             var mapLayoutCopy_1 = __assign({}, this.state.mapLayout);
             nextProps.layout.forEach(function (child) {
                 if (mapLayoutCopy_1[child.key + ''] !== void 666)
                     delete mapLayoutCopy_1[child.key + ''];
             });
-            var _loop_1 = function (key) {
-                var newLayout_1 = this_1.state.layout.filter(function (child) {
-                    if (child.key + '' !== key + '')
-                        return child;
-                });
-                var _a = compactLayout(newLayout_1, undefined, this_1.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
-                this_1.setState({
-                    containerHeight: getMaxContainerHeight(compacted, this_1.props.rowHeight, this_1.props.margin[1], this_1.state.containerHeight),
-                    layout: compacted,
-                    mapLayout: mapLayout
-                });
-            };
-            var this_1 = this;
-            for (var key in mapLayoutCopy_1) {
-                _loop_1(key);
-            }
+            // for (const key in mapLayoutCopy) {
+            //     // const newLayout = this.state.layout.filter(child => {
+            //     //     if (child.key + '' !== key + '') return child
+            //     // })
+            // }
+            var newLayout_1 = nextProps.layout.map(function (item) {
+                return __assign({}, _this.state.mapLayout[item.key], item);
+            });
+            var _a = compactLayout(newLayout_1, undefined, this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
+            this.setState({
+                containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight),
+                layout: compacted,
+                mapLayout: mapLayout
+            });
         }
         else if (this.props.layout.length < nextProps.layout.length) {
+            //add
             var item;
             for (var idx in nextProps.layout) {
                 var i = nextProps.layout[idx];
@@ -181,7 +188,7 @@ var Dragact = /** @class */ (function (_super) {
             if (item !== void 666) {
                 var dataSet = __assign({}, item, { isUserMove: false, key: item.key + '' });
                 var newLayout = this.state.layout.concat([dataSet]);
-                var _a = compactLayout(newLayout, undefined, this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
+                var _b = compactLayout(newLayout, undefined, this.state.mapLayout), compacted = _b.compacted, mapLayout = _b.mapLayout;
                 this.setState({
                     containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight, false),
                     layout: compacted,
@@ -207,12 +214,18 @@ var Dragact = /** @class */ (function (_super) {
             var renderItem_1 = layoutItemForkey(mapLayout, child.key + '');
             if (!padding)
                 padding = 0;
-            return (React.createElement(GridItem, __assign({}, renderItem_1, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem_1.isUserMove !== void 666 ? renderItem_1.isUserMove : false, UniqueKey: child.key, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType, key: child.key }), function (GridItemProvided, dragHandle, resizeHandle) { return _this.props.children(child, {
-                isDragging: renderItem_1.isUserMove !== void 666 ? renderItem_1.isUserMove : false,
-                props: GridItemProvided,
-                dragHandle: dragHandle,
-                resizeHandle: resizeHandle
-            }); }));
+            return (React.createElement(GridItem, __assign({}, renderItem_1, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem_1.isUserMove !== void 666
+                    ? renderItem_1.isUserMove
+                    : false, UniqueKey: child.key, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType, key: child.key }), function (GridItemProvided, dragHandle, resizeHandle) {
+                return _this.props.children(child, {
+                    isDragging: renderItem_1.isUserMove !== void 666
+                        ? renderItem_1.isUserMove
+                        : false,
+                    props: GridItemProvided,
+                    dragHandle: dragHandle,
+                    resizeHandle: resizeHandle
+                });
+            }));
         }
     };
     Dragact.prototype.render = function () {
@@ -230,8 +243,7 @@ var Dragact = /** @class */ (function (_super) {
         return this.state.layout;
     };
     //api
-    Dragact.prototype.deleteItem = function (key) {
-    };
+    Dragact.prototype.deleteItem = function (key) { };
     return Dragact;
 }(React.Component));
 export { Dragact };

dist/src/lib/style.css

@@ -0,0 +1,14 @@
+.WrapDragger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.DraggerLayout {
+    -webkit-transition: all .15s;
+    transition: all .15s;
+}
+
+body {
+    background: white;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragact",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "A powerful draggable layout system",
   "main": "index.js",
   "scripts": {

src/lib/dragact.tsx

@@ -76,7 +76,8 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 compacted,
                 this.props.rowHeight,
                 this.props.margin[1],
-                this.state.containerHeight
+                this.state.containerHeight,
+                false
             )
         })
     }
@@ -220,61 +221,63 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     delete (mapLayoutCopy as any)[child.key + '']
             })
 
-            for (const key in mapLayoutCopy) {
-                const newLayout = this.state.layout.filter(child => {
-                    if (child.key + '' !== key + '') return child
-                })
+            const copyed: any = { ...this.state.mapLayout }
+            const newLayout = nextProps.layout.map((item: any) => {
+                const { w, h, GridX, GridY, key, ...others } = item
 
-                const { compacted, mapLayout } = compactLayout(
-                    newLayout,
-                    undefined,
-                    this.state.mapLayout
-                )
-                this.setState({
-                    containerHeight: getMaxContainerHeight(
-                        compacted,
-                        this.props.rowHeight,
-                        this.props.margin[1],
-                        this.state.containerHeight
-                    ),
-                    layout: compacted,
-                    mapLayout
-                })
-            }
+                return {
+                    ...copyed[item.key],
+                    others
+                }
+            })
+            const { compacted, mapLayout } = compactLayout(
+                newLayout,
+                undefined,
+                this.state.mapLayout
+            )
+            this.setState({
+                containerHeight: getMaxContainerHeight(
+                    compacted,
+                    this.props.rowHeight,
+                    this.props.margin[1],
+                    this.state.containerHeight
+                ),
+                layout: compacted,
+                mapLayout
+            })
         } else if (this.props.layout.length < nextProps.layout.length) {
             //add
-            var item
-            for (const idx in nextProps.layout) {
-                const i = nextProps.layout[idx]
-                if (this.state.mapLayout && !this.state.mapLayout[i.key + '']) {
-                    item = i
-                    break
+            const copyed: any = { ...this.state.mapLayout }
+            var newLayout = nextProps.layout.map((v: any) => {
+                if (copyed[v.key]) {
+                    return {
+                        ...v,
+                        ...copyed[v.key]
+                    }
                 }
-            }
-            if (item !== void 666) {
-                const dataSet = {
-                    ...item,
+                return {
+                    ...v,
                     isUserMove: false,
-                    key: item.key + ''
+                    key: v.key + ''
                 }
-                var newLayout = [...this.state.layout, dataSet]
-                const { compacted, mapLayout } = compactLayout(
-                    newLayout,
-                    undefined,
-                    this.state.mapLayout
-                )
-                this.setState({
-                    containerHeight: getMaxContainerHeight(
-                        compacted,
-                        this.props.rowHeight,
-                        this.props.margin[1],
-                        this.state.containerHeight,
-                        false
-                    ),
-                    layout: compacted,
-                    mapLayout
-                })
-            }
+            })
+
+            const { compacted, mapLayout } = compactLayout(
+                newLayout,
+                undefined,
+                this.state.mapLayout
+            )
+            this.setState({
+                containerHeight: getMaxContainerHeight(
+                    compacted,
+                    this.props.rowHeight,
+                    this.props.margin[1],
+                    this.state.containerHeight,
+                    false
+                ),
+                layout: compacted,
+                mapLayout
+            })
         } else {
             this.recalculateLayout(nextProps.layout, nextProps.col)
         }

src/lib/util/sort.ts

@@ -1,14 +1,18 @@
-import { DragactLayoutItem } from "../dragact-type";
-
+import { DragactLayoutItem } from '../dragact-type'
 
 export function quickSort(a: number[]): any {
-    return a.length <= 1 ? a : quickSort(a.slice(1).filter(item => item <= a[0])).concat(a[0], quickSort(a.slice(1).filter(item => item > a[0])));
+    return a.length <= 1
+        ? a
+        : quickSort(a.slice(1).filter(item => item <= a[0])).concat(
+              a[0],
+              quickSort(a.slice(1).filter(item => item > a[0]))
+          )
 }
 
 export const sortLayout = (layout: any) => {
     return [].concat(layout).sort((a: any, b: any) => {
         if (a.GridY > b.GridY || (a.GridY === b.GridY && a.GridX > b.GridX)) {
-            if (a.static) return 0//为了静态，排序的时候尽量把静态的放在前面
+            if (a.static) return 0 //为了静态，排序的时候尽量把静态的放在前面
             return 1
         } else if (a.GridY === b.GridY && a.GridX === b.GridX) {
             return 0
@@ -17,27 +21,34 @@ export const sortLayout = (layout: any) => {
     })
 }
 
-
 /**
  * 这个函数带有记忆功能
  */
-export const getMaxContainerHeight = function () {
-    var lastOneYNH = 0;
-    return function (layout: DragactLayoutItem[], elementHeight = 30, elementMarginBottom = 10, currentHeight: number, useCache?: Boolean) {
+export const getMaxContainerHeight = (function() {
+    var lastOneYNH = 0
+    return function(
+        layout: DragactLayoutItem[],
+        elementHeight = 30,
+        elementMarginBottom = 10,
+        currentHeight: number,
+        useCache?: Boolean
+    ) {
         if (useCache !== false) {
-            const length = layout.length;
-            const currentLastOne = layout[length - 1];
+            const length = layout.length
+            const currentLastOne = layout[length - 1]
             if (currentLastOne.GridY + currentLastOne.h === lastOneYNH) {
                 return currentHeight
             }
-            lastOneYNH = currentLastOne.GridY + currentLastOne.h;
+            lastOneYNH = currentLastOne.GridY + currentLastOne.h
         }
-        const ar = layout.map((item) => {
+
+        const ar = layout.map(item => {
             return item.GridY + item.h
         })
-        const h = quickSort(ar)[ar.length - 1];
-        const height = h * (elementHeight + elementMarginBottom) + elementMarginBottom
+        const h = quickSort(ar)[ar.length - 1]
+        const height =
+            h * (elementHeight + elementMarginBottom) + elementMarginBottom
 
         return height
     }
-}();
+})()