example移除src

dist/SortableList/index.js

@@ -1,63 +0,0 @@
-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 { DragactList } from '../lib/dragactList/dragactList';
-var 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' }
-];
-var Cell = function (props) {
-    var item = props.item;
-    return (React.createElement("div", { className: 'layout-Cell', style: { width: 400, height: 50, border: '1px solid black' } },
-        React.createElement("img", { src: item.img, style: { width: 45, height: 45 }, draggable: false, alt: 'card' }),
-        React.createElement("div", { style: { paddingLeft: 12, color: '#595959' } }, item.content)));
-};
-var dataList = [
-    __assign({ y: 0 }, Words[0], { key: '0' }),
-    __assign({ y: 1 }, Words[1], { key: '1' }),
-    __assign({ y: 2 }, Words[2], { key: '2' }),
-    __assign({ y: 3 }, Words[3], { key: '3' })
-];
-var dataList2 = [
-    __assign({ y: 0 }, Words[0], { key: '100' }),
-    __assign({ y: 1 }, Words[1], { key: '101' }),
-    __assign({ y: 2 }, Words[2], { key: '201' }),
-    __assign({ y: 3 }, Words[3], { key: '301' })
-];
-var SortableList = /** @class */ (function (_super) {
-    __extends(SortableList, _super);
-    function SortableList() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SortableList.prototype.render = function () {
-        var _this = this;
-        var list = [dataList, dataList2];
-        return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
-            React.createElement("div", null,
-                React.createElement("h1", { style: { textAlign: 'center' } }, "Sort list Demo"),
-                React.createElement(DragactList, { layout: list, width: 450, rowHeight: 60, margin: [50, 5], className: 'normal-layout', ref: function (node) { return _this.one = node; } }, function (child, index) {
-                    return React.createElement(Cell, { item: child });
-                }))));
-    };
-    return SortableList;
-}(React.Component));
-export { SortableList };

dist/SortedTable/index.js

@@ -1,34 +0,0 @@
-"use strict";
-// import * as React from 'react';
-// import { Dragact } from '../lib/dragact'
-// import './index.css'
-// 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 Cell = (props: any) => {
-//     const item = props.item;
-//     return (
-//         <div className='layout-Cell'>
-//             <img src={item.img} style={{ width: 45, height: 45 }} draggable={false} alt='card'></img>
-//             <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
-//         </div>
-//     )
-// }
-// export const SortedTable = () => {
-//     return (
-//         <div style={{ display: 'flex', justifyContent: 'center' }}>
-//             <div>
-//                 <h1 style={{ textAlign: 'center' }}>Sorted Table Demo</h1>
-//                 <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
-//                     {Words.map((el, index) => {
-//                         return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1, canResize: false }} />
-//                     })}
-//                 </Dragact>
-//             </div>
-//         </div>
-//     )
-// }

dist/StaticHeader/index.js

@@ -1,34 +0,0 @@
-"use strict";
-// import * as React from 'react';
-// import { Dragact } from '../lib/dragact'
-// import './index.css'
-// const Words = [
-//     { content: 'Sorry I just can not move in any circumstances', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg', static: true },
-//     { 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: 'Sorry I just can not move in any circumstances,too', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738', static: true },
-//     { 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 Cell = (props: any) => {
-//     const { item } = props;
-//     return (
-//         <div className={`layout-Cell ${item.static ? "static" : ""}`} style={{ background: item.static ? "#e8e8e8" : "" }}>
-//             <img src={item.img} style={{ width: 45, height: 45 }} draggable={false} alt='card'></img>
-//             <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
-//         </div>
-//     )
-// }
-// export const SortedTableWithStatic = () => {
-//     return (
-//         <div style={{ display: 'flex', justifyContent: 'center' }}>
-//             <div>
-//                 <h1 style={{ textAlign: 'center' }}>Static Header Table Demo</h1>
-//                 <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
-//                     {Words.map((el, index) => {
-//                         return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: index, w: 1, h: 1, static: el.static }} />
-//                     })}
-//                 </Dragact>
-//             </div>
-//         </div>
-//     )
-// }

dist/AddRemove/index.js → dist/example/AddRemove/index.js

@@ -17,7 +17,7 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     return t;
 };
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact';
 var Words = [
     { content: 'You can do anything, but not everything.' },
     { content: 'Those who dare to fail miserably can achieve greatly.' },

dist/HistoryLayout/HistoryLayout.js → dist/example/HistoryLayout/HistoryLayout.js

@@ -17,7 +17,7 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     return t;
 };
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact';
 var HistoryDragact = /** @class */ (function (_super) {
     __extends(HistoryDragact, _super);
     function HistoryDragact(props) {

dist/lib/dragactList/dragactList.js

@@ -1,411 +0,0 @@
-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 { compactLayout } from '../util/compact';
-// import { getMaxContainerHeight } from '../util/sort';
-// import { layoutCheck } from '../util/collison';
-import { stringJoin } from '../utils';
-// import { syncLayout } from '../util/initiate';
-import './index.css';
-import { Dragger } from "../dragger/index";
-// interface DragactState {
-//     GridXMoving: number
-//     GridYMoving: number
-//     wMoving: number
-//     hMoving: number
-//     placeholderShow: Boolean
-//     placeholderMoving: Boolean
-//     layout: any;
-//     containerHeight: number
-//     dragType: 'drag' | 'resize'
-//     mapLayout: mapLayout | undefined
-//     col: number
-// }
-var Column = /** @class */ (function (_super) {
-    __extends(Column, _super);
-    function Column() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Column.prototype.render = function () {
-        return this.props.children;
-    };
-    return Column;
-}(React.Component));
-export { Column };
-var checkInContainer = function (GridX, GridY) {
-    /**防止元素出container */
-    // if (GridY < 0) GridY = 0//上边界
-    return { GridX: GridX, GridY: GridY };
-};
-var ListCell = /** @class */ (function (_super) {
-    __extends(ListCell, _super);
-    function ListCell() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onDragStart = function (x, y) {
-            var _a = _this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
-            var _b = _this.props, UniqueKey = _b.UniqueKey, currentListIndex = _b.currentListIndex;
-            _this.props.onDragStart({ key: UniqueKey, x: GridX, y: GridY, currentListIndex: currentListIndex });
-        };
-        _this.onDrag = function (event, x, y) {
-            var _a = _this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
-            var _b = _this.props, UniqueKey = _b.UniqueKey, currentListIndex = _b.currentListIndex;
-            _this.props.onDrag({ key: UniqueKey, x: GridX, y: GridY, currentListIndex: currentListIndex });
-        };
-        _this.onDragEnd = function (event, x, y) {
-            var _a = _this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
-            var _b = _this.props, UniqueKey = _b.UniqueKey, currentListIndex = _b.currentListIndex;
-            console.log(_this.props);
-            _this.props.onDragEnd({ key: UniqueKey, x: GridX, y: GridY, currentListIndex: currentListIndex });
-        };
-        return _this;
-    }
-    ListCell.prototype.calGridXY = function (x, y) {
-        var _a = this.props, margin = _a.margin, width = _a.width, col = _a.col, rowHeight = _a.rowHeight;
-        var containerWidth = width * col + margin[0];
-        /**坐标转换成格子的时候，无须计算margin */
-        var GridX = Math.round(x / containerWidth * col);
-        var GridY = Math.round(y / (rowHeight + (margin ? margin[1] : 0)));
-        // /**防止元素出container */
-        return checkInContainer(GridX, GridY);
-    };
-    ListCell.prototype.render = function () {
-        var _a = this.props, currentListIndex = _a.currentListIndex, y = _a.y, isUserMove = _a.isUserMove, width = _a.width, style = _a.style, rowHeight = _a.rowHeight, margin = _a.margin;
-        return (React.createElement(Dragger, { x: currentListIndex * width, y: Math.round(y * rowHeight + margin[1] * (y + 1)), style: __assign({}, style, { width: width, transition: this.props.isUserMove ? '' : 'all .2s' }), isUserMove: isUserMove, onDragStart: this.onDragStart, onMove: this.onDrag, canResize: false, onDragEnd: this.onDragEnd }, this.props.children));
-    };
-    return ListCell;
-}(React.Component));
-export { ListCell };
-export var collision = function (a, b) {
-    if (a === b) {
-        return 1;
-    }
-    if (a + 1 <= b)
-        return -1;
-    if (a >= b + 1)
-        return -1;
-    return 2;
-};
-var swapList = function (list, movingItem, firstKey) {
-    var moving = [];
-    var newList = list.map(function (oldItem) {
-        if (oldItem.key !== movingItem.key) {
-            var num = collision(oldItem.y, movingItem.y);
-            if (num > 0) {
-                // console.log(num)
-                var offset = movingItem.y - 1;
-                // if (movingItem.y > oldItem.y && movingItem.y < oldItem.y + 1) {
-                //     /**
-                //      * 元素向上移动时，元素的上面空间不足,则不移动这个元素
-                //      * 当元素移动到GridY>所要向上交换的元素时，就不会进入这里，直接交换元素
-                //      */
-                //     console.log('你来了')
-                //     offset = oldItem.y
-                // }
-                // }
-                moving.push(__assign({}, oldItem, { y: offset, isUserMove: false }));
-                return __assign({}, oldItem, { y: offset, isUserMove: false });
-            }
-            return oldItem;
-        }
-        else if (movingItem.key === firstKey) {
-            /**永远保持用户移动的块是 isUserMove === true */
-            return __assign({}, oldItem, movingItem);
-        }
-        return oldItem;
-    });
-    for (var i in moving) {
-        newList = swapList(newList, moving[i], firstKey);
-    }
-    return newList;
-};
-/**获取layout中，item第一个碰撞到的物体 */
-export var getFirstCollison = function (layout, item) {
-    for (var i = 0, length_1 = layout.length; i < length_1; i++) {
-        if (collision(layout[i].y, item.y) > 0) {
-            return layout[i];
-        }
-    }
-    return null;
-};
-var compactCell = function (partialList, cell) {
-    if (partialList.length === 0) {
-        return __assign({}, cell, { y: 0 });
-    }
-    var newCell = __assign({}, cell);
-    /**
-     * 类似一个递归调用
-     */
-    while (true) {
-        var FirstCollison = getFirstCollison(partialList, newCell);
-        if (FirstCollison) {
-            /**第一次发生碰撞时，就可以返回了 */
-            return __assign({}, newCell, { y: FirstCollison.y + 1 });
-        }
-        newCell.y--;
-        if (newCell.y < 0)
-            return __assign({}, newCell, { y: 0 }); /**碰到边界的时候，返回 */
-    }
-};
-export var compactList = function (list, movingItem) {
-    var sort = list.sort(function (a, b) {
-        if (a.y === b.y) {
-            if (b.isUserMove)
-                return 1;
-        }
-        if (a.y > b.y)
-            return 1;
-        return 0;
-    });
-    var needCompact = Array(list.length);
-    var after = [];
-    var mapList = {};
-    for (var i in sort) {
-        var finished = compactCell(after, sort[i]);
-        if (movingItem) {
-            if (movingItem.key === finished.key) {
-                // finished.y = movingItem.y;
-                finished.isUserMove = true;
-            }
-            else
-                finished.isUserMove = false;
-        }
-        else
-            finished.isUserMove = false;
-        after.push(finished);
-        needCompact[i] = finished;
-        mapList[finished.key] = finished;
-    }
-    return {
-        compacted: needCompact,
-        maped: mapList
-    };
-};
-var DragactList = /** @class */ (function (_super) {
-    __extends(DragactList, _super);
-    function DragactList(props) {
-        var _this = _super.call(this, props) || this;
-        _this.onDragStart = function (e) {
-            var key = e.key, x = e.x;
-            for (var idx in _this.state.layout[x]) {
-                if (_this.state.layout[x][idx].key === key) {
-                    _this.state.layout[x][idx].isUserMove = true;
-                    break;
-                }
-            }
-            _this.setState({
-                layout: _this.state.layout,
-                lastList: x
-            });
-        };
-        _this.onDrag = function (e) {
-            var key = e.key, x = e.x, y = e.y, currentListIndex = e.currentListIndex;
-            if (!_this.state.layout[x])
-                return; //如果超出列表，就返回
-            if (x !== e.currentListIndex) {
-                //移动到别的列表
-                var i = _this.state.maped[x][key];
-                if (!i) {
-                    _this.state.layout[x].push({ y: y, isUserMove: false, key: key, content: 'placeholder', currentListIndex: currentListIndex });
-                }
-            }
-            // if (x !== this.state.lastList && this.state.lastList !== e.currentListIndex) {
-            //     const { lastList } = this.state;
-            //     //跟上一个不一样的时候
-            //     this.state.layout[lastList] = this.state.layout[lastList].filter((item: any) => {
-            //         if (item.key !== key) {
-            //             return item
-            //         }
-            //     })
-            //     const compact = compactList(this.state.layout[lastList], undefined);
-            //     this.state.layout[lastList] = compact.compacted;
-            //     console.log(`上一次:${lastList}`, this.state.layout)
-            //     delete this.state.maped[lastList][key]
-            //     console.log(this.state.maped)
-            // }
-            console.log(e);
-            var newList = swapList(_this.state.layout[x], { y: y, key: key }, key);
-            var _a = compactList(newList, { y: y, key: key }), compacted = _a.compacted, maped = _a.maped;
-            _this.state.layout[x] = compacted;
-            _this.state.maped[x] = maped;
-            _this.setState({
-                layout: _this.state.layout.slice(),
-                maped: _this.state.maped.slice(),
-                lastList: x
-            });
-        };
-        _this.onDragEnd = function (e) {
-            var x = e.x, key = e.key, currentListIndex = e.currentListIndex;
-            if (x !== currentListIndex) {
-                //1.删除原来list中的数据
-                _this.state.layout[currentListIndex] = _this.state.layout[currentListIndex].filter(function (item) {
-                    if (item.key !== key) {
-                        return item;
-                    }
-                });
-                //2.删除原来map中的数据
-                delete _this.state.maped[currentListIndex][key];
-                var compact = compactList(_this.state.layout[currentListIndex], undefined);
-                _this.state.layout[currentListIndex] = compact.compacted;
-                _this.state.maped[currentListIndex] = compact.maped;
-                _this.state.layout[x] = _this.state.layout[x].map(function (item) {
-                    if (key === item.key) {
-                        return __assign({}, item, { currentListIndex: x });
-                    }
-                    return item;
-                });
-            }
-            var _a = compactList(_this.state.layout[x], undefined), compacted = _a.compacted, maped = _a.maped;
-            _this.state.layout[x] = compacted;
-            _this.state.maped[x] = maped;
-            console.log(_this.state.layout);
-            _this.setState({
-                layout: _this.state.layout.slice(),
-                maped: _this.state.maped.slice()
-            });
-            // if (this.state.currentList !== x) {
-            //     this.state.layout[x].push({ y, key: "10203", isUserMove: false })
-            //     const compacted = compactList(this.state.layout[x], undefined);
-            //     this.state.layout[x] = compacted;
-            //     this.setState({
-            //         layout: [...this.state.layout]
-            //     })
-            // } else {
-            // }
-        };
-        _this.renderList = function () {
-            // console.log('set', this.props.layout)
-            return _this.props.layout.map(function (child, index) {
-                return React.createElement("div", { className: 'list-oneof', style: {
-                        background: 'red',
-                        height: 60 * _this.state.layout[index].length,
-                        width: 400
-                    }, key: index }, _this.renderColumn(child, index));
-            });
-        };
-        _this.renderColumn = function (child, index) {
-            // const column = this.state.layout[index];
-            var _a = _this.props, width = _a.width, margin = _a.margin, rowHeight = _a.rowHeight;
-            return child.map(function (c, idx) {
-                var key = c.key;
-                var renderItem;
-                // renderItem = this.state.maped[index][key];
-                for (var i in _this.state.maped) {
-                    renderItem = _this.state.maped[i][key];
-                    if (renderItem)
-                        break;
-                }
-                // console.log(renderItem)
-                // if (renderItem.key === '1') console.log(renderItem.listPosition)
-                return React.createElement(ListCell, { margin: margin, rowHeight: rowHeight, width: width, col: _this.state.layout.length, currentListIndex: renderItem.currentListIndex, y: renderItem ? renderItem.y : c.y, style: { position: 'absolute' }, key: idx, UniqueKey: key, isUserMove: renderItem ? renderItem.isUserMove : false, onDragStart: _this.onDragStart, onDrag: _this.onDrag, onDragEnd: _this.onDragEnd }, _this.props.children(c, idx));
-            });
-        };
-        // const layout = getDataSet(props.children);
-        var array = [];
-        var layout = props.layout.map(function (child, idx) {
-            return child.map(function (el, index) {
-                if (!array[idx])
-                    array[idx] = {};
-                array[idx][el.key] = __assign({}, el, { key: el.key, isUserMove: false, currentListIndex: idx });
-                return __assign({}, el, { key: el.key, isUserMove: false, currentListIndex: idx });
-            });
-        });
-        console.log(array);
-        _this.state = {
-            GridXMoving: 0,
-            GridYMoving: 0,
-            wMoving: 0,
-            hMoving: 0,
-            placeholderShow: false,
-            placeholderMoving: false,
-            layout: layout,
-            containerHeight: 500,
-            dragType: 'drag',
-            mapLayout: undefined,
-            col: 3,
-            currentList: 0,
-            maped: array,
-            lastList: void 666
-        };
-        return _this;
-    }
-    DragactList.prototype.componentWillReceiveProps = function (nextProps) {
-        // 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.setState({
-        //             containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
-        //             layout: compacted,
-        //             mapLayout
-        //         })
-        //     }
-        // }
-        // if (this.props.children.length < nextProps.children.length) { //add
-        //     var item;
-        //     for (const idx in nextProps.children) {
-        //         const i = nextProps.children[idx];
-        //         if (this.state.mapLayout && !this.state.mapLayout[i.key]) {
-        //             item = i;
-        //             break;
-        //         }
-        //     }
-        //     if (item !== void 666) {
-        //         const dataSet = { ...item.props['data-set'], isUserMove: false, key: item.key };
-        //         var newLayout = [...this.state.layout, dataSet]
-        //         newLayout = correctLayout(newLayout, this.state.col)
-        //         const { compacted, mapLayout } = compactLayout(newLayout, undefined);
-        //         console.log(mapLayout)
-        //         // console.log(layout)
-        //         this.setState({
-        //             containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
-        //             layout: compacted,
-        //             mapLayout
-        //         })
-        //     }
-        // }
-    };
-    DragactList.prototype.componentDidMount = function () {
-        // setTimeout(() => {
-        //     const swp = [...this.state.layout[0]]
-        //     this.state.layout[0] = this.state.layout[1];
-        //     this.state.layout[1] = swp;
-        //     const swpMap = { ...this.state.maped[0] }
-        //     this.state.maped[0] = this.state.maped[1];
-        //     this.state.maped[1] = swpMap;
-        //     this.setState({
-        //         layout: this.state.layout,
-        //         maped: this.state.maped
-        //     })
-        //     // console.log(this.state.layout)
-        // }, 1000);
-    };
-    DragactList.prototype.render = function () {
-        var _a = this.props, width = _a.width, className = _a.className;
-        var numberOfCol = this.state.layout.length;
-        return (React.createElement("div", { className: stringJoin('DraggerLayout', className + ''), style: { left: 100, width: width * numberOfCol, height: '', zIndex: 1, display: 'flex' } }, this.renderList()));
-    };
-    return DragactList;
-}(React.Component));
-export { DragactList };

dist/lib/style.css

@@ -1,20 +0,0 @@
-/* .shit:hover{
-    width: 100px;
-    height: 100px;
-} */
-
-.WrapDragger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.DraggerLayout {
-    -webkit-transition: all .15s;
-    transition: all .15s;
-}
-
-body {
-    background: white;
-}
-

dist/index.js → dist/src/index.js

@@ -10,13 +10,13 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-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 { HistoryDemo } from "./HistoryLayout/index";
-import { Mobile } from "./mobileLayout/index";
+import { LayoutDemo } from '../example/NormalLayout/index';
+import { SortedTableWithStatic } from "../example/StaticWidget/index";
+import { LayoutRestore } from "../example/LayoutRestore/index";
+import { HandleLayout } from "../example/HandleLayout/index";
+import { AddRemove } from "../example/AddRemove/index";
+import { HistoryDemo } from "../example/HistoryLayout/index";
+import { Mobile } from "../example/mobileLayout/index";
 import './index.css';
 // import { Dragact } from "./lib/dragact";
 var DemoMap = {

dist/lib/dragact.js → dist/src/lib/dragact.js

@@ -25,7 +25,6 @@ import { correctLayout } from './util/correction';
 import { stringJoin } from './utils';
 import { layoutItemForkey, syncLayout } from './util/initiate';
 import './style.css';
-var wins = window;
 var Dragact = /** @class */ (function (_super) {
     __extends(Dragact, _super);
     function Dragact(props) {
@@ -77,14 +76,6 @@ var Dragact = /** @class */ (function (_super) {
                 containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1], _this.state.containerHeight, false)
             });
         };
-        _this.onWindowResize = function (event) {
-            var _a = _this.state.responsiveState, originWidth = _a.originWidth, lastWindowWidth = _a.lastWindowWidth;
-            var windowProportion = wins.innerWidth / lastWindowWidth;
-            _this.props.onWindowResize && _this.props.onWindowResize(_this.state.responsiveState);
-            _this.setState({
-                responsiveState: __assign({}, _this.state.responsiveState, { width: originWidth * windowProportion })
-            });
-        };
         _this.onDrag = _this.onDrag.bind(_this);
         _this.onDragStart = _this.onDragStart.bind(_this);
         _this.onDragEnd = _this.onDragEnd.bind(_this);
@@ -99,12 +90,7 @@ var Dragact = /** @class */ (function (_super) {
             layout: layout,
             containerHeight: 500,
             dragType: 'drag',
-            mapLayout: undefined,
-            responsiveState: {
-                width: props.width,
-                originWidth: props.width,
-                lastWindowWidth: wins.innerWidth
-            }
+            mapLayout: undefined
         };
         return _this;
     }
@@ -151,13 +137,13 @@ var Dragact = /** @class */ (function (_super) {
     Dragact.prototype.renderPlaceholder = function () {
         if (!this.state.placeholderShow)
             return null;
-        var _a = this.props, col = _a.col, padding = _a.padding, rowHeight = _a.rowHeight, margin = _a.margin, placeholder = _a.placeholder;
-        var _b = this.state, GridXMoving = _b.GridXMoving, GridYMoving = _b.GridYMoving, wMoving = _b.wMoving, hMoving = _b.hMoving, placeholderMoving = _b.placeholderMoving, dragType = _b.dragType, responsiveState = _b.responsiveState;
+        var _a = this.props, col = _a.col, padding = _a.padding, rowHeight = _a.rowHeight, margin = _a.margin, placeholder = _a.placeholder, width = _a.width;
+        var _b = this.state, GridXMoving = _b.GridXMoving, GridYMoving = _b.GridYMoving, wMoving = _b.wMoving, hMoving = _b.hMoving, placeholderMoving = _b.placeholderMoving, dragType = _b.dragType;
         if (!placeholder)
             return null;
         if (!padding)
             padding = 0;
-        return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: responsiveState.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) {
         if (this.props.layout.length > nextProps.layout.length) {
@@ -212,24 +198,16 @@ var Dragact = /** @class */ (function (_super) {
         setTimeout(function () {
             _this.recalculateLayout(_this.state.layout, _this.props.col);
         }, 1);
-        if (this.props.responsive === void 666 || this.props.responsive === true) {
-            wins.addEventListener('resize', this.onWindowResize);
-        }
-    };
-    Dragact.prototype.componentWillUnmount = function () {
-        if (this.props.responsive === void 666 || this.props.responsive === true) {
-            wins.removeEventListener('resize', this.onWindowResize);
-        }
     };
     Dragact.prototype.getGridItem = function (child, index) {
         var _this = this;
-        var _a = this.state, dragType = _a.dragType, mapLayout = _a.mapLayout, responsiveState = _a.responsiveState;
-        var _b = this.props, col = _b.col, padding = _b.padding, rowHeight = _b.rowHeight, margin = _b.margin;
+        var _a = this.state, dragType = _a.dragType, mapLayout = _a.mapLayout;
+        var _b = this.props, col = _b.col, padding = _b.padding, rowHeight = _b.rowHeight, margin = _b.margin, width = _b.width;
         if (mapLayout) {
             var renderItem_1 = layoutItemForkey(mapLayout, child.key + '');
             if (!padding)
                 padding = 0;
-            return (React.createElement(GridItem, __assign({}, renderItem_1, { margin: margin, col: col, containerWidth: responsiveState.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, {
+            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,
@@ -239,9 +217,9 @@ var Dragact = /** @class */ (function (_super) {
     };
     Dragact.prototype.render = function () {
         var _this = this;
-        var _a = this.props, className = _a.className, layout = _a.layout, style = _a.style;
-        var _b = this.state, containerHeight = _b.containerHeight, responsiveState = _b.responsiveState;
-        return (React.createElement("div", { className: stringJoin('DraggerLayout', className + ''), style: __assign({}, style, { left: 100, width: responsiveState.width, height: containerHeight, zIndex: 1 }) },
+        var _a = this.props, className = _a.className, layout = _a.layout, style = _a.style, width = _a.width;
+        var containerHeight = this.state.containerHeight;
+        return (React.createElement("div", { className: stringJoin('DraggerLayout', className + ''), style: __assign({}, style, { left: 100, width: width, height: containerHeight, zIndex: 1 }) },
             layout.map(function (item, index) {
                 return _this.getGridItem(item, index);
             }),

src/AddRemove/index.tsx → example/AddRemove/index.tsx

@@ -1,5 +1,5 @@
 import *as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact';
 
 const Words = [
     { content: 'You can do anything, but not everything.' },

src/HistoryLayout/HistoryLayout.tsx → example/HistoryLayout/HistoryLayout.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { DragactProps, DragactLayoutItem } from '../lib/dragact-type';
-import { GridItemEvent } from '../lib/GridItem';
-import { Dragact } from '../lib/dragact';
+import { DragactProps, DragactLayoutItem } from '../../src/lib/dragact-type';
+import { GridItemEvent } from '../../src/lib/GridItem';
+import { Dragact } from '../../src/lib/dragact';
 
 interface HistoryDragactState {
     layout: DragactLayoutItem[]

src/index.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-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 { HistoryDemo } from "./HistoryLayout/index";
-import { Mobile } from "./mobileLayout/index";
+import { LayoutDemo } from '../example/NormalLayout/index';
+import { SortedTableWithStatic } from "../example/StaticWidget/index";
+import { LayoutRestore } from "../example/LayoutRestore/index";
+import { HandleLayout } from "../example/HandleLayout/index";
+import { AddRemove } from "../example/AddRemove/index";
+import { HistoryDemo } from "../example/HistoryLayout/index";
+import { Mobile } from "../example/mobileLayout/index";
 import './index.css'
 // import { Dragact } from "./lib/dragact";
 

tsconfig.json

@@ -14,6 +14,7 @@
         "jsx": "react"
     },
     "include": [
-        "src/**/*"
+        "src/**/*",
+        "example/**/*"
     ]
 }