fix: safari onpress issue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-button",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "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",

src/components/AwesomeButton/index.tsx

@@ -31,7 +31,7 @@ export type ButtonType = {
   extra?: React.ReactNode;
   href?: string;
   moveEvents?: Boolean;
-  onMouseDown?: (event: React.MouseEvent | React.TouchEvent) => void;
+  onMouseDown?: any;
   onMouseUp?: (event: React.MouseEvent | React.TouchEvent) => void;
   onPress?: (event: React.MouseEvent | React.TouchEvent) => void;
   onPressed?: (event: React.MouseEvent | React.TouchEvent) => void;
@@ -81,8 +81,9 @@ const AwesomeButton = ({
   const container = React.useRef(null);
   const child = React.useRef(null);
   const over = React.useRef(false);
-  const pressed = React.useRef(null);
+  const pressed = React.useRef(0);
   const timer = React.useRef(null);
+  const touchScreen = React.useRef(0);
   const RenderComponent: React.FunctionComponent =
     element || (href ? Anchor : Button);
 
@@ -142,16 +143,7 @@ const AwesomeButton = ({
     ]);
 
   const checkActive = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-
-    if (active === true) {
-      setPressPosition(`${rootElement}--active`);
-      return;
-    }
-
-    if (pressPosition !== null) {
+    if (pressPosition !== null && active === false) {
       clearPress({ force: true });
     }
   };
@@ -171,28 +163,24 @@ const AwesomeButton = ({
   React.useEffect(checkDisabled, [placeholder, children, disabled]);
 
   const clearPressCallback = () => {
-    // leave false e force false não é release;
-    // mas teria que evitar;
+    pressed.current = 0;
     onReleased && onReleased(container.current);
   };
 
   const clearPress = ({ force = false, leave = false }: any = {}) => {
-    // remove supperficial mouse-move
     toggleMoveClasses({
       element: container.current,
       root: rootElement,
       cssModule,
     });
 
-    let nextPressPosition = active && !force ? `${rootElement}--active` : null;
+    // soft clear-press
+    if (leave === true && pressed.current === 0) {
+      return;
+    }
 
-    // não tem active;
-    // leave === true é só no mouse leave;
-    // leave === false, em todos os outros;
-    // if (pressPosition === null && leave === false) {
-    // configura o evento;
+    let nextPressPosition = active && !force ? `${rootElement}--active` : null;
 
-    // E SE TIVER PRESSIONANDO?
     if (content?.current?.clearCssEvent) {
       content.current.clearCssEvent();
     }
@@ -203,12 +191,7 @@ const AwesomeButton = ({
       }).then(clearPressCallback);
     }
 
-    // if (nextPressPosition === null && over.current === true) {
-    //   nextPressPosition = `${rootElement}--middle`;
-    // }
-
     setPressPosition(nextPressPosition);
-    // setPressPosition(null);
   };
 
   const createRipple = (event: any) => {
@@ -221,20 +204,23 @@ const AwesomeButton = ({
   };
 
   const pressIn = (event: React.MouseEvent | React.TouchEvent) => {
-    if (isDisabled === true || active === true) {
+    if (isDisabled === true || pressed.current === 2) {
       return;
     }
-    pressed.current = new Date().getTime();
+    pressed.current = 1;
     setCssEndEvent(content.current, 'transition', {
       tolerance: 1,
     }).then(() => {
-      // Full press-in
       onPressed && onPressed(event);
     });
     setPressPosition(`${rootElement}--active`);
   };
 
   const pressOut = (event: React.MouseEvent | React.TouchEvent) => {
+    if (isDisabled === true || pressed.current !== 1) {
+      return;
+    }
+
     if (timer.current) {
       clearTimeout(timer.current);
     }
@@ -249,6 +235,11 @@ const AwesomeButton = ({
     }
 
     handleAction(event);
+
+    if (active === true) {
+      pressed.current = 2;
+      return;
+    }
     clearPress();
   };
 
@@ -273,17 +264,31 @@ const AwesomeButton = ({
     if (IS_TOUCH) {
       events.onTouchStart = (event: React.TouchEvent) => {
         onMouseDown && onMouseDown(event);
+        touchScreen.current = event?.changedTouches?.[0]?.screenY;
         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)
+            : 0;
+        if (diff > button.current.offsetHeight) {
+          clearPress({ force: true });
+          return;
+        }
         pressOut(event);
       };
       return events;
     }
 
     events.onMouseLeave = () => {
       over.current = false;
+      if (active === true && pressed.current !== 2) {
+        clearPress({ force: true });
+        return;
+      }
+      // SOFT CLEAR PRESS;
       clearPress({ leave: true });
     };
     events.onMouseDown = (event: React.MouseEvent) => {
@@ -295,11 +300,10 @@ const AwesomeButton = ({
     };
     events.onMouseUp = (event: React.MouseEvent) => {
       onMouseUp && onMouseUp(event);
-      if (isDisabled === true || active === true) {
+      if (isDisabled === true) {
         event.preventDefault();
         return;
       }
-
       pressOut(event);
     };
 

src/components/AwesomeButtonProgress/index.tsx

@@ -17,18 +17,19 @@ const useStateSync = (initial: any) => {
   const ref = React.useRef(initial);
 
   const setSyncValue = (newValue: any) => {
-    ref.current = {
+    const newState = {
       ...ref.current,
       ...newValue,
     };
 
-    setValue(ref.current);
+    ref.current = newState;
+    setValue(newState);
   };
 
   return [value, setSyncValue, ref.current];
 };
 
-type ButtonTypeModified = Omit<ButtonType, "onPress">;
+type ButtonTypeModified = Omit<ButtonType, 'onPress'>;
 
 export type ButtonProgressType = {
   onPress: (event: React.MouseEvent, next: () => void) => void;
@@ -78,10 +79,7 @@ const AwesomeButtonProgress = ({
       `${root}--progress`,
     ];
 
-    return className
-      .join(' ')
-      .trim()
-      .replace(/[\s]+/gi, ' ');
+    return className.join(' ').trim().replace(/[\s]+/gi, ' ');
   };
 
   const endLoading = (endState = true, errorLabel: any = null) => {
@@ -93,10 +91,6 @@ const AwesomeButtonProgress = ({
   };
 
   const startLoading = () => {
-    setState({
-      active: true,
-    });
-
     frameThrower(4, () => {
       setState({
         loadingStart: true,
@@ -129,7 +123,17 @@ const AwesomeButtonProgress = ({
     }, releaseDelay);
   };
 
+  const handleActivation = React.useCallback(() => {
+    setState({
+      active: true,
+    });
+  }, [setState]);
+
   const handleAction = async (event: React.MouseEvent) => {
+    if (stateRef?.loadingStart === true) {
+      return;
+    }
+
     startLoading();
     await onceTransitionEnd(content.current);
     onPress && onPress(event, endLoading);
@@ -146,6 +150,7 @@ const AwesomeButtonProgress = ({
       type={type}
       className={getRootClassName()}
       onPress={handleAction}
+      onMouseDown={handleActivation}
       cssModule={cssModule}
       active={active}
       extra={

src/styles/base/progress.scss

@@ -3,8 +3,8 @@
     .#{$button-root}__wrapper > span:nth-child(2) {
       position: absolute;
       top: var(--button-raise-level);
-      left:0;
-      right:0;
+      left: 0;
+      right: 0;
       bottom: calc(var(--button-raise-level) * -1);
       display: flex;
     }
@@ -13,7 +13,7 @@
       position: relative;
       display: flex;
       flex: 1;
-      flex-direction:column;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
       border-radius: $button-default-border-radius;
@@ -24,6 +24,7 @@
         transform var(--transform-speed) ease-out,
         background var(--transform-speed) ease-out,
         color var(--transform-speed) ease-out;
+
       > span {
         transition: opacity calc(var(--transform-speed) * 0.5) ease-out
           calc(var(--transform-speed) * 0.75);
@@ -50,16 +51,19 @@
       }
     }
     .#{$button-root}__content {
-      > * {
+      // safari span inheritance issue
+      > span > span,
+      > svg {
         transition: opacity 200ms ease-out;
       }
     }
     &.#{$button-root}--active {
       .#{$button-root}__content {
-        > * {
-          opacity: 0.075;
+        // safari span inheritance issue
+        > span > span,
+        > svg {
+          opacity: 0.1;
         }
-
       }
       .#{$button-root}__progress:after,
       .#{$button-root}__progress:before,
@@ -70,7 +74,7 @@
     .#{$button-root}__content {
       &:after {
         @extend %fill-parent;
-        content: " ";
+        content: ' ';
         background-color: rgba(0, 0, 0, 0.15);
         transform: translate3d(-100%, 0, 0);
         width: 100%;

src/styles/themes/theme-eric/index.ts

@@ -2,3 +2,4 @@
 import * as styles from './styles.module.scss';
 
 export default styles;
+