74 lines
No EOL
3.2 KiB
JavaScript
74 lines
No EOL
3.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import '../../css/Components/selected.css';
|
|
import { Icon} from '@iconify/react';
|
|
import minusIcon from '@iconify/icons-fa-solid/minus';
|
|
import plusIcon from '@iconify/icons-fa-solid/plus';
|
|
import { Tooltip, Zoom } from '@material-ui/core';
|
|
|
|
class Selected extends Component {
|
|
|
|
constructor(props){
|
|
super(props)
|
|
this.state = {
|
|
onDeleteConfirmation:false
|
|
}
|
|
}
|
|
|
|
minusQuantitySelected = () => {
|
|
this.props.updateArticles(-1)
|
|
}
|
|
|
|
plusQuantitySelected = () => {
|
|
this.props.updateArticles(1)
|
|
}
|
|
|
|
handleDeleteConfirmation = () => {
|
|
this.setState({onDeleteConfirmation:true})
|
|
}
|
|
|
|
handleNoDelete = () => {
|
|
this.setState({onDeleteConfirmation:false})
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div id="selectedBox">
|
|
{this.props.counter ?
|
|
this.state.onDeleteConfirmation ?
|
|
<div id="confirmationDelete">
|
|
{this.props.counter === 1 ?
|
|
<div id="confirmationDeleteTxt">Tu veux vraiment supprimer cet article ?</div>
|
|
: <div id="confirmationDeleteTxt">Tu veux vraiment supprimer ces {this.props.counter} articles ?</div>}
|
|
<div id="choiceDelete">
|
|
<div id="yesDelete" onClick={this.props.delete}>Oui</div>
|
|
<div id="noDelete" onClick={this.handleNoDelete}>Non</div>
|
|
</div>
|
|
</div>
|
|
: <>
|
|
<p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
|
|
<div id = "selectedActions">
|
|
<Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
|
|
<div>
|
|
<Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
|
|
</div>
|
|
</Tooltip>
|
|
<Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
|
|
<div>
|
|
<Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
|
|
</div>
|
|
</Tooltip>
|
|
<Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
|
|
<div>
|
|
<Icon onClick={this.handleDeleteConfirmation} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</>
|
|
: null}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Selected; |