SHARE
TWEET

Untitled

a guest May 26th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { PureComponent } from 'react';
  2. import Modal from 'react-modal'
  3. import '../styles/modal.scss';
  4.  
  5. class BeerModal extends PureComponent {
  6.   constructor(props: Object) {
  7.   super(props);
  8.   this.state = {
  9.     isOpen: false,
  10.   };
  11. }
  12.  
  13. open() {
  14.   this.setState({isOpen: true});
  15. }
  16.  
  17. close() {
  18.   this.setState({isOpen: false});
  19. }
  20.  
  21.   render() {
  22.     return this.state.isOpen ?
  23.       (
  24.         <Modal
  25.           onRequestClose={() => this.close()}
  26.           className="modal fade"
  27.           // overlayClassName="modal fade beer-modal-overlay"
  28.           contentLabel="Modal"
  29.           shouldCloseOnOverlayClick
  30.           isOpen={this.state.isOpen}
  31.           ariaHideApp={false}
  32.         >
  33.           <div className="row beer-modal">
  34.             <div className="col-12 col-sm-3">
  35.               <img className="beer-modal__img" src={this.props.beer.image_url} alt="beer logo"/>
  36.             </div>
  37.             <div className="col-12 col-sm-9 beer-modal__modal-description modal-description">
  38.               <header>
  39.                 <h4>{this.props.beer.name}</h4>
  40.                 <h6>{this.props.beer.tagline}</h6>
  41.                 <hr className="modal-description__line"></hr>
  42.               </header>
  43.               <div className="modal-description__point-values-container point-values-container">
  44.                 <PointValue
  45.                   name="IBU"
  46.                   value={this.props.beer.ibu}
  47.                 />
  48.                 <PointValue
  49.                   name="ABV"
  50.                   value={this.props.beer.abv}
  51.                 />
  52.                 <PointValue
  53.                   name="EBC"
  54.                   value={this.props.beer.ebc}
  55.                 />
  56.               </div>
  57.               <div className="modal-description__main">
  58.                 {this.props.beer.description}
  59.               </div>
  60.               <div className="modal-description__food_pairing food_pairing">
  61.                 <p className="food_pairing__title">Best served with:</p>
  62.                 {
  63.                   this.props.beer.food_pairing.map((pair, index) => {
  64.                     return <p className="food_pairing__item" key={index}>{pair}</p>
  65.                   })
  66.                 }
  67.               </div>
  68.             </div>
  69.           </div>
  70.         </Modal>
  71.       ) :
  72.       null;
  73.   }
  74. }
  75.  
  76. const PointValue = ({name, value}) => (
  77.  <p className="point-value"><span className="point-value__name">{name}</span>{value}</p>
  78. );
  79.  
  80.  
  81. export default BeerModal;
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
 
Top