src/css/Components/sort.css

@@ -25,26 +25,18 @@
             cursor: pointer;
         }
         
-        /* #sortOrder:hover {
+        #sortOrder:hover {
-            animation: rotate180 2s forwards
+            animation: rotate180 2s forwards022314015174
         }
         
         .letter {
             animation: rotate180 2s forwards;
-        } */
-
-        #sortOrder>span {
-            animation : rotate180 2s forwards
         }
 
         @keyframes rotate180 {
             0% {}
             100% { transform: rotate3d(0,1,0, 180deg)}
         }
-        @keyframes reverse180 {
-            0% {transform: rotate3d(0,1,0, 180deg)}
-            100% { transform: rotate3d(0,1,0, 0)}
-        }
 
         #selectBlock{
             background:#057B26;

src/js/Components/Sort.js

@@ -7,11 +7,9 @@ class Sort extends Component {
         super(props)
         this.state = {
             unwound:false,
-            orderText: "a-z",
+            orderText: "a-z"
-            flipped: false
         }
         this.handleChangeSortType = this.handleChangeSortType.bind(this)
-        this.handleChangeSortOrder = this.handleChangeSortOrder.bind(this)
     }
 
     changeArrowDirection = () => {
@@ -62,25 +60,6 @@ class Sort extends Component {
         this.props.handleChangeSortType(type)
     }
 
-    handleChangeSortOrder() {
-        let letters = document.getElementsByClassName("letter")
-        let sortText = document.getElementById("sortOrder")
-        //animation du texte entier
-        if (this.state.flipped) {
-            sortText.style.cssText = "animation: reverse180 1s forwards"
-        } else {
-            sortText.style.cssText = "animation: rotate180 1s forwards"
-        }
-        //animation de chaque lettre
-        for (let i = 0 ; i<letters.length ; i++) {
-            letters[i].style.animation = "rotate180 1s forwards"
-        }
-        this.setState({flipped : !this.state.flipped})
-        setTimeout(() => {
-            this.props.handleChangeSortOrder();
-        }, 500)
-    }
-
     render() {
         // console.log(this.state.orderText)
         // console.log(this.state.orderText.split(""))
@@ -101,7 +80,7 @@ class Sort extends Component {
                             </select>
                         </div>
                     </div>
-                    <p id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
+                    <p id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                         {this.state.orderText.split("").map((l) =>
                             <span className="letter">{l}</span>
                         )}

src/js/Views/Stock.js

@@ -211,7 +211,7 @@ export default class Stock extends React.Component {
   }
 
   //Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel
-  handleChangeSortOrder = () => {
+  handleChangeSortOrder = e => {
     this.setState({lowToHigh: !this.state.lowToHigh},() => {
       this.sortArticles(this.state.sortType);
     });