SHARE
TWEET

toggle button colors

a guest Nov 19th, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import {ProductConsumer} from "../context";
  3. import {Link} from 'react-router-dom';
  4. import {ButtonContainer} from "./Button";
  5.  
  6. export default class Details extends Component {
  7.     constructor(props) {
  8.         super(props);
  9.         this.state = {
  10.             white: true,
  11.             small: false,
  12.             medium: false,
  13.             large: false,
  14.             xLarge: false,
  15.         };
  16.         this.sizeClicked = this.sizeClicked.bind(this);
  17.     }
  18.  
  19.     sizeClicked() {
  20.         this.setState({white: !this.state.white});
  21.     }
  22.  
  23.     render() {
  24.         // let color_switch_size = this.state.white ? "white-btn" : "green-btn";
  25.         return (
  26.             <ProductConsumer>
  27.                 {value => {
  28.                     const {id, company, img, info, small, medium, large, xLarge, price, title, inCart} = value.detailProduct;
  29.                     console.log(value.detailProduct);
  30.                     return (
  31.                         <div className="container py-5">
  32.                             {/*  title  */}
  33.                             <div className="row">
  34.                                 <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
  35.                                     <h1>{title}</h1>
  36.                                 </div>
  37.                             </div>
  38.                             {/* end title */}
  39.                             {/* product info */}
  40.                             <div className="row">
  41.                                 <div className="col-10 mx-auto col-md-6 my-3">
  42.                                     <img src={img} className="img-fluid" alt="product"/>
  43.                                 </div>
  44.                                 {/* product text */}
  45.                                 <div className="col-10 mx-auto col-md-6 my-3 mt-5">
  46.                                     {/*<h2>{title}</h2>*/}
  47.                                     <h1 className="text-title text-uppercase text-muted mt-3 mb-2">
  48.                                         <span className="text-uppercase shirts">
  49.                                     {company}
  50.                                 </span>
  51.                                     </h1>
  52.                                     <h1 className="text-blue">
  53.                                         <strong>
  54.                                             <span>$</span>
  55.                                             {price}
  56.                                         </strong>
  57.                                     </h1>
  58.                                     <button className={`${this.state.white ? "white-btn" : "green-btn"} text-capitalize font-weight-bold mt-3 mb-0 btn btn-light`} onClick={this.sizeClicked}>
  59.                                         {small}
  60.                                     </button>
  61.                                     <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
  62.                                         {medium}
  63.                                     </button>
  64.                                     <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
  65.                                         {large}
  66.                                     </button>
  67.                                     <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
  68.                                         {xLarge}
  69.                                     </button>
  70.                                     {/* buttons */}
  71.                                     <div>
  72.                                         <Link to="/">
  73.                                             <ButtonContainer>back to products
  74.                                             </ButtonContainer>
  75.                                         </Link>
  76.                                         <ButtonContainer
  77.                                             cart
  78.                                             disabled={inCart ? true : false}
  79.                                             onClick={() => {
  80.                                                 value.addToCart(id);
  81.                                                 value.openModal(id);
  82.                                             }}>
  83.                                             {inCart ? 'inCart' : "add to cart"}
  84.                                         </ButtonContainer>
  85.                                     </div>
  86.                                 </div>
  87.                             </div>
  88.                         </div>
  89.                     );
  90.                 }}
  91.             </ProductConsumer>
  92.         );
  93.     }
  94. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top