Dragscroll.jsx overhaul into functional component

src/DragScroll.jsx

@@ -1,89 +1,60 @@
-/**
- * Created by joe on 16/9/2.
- */
-
-import React from "react";
-
-export default class DragScroll extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: props.dataSource,
-      dragging: false
-    };
-  }
-
-  render() {
-    let sytle = null;
-    if (this.props.height && this.props.width) {
-      sytle = {style: {height: this.props.height, width: this.props.width, overflow: 'auto'}};
+import React, { useEffect, useState, useCallback, useRef, useMemo } from "react";
+
+export default function DragScroll({ className, children, mobileDisabled = true }) {
+
+    const [dragging, setDragging] = useState(false);
+    const [lastPosition, setPosition] = useState({ x: 0, y: 0 });
+    const container = useRef(null);
+
+    const isMobile = useMemo(() => {
+        return isDeviceMobile();
+    }, []);
+
+    const mouseUp = useCallback(() => {
+        if (dragging) {
+            setDragging(false);
+        }
+    }, [dragging]);
+
+    const mouseDown = useCallback(e => {
+        if (dragging === false) {
+            setDragging(true);
+            setPosition({ x: e.clientX, y: e.clientY });
+        }
+    }, [dragging]);
+
+    const mouseMove = useCallback(e => {
+        if (dragging) {
+            container.current.scrollLeft -= (-lastPosition.x + e.clientX);
+            container.current.scrollTop -= (-lastPosition.y + e.clientY);
+            setPosition({ x: e.clientX, y: e.clientY });
+        }
+    }, [container, dragging, lastPosition]);
+
+    useEffect(() => {
+        window.addEventListener("mouseup", mouseUp, false);
+        return () => {
+            window.removeEventListener("mouseup", mouseUp, false);
+        }
+    }, [mouseUp]);
+
+
+    if (mobileDisabled && isMobile) {
+        return <div className={className}>{children}</div>
     }
-    return <div className={this.props.className} {...sytle}
-                onMouseUp={this.mouseUpHandle.bind(this)}
-                onMouseMove={this.mouseMoveHandle.bind(this)}
-                ref="container">
-      {this.props.children && this.renderChildren(this.props.children)}
-    </div>;
-  }
 
-  componentDidMount() {
-    window.addEventListener('mouseup', this.mouseUpHandle.bind(this));
-    window.addEventListener('mousemove', this.mouseMoveHandle.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('mouseup', this.mouseUpHandle.bind(this));
-    window.removeEventListener('mousemove', this.mouseMoveHandle.bind(this));
-  }
-
-  mouseUpHandle(e) {
-    if (this.state.dragging) {
-      this.state.dragging = false;
-      this.setState(this.state);
-    }
-  }
+    return (
+        <div className={className}
+            onMouseDown={mouseDown}
+            onMouseMove={mouseMove}
+            ref={container}>
+            {children}
+        </div>
+    );
 
-  mouseDownHandle(e) {
-    if (!this.state.dragging) {
-      this.state.dragging = true;
-      this.setState(this.state);
-      this.lastClientX = e.clientX;
-      this.lastClientY = e.clientY;
-      e.preventDefault();
-    }
-  }
-
-  mouseMoveHandle(e) {
-    if (this.state.dragging) {
-      this.refs.container.scrollLeft -=
-        (-this.lastClientX + (this.lastClientX = e.clientX));
-      this.refs.container.scrollTop -=
-        (-this.lastClientY + (this.lastClientY = e.clientY));
-    }
-  }
+}
 
-  renderChildren(dom, type) {
-    if (this.isArray(dom)) {
-      return dom.map((item, index) => {
-        return React.cloneElement(item, {
-          key: item.key || index,
-          onMouseUp: this.mouseUpHandle.bind(this),
-          onMouseDown: this.mouseDownHandle.bind(this)
-        });
-      });
-    } else if ('object' == typeof dom) {
-      return React.cloneElement(dom, {
-        onMouseUp: this.mouseUpHandle.bind(this),
-        onMouseDown: this.mouseDownHandle.bind(this)
-      });
-    }
-  }
 
-  isArray(object){
-    return  object && typeof object==='object' &&
-      typeof object.length==='number' &&
-      typeof object.splice==='function' &&
-      //判断length属性是否是可枚举的 对于数组 将得到false
-      !(object.propertyIsEnumerable('length'));
-  }
+function isDeviceMobile() {
+    return window.matchMedia("(max-width: 992px)").matches;
 }