import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; import { classNames } from '../helpers'; const { useState, useRef, useEffect } = wp.element; const SuggestedKeywords = ( { className, keywordClassName, keywords, onClick, ...props } ) => { const [ scrollPosition, setScrollPosition ] = useState( 0 ); const [ showLeftArrow, setShowLeftArrow ] = useState( false ); const [ showRightArrow, setShowRightArrow ] = useState( false ); const containerRef = useRef( null ); useEffect( () => { if ( ! containerRef.current ) { return; } const { scrollWidth, clientWidth } = containerRef.current; setShowLeftArrow( scrollPosition > 0 ); setShowRightArrow( scrollPosition < scrollWidth - clientWidth ); }, [ keywords, scrollPosition ] ); const handleOnClick = ( keyword ) => () => { if ( typeof onClick === 'function' ) { onClick( keyword ); } }; const handleScroll = ( event ) => { const { scrollLeft, scrollWidth, clientWidth } = event.target; setScrollPosition( scrollLeft ); setShowLeftArrow( scrollLeft > 0 ); setShowRightArrow( scrollLeft < scrollWidth - clientWidth ); }; const scrollTo = ( element, position ) => { if ( ! element ) { return; } element.scrollTo( { left: position, behavior: 'smooth', } ); }; const handleLeftArrowClick = () => { scrollTo( containerRef.current, 0 ); }; const handleRightArrowClick = () => { const container = containerRef.current; scrollTo( container, container.scrollWidth ); }; return (
{ showLeftArrow && (
) }
{ keywords.map( ( keyword, index ) => ( ) ) }
{ showRightArrow && (
) }
); }; export default SuggestedKeywords; Davinci Detailing Home 2 – AMS Hosting
Scroll to Top