更新响应式布局demo

dist/lib/GridItem.js

@@ -91,7 +91,10 @@ var GridItem = /** @class */ (function (_super) {
             this.props.GridY !== props.GridY ||
             this.props.isUserMove !== props.isUserMove ||
             this.props.w !== props.w ||
-            this.props.h !== props.h;
+            this.props.h !== props.h ||
+            this.props.containerWidth !== props.containerWidth ||
+            this.props.col !== props.col ||
+            this.props.rowHeight !== this.props.rowHeight;
     };
     /**宽和高计算成为px */
     GridItem.prototype.calWHtoPx = function (w, h) {

dist/lib/dragact.js

@@ -25,6 +25,7 @@ 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) {
@@ -76,6 +77,15 @@ var Dragact = /** @class */ (function (_super) {
                 containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1], _this.state.containerHeight, false)
             });
         };
+        _this.onWindowResize = function (event) {
+            console.log(window.innerWidth);
+            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);
@@ -90,7 +100,12 @@ var Dragact = /** @class */ (function (_super) {
             layout: layout,
             containerHeight: 500,
             dragType: 'drag',
-            mapLayout: undefined
+            mapLayout: undefined,
+            responsiveState: {
+                width: props.width,
+                originWidth: props.width,
+                lastWindowWidth: wins.innerWidth
+            }
         };
         return _this;
     }
@@ -137,13 +152,13 @@ var Dragact = /** @class */ (function (_super) {
     Dragact.prototype.renderPlaceholder = function () {
         if (!this.state.placeholderShow)
             return null;
-        var _a = this.props, col = _a.col, width = _a.width, 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;
+        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;
         if (!placeholder)
             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: 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)); }));
     };
     Dragact.prototype.componentWillReceiveProps = function (nextProps) {
         if (this.props.layout.length > nextProps.layout.length) {
@@ -198,16 +213,24 @@ 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;
-        var _b = this.props, col = _b.col, width = _b.width, padding = _b.padding, rowHeight = _b.rowHeight, margin = _b.margin;
+        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;
         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: 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: 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, {
                 isDragging: renderItem_1.isUserMove !== void 666 ? renderItem_1.isUserMove : false,
                 props: GridItemProvided,
                 dragHandle: dragHandle,
@@ -217,9 +240,9 @@ var Dragact = /** @class */ (function (_super) {
     };
     Dragact.prototype.render = function () {
         var _this = this;
-        var _a = this.props, width = _a.width, className = _a.className, layout = _a.layout, style = _a.style;
-        var containerHeight = this.state.containerHeight;
-        return (React.createElement("div", { className: stringJoin('DraggerLayout', className + ''), style: __assign({}, style, { left: 100, width: width, height: containerHeight, zIndex: 1 }) },
+        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 }) },
             layout.map(function (item, index) {
                 return _this.getGridItem(item, index);
             }),

dist/lib/dragger/index.js

@@ -23,6 +23,7 @@ var Dragger = /** @class */ (function (_super) {
     __extends(Dragger, _super);
     function Dragger(props) {
         var _this = _super.call(this, props) || this;
+        _this.mQue = 0;
         _this.state = {
             /** x轴位移，单位是px */
             x: _this.props.x || 0,
@@ -229,6 +230,17 @@ var Dragger = /** @class */ (function (_super) {
             doc.removeEventListener('mouseup', _this.onResizeEnd);
             _this.props.onResizeEnd && _this.props.onResizeEnd(event, _this.state.w, _this.state.h);
         };
+        _this.movePerFrame = function (delt) {
+            _this.setState({
+                y: _this.state.y + delt
+            });
+            _this.mQue++;
+            if (_this.mQue >= 10) {
+                _this.mQue = 0;
+                return;
+            }
+            requestAnimationFrame(function () { return _this.movePerFrame(delt); });
+        };
         _this.mixin = function () {
             var dragMix = {
                 onMouseDown: _this.onDragStart,
@@ -250,19 +262,6 @@ var Dragger = /** @class */ (function (_super) {
         _this.self = null;
         return _this;
     }
-    Dragger.prototype.componentDidMount = function () {
-        /**
-         * 这个函数只会调用一次
-         * 这个只是一个临时的解决方案，因为这样会使得元素进行两次刷新
-        */
-        // if (typeof this.props.x === 'number' &&
-        //     typeof this.props.y === 'number') {
-        //     this.setState({
-        //         x: this.props.x,
-        //         y: this.props.y
-        //     })
-        // }
-    };
     Dragger.prototype.componentWillReceiveProps = function (nextProps) {
         /**
          * 外部props 改变的时候更新元素的内部位置
@@ -274,8 +273,8 @@ var Dragger = /** @class */ (function (_super) {
             if (typeof nextProps.x === 'number' &&
                 typeof nextProps.y === 'number') {
                 this.setState({
-                    x: nextProps.x,
                     y: nextProps.y,
+                    x: nextProps.x,
                     lastX: nextProps.x,
                     lastY: nextProps.y,
                     w: nextProps.w,
@@ -287,7 +286,7 @@ var Dragger = /** @class */ (function (_super) {
     Dragger.prototype.render = function () {
         var _this = this;
         var _a = this.state, x = _a.x, y = _a.y, w = _a.w, h = _a.h;
-        var _b = this.props, style = _b.style, className = _b.className, canResize = _b.canResize;
+        var style = this.props.style;
         if (!this.props.isUserMove) {
             /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
             x = this.props.x ? this.props.x : 0;
@@ -302,12 +301,7 @@ var Dragger = /** @class */ (function (_super) {
             w = w === 0 ? style.width : w;
             h = h === 0 ? style.height : h;
         }
-        var _c = this.mixin(), dragMix = _c.dragMix, resizeMix = _c.resizeMix;
-        /**主要是为了让用户定义自己的className去修改css */
-        // const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
-        resizeMix;
-        canResize;
-        className;
+        var _b = this.mixin(), dragMix = _b.dragMix, resizeMix = _b.resizeMix;
         var provided = {
             style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }),
             ref: function (node) { return _this.Ref = node; }
@@ -325,20 +319,3 @@ var Dragger = /** @class */ (function (_super) {
     return Dragger;
 }(React.Component));
 export { Dragger };
-// return (
-//     <div className={`${fixedClassName}WrapDragger`}
-//         ref={'dragger'}
-//     >
-//         {this.props.children(provided)}
-//         {canResize !== false ?
-//             <span
-//                 {...resizeMix}
-//                 style={{
-//                     position: 'absolute',
-//                     width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
-//                     borderRight: '2px solid rgba(15,15,15,0.2)',
-//                     borderBottom: '2px solid rgba(15,15,15,0.2)'
-//                 }}
-//             /> : null}
-//     </div>
-// )