Version 1.0.2

- The button works with mouse and touch events

Author: iatraviscox

build.gradle

@@ -24,7 +24,7 @@ plugins {
     id "base"
 }
 
-version "1.0.1"
+version "1.0.2"
 group "org.imdc"
 
 

gateway/src/main/resources/mounted/Components.js

@@ -40,6 +40,7 @@ export class Button extends React.Component<ButtonProps & React.DetailedHTMLProp
         return (
             <button
                 {...remainingProps}
+                draggable={false}
                 disabled={disabled}
                 className={classes}
                 ref={forwardRef}

web/packages/client/typescript/components/Button.tsx

@@ -142,27 +142,31 @@ export class MomentaryButton extends Component<ComponentProps<MomentaryButtonPro
     }
 
     @bind
-    handleMouseDown() {
+    handleMouseDown(e) {
         const {
             enabled
         } = this.props.props;
 
         if (enabled && !this.state.isActive) {
             this.mouseInitiated = true;
             this.setOn();
+            window.addEventListener("pointerup", this.handleMouseUp);
             window.addEventListener("mouseup", this.handleMouseUp);
+            window.addEventListener("touchend", this.handleMouseUp);
         }
     }
 
     @bind
-    handleMouseUp() {
+    handleMouseUp(e) {
         const {
             enabled,
             onTime
         } = this.props.props;
 
         if (enabled && this.mouseInitiated) {
+            window.removeEventListener("pointerup", this.handleMouseUp);
             window.removeEventListener("mouseup", this.handleMouseUp);
+            window.removeEventListener("touchend", this.handleMouseUp);
 
             const timeLeft = onTime - (Date.now() - this.pressedTime);
             if (onTime == 0 || timeLeft <= 0) {
@@ -218,8 +222,8 @@ export class MomentaryButton extends Component<ComponentProps<MomentaryButtonPro
                     { ...styleProps }
                     disabled={!enabled}
                     secondary={false}
-                    onMouseUp={this.handleMouseUp}
-                    onMouseDown={this.handleMouseDown}
+                    onPointerUp={this.handleMouseUp}
+                    onPointerDown={this.handleMouseDown}
                 >
                     { textElement }
                     { iconElement }