Update ManageButton transition

Author: Neraste

src/components/karaoke/player/ManageButton.jsx

@@ -2,11 +2,11 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Component } from 'react'
 
+import Swipe from 'components/transitions/Swipe'
 import {
   alterationResponsePropType,
   Status,
 } from 'reducers/alterationsResponse'
-import { CSSTransitionLazy } from 'thirdpartyExtensions/ReactTransitionGroup'
 
 /**
  * ManageButton class for a button connected to a player manage command
@@ -121,8 +121,7 @@ export default class ManageButton extends Component {
   }
 
   render() {
-    const { onClick, disabled, className, timeout, iconDisabled, error } =
-      this.props
+    const { onClick, disabled, className, iconDisabled, error } = this.props
 
     const onClickControlled = (e) => {
       // do not manage any other click during the transition
@@ -150,15 +149,11 @@ export default class ManageButton extends Component {
         onClick={onClickControlled}
         disabled={disabled}
       >
-        <CSSTransitionLazy
-          in={this.state.display}
-          classNames="managed"
-          timeout={timeout}
-        >
-          <div className="managed icon">
+        <Swipe in={this.state.display}>
+          <div className="managed icon transition">
             <i className={`las la-${icon}`}></i>
           </div>
-        </CSSTransitionLazy>
+        </Swipe>
       </button>
     )
   }

src/components/transitions/Swipe.jsx

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import { CSSTransition } from 'react-transitioning'
+
+export default function Swipe({
+  in: inProp,
+  duration = 300,
+  children,
+  ...rest
+}) {
+  return (
+    <CSSTransition in={inProp} classNames="swipe" duration={duration} {...rest}>
+      {children}
+    </CSSTransition>
+  )
+}
+
+Swipe.propTypes = {
+  in: PropTypes.bool,
+  duration: PropTypes.number,
+  children: PropTypes.node,
+}

src/style/abstracts/_transitions.scss

@@ -7,8 +7,9 @@
 // helper for creating transition styles
 // @param $name name of the transitiion
 // @param $property property to transition
-// @param $from value of the property before entered and after exiting
+// @param $from value of the property before entered, and after exiting if $away is not set
 // @param $to value of the property after entered and before exiting
+// @param $away value of the property after exiting
 // @param $duration-enter timing of the entering step
 // @param $duration-exit timing of the exiting step
 // @param $enter enable enter step
@@ -23,6 +24,7 @@
   $property,
   $from,
   $to,
+  $away: false,
   $duration-enter: 300ms,
   $duration-exit: 150ms,
   $enter: true,
@@ -61,7 +63,11 @@
 
         @if ($exit-active) {
           &.#{$name}-exit-active {
-            #{$property}: $from;
+            @if ($away) {
+              #{$property}: $away;
+            } @else {
+              #{$property}: $from;
+            }
             transition: $property $duration-exit ease-in;
           }
         }
@@ -70,7 +76,11 @@
 
     @if ($exit-done) {
       &.#{$name}-exit-done {
-        #{$property}: $from;
+        @if ($away) {
+          #{$property}: $away;
+        } @else {
+          #{$property}: $from;
+        }
       }
     }
   }

src/style/components/karaoke/player/_manage_button.scss

@@ -2,8 +2,9 @@
   overflow: hidden;
   position: relative;
 
-  &.managed-error .managed.managed-enter {
-    left: -100%;
+  // transition for error
+  &.managed-error .managed.swipe-enter {
+    left: 100%;
   }
 
   .managed {
@@ -15,25 +16,5 @@
     position: absolute;
     top: 0;
     width: 100%;
-
-    // appearance transition
-    &.managed-enter {
-      left: 100%;
-
-      &.managed-enter-active {
-        left: 0;
-        transition: left 150ms ease-out;
-      }
-    }
-
-    // disappearance transition
-    &.managed-exit {
-      left: 0;
-
-      &.managed-exit-active {
-        left: -100%;
-        transition: left 150ms ease-out;
-      }
-    }
   }
 }

src/style/components/transitions/_index.scss

@@ -1,2 +1,3 @@
 @use 'collapse';
 @use 'slide';
+@use 'swipe';

src/style/components/transitions/_swipe.scss

@@ -0,0 +1,11 @@
+@use '~/abstracts/transitions';
+
+@include transitions.make-transition(
+  'swipe',
+  left,
+  $from: -100%,
+  $to: 0,
+  $away: 100%,
+  $duration-enter: 150ms,
+  $duration-exit: 150ms
+);