@khanacademy/wonder-blocks-core - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

components/clickable-behavior.js

@@ -117,6 +117,7 @@ // @flow
     onClick: (e: SyntheticMouseEvent<>) => void,
-    onMouseEnter: () => void,
+    onMouseEnter: (e: SyntheticMouseEvent<>) => void,
     onMouseLeave: () => void,
     onMouseDown: () => void,
     onMouseUp: (e: SyntheticMouseEvent<>) => void,
+    onDragStart: (e: SyntheticMouseEvent<>) => void,
     onTouchStart: () => void,
@@ -138,2 +139,3 @@ onTouchEnd: () => void,
     onMouseUp: () => void 0,
+    onDragStart: () => void 0,
     onTouchStart: () => void 0,
@@ -182,3 +184,3 @@ onTouchEnd: () => void 0,
  * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
+ * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
  * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
@@ -242,2 +244,3 @@ * that has the ClickableBehavior. You cannot override these handlers without
     enterClick: boolean;
+    dragging: boolean;
 
@@ -264,2 +267,3 @@ static defaultProps = {
         this.enterClick = false;
+        this.dragging = false;
     }
@@ -276,4 +280,8 @@
 
-    handleMouseEnter = () => {
-        if (!this.waitingForClick) {
+    handleMouseEnter = (e: SyntheticMouseEvent<>) => {
+        // When the left button is pressed already, we want it to be pressed
+        if (e.buttons === 1) {
+            this.dragging = true;
+            this.setState({pressed: true});
+        } else if (!this.waitingForClick) {
             this.setState({hovered: true});
@@ -285,3 +293,4 @@ }
         if (!this.waitingForClick) {
-            this.setState({hovered: false, pressed: false});
+            this.dragging = false;
+            this.setState({hovered: false, pressed: false, focused: false});
         }
@@ -295,5 +304,14 @@ };
     handleMouseUp = (e: SyntheticMouseEvent<>) => {
+        if (this.dragging) {
+            this.dragging = false;
+            this.handleClick(e);
+        }
         this.setState({pressed: false, focused: false});
     };
 
+    handleDragStart = (e: SyntheticMouseEvent<>) => {
+        this.dragging = true;
+        e.preventDefault();
+    };
+
     handleTouchStart = () => {
@@ -389,2 +407,3 @@ this.setState({pressed: true});
                   onMouseUp: this.handleMouseUp,
+                  onDragStart: this.handleDragStart,
                   onTouchStart: this.handleTouchStart,
@@ -391,0 +410,0 @@ onTouchEnd: this.handleTouchEnd,

components/clickable-behavior.test.js

@@ -50,3 +50,5 @@ // @flow
         expect(button.state("hovered")).toEqual(false);
-        button.simulate("mouseenter");
+        button.simulate("mouseenter", {
+            buttons: 0,
+        });
         expect(button.state("hovered")).toEqual(true);
@@ -57,2 +59,26 @@ button.simulate("mouseleave");
 
+    it("changes only pressed state on mouse enter/leave while dragging", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, handlers) => {
+                    return <button {...handlers}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("mousedown");
+        button.simulate("dragstart", {preventDefault: jest.fn()});
+        expect(button.state("pressed")).toEqual(true);
+
+        button.simulate("mouseleave");
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("mouseenter", {
+            buttons: 1,
+        });
+        expect(button.state("pressed")).toEqual(true);
+    });
+
     it("changes pressed state on mouse down/up", () => {
@@ -247,3 +273,5 @@ const onClick = jest.fn();
         expect(button.state("hovered")).toEqual(false);
-        button.simulate("mouseenter");
+        button.simulate("mouseenter", {
+            buttons: 0,
+        });
         expect(button.state("hovered")).toEqual(false);
@@ -517,2 +545,30 @@ button.simulate("mouseleave");
 
+    it("calls onClick on mouseup when the mouse was dragging", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, handlers) => {
+                    return <button {...handlers}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+
+        button.simulate("mousedown");
+        button.simulate("dragstart", {preventDefault: jest.fn()});
+        button.simulate("mouseleave");
+        button.simulate("mouseup");
+        expect(onClick).toHaveBeenCalledTimes(0);
+
+        button.simulate("mousedown");
+        button.simulate("dragstart", {preventDefault: jest.fn()});
+        button.simulate("mouseup");
+        expect(onClick).toHaveBeenCalledTimes(1);
+
+        button.simulate("mouseenter", {
+            buttons: 1,
+        });
+        button.simulate("mouseup");
+        expect(onClick).toHaveBeenCalledTimes(2);
+    });
+
     it("doesn't trigger enter key when browser doesn't stop the click", () => {
@@ -519,0 +575,0 @@ const onClick = jest.fn();

dist/es/index.js

@@ -170,2 +170,3 @@ import React__default, { Component, createElement, Fragment, createContext } from 'react';
   onMouseUp: () => void 0,
+  onDragStart: () => void 0,
   onTouchStart: () => void 0,
@@ -211,3 +212,3 @@ onTouchEnd: () => void 0,
  * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
+ * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
  * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
@@ -287,2 +288,4 @@ * that has the ClickableBehavior. You cannot override these handlers without
 
+    _defineProperty(this, "dragging", void 0);
+
     _defineProperty(this, "handleClick", e => {
@@ -297,5 +300,11 @@ if (this.enterClick) {
 
-    _defineProperty(this, "handleMouseEnter", () => {
-      if (!this.waitingForClick) {
+    _defineProperty(this, "handleMouseEnter", e => {
+      // When the left button is pressed already, we want it to be pressed
+      if (e.buttons === 1) {
+        this.dragging = true;
         this.setState({
+          pressed: true
+        });
+      } else if (!this.waitingForClick) {
+        this.setState({
           hovered: true
@@ -308,5 +317,7 @@ });
       if (!this.waitingForClick) {
+        this.dragging = false;
         this.setState({
           hovered: false,
-          pressed: false
+          pressed: false,
+          focused: false
         });
@@ -323,2 +334,7 @@ }
     _defineProperty(this, "handleMouseUp", e => {
+      if (this.dragging) {
+        this.dragging = false;
+        this.handleClick(e);
+      }
+
       this.setState({
@@ -330,2 +346,7 @@ pressed: false,
 
+    _defineProperty(this, "handleDragStart", e => {
+      this.dragging = true;
+      e.preventDefault();
+    });
+
     _defineProperty(this, "handleTouchStart", () => {
@@ -434,2 +455,3 @@ this.setState({
     this.enterClick = false;
+    this.dragging = false;
   }
@@ -444,2 +466,3 @@
       onMouseUp: this.handleMouseUp,
+      onDragStart: this.handleDragStart,
       onTouchStart: this.handleTouchStart,
@@ -446,0 +469,0 @@ onTouchEnd: this.handleTouchEnd,

dist/index.js

@@ -293,2 +293,3 @@ module.exports =
   onMouseUp: () => void 0,
+  onDragStart: () => void 0,
   onTouchStart: () => void 0,
@@ -334,3 +335,3 @@ onTouchEnd: () => void 0,
  * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
+ * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
  * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
@@ -410,2 +411,4 @@ * that has the ClickableBehavior. You cannot override these handlers without
 
+    _defineProperty(this, "dragging", void 0);
+
     _defineProperty(this, "handleClick", e => {
@@ -420,5 +423,11 @@ if (this.enterClick) {
 
-    _defineProperty(this, "handleMouseEnter", () => {
-      if (!this.waitingForClick) {
+    _defineProperty(this, "handleMouseEnter", e => {
+      // When the left button is pressed already, we want it to be pressed
+      if (e.buttons === 1) {
+        this.dragging = true;
         this.setState({
+          pressed: true
+        });
+      } else if (!this.waitingForClick) {
+        this.setState({
           hovered: true
@@ -431,5 +440,7 @@ });
       if (!this.waitingForClick) {
+        this.dragging = false;
         this.setState({
           hovered: false,
-          pressed: false
+          pressed: false,
+          focused: false
         });
@@ -446,2 +457,7 @@ }
     _defineProperty(this, "handleMouseUp", e => {
+      if (this.dragging) {
+        this.dragging = false;
+        this.handleClick(e);
+      }
+
       this.setState({
@@ -453,2 +469,7 @@ pressed: false,
 
+    _defineProperty(this, "handleDragStart", e => {
+      this.dragging = true;
+      e.preventDefault();
+    });
+
     _defineProperty(this, "handleTouchStart", () => {
@@ -557,2 +578,3 @@ this.setState({
     this.enterClick = false;
+    this.dragging = false;
   }
@@ -567,2 +589,3 @@
       onMouseUp: this.handleMouseUp,
+      onDragStart: this.handleDragStart,
       onTouchStart: this.handleTouchStart,
@@ -569,0 +592,0 @@ onTouchEnd: this.handleTouchEnd,

package.json

 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "design": "v1",
@@ -16,3 +16,3 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-spacing": "^2.0.8"
+    "@khanacademy/wonder-blocks-spacing": "^2.0.9"
   },
@@ -19,0 +19,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

267802

increased by1.5%

Lines of code

5948

increased by1.81%

Dependency changes

• Updated@khanacademy/wonder-blocks-spacing@^2.0.9