Advertisement
stevelam

Untitled

Jul 5th, 2022
719
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component, useEffect, useState } from 'react';
  2. import './style.scss';
  3. import Icon from '../../../components/Icon/Icon';
  4. import useToggle from '../../../hooks/Toggle/useToggle';
  5. import { TranslatableText } from '../../../providers/LanguageProvider';
  6.  
  7. class SearchBar extends Component {
  8.     state = {
  9.         filterDrawerShow: this.props.checkedBrewbarOption
  10.     }
  11.     componentDidMount() {
  12.      
  13.         if (this.props.checkedBrewbarOption) {
  14.             console.log('filter show')
  15.             this.setState((prevState) => {
  16.                 return { filterDrawerShow: true };
  17.             })
  18.         }
  19.     }
  20.  
  21.     toggleFilterDrawer = () => {
  22.         this.setState((prevState) => {
  23.             return { filterDrawerShow: !prevState.filterDrawerShow };
  24.         })
  25.     }
  26.    
  27.  
  28.  
  29.     render() {
  30.         const { filterDrawerShow } = this.state;
  31.         //const { filterDrawerShow } = (this.props.checkedBrewbarOption === true) ? true : this.state;
  32.         const {checkedIsOpen, checkedWithDriveThru, checkedBrewbarOption} = this.props;
  33.         let classIsOpen = checkedIsOpen ? 'checked' : '';
  34.         let classInputIsOpen = checkedIsOpen ? 'checked' : 'outline';
  35.         let classWithDriveThru = checkedWithDriveThru ? 'checked' : '';
  36.         let classInputWithDriveThru = checkedWithDriveThru ? 'checked' : 'outline';
  37.         let classBrewbarOption = checkedBrewbarOption ? 'checked' : '';
  38.        
  39.  
  40.         return (
  41.             <React.Fragment>
  42.                 <div className="search-block">
  43.                     <div className="input-wrap">
  44.                         <Icon className="aw" type="compass-inverted"/>
  45.                         {/* <i class="aw  compass-inverted" title=""><span></span></i> */}
  46.                         {this.props.lang === 'en' && <input className="search" type="text" placeholder="City or postal code..." onChange={e => this.props.onChange(e)} />}
  47.                         {this.props.lang === 'fr' && <input className="search" type="text" placeholder="Une ville ou un code postal..." onChange={e => this.props.onChange(e)} />}
  48.                         <button type="submit" title="submit" className={`submit`}><i className="aw  gt-inverted" title=""><span></span></i></button>
  49.                     </div>
  50.                     <div className="filter-btn-wrap">
  51.                         <button className={`btn-filter ${filterDrawerShow ? 'active' : ''}`} onClick={this.toggleFilterDrawer}>
  52.                             <TranslatableText dictionary={{
  53.                                 en: "Filter",
  54.                                 fr: "Filtres" }}>
  55.                             </TranslatableText> <Icon type="plus-inverted" />
  56.                         </button>
  57.                     </div>
  58.                 </div>
  59.                
  60.                
  61.                 <div className={`restaurant-options ${filterDrawerShow ? 'open' : 'close'}`}>
  62.                     <p>
  63.                         <TranslatableText dictionary={{
  64.                             en: "Only show restaurants",
  65.                             fr: "Seulement montrer les restaurants:" }}>
  66.                         </TranslatableText>
  67.                     </p>
  68.                    
  69.                     <div className="input-wrap">
  70.                         <label className={classIsOpen} ><i className={`aw ${classInputIsOpen}`} title=""><span></span></i><input type="checkbox" value="on" onClick={this.props.toggleOpenNowOption} />
  71.                             <TranslatableText dictionary={{
  72.                                 en: "Open Now",
  73.                                 fr: "Ouverts maintenant" }}>
  74.                             </TranslatableText>
  75.                         </label>
  76.                         <label className={classWithDriveThru}><i className={`aw ${classInputWithDriveThru}`} title=""><span></span></i><input type="checkbox" value="on" onClick={this.props.toggleDriveThruOption} />
  77.                            
  78.                             <TranslatableText dictionary={{
  79.                                 en: "With Drive-Thru",
  80.                                 fr: "Avec Service au volant" }}>
  81.                             </TranslatableText>
  82.                         </label>
  83.                         <label className={classBrewbarOption}><i className={`aw ${classBrewbarOption}`} title=""><span></span></i><input type="checkbox" value="on" onClick={this.props.toggleBrewbarOption} />
  84.                            
  85.                             <TranslatableText dictionary={{
  86.                                 en: "Brewbar Option",
  87.                                 fr: "Brewbar Fr" }}>
  88.                             </TranslatableText>
  89.                         </label>
  90.                     </div>
  91.                 </div>
  92.                
  93.             </React.Fragment>
  94.         );
  95.     }
  96. }
  97.  
  98.  
  99. //export default SearchBar;
  100.  
  101.  
  102.  
  103. const SearchBar2 = (props) => {
  104.     const [isToggled, toggle] = useToggle(false);
  105.     const [filterDrawerShow, toggleFilterDrawerShow] = useState(false);
  106.  
  107.     const toggleFilterDrawShow = () => {
  108.         console.log('test');
  109.        
  110.        
  111.     }
  112.  
  113.     const toggleFilterDrawer = () => {
  114.         toggleFilterDrawShow();
  115.        
  116.     }
  117.    
  118.  
  119.     useEffect( () => {
  120.         if (isToggled === false ){
  121.        //     setContent('')
  122.        console.log('false')
  123.         }else {
  124.          //   setContent(props.children)
  125.          console.log('true')
  126.         }
  127.  
  128.     },[isToggled]);
  129.    // const { filterDrawerShow } = this.state;
  130.     //const { filterDrawerShow } = (this.props.checkedBrewbarOption === true) ? true : this.state;
  131.    
  132.     const {checkedIsOpen, checkedWithDriveThru, checkedBrewbarOption} = props;
  133.     let classIsOpen = checkedIsOpen ? 'checked' : '';
  134.     let classInputIsOpen = checkedIsOpen ? 'checked' : 'outline';
  135.     let classWithDriveThru = checkedWithDriveThru ? 'checked' : '';
  136.     let classInputWithDriveThru = checkedWithDriveThru ? 'checked' : 'outline';
  137.     let classBrewbarOption = checkedBrewbarOption ? 'checked' : '';
  138.  
  139.     // useEffect(() => {
  140.    
  141.   // }, []);
  142.  
  143.  
  144.  
  145.     useEffect( () => {
  146.         if(props.checkedBrewbarOption === true) {
  147.             toggle(true)
  148.         }
  149.        // toggle(true);
  150.      
  151.     },[toggle, props.checkedBrewbarOption]);
  152.    
  153.     return(
  154.         <>
  155.         <div className="search-block">
  156.                     <div className="input-wrap">
  157.                         <Icon className="aw" type="compass-inverted"/>
  158.                         {/* <i class="aw  compass-inverted" title=""><span></span></i> */}
  159.                         {props.lang === 'en' && <input className="search" type="text" placeholder="City or postal code..." onChange={e => props.onChange(e)} />}
  160.                         {props.lang === 'fr' && <input className="search" type="text" placeholder="Une ville ou un code postal..." onChange={e => props.onChange(e)} />}
  161.                         <button type="submit" title="submit" className={`submit`}><i className="aw  gt-inverted" title=""><span></span></i></button>
  162.                     </div>
  163.                     <div className="filter-btn-wrap">
  164.                         <button className={`btn-filter ${isToggled ? 'active' : ''}`} onClick={toggle}>
  165.                             <TranslatableText dictionary={{
  166.                                 en: "Filter",
  167.                                 fr: "Filtres" }}>
  168.                             </TranslatableText> <Icon type="plus-inverted" />
  169.                         </button>
  170.                     </div>
  171.                 </div>
  172.                
  173.                
  174.                 <div className={`restaurant-options ${isToggled ? 'open' : 'close'}`}>
  175.                     <p>
  176.                         <TranslatableText dictionary={{
  177.                             en: "Only show restaurants",
  178.                             fr: "Seulement montrer les restaurants:" }}>
  179.                         </TranslatableText>
  180.                     </p>
  181.                    
  182.                     <div className="input-wrap">
  183.                         <label className={classIsOpen} ><i className={`aw ${classInputIsOpen}`} title=""><span></span></i><input type="checkbox" value="on" onClick={props.toggleOpenNowOption} />
  184.                             <TranslatableText dictionary={{
  185.                                 en: "Open Now",
  186.                                 fr: "Ouverts maintenant" }}>
  187.                             </TranslatableText>
  188.                         </label>
  189.                         <label className={classWithDriveThru}><i className={`aw ${classInputWithDriveThru}`} title=""><span></span></i><input type="checkbox" value="on" onClick={props.toggleDriveThruOption} />
  190.                            
  191.                             <TranslatableText dictionary={{
  192.                                 en: "With Drive-Thru",
  193.                                 fr: "Avec Service au volant" }}>
  194.                             </TranslatableText>
  195.                         </label>
  196.                         <label className={classBrewbarOption}><i className={`aw ${classBrewbarOption}`} title=""><span></span></i><input type="checkbox" value="on" onClick={props.toggleBrewbarOption} />
  197.                            
  198.                             <TranslatableText dictionary={{
  199.                                 en: "Brewbar Option",
  200.                                 fr: "Brewbar Fr" }}>
  201.                             </TranslatableText>
  202.                         </label>
  203.                     </div>
  204.                 </div>
  205.         </>
  206.     )
  207. }
  208.  
  209. export default SearchBar2;
Advertisement
RAW Paste Data Copied
Advertisement