Site-Proximo/src/js/Components/Sort.js

import React, { Component } from 'react';
import '../../css/Components/sort.css'

class Sort extends Component {

    constructor(props){
        super(props)
        this.state = {
            unwound:false,
            orderText: "a-z",
            flipped: false
        }
        this.handleChangeSortType = this.handleChangeSortType.bind(this)
        this.handleChangeSortOrder = this.handleChangeSortOrder.bind(this)
    }

    changeArrowDirection = () => {
        this.setState({unwound:!this.state.unwound})
    }

    componentDidMount() {
        this.setState({sortType: "name", orderText: "a-z"}, () => {
            this.setOrderText()
        })
    }

    setOrderText() {
        switch(this.state.sortType) {
            case "name":
                this.setState({
                    orderText: "A-Z"
                })
                break;
            case "price":
                this.setState({
                    orderText: "0-9"
                })
                break;
            default:
                break;
        }
    }

    handleChangeSortType(e) {
        let type = e.target.value
        this.setState({sortType: type}, () => {
            this.setOrderText()
        })
        
        this.props.handleChangeSortType(type)
    }

    handleChangeSortOrder() {
        let letters = document.querySelectorAll('.letter');
        let sortText = document.getElementById("sortOrder");

        //animation du texte entier
        if (this.state.flipped) {
            sortText.style.cssText = "animation: reverse180 1s forwards"
            letters.forEach((l) => {
                l.style.animation = "reverse180 0.5s forwards"
            });
        } else {
            sortText.style.cssText = "animation: rotate180 1s forwards"
            letters.forEach((l) => {
                l.style.animation = "rotate180 0.5s forwards"
            });
        }
        
        this.setState({flipped : !this.state.flipped})

        //actualisation de l'ordre d'affichage des produits
        setTimeout(() => {
            this.props.handleChangeSortOrder();
        }, 500)
    }

    render() {
        console.log(document.getElementById("sortOrder"))
        // console.log(this.state.orderText)
        // console.log(this.state.orderText.split(""))
        // console.log(document.getElementById("sortOrder"))
        return (
            <div id="sortBox">
                <div id="sortTxt">
                    Trier par 
                </div>
                <div id="selectAndOrder">
                    <div id="selectBlock">
                        <div id={this.state.unwound ? 'unwoundMenu' : 'selectBox'}  >
                            <select id='sortSelect' onBlur={this.changeArrowDirection} onClick={this.changeArrowDirection} onChange={this.handleChangeSortType}>
                                <option className="optionSort" value="name">Ordre Alphabétique</option>
                                <option className="optionSort" value="category_id">Catégorie</option>
                                <option className="optionSort" value="quantity">Quantité</option>
                                <option className="optionSort" value="price">Prix</option>
                            </select>
                        </div>
                    </div>
                    <div id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                        {this.state.orderText.split("").map((l) =>
                            <div key={l} className="letter">{l}</div>
                        )}
                    </div>
                </div>
            </div>
        );
    }
}

export default Sort;