From 1d8c9e513b23f360511dfc2bd53c749f6ca6831c Mon Sep 17 00:00:00 2001
From: Flo E <ehr@etud.insa-toulouse.fr>
Date: Sun, 14 Feb 2021 16:40:38 +0100
Subject: [PATCH] Animation choix d'ordre WIP

---
 src/css/Components/sort.css | 10 +++++++++-
 src/js/Components/Sort.js   | 28 +++++++++++++++++++++++-----
 src/js/Views/Stock.js       |  2 +-
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/css/Components/sort.css b/src/css/Components/sort.css
index 18700cd..f29883c 100644
--- a/src/css/Components/sort.css
+++ b/src/css/Components/sort.css
@@ -25,18 +25,26 @@
             cursor: pointer;
         }
         
-        #sortOrder:hover {
+        /* #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;
diff --git a/src/js/Components/Sort.js b/src/js/Components/Sort.js
index e95a344..25eb25e 100644
--- a/src/js/Components/Sort.js
+++ b/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 = () => {
@@ -61,10 +63,26 @@ 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(""))
-        console.log(document.getElementById("sortOrder"))
         return (
             <div id="sortBox">
                 <div id="sortTxt">
@@ -81,7 +99,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>
                         )}
diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js
index 6a6666c..7be5c0c 100644
--- a/src/js/Views/Stock.js
+++ b/src/js/Views/Stock.js
@@ -212,7 +212,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},() => {
       console.log(this.state.sortType)
       this.sortArticles(this.state.sortType);