修改dragact lint

dist/src/lib/dragger/index.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 { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds } from '../utils';
 var doc = document;
 var Dragger = /** @class */ (function (_super) {
@@ -55,14 +55,20 @@ var Dragger = /** @class */ (function (_super) {
                 deltaY = event.clientY - _this.state.originY + lastY;
             }
             else {
-                deltaX = event.touches[0].clientX - _this.state.originX + lastX;
-                deltaY = event.touches[0].clientY - _this.state.originY + lastY;
+                deltaX =
+                    event.touches[0].clientX -
+                        _this.state.originX +
+                        lastX;
+                deltaY =
+                    event.touches[0].clientY -
+                        _this.state.originY +
+                        lastY;
             }
             var bounds = _this.props.bounds;
             if (bounds) {
                 /**
-                * 如果用户指定一个边界，那么在这里处理
-                */
+                 * 如果用户指定一个边界，那么在这里处理
+                 */
                 var NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
                 /**
                  * 网格式移动范围设定，永远移动 n 的倍数
@@ -75,12 +81,22 @@ var Dragger = /** @class */ (function (_super) {
                 }
                 if (_this.props.bounds === 'parent') {
                     NewBounds = {
-                        left: int(_this.parent.style.paddingLeft) + int(_this.self.style.marginLeft) - _this.self.offsetLeft,
-                        top: int(_this.parent.style.paddingTop) + int(_this.self.style.marginTop) - _this.self.offsetTop,
-                        right: innerWidth(_this.parent) - outerWidth(_this.self) - _this.self.offsetLeft +
-                            int(_this.parent.style.paddingRight) - int(_this.self.style.marginRight),
-                        bottom: innerHeight(_this.parent) - outerHeight(_this.self) - _this.self.offsetTop +
-                            int(_this.parent.style.paddingBottom) - int(_this.self.style.marginBottom)
+                        left: int(_this.parent.style.paddingLeft) +
+                            int(_this.self.style.marginLeft) -
+                            _this.self.offsetLeft,
+                        top: int(_this.parent.style.paddingTop) +
+                            int(_this.self.style.marginTop) -
+                            _this.self.offsetTop,
+                        right: innerWidth(_this.parent) -
+                            outerWidth(_this.self) -
+                            _this.self.offsetLeft +
+                            int(_this.parent.style.paddingRight) -
+                            int(_this.self.style.marginRight),
+                        bottom: innerHeight(_this.parent) -
+                            outerHeight(_this.self) -
+                            _this.self.offsetTop +
+                            int(_this.parent.style.paddingBottom) -
+                            int(_this.self.style.marginBottom)
                     };
                 }
                 /**
@@ -151,7 +167,8 @@ var Dragger = /** @class */ (function (_super) {
                  */
                 _this.self = event.currentTarget;
             }
-            _this.props.onDragStart && _this.props.onDragStart(_this.state.x, _this.state.y);
+            _this.props.onDragStart &&
+                _this.props.onDragStart(_this.state.x, _this.state.y);
             var originX, originY;
             if (event.type.indexOf('mouse') >= 0) {
                 originX = event.clientX;
@@ -187,7 +204,8 @@ var Dragger = /** @class */ (function (_super) {
                     zIndex: 1
                 });
             }
-            _this.props.onDragEnd && _this.props.onDragEnd(event, _this.state.x, _this.state.y);
+            _this.props.onDragEnd &&
+                _this.props.onDragEnd(event, _this.state.x, _this.state.y);
         };
         _this.onResizeStart = function (event) {
             /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
@@ -197,7 +215,8 @@ var Dragger = /** @class */ (function (_super) {
             var originX, originY;
             originX = event.clientX;
             originY = event.clientY;
-            _this.props.onResizeStart && _this.props.onResizeStart(event, _this.state.w, _this.state.h);
+            _this.props.onResizeStart &&
+                _this.props.onResizeStart(event, _this.state.w, _this.state.h);
             _this.setState({
                 originX: originX,
                 originY: originY,
@@ -217,11 +236,14 @@ var Dragger = /** @class */ (function (_super) {
                 deltaY = event.clientY - _this.state.originY;
             }
             else {
-                deltaX = event.touches[0].clientX - _this.state.originX;
-                deltaY = event.touches[0].clientY - _this.state.originY;
+                deltaX =
+                    event.touches[0].clientX - _this.state.originX;
+                deltaY =
+                    event.touches[0].clientY - _this.state.originY;
             }
             /**移动时回调，用于外部控制 */
-            _this.props.onResizing && _this.props.onResizing(event, _this.state.w, _this.state.h);
+            _this.props.onResizing &&
+                _this.props.onResizing(event, _this.state.w, _this.state.h);
             _this.setState({
                 w: deltaX + _this.state.lastW,
                 h: deltaY + _this.state.lastH
@@ -231,7 +253,8 @@ var Dragger = /** @class */ (function (_super) {
             doc.body.style.userSelect = '';
             doc.removeEventListener('mousemove', _this.onResizing);
             doc.removeEventListener('mouseup', _this.onResizeEnd);
-            _this.props.onResizeEnd && _this.props.onResizeEnd(event, _this.state.w, _this.state.h);
+            _this.props.onResizeEnd &&
+                _this.props.onResizeEnd(event, _this.state.w, _this.state.h);
         };
         _this.movePerFrame = function (delt) {
             _this.setState({
@@ -256,7 +279,8 @@ var Dragger = /** @class */ (function (_super) {
                 onMouseUp: _this.onResizeEnd
             };
             return {
-                dragMix: dragMix, resizeMix: resizeMix
+                dragMix: dragMix,
+                resizeMix: resizeMix
             };
         };
         // this.move = this.move.bind(this)
@@ -313,7 +337,7 @@ var Dragger = /** @class */ (function (_super) {
         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; }
+            ref: function (node) { return (_this.Ref = node); }
         };
         return this.props.children(provided, dragMix, resizeMix);
     };

src/lib/dragact.tsx

@@ -1,26 +1,23 @@
-import * as React from "react";
+import * as React from 'react'
 import GridItem, { GridItemEvent } from './GridItem'
-import { compactLayout } from './util/compact';
-import { getMaxContainerHeight } from './util/sort';
-import { layoutCheck } from './util/collison';
-import { correctLayout } from './util/correction';
-import { stringJoin } from './utils';
-import { layoutItemForkey, syncLayout } from './util/initiate';
-import { DragactProps, DragactState, DragactLayoutItem } from "./dragact-type";
-
-import './style.css';
+import { compactLayout } from './util/compact'
+import { getMaxContainerHeight } from './util/sort'
+import { layoutCheck } from './util/collison'
+import { correctLayout } from './util/correction'
+import { stringJoin } from './utils'
+import { layoutItemForkey, syncLayout } from './util/initiate'
+import { DragactProps, DragactState, DragactLayoutItem } from './dragact-type'
 
+import './style.css'
 
 export class Dragact extends React.Component<DragactProps, DragactState> {
-
     constructor(props: DragactProps) {
         super(props)
         this.onDrag = this.onDrag.bind(this)
         this.onDragStart = this.onDragStart.bind(this)
         this.onDragEnd = this.onDragEnd.bind(this)
 
-        const layout = props.layout;
-
+        const layout = props.layout
 
         this.state = {
             GridXMoving: 0,
@@ -51,33 +48,57 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 dragType: 'resize'
             })
         }
-        this.props.onDragStart && this.props.onDragStart(layoutItem, this.state.layout);
+        this.props.onDragStart &&
+            this.props.onDragStart(layoutItem, this.state.layout)
     }
 
     onResizing = (layoutItem: GridItemEvent) => {
+        const newLayout = layoutCheck(
+            this.state.layout,
+            layoutItem,
+            layoutItem.UniqueKey + '',
+            layoutItem.UniqueKey + '',
+            0
+        )
 
-        const newLayout = layoutCheck(this.state.layout, layoutItem, layoutItem.UniqueKey + '', layoutItem.UniqueKey + '', 0);
-
-        const { compacted, mapLayout } = compactLayout(newLayout, layoutItem, this.state.mapLayout)
+        const { compacted, mapLayout } = compactLayout(
+            newLayout,
+            layoutItem,
+            this.state.mapLayout
+        )
 
         this.setState({
             layout: compacted,
             wMoving: layoutItem.w,
             hMoving: layoutItem.h,
             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
+            )
         })
     }
 
     onResizeEnd = (layoutItem: GridItemEvent) => {
-        const { compacted, mapLayout } = compactLayout(this.state.layout, undefined, this.state.mapLayout)
+        const { compacted, mapLayout } = compactLayout(
+            this.state.layout,
+            undefined,
+            this.state.mapLayout
+        )
         this.setState({
             placeholderShow: false,
             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
+            )
         })
-        this.props.onDragEnd && this.props.onDragEnd(layoutItem, compacted);
+        this.props.onDragEnd && this.props.onDragEnd(layoutItem, compacted)
     }
 
     onDragStart(bundles: GridItemEvent) {
@@ -94,44 +115,76 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 dragType: 'drag'
             })
         }
-        this.props.onDragStart && this.props.onDragStart(bundles, this.state.layout);
+        this.props.onDragStart &&
+            this.props.onDragStart(bundles, this.state.layout)
     }
 
     onDrag(layoutItem: GridItemEvent) {
-        const { GridY, UniqueKey } = layoutItem;
-        const moving = GridY - this.state.GridYMoving;
-
-        const newLayout = layoutCheck(this.state.layout, layoutItem, UniqueKey + '', UniqueKey + ''/*用户移动方块的key */, moving);
-        const { compacted, mapLayout } = compactLayout(newLayout, layoutItem, this.state.mapLayout);
+        const { GridY, UniqueKey } = layoutItem
+        const moving = GridY - this.state.GridYMoving
+
+        const newLayout = layoutCheck(
+            this.state.layout,
+            layoutItem,
+            UniqueKey + '',
+            UniqueKey + '' /*用户移动方块的key */,
+            moving
+        )
+        const { compacted, mapLayout } = compactLayout(
+            newLayout,
+            layoutItem,
+            this.state.mapLayout
+        )
         this.setState({
             GridXMoving: layoutItem.GridX,
             GridYMoving: layoutItem.GridY,
             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
+            )
         })
-        this.props.onDrag && this.props.onDrag(layoutItem, compacted);
+        this.props.onDrag && this.props.onDrag(layoutItem, compacted)
     }
 
     onDragEnd(layoutItem: GridItemEvent) {
-        const { compacted, mapLayout } = compactLayout(this.state.layout, undefined, this.state.mapLayout);
+        const { compacted, mapLayout } = compactLayout(
+            this.state.layout,
+            undefined,
+            this.state.mapLayout
+        )
 
         this.setState({
             placeholderShow: false,
             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
+            )
         })
-        this.props.onDragEnd && this.props.onDragEnd(layoutItem, compacted);
+        this.props.onDragEnd && this.props.onDragEnd(layoutItem, compacted)
     }
 
     renderPlaceholder() {
         if (!this.state.placeholderShow) return null
         var { col, padding, rowHeight, margin, placeholder, width } = this.props
-        const { GridXMoving, GridYMoving, wMoving, hMoving, placeholderMoving, dragType } = this.state
-
-        if (!placeholder) return null;
-        if (!padding) padding = 0;
+        const {
+            GridXMoving,
+            GridYMoving,
+            wMoving,
+            hMoving,
+            placeholderMoving,
+            dragType
+        } = this.state
+
+        if (!placeholder) return null
+        if (!padding) padding = 0
         return (
             <GridItem
                 margin={margin}
@@ -143,7 +196,11 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 GridY={GridYMoving}
                 w={wMoving}
                 h={hMoving}
-                style={{ background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s ease-out' }}
+                style={{
+                    background: 'rgba(15,15,15,0.3)',
+                    zIndex: dragType === 'drag' ? 1 : 10,
+                    transition: ' all .15s ease-out'
+                }}
                 isUserMove={!placeholderMoving}
                 dragType={dragType}
                 canDrag={false}
@@ -155,75 +212,106 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
 
     componentWillReceiveProps(nextProps: any) {
-        if (this.props.layout.length > nextProps.layout.length) { //remove
-            const mapLayoutCopy = { ...this.state.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 + ''];
+                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) => {
+                const newLayout = this.state.layout.filter(child => {
                     if (child.key + '' !== key + '') return child
                 })
 
-                const { compacted, mapLayout } = compactLayout(newLayout, undefined, this.state.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),
+                    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;
+        } else if (this.props.layout.length < nextProps.layout.length) {
+            //add
+            var item
             for (const idx in nextProps.layout) {
-                const i = nextProps.layout[idx];
+                const i = nextProps.layout[idx]
                 if (this.state.mapLayout && !this.state.mapLayout[i.key + '']) {
-                    item = i;
-                    break;
+                    item = i
+                    break
                 }
             }
             if (item !== void 666) {
-                const dataSet = { ...item, isUserMove: false, key: item.key + '' };
+                const dataSet = {
+                    ...item,
+                    isUserMove: false,
+                    key: item.key + ''
+                }
                 var newLayout = [...this.state.layout, dataSet]
-                const { compacted, mapLayout } = compactLayout(newLayout, undefined, this.state.mapLayout);
+                const { compacted, mapLayout } = compactLayout(
+                    newLayout,
+                    undefined,
+                    this.state.mapLayout
+                )
                 this.setState({
-                    containerHeight: getMaxContainerHeight(compacted,
+                    containerHeight: getMaxContainerHeight(
+                        compacted,
                         this.props.rowHeight,
                         this.props.margin[1],
                         this.state.containerHeight,
-                        false),
+                        false
+                    ),
                     layout: compacted,
                     mapLayout
                 })
             }
         } else {
-            this.recalculateLayout(nextProps.layout, nextProps.col);
+            this.recalculateLayout(nextProps.layout, nextProps.col)
         }
     }
 
     recalculateLayout = (layout: DragactLayoutItem[], col: number) => {
         const corrected = correctLayout(layout, col)
-        const { compacted, mapLayout } = compactLayout(corrected, undefined, undefined);
+        const { compacted, mapLayout } = compactLayout(
+            corrected,
+            undefined,
+            undefined
+        )
         this.setState({
             layout: compacted,
             mapLayout: mapLayout,
-            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight, false)
+            containerHeight: getMaxContainerHeight(
+                compacted,
+                this.props.rowHeight,
+                this.props.margin[1],
+                this.state.containerHeight,
+                false
+            )
         })
     }
 
     componentDidMount() {
         setTimeout(() => {
             this.recalculateLayout(this.state.layout, this.props.col)
-        }, 1);
-
+        }, 1)
     }
 
     getGridItem(child: any, index: number) {
-        const { dragType, mapLayout } = this.state;
-        var { col, padding, rowHeight, margin, width } = this.props;
+        const { dragType, mapLayout } = this.state
+        var { col, padding, rowHeight, margin, width } = this.props
         if (mapLayout) {
-            const renderItem = layoutItemForkey(mapLayout, child.key + '');
-            if (!padding) padding = 0;
+            const renderItem = layoutItemForkey(mapLayout, child.key + '')
+            if (!padding) padding = 0
             return (
                 <GridItem
                     {...renderItem}
@@ -235,7 +323,11 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     onDrag={this.onDrag}
                     onDragStart={this.onDragStart}
                     onDragEnd={this.onDragEnd}
-                    isUserMove={renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false}
+                    isUserMove={
+                        renderItem.isUserMove !== void 666
+                            ? renderItem.isUserMove
+                            : false
+                    }
                     UniqueKey={child.key}
                     onResizing={this.onResizing}
                     onResizeStart={this.onResizeStart}
@@ -243,29 +335,28 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     dragType={dragType}
                     key={child.key}
                 >
-                    {(GridItemProvided, dragHandle, resizeHandle) => this.props.children(child, {
-                        isDragging: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false,
-                        props: GridItemProvided,
-                        dragHandle,
-                        resizeHandle
-                    })}
-                </GridItem >
+                    {(GridItemProvided, dragHandle, resizeHandle) =>
+                        this.props.children(child, {
+                            isDragging:
+                                renderItem.isUserMove !== void 666
+                                    ? renderItem.isUserMove
+                                    : false,
+                            props: GridItemProvided,
+                            dragHandle,
+                            resizeHandle
+                        })
+                    }
+                </GridItem>
             )
         }
     }
 
     render() {
-        const {
-            className,
-            layout,
-            style,
-            width
-        } = this.props;
-        const { containerHeight } = this.state;
+        const { className, layout, style, width } = this.props
+        const { containerHeight } = this.state
 
         return (
             <div
-
                 className={stringJoin('DraggerLayout', className + '')}
                 style={{
                     ...style,
@@ -285,10 +376,9 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
 
     //api
     getLayout() {
-        return this.state.layout;
+        return this.state.layout
     }
 
     //api
-    deleteItem(key: any) {
-    }
+    deleteItem(key: any) {}
 }