oscar
/
BurgerBuilder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

component: show/hide Modal with animation

master
oscarzhou 2020-12-12 19:22:54 +13:00
parent 8ff6175355
commit aa5fc21a5d
3 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Burger/BuildControls/BuildControls.js
View File

@ -22,7 +22,8 @@ const buildControls = (props) => (
disabled={props.disabled[ctrl.type]} /> disabled={props.disabled[ctrl.type]} />
))} ))}
<button className={classes.OrderButton} <button className={classes.OrderButton}
disabled={!props.purchasable}>ORDER NOW</button> disabled={!props.purchasable}
onClick={props.ordered}>ORDER NOW</button>
</div> </div>
) )

6
src/components/UI/Modal/Modal.js
View File

@ -4,7 +4,11 @@ import classes from './Modal.css';
const modal = (props) => { const modal = (props) => {
return ( return (
<div className={classes.Modal}> <div
className={classes.Modal}
style={{
transform: props.show ? 'translateY(0)' : 'translateY(-100vh)'
}}>
{props.children} {props.children}
</div> </div>
); );

30
src/containers/BurgerBuilder/BurgerBuilder.js
View File

@ -24,18 +24,19 @@ class BurgerBuilder extends Component {
}, },
totalPrice: 0, totalPrice: 0,
purchasable: false, purchasable: false,
purchasing: false,
} }
updatePurchaseState (ingredients) { updatePurchaseState(ingredients) {
const sum = Object.keys(ingredients) const sum = Object.keys(ingredients)
.map( igkey => { .map(igkey => {
return ingredients[igkey]; return ingredients[igkey];
}) })
.reduce((sum, el) => { .reduce((sum, el) => {
return sum + el; return sum + el;
}, 0); }, 0);
this.setState({purchasable: sum > 0}); this.setState({ purchasable: sum > 0 });
} }
addIngredientHandler = (type) => { addIngredientHandler = (type) => {
@ -58,7 +59,7 @@ class BurgerBuilder extends Component {
removeIngredientHandler = (type) => { removeIngredientHandler = (type) => {
const oldCount = this.state.ingredients[type]; const oldCount = this.state.ingredients[type];
if (oldCount <= 0){ if (oldCount <= 0) {
return; return;
} }
const newCount = oldCount - 1; const newCount = oldCount - 1;
@ -69,7 +70,7 @@ class BurgerBuilder extends Component {
const priceDeduction = INGREDIENT_PRICE[type]; const priceDeduction = INGREDIENT_PRICE[type];
const oldPrice = this.state.totalPrice; const oldPrice = this.state.totalPrice;
const newPrice = oldPrice - priceDeduction ; const newPrice = oldPrice - priceDeduction;
this.setState({ this.setState({
totalPrice: newPrice, totalPrice: newPrice,
ingredients: updatedIngredients, ingredients: updatedIngredients,
@ -77,6 +78,10 @@ class BurgerBuilder extends Component {
this.updatePurchaseState(updatedIngredients); this.updatePurchaseState(updatedIngredients);
} }
purchaseHandler = () => {
this.setState({ purchasing: true });
}
render() { render() {
const disabledInfo = { const disabledInfo = {
...this.state.ingredients ...this.state.ingredients
@ -88,13 +93,14 @@ class BurgerBuilder extends Component {
return ( return (
<Aux> <Aux>
<Modal> <Modal show={this.state.purchasing}>
<OrderSummary ingredients={this.state.ingredients}></OrderSummary> <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
</Modal> </Modal>
<Burger ingredients={this.state.ingredients} /> <Burger ingredients={this.state.ingredients} />
<BuildControls <BuildControls
ingredientAdded={this.addIngredientHandler} ingredientAdded={this.addIngredientHandler}
ingredientRemoved={this.removeIngredientHandler} ingredientRemoved={this.removeIngredientHandler}
ordered={this.purchaseHandler}
disabled={disabledInfo} disabled={disabledInfo}
purchasable={this.state.purchasable} purchasable={this.state.purchasable}
price={this.state.totalPrice} /> price={this.state.totalPrice} />