focalxaiinspection/src/lib/Components/CarServiceFilter/CarServiceFilter.js

Focalx AI Inspection

import React, {useState,useRef} from "react";
import useOnClickOutSide from '../../hooks/useOnClickOutSide';
import "./CarServiceFilter.scss";
const CarServiceFilter = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  const popUpCloseRef = useRef();
  const handleClose = () =>{
    setIsOpen('');  
};
  useOnClickOutSide(isOpen, popUpCloseRef, handleClose);
  return (
    <>    
     <div className="car-service-filter"  ref={popUpCloseRef}>
            <div className="car-service-filter-icon"
              onClick={toggle}
            >
                <img src={require('../../Assets/images/filter-icon.svg').default} alt=""/>
              </div>
            <ul
                className={isOpen ? 'car-service-filter-list active': 'car-service-filter-list'}
            >
                <li>New</li>
                <li>Inprocess</li>
                <li className="active">Completed</li>
            </ul>
        </div>
    </>
  );
};
// const clickOutsideConfig = {
//   handleClickOutside: () => CarServiceFilter.handleClickOutside
// };
// export default onClickOutside(CarServiceFilter, clickOutsideConfig);
export default CarServiceFilter;