petit merge

src/css/Components/sort.css

@@ -25,18 +25,26 @@
             cursor: pointer;
         }
         
-        #sortOrder:hover {
-            animation: rotate180 2s forwards022314015174
+        /* #sortOrder:hover {
+            animation: rotate180 2s forwards
         }
         
         .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,9 +7,11 @@ 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 = () => {
@@ -60,6 +62,25 @@ 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(""))
@@ -80,7 +101,7 @@ class Sort extends Component {
                             </select>
                         </div>
                     </div>
-                    <p id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
+                    <p id="sortOrder" onClick={this.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 = e => {
+  handleChangeSortOrder = () => {
     this.setState({lowToHigh: !this.state.lowToHigh},() => {
       this.sortArticles(this.state.sortType);
     });