add readme/remove add

README.md

@@ -4,8 +4,7 @@
 
 Dragact 是一款React组件，他能够使你简单、快速的构建出一款强大的 **拖拽式网格(grid)布局**.
 
-![](https://github.com/215566435/React-dragger-layout/blob/master/example/image/NormalLayoutDemo.gif)
-![](https://github.com/215566435/React-dragger-layout/blob/master/example/image/resizing.gif)
+![](https://github.com/215566435/React-dragger-layout/blob/master/example/image/dashboard.gif)
 
 # Demo地址 ✌️
 [Live Demo(预览地址)](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html)

dist/AddRemove/index.js

@@ -1,72 +1,98 @@
-"use strict";
-// import *as React from 'react';
-// import { Dragact } from '../lib/dragact';
-// const Words = [
-//     { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
-//     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
-//     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
-//     { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
-//     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
-// ]
-// const Card = (props: any) => {
-//     const item: any = props.item;
-//     const dataSet: any = props['data-set'];
-//     return (
-//         <div className='layout-Item' >
-//             <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
-//             <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
-//         </div>
-//     )
-// }
-// export class AddRemove extends React.Component<{}, {}> {
-//     layoutWrap: HTMLDivElement | null
-//     dragactNode: Dragact;
-//     state = {
-//         layout: [1]
-//     }
-//     componentDidMount() {
-//         this.setState({
-//             layout: this.dragactNode.getLayout()
-//         })
-//     }
-//     handleClick = () => {
-//         this.setState({
-//             layout: [...this.state.layout, 1]
-//         })
-//         console.log(this.state.layout)
-//     }
-//     handleDeleteClick = () => {
-//         this.state.layout.shift()
-//         this.setState({
-//             layout: [...this.state.layout]
-//         })
-//     }
-//     render() {
-//         const margin: [number, number] = [5, 5];
-//         const dragactInit = {
-//             width: 800,
-//             col: 12,
-//             rowHeight: 800 / 12,
-//             margin: margin,
-//             className: 'normal-layout'
-//         }
-//         return (
-//             <div>
-//                 <div style={{ display: 'flex', justifyContent: 'center' }} >
-//                     <div>
-//                         <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
-//                         <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
-//                             {this.state.layout.map((el, i) => {
-//                                 return (
-//                                     <Card item={Words[0]} key={i} data-set={{ GridX: i * 3, GridY: 0, w: 3, h: 3 }} />
-//                                 )
-//                             })}
-//                         </Dragact>
-//                         <button onClick={this.handleClick}>新增</button>
-//                         <button onClick={this.handleDeleteClick}>删除</button>
-//                     </div>
-//                 </div>
-//             </div>
-//         )
-//     }
-// }
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+import * as React from 'react';
+import { Dragact } from '../lib/dragact';
+var Words = [
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' }
+];
+var Card = function (_a) {
+    var item = _a.item, provided = _a.provided, onDelete = _a.onDelete;
+    return (React.createElement("div", __assign({ className: 'layout-Item' }, provided.props, provided.dragHandle),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width: 10, height: 10, right: 15, top: 5, cursor: 'pointer'
+            }, onClick: function () { return onDelete(item.key); } }, "\u274C"),
+        React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } }, item.content)));
+};
+var fakeData = function () {
+    var Y = 0;
+    return Words.map(function (item, index) {
+        if (index % 4 === 0)
+            Y++;
+        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index });
+    });
+};
+var makeOne = function () {
+    return { content: 'added', GridX: 0, GridY: 0, w: 4, h: 3, key: Date.now() };
+};
+var AddRemove = /** @class */ (function (_super) {
+    __extends(AddRemove, _super);
+    function AddRemove() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            layout: fakeData()
+        };
+        _this.handleClick = function () {
+            _this.setState({
+                layout: _this.state.layout.concat([makeOne()])
+            });
+            console.log(_this.state.layout);
+        };
+        _this.hanldeOnDelete = function (key) {
+            var layout = _this.state.layout.filter(function (item) {
+                if (item.key !== key) {
+                    return item;
+                }
+            });
+            _this.setState({
+                layout: layout
+            });
+        };
+        return _this;
+    }
+    AddRemove.prototype.componentDidMount = function () {
+    };
+    AddRemove.prototype.render = function () {
+        var _this = this;
+        var margin = [5, 5];
+        var dragactInit = {
+            width: 800,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout',
+            layout: this.state.layout,
+            placeholder: true
+        };
+        return (React.createElement("div", null,
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+                React.createElement("div", null,
+                    React.createElement("h1", { style: { textAlign: 'center' } }, "AddRemove Demo"),
+                    React.createElement("button", { onClick: this.handleClick }, "\u65B0\u589E"),
+                    React.createElement(Dragact, __assign({}, dragactInit), function (item, provided) {
+                        return React.createElement(Card, { item: item, provided: provided, onDelete: _this.hanldeOnDelete });
+                    })))));
+    };
+    return AddRemove;
+}(React.Component));
+export { AddRemove };

dist/index.js

@@ -14,7 +14,7 @@ import { LayoutDemo } from './NormalLayout/index';
 import { SortedTableWithStatic } from "./StaticWidget/index";
 import { LayoutRestore } from "./LayoutRestore/index";
 import { HandleLayout } from "./HandleLayout/index";
-// import { AddRemove } from "./AddRemove/index";
+import { AddRemove } from "./AddRemove/index";
 import { Mobile } from "./mobileLayout/index";
 import './index.css';
 // import { Dragact } from "./lib/dragact";
@@ -24,7 +24,7 @@ var DemoMap = {
     StaticHeader: React.createElement(SortedTableWithStatic, null),
     LayoutRestore: React.createElement(LayoutRestore, null),
     HandleLayout: React.createElement(HandleLayout, null),
-    // AddRemove: <AddRemove />,
+    AddRemove: React.createElement(AddRemove, null),
     Mobile: React.createElement(Mobile, null)
 };
 var DemoDispatcher = /** @class */ (function (_super) {
@@ -44,19 +44,22 @@ var DemoDispatcher = /** @class */ (function (_super) {
     DemoDispatcher.prototype.render = function () {
         var _this = this;
         return (React.createElement("div", null,
+            React.createElement("iframe", { src: "https://ghbtns.com/github-btn.html?user=215566435&repo=Dragact&type=star&count=true&size=large", frameBorder: '0', scrolling: "0", width: "160px", height: "30px" }),
+            React.createElement("iframe", { src: "https://ghbtns.com/github-btn.html?user=215566435&repo=Dragact&type=fork&count=true&size=large", frameBorder: "0", scrolling: "0", width: "158px", height: "30px" }),
             React.createElement("div", null, "\u5207\u6362 Demos"),
             React.createElement("div", { className: 'demo-button-layout' },
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('normalLayout'); } }, "\u666E\u901A\u5E03\u5C40"),
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('StaticHeader'); } }, "\u9759\u6001\u7EC4\u4EF6"),
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('LayoutRestore'); } }, "\u5B58\u50A8\u5E03\u5C40"),
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('HandleLayout'); } }, "\u62D6\u62FD\u628A\u624B"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('AddRemove'); } }, "\u589E\u52A0\u548C\u5220\u9664"),
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('Mobile'); } }, "\u79FB\u52A8\u7AEF")),
             this.state.demo));
     };
     return DemoDispatcher;
 }(React.Component));
-{
-}
+{ }
+//<Dragact/> */}
 // const fakeData = [
 //     { GridX: 0, GridY: 0, w: 4, h: 2, key: '0' },
 //     { GridX: 0, GridY: 0, w: 4, h: 2, key: '1' },
@@ -67,6 +70,20 @@ var DemoDispatcher = /** @class */ (function (_super) {
 //         background: isDragging ? '#1890ff' : 'white',
 //     }
 // };
+// const Handle = ({ provided }: any) => {
+//     return (
+//         <div
+//             {...provided.dragHandle}
+//             style={{
+//                 ...getblockStyle(provided.isDragging),
+//                 borderBottom: '1px solid rgba(120,120,120,0.3)',
+//                 textAlign: 'center'
+//             }}
+//         >
+//             点击拖拽
+//         </div>
+//     )
+// }
 // ReactDOM.render(
 //     <Dragact
 //         layout={fakeData}//必填项
@@ -82,12 +99,9 @@ var DemoDispatcher = /** @class */ (function (_super) {
 //             return (
 //                 <div
 //                     {...provided.props}
-//                     {...provided.dragHandle}
-//                     style={{
-//                         ...provided.props.style,
-//                         ...getblockStyle(provided.isDragging)
-//                     }}
+//                     style={{ ...provided.props.style, background: 'white' }}
 //                 >
+//                     <Handle provided={provided} />
 //                     {provided.isDragging ? '正在抓取' : '停放'}
 //                 </div>
 //             )

dist/lib/dragact.js

@@ -46,7 +46,7 @@ var Dragact = /** @class */ (function (_super) {
             }
         };
         _this.onResizing = function (layoutItem) {
-            var newLayout = layoutCheck(_this.state.layout, layoutItem, layoutItem.UniqueKey, layoutItem.UniqueKey, 0);
+            var newLayout = layoutCheck(_this.state.layout, layoutItem, layoutItem.UniqueKey + '', layoutItem.UniqueKey + '', 0);
             var _a = compactLayout(newLayout, layoutItem, _this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
             _this.setState({
                 layout: compacted,
@@ -103,7 +103,7 @@ var Dragact = /** @class */ (function (_super) {
     Dragact.prototype.onDrag = function (layoutItem) {
         var GridY = layoutItem.GridY, UniqueKey = layoutItem.UniqueKey;
         var moving = GridY - this.state.GridYMoving;
-        var newLayout = layoutCheck(this.state.layout, layoutItem, UniqueKey, UniqueKey /*用户移动方块的key */, moving);
+        var newLayout = layoutCheck(this.state.layout, layoutItem, UniqueKey + '', UniqueKey + '' /*用户移动方块的key */, moving);
         var _a = compactLayout(newLayout, layoutItem, this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
         this.setState({
             GridXMoving: layoutItem.GridX,
@@ -136,15 +136,15 @@ var Dragact = /** @class */ (function (_super) {
         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) {
-        if (this.props.children.length > nextProps.children.length) {
+        if (this.props.layout.length > nextProps.layout.length) {
             var mapLayoutCopy_1 = __assign({}, this.state.mapLayout);
-            nextProps.children.forEach(function (child) {
-                if (mapLayoutCopy_1[child.key] !== void 666)
-                    delete mapLayoutCopy_1[child.key];
+            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)
+                    if (child.key + '' !== key + '')
                         return child;
                 });
                 var _a = compactLayout(newLayout_1, undefined, this_1.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
@@ -159,22 +159,21 @@ var Dragact = /** @class */ (function (_super) {
                 _loop_1(key);
             }
         }
-        if (this.props.children.length < nextProps.children.length) {
+        if (this.props.layout.length < nextProps.layout.length) {
             var item;
-            for (var idx in nextProps.children) {
-                var i = nextProps.children[idx];
-                if (this.state.mapLayout && !this.state.mapLayout[i.key]) {
+            for (var idx in nextProps.layout) {
+                var i = nextProps.layout[idx];
+                if (this.state.mapLayout && !this.state.mapLayout[i.key + '']) {
                     item = i;
                     break;
                 }
             }
             if (item !== void 666) {
-                var dataSet = __assign({}, item.props['data-set'], { isUserMove: false, key: item.key });
+                var dataSet = __assign({}, item, { isUserMove: false, key: item.key + '' });
                 var newLayout = this.state.layout.concat([dataSet]);
-                newLayout = correctLayout(newLayout, this.props.col);
                 var _a = compactLayout(newLayout, 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),
+                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight, false),
                     layout: compacted,
                     mapLayout: mapLayout
                 });
@@ -189,7 +188,7 @@ var Dragact = /** @class */ (function (_super) {
             _this.setState({
                 layout: compacted,
                 mapLayout: mapLayout,
-                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1], _this.state.containerHeight)
+                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1], _this.state.containerHeight, false)
             });
         }, 1);
     };
@@ -198,7 +197,7 @@ var Dragact = /** @class */ (function (_super) {
         var _a = this.state, dragType = _a.dragType, mapLayout = _a.mapLayout;
         var _b = this.props, col = _b.col, width = _b.width, padding = _b.padding, rowHeight = _b.rowHeight, margin = _b.margin;
         if (mapLayout) {
-            var renderItem_1 = layoutItemForkey(mapLayout, child.key);
+            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, {

dist/lib/util/compact.js

@@ -16,7 +16,7 @@ import { getFirstCollison } from "./collison";
 export var compactItem = function (finishedLayout, item) {
     if (item.static)
         return item;
-    var newItem = __assign({}, item);
+    var newItem = __assign({}, item, { key: item.key + '' });
     if (finishedLayout.length === 0) {
         return __assign({}, newItem, { GridY: 0 });
     }

dist/lib/util/correction.js

@@ -24,7 +24,7 @@ export var correctLayout = function (layout, col) {
         correctItem(copy[i], col);
         correctItem(copy[i + 1], col);
         if (collision(copy[i], copy[i + 1])) {
-            copy = layoutCheck(copy, copy[i], copy[i].UniqueKey, copy[i].UniqueKey, 0);
+            copy = layoutCheck(copy, copy[i], copy[i].UniqueKey + '', copy[i].UniqueKey + '', 0);
         }
     }
     return copy;

dist/lib/util/sort.js

@@ -18,16 +18,18 @@ export var sortLayout = function (layout) {
  * 这个函数带有记忆功能
  */
 export var getMaxContainerHeight = function () {
-    var lastOneGridY = 0;
-    return function (layout, elementHeight, elementMarginBottom, currentHeight) {
+    var lastOneYNH = 0;
+    return function (layout, elementHeight, elementMarginBottom, currentHeight, useCache) {
         if (elementHeight === void 0) { elementHeight = 30; }
         if (elementMarginBottom === void 0) { elementMarginBottom = 10; }
-        var length = layout.length;
-        var currentLastOne = layout[length - 1];
-        if (currentLastOne.GridY === lastOneGridY) {
-            return currentHeight;
+        if (useCache !== false) {
+            var length_1 = layout.length;
+            var currentLastOne = layout[length_1 - 1];
+            if (currentLastOne.GridY + currentLastOne.h === lastOneYNH) {
+                return currentHeight;
+            }
+            lastOneYNH = currentLastOne.GridY + currentLastOne.h;
         }
-        lastOneGridY = currentLastOne.GridY;
         var ar = layout.map(function (item) {
             return item.GridY + item.h;
         });

dist/showdown/index.js

@@ -0,0 +1,26 @@
+var showdown = require('showdown');
+var hljs = require('highlightjs');
+var decodeHtml = require("html-encoder-decoder").decode;
+function showdownHighlight() {
+    return [{
+            type: "output",
+            filter: function filter(text, converter, options) {
+                var left = "<pre><code\\b[^>]*>", right = "</code></pre>", flags = "g", replacement = function replacement(wholeMatch, match, left, right) {
+                    match = decodeHtml(match);
+                    var lang = (left.match(/class=\"([^ \"]+)/) || [])[1];
+                    console.log(left + hljs.highlight(lang, match).value + right);
+                    if (lang) {
+                        return left + hljs.highlight(lang, match).value + right;
+                    }
+                    else {
+                        return left + hljs.highlightAuto(match).value + right;
+                    }
+                };
+                return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
+            }
+        }];
+}
+;
+export var convertor = new showdown.Converter({
+    extensions: [showdownHighlight]
+});

example/changelog.md

@@ -1,3 +1,7 @@
+v0.2.0
+- 版本跳跃
+- 添加增加add/remove
+
 v0.1.7
 - 优化性能-使用reselect的原理
 - 拖拽手感优化

src/AddRemove/index.tsx

@@ -10,14 +10,20 @@ const Words = [
 ]
 
 
-const Card = ({ item, provided }: any) => {
-    // console.log(provided);
+const Card = ({ item, provided, onDelete }: any) => {
     return (
         <div
             className='layout-Item'
             {...provided.props}
             {...provided.dragHandle}
         >
+            <div
+                style={{
+                    position: 'absolute',
+                    width: 10, height: 10, right: 15, top: 5, cursor: 'pointer'
+                }}
+                onClick={() => onDelete(item.key)}
+            >❌</div>
             <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{item.content}</div>
         </div>
     )
@@ -51,10 +57,14 @@ export class AddRemove extends React.Component<{}, {}> {
         })
         console.log(this.state.layout)
     }
-    handleDeleteClick = () => {
-        this.state.layout.shift()
+    hanldeOnDelete = (key: any) => {
+        const layout = this.state.layout.filter((item) => {
+            if (item.key !== key) {
+                return item;
+            }
+        })
         this.setState({
-            layout: [...this.state.layout]
+            layout: layout
         })
     }
 
@@ -66,20 +76,21 @@ export class AddRemove extends React.Component<{}, {}> {
             rowHeight: 800 / 12,
             margin: margin,
             className: 'normal-layout',
-            layout: this.state.layout
+            layout: this.state.layout,
+            placeholder: true
         }
         return (
             <div>
                 <div style={{ display: 'flex', justifyContent: 'center' }} >
                     <div>
+
                         <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
+                        <button onClick={this.handleClick}>新增</button>
                         <Dragact {...dragactInit} >
                             {(item, provided) => {
-                                return <Card item={item} provided={provided} />
+                                return <Card item={item} provided={provided} onDelete={this.hanldeOnDelete} />
                             }}
                         </Dragact>
-                        <button onClick={this.handleClick}>新增</button>
-                        <button onClick={this.handleDeleteClick}>删除</button>
                     </div>
                 </div>
             </div>

src/index.tsx

@@ -17,7 +17,7 @@ const DemoMap: any = {
     StaticHeader: <SortedTableWithStatic />,
     LayoutRestore: <LayoutRestore />,
     HandleLayout: <HandleLayout />,
-    // AddRemove: <AddRemove />,
+    AddRemove: <AddRemove />,
     Mobile: <Mobile />
 }
 
@@ -46,6 +46,7 @@ class DemoDispatcher extends React.Component<{}, {}> {
                     <button onClick={() => this.handleLayoutChange('StaticHeader')}>静态组件</button>
                     <button onClick={() => this.handleLayoutChange('LayoutRestore')}>存储布局</button>
                     <button onClick={() => this.handleLayoutChange('HandleLayout')}>拖拽把手</button>
+                    <button onClick={() => this.handleLayoutChange('AddRemove')}>增加和删除</button>
                     <button onClick={() => this.handleLayoutChange('Mobile')}>移动端</button>
                 </div>
                 {this.state.demo}
@@ -54,7 +55,7 @@ class DemoDispatcher extends React.Component<{}, {}> {
     }
 }
 
-<DemoDispatcher />
+{/* <DemoDispatcher /> */ }
 
 //<Dragact/> */}
 
@@ -114,7 +115,7 @@ class DemoDispatcher extends React.Component<{}, {}> {
 
 
 ReactDOM.render(
-    <AddRemove />,
+    <DemoDispatcher />,
     document.getElementById('root')
 );
 

src/lib/dragact.tsx

@@ -258,23 +258,25 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
 
     componentWillReceiveProps(nextProps: any) {
-        // if (this.props.children.length > nextProps.children.length) { //remove
-        //     const mapLayoutCopy = { ...this.state.mapLayout };
-        //     nextProps.children.forEach((child: any) => {
-        //         if ((mapLayoutCopy as any)[child.key] !== void 666) 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 { 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
-        //         })
-        //     }
-        // }
+        if (this.props.layout.length > nextProps.layout.length) { //remove
+            const mapLayoutCopy = { ...this.state.mapLayout };
+            nextProps.layout.forEach((child: any) => {
+                if ((mapLayoutCopy as any)[child.key + ''] !== void 666) 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 { 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
+                })
+            }
+        }
         if (this.props.layout.length < nextProps.layout.length) {//add
             var item;
             for (const idx in nextProps.layout) {
@@ -331,7 +333,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     onDragStart={this.onDragStart}
                     onDragEnd={this.onDragEnd}
                     isUserMove={renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false}
-                    UniqueKey={child.key + ''}
+                    UniqueKey={child.key}
                     onResizing={this.onResizing}
                     onResizeStart={this.onResizeStart}
                     onResizeEnd={this.onResizeEnd}