Merge pull request #129 from rcaferati/fix/safari-onpress

Fix ios on-abort-press

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-button",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "description": "Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons",
   "main": "dist/index",
   "types": "dist/src/index.d.ts",
@@ -100,7 +100,7 @@
     "javascript"
   ],
   "dependencies": {
-    "web-animation-club": "^1.0.0"
+    "@rcaferati/wac": "^1.0.0"
   },
   "loki": {
     "configurations": {

src/components/AwesomeButton/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 // @ts-ignore
-import { setCssEndEvent } from 'web-animation-club';
+import { setCssEndEvent } from '@rcaferati/wac';
 import {
   classToModules,
   getClassName,
@@ -264,14 +264,14 @@ const AwesomeButton = ({
     if (IS_TOUCH) {
       events.onTouchStart = (event: React.TouchEvent) => {
         onMouseDown && onMouseDown(event);
-        touchScreen.current = event?.changedTouches?.[0]?.screenY;
+        touchScreen.current = event?.changedTouches?.[0]?.clientY;
         pressIn(event);
       };
       events.onTouchEnd = (event: React.TouchEvent) => {
         onMouseUp && onMouseUp(event);
         const diff =
-          touchScreen.current && event?.changedTouches?.[0]?.screenY
-            ? Math.abs(touchScreen.current - event.changedTouches[0].screenY)
+          touchScreen.current && event?.changedTouches?.[0]?.clientY
+            ? Math.abs(touchScreen.current - event.changedTouches[0].clientY)
             : 0;
         if (diff > button.current.offsetHeight) {
           clearPress({ force: true });

src/components/AwesomeButtonProgress/index.tsx

@@ -4,7 +4,7 @@ import {
   beforeFutureCssLayout as frameThrower,
   setCssEndEvent,
   // @ts-ignore
-} from 'web-animation-club';
+} from '@rcaferati/wac';
 import AwesomeButton, { ButtonType } from '../AwesomeButton';
 import { getClassName } from '../../helpers/components';
 

src/components/AwesomeButtonSocial/index.tsx

@@ -3,8 +3,7 @@ import AwesomeButton, { ButtonType } from '../AwesomeButton/index';
 import Sharer, { isMobile } from './sharer';
 import getIcon from './icons';
 
-const ICON_HEIGHT = 23;
-const ICON_WIDTH = 30;
+const ICON_SIZE = 24;
 
 type SharerType = {
   image?: string;
@@ -122,8 +121,8 @@ const AwesomeButtonSocial = ({
     }
     return getIcon({
       type,
-      width: icon === true ? ICON_WIDTH : icon.width || ICON_WIDTH,
-      height: icon === true ? ICON_HEIGHT : icon.height || ICON_HEIGHT,
+      width: icon === true ? ICON_SIZE : icon.width || ICON_SIZE,
+      height: icon === true ? ICON_SIZE : icon.height || ICON_SIZE,
       color: extra.disabled ? 'rgba(255,255,255,0.35)' : '#FFF',
     });
   };

src/helpers/components.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { setCssEndEvent } from 'web-animation-club';
+import { setCssEndEvent } from '@rcaferati/wac';
 
 const POSITION_STATES = ['middle', 'left', 'right'];