Fix flow 0.33.0 errors, add lint to build

Author: STRML

.flowconfig

@@ -6,6 +6,7 @@ lib/
 index.js
 
 [libs]
+interfaces/
 
 [options]
 suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowFixMe.*

.travis.yml

@@ -14,6 +14,7 @@ before_install:
 install:
   - node --version
   - yarn install
+  - npm run lint
 cache:
   directories:
   - $HOME/.yarn-cache

Makefile

@@ -13,8 +13,7 @@ clean:
 	rm -rf dist
 
 lint:
-	# FIXME this is usually global
-	flow check
+	@$(BIN)/flow
 	@$(BIN)/eslint lib/* lib/utils/* specs/*
 
 build: $(LIB) $(MIN)

interfaces/dom.js

@@ -0,0 +1,11 @@
+// Missing in Flow
+declare class SVGElement extends HTMLElement {
+}
+
+// Missing targetTouches
+declare class TouchEvent2 extends TouchEvent {
+  changedTouches: TouchList;
+  targetTouches: TouchList;
+};
+
+declare type MouseTouchEvent = MouseEvent & TouchEvent2;

lib/DraggableCore.es6

@@ -190,7 +190,7 @@ export default class DraggableCore extends React.Component {
     if (this.props.enableUserSelectHack) removeUserSelectStyles(ownerDocument.body);
   }
 
-  handleDragStart: EventHandler<MouseEvent> = (e) => {
+  handleDragStart: EventHandler<MouseTouchEvent> = (e) => {
     // Make it possible to attach event handlers on top of this one.
     this.props.onMouseDown(e);
 
@@ -251,7 +251,7 @@ export default class DraggableCore extends React.Component {
     addEvent(ownerDocument, dragEventFor.stop, this.handleDragStop);
   };
 
-  handleDrag: EventHandler<MouseEvent> = (e) => {
+  handleDrag: EventHandler<MouseTouchEvent> = (e) => {
 
     // Get the current drag point from the event. This is used as the offset.
     const position = getControlPosition(e, this.state.touchIdentifier, this);
@@ -276,10 +276,11 @@ export default class DraggableCore extends React.Component {
     const shouldUpdate = this.props.onDrag(e, coreEvent);
     if (shouldUpdate === false) {
       try {
+        // $FlowIgnore
         this.handleDragStop(new MouseEvent('mouseup'));
       } catch (err) {
         // Old browsers
-        const event = ((document.createEvent('MouseEvents'): any): MouseEvent);
+        const event = ((document.createEvent('MouseEvents'): any): MouseTouchEvent);
         // I see why this insanity was deprecated
         // $FlowIgnore
         event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
@@ -294,7 +295,7 @@ export default class DraggableCore extends React.Component {
     });
   };
 
-  handleDragStop: EventHandler<MouseEvent> = (e) => {
+  handleDragStop: EventHandler<MouseTouchEvent> = (e) => {
     if (!this.state.dragging) return;
 
     const position = getControlPosition(e, this.state.touchIdentifier, this);
@@ -324,27 +325,27 @@ export default class DraggableCore extends React.Component {
     removeEvent(ownerDocument, dragEventFor.stop, this.handleDragStop);
   };
 
-  onMouseDown: EventHandler<MouseEvent> = (e) => {
+  onMouseDown: EventHandler<MouseTouchEvent> = (e) => {
     dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
 
     return this.handleDragStart(e);
   };
 
-  onMouseUp: EventHandler<MouseEvent> = (e) => {
+  onMouseUp: EventHandler<MouseTouchEvent> = (e) => {
     dragEventFor = eventsFor.mouse;
 
     return this.handleDragStop(e);
   };
 
   // Same as onMouseDown (start drag), but now consider this a touch device.
-  onTouchStart: EventHandler<MouseEvent> = (e) => {
+  onTouchStart: EventHandler<MouseTouchEvent> = (e) => {
     // We're on a touch device now, so change the event handlers
     dragEventFor = eventsFor.touch;
 
     return this.handleDragStart(e);
   };
 
-  onTouchEnd: EventHandler<MouseEvent> = (e) => {
+  onTouchEnd: EventHandler<MouseTouchEvent> = (e) => {
     // We're on a touch device now, so change the event handlers
     dragEventFor = eventsFor.touch;
 

lib/utils/domFns.es6

@@ -114,12 +114,12 @@ export function createSVGTransform({x, y}: {x: number, y: number}): string {
   return 'translate(' + x + ',' + y + ')';
 }
 
-export function getTouch(e: MouseEvent, identifier: number): ?{clientX: number, clientY: number} {
+export function getTouch(e: MouseTouchEvent, identifier: number): ?{clientX: number, clientY: number} {
   return (e.targetTouches && findInArray(e.targetTouches, t => identifier === t.identifier)) ||
          (e.changedTouches && findInArray(e.changedTouches, t => identifier === t.identifier));
 }
 
-export function getTouchIdentifier(e: MouseEvent): ?number {
+export function getTouchIdentifier(e: MouseTouchEvent): ?number {
   if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
   if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
 }

lib/utils/positionFns.es6

@@ -65,7 +65,7 @@ export function canDragY(draggable: Draggable): boolean {
 }
 
 // Get {x, y} positions from event.
-export function getControlPosition(e: MouseEvent, touchIdentifier: ?number, draggableCore: DraggableCore): ?ControlPosition {
+export function getControlPosition(e: MouseTouchEvent, touchIdentifier: ?number, draggableCore: DraggableCore): ?ControlPosition {
   const touchObj = typeof touchIdentifier === 'number' ? getTouch(e, touchIdentifier) : null;
   if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch
   const node = ReactDOM.findDOMNode(draggableCore);
@@ -76,8 +76,7 @@ export function getControlPosition(e: MouseEvent, touchIdentifier: ?number, drag
 
 // Create an data object exposed by <DraggableCore>'s events
 export function createCoreData(draggable: DraggableCore, x: number, y: number): DraggableData {
-  // State changes are often (but not always!) async. We want the latest value.
-  const state = draggable._pendingState || draggable.state;
+  const state = draggable.state;
   const isStart = !isNum(state.lastX);
 
   if (isStart) {

lib/utils/shims.es6

@@ -1,6 +1,6 @@
 // @flow
 // @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc
-export function findInArray(array: Array<any>, callback: Function): any {
+export function findInArray(array: Array<any> | TouchList, callback: Function): any {
   for (let i = 0, length = array.length; i < length; i++) {
     if (callback.apply(callback, [array[i], i, array])) return array[i];
   }

lib/utils/types.es6

@@ -1,5 +1,6 @@
 // @flow
 
+// eslint-disable-next-line no-use-before-define
 export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void | false;
 
 export type DraggableData = {

package.json

@@ -39,6 +39,7 @@
     "babel-preset-stage-1": "^6.5.0",
     "eslint": "^3.1.1",
     "eslint-plugin-react": "^5.2.2",
+    "flow-bin": "^0.33.0",
     "jasmine-core": "^2.4.1",
     "json-loader": "^0.5.4",
     "karma": "^1.1.1",