重构dragger完毕

src/NormalLayout/index.tsx

@@ -1,5 +1,5 @@
 import *as React from 'react';
-import { Dragact, DragactLayoutItem } from '../lib/dragact'
+import { Dragact, DragactLayoutItem, GridItemProvided } from '../lib/dragact'
 import { Words } from './largedata'
 import './index.css';
 
@@ -23,11 +23,18 @@ const fakeData = () => {
 
 const Card = (props: any) => {
     const item: CardItem = props.item;
-    const isDragging: Boolean = props.isDragging;
+    const provided: any = props.provided;
+    console.log(...provided.draggerProps)
     return (
         <div
             className='layout-Item'
-            style={{ background: `${isDragging ? '#eaff8f' : 'white'}` }}>
+            {...provided.draggerProps}
+            style={{
+                ...provided.draggerProps.style,
+                background: `${provided.isDragging ? '#eaff8f' : 'white'}`
+            }}
+            {...provided.handle}
+        >
             <div
                 style={{ padding: 5, textAlign: 'center', color: '#595959' }}
             >
@@ -35,6 +42,15 @@ const Card = (props: any) => {
                 <div style={{ borderBottom: '1px solid rgba(120,120,120,0.1)' }} />
                 {item.content}
             </div>
+            <span
+                {...provided.resizerProps}
+                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)'
+                }}
+            />
         </div>
     )
 }
@@ -69,10 +85,10 @@ export class LayoutDemo extends React.Component<{}, {}> {
                             background: '#003A8C'
                         }}
                     >
-                        {(item: DragactLayoutItem, isDragging: Boolean) => {
+                        {(item: DragactLayoutItem, provided: GridItemProvided) => {
                             return <Card
                                 item={item}
-                                isDragging={isDragging}
+                                provided={provided}
                             />
                         }}
                     </Dragact>

src/lib/dragact.tsx

@@ -104,7 +104,12 @@ interface DragactState {
     containerHeight: number
     dragType: 'drag' | 'resize'
     mapLayout: mapLayout | undefined
+}
 
+export interface GridItemProvided {
+    isDragging: Boolean
+    handle: { id: 'dragact-handle' };
+    draggerProps: any;
 }
 
 export class Dragact extends React.Component<DragactProps, DragactState> {
@@ -259,7 +264,9 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 dragType={dragType}
                 canDrag={false}
                 canResize={false}
-            />
+            >
+                {(p: any, resizerProps: any) => <div {...p} />}
+            </GridItem>
         )
     }
 
@@ -324,6 +331,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         if (mapLayout) {
             const renderItem = layoutItemForkey(mapLayout, child.key);
             if (!padding) padding = 0;
+
             return (
                 <GridItem
                     {...renderItem}
@@ -343,7 +351,12 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     dragType={dragType}
                     key={child.key}
                 >
-                    {this.props.children(child, renderItem.isUserMove)}
+                    {(GridItemProvided, resizerProps) => this.props.children(child, {
+                        isDragging: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false,
+                        handle: { id: 'dragact-handle' },
+                        draggerProps: GridItemProvided,
+                        resizerProps
+                    })}
                 </GridItem >
             )
         }

src/lib/dragger/index.tsx

@@ -64,11 +64,15 @@ interface DraggerProps {
     canDrag?: Boolean;
 
     canResize?: Boolean;
+
+    children: (provided: any, resizeMix: any) => any;
 }
 
+
 export class Dragger extends React.Component<DraggerProps, {}> {
     parent: any;
     self: any;
+    Ref: any;
 
     constructor(props: DraggerProps) {
         super(props)
@@ -187,7 +191,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
          * 调整手感 
          * 无论是向上移动还是向下移动，全部都是根据重力中心
          * */
-        const height = (this.refs['dragger'] as HTMLDivElement).getClientRects()[0].height;
+        const height = (this.Ref as HTMLDivElement).getClientRects()[0].height;
         const upNdown = this.state.y - deltaY;
         const fixY = deltaY + (upNdown >= 0 ? 0 : height / 2);
         /**移动时回调，用于外部控制 */
@@ -203,9 +207,9 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
         doc.body.style.userSelect = 'none'
 
-        if (this.props.handle) {
-            if (event.target.id !== 'dragact-handle') return
-        }
+
+        // if (event.target.id !== 'dragact-handle') return
+
 
         /**
          * 把监听事件的回掉函数，绑定在document上
@@ -416,31 +420,43 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         const { dragMix, resizeMix } = this.mixin();
 
         /**主要是为了让用户定义自己的className去修改css */
-        const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
-        return (
-            <div className={`${fixedClassName}WrapDragger`}
-                ref={'dragger'}
-                style={{
-                    ...style,
-                    touchAction: 'none!important',
-                    transform: `translate(${x}px,${y}px)`,
-                    width: w,
-                    height: h,
-                }}
-                {...dragMix}
-            >
-                {this.props.children ? React.Children.only(this.props.children) : null}
-                {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>
-        )
+        // const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
+        resizeMix;
+        canResize;
+        className;
+
+
+        const provided = {
+            ...dragMix,
+            style: {
+                ...style,
+                touchAction: 'none!important',
+                transform: `translate(${x}px,${y}px)`,
+                width: w,
+                height: h,
+            },
+            ref: (node: any) => this.Ref = node
+        }
+
+        return this.props.children(provided, resizeMix)
     }
 }
+
+
+// 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>
+// )

src/lib/gridItem.tsx

@@ -46,6 +46,8 @@ export interface GridItemProps {
     canDrag?: Boolean
 
     canResize?: Boolean
+
+    children: (provided: any,resizerProps:any) => any;
 }
 
 export interface GridItemEvent {
@@ -205,6 +207,7 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
         const { w, h, style, bounds, GridX, GridY, handle, canDrag, canResize } = this.props
         const { x, y } = this.calGridItemPosition(GridX, GridY)
         const { wPx, hPx } = this.calWHtoPx(w, h);
+        console.log(this.props.children)
         return (
             <Dragger
                 style={{
@@ -231,7 +234,7 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
                 canDrag={canDrag}
                 canResize={canResize}
             >
-                {this.props.children}
+                {(provided,resizerProps) =>this.props.children(provided,resizerProps)}
             </Dragger>
         )
     }