import React, { useEffect, useRef } from "react"; import { Widget } from "../../../store/useWidgetStore"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; interface DisplayZoneProps { zonesData: { [key: string]: { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; widgets: Widget[]; }; }; selectedZone: { zoneName: string; activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; widgets: { id: string; type: string; title: string; panel: Side; data: any; }[]; }; setSelectedZone: React.Dispatch< React.SetStateAction<{ zoneName: string; activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; widgets: { id: string; type: string; title: string; panel: Side; data: any; }[]; }> >; } const DisplayZone: React.FC = ({ zonesData, selectedZone, setSelectedZone, }) => { // Ref for the container element const containerRef = useRef(null); // Example state for selectedOption and options (adjust based on your actual use case) const [selectedOption, setSelectedOption] = React.useState( null ); // console.log('setSelectedOption: ', setSelectedOption); const [options, setOptions] = React.useState([]); // console.log('setOptions: ', setOptions); // Scroll to the selected option when it changes useEffect(() => { const container = containerRef.current; if (container && selectedOption) { // Handle scrolling to the selected option const index = options.findIndex((option) => { const formattedOption = formatOptionName(option); const selectedFormattedOption = selectedOption?.split("_")[1] || selectedOption; return formattedOption === selectedFormattedOption; }); if (index !== -1) { const optionElement = container.children[index] as HTMLElement; if (optionElement) { optionElement.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center", }); } } } }, [selectedOption, options]); useEffect(() => { const container = containerRef.current; const handleWheel = (event: WheelEvent) => { event.preventDefault(); if (container) { container.scrollBy({ left: event.deltaY * 2, // Adjust the multiplier for faster scrolling behavior: "smooth", }); } }; let isDragging = false; let startX: number; let scrollLeft: number; const handleMouseDown = (event: MouseEvent) => { isDragging = true; startX = event.pageX - (container?.offsetLeft || 0); scrollLeft = container?.scrollLeft || 0; }; const handleMouseMove = (event: MouseEvent) => { if (!isDragging || !container) return; event.preventDefault(); const x = event.pageX - (container.offsetLeft || 0); const walk = (x - startX) * 2; // Adjust the multiplier for faster dragging container.scrollLeft = scrollLeft - walk; }; const handleMouseUp = () => { isDragging = false; }; const handleMouseLeave = () => { isDragging = false; }; if (container) { container.addEventListener("wheel", handleWheel, { passive: false }); container.addEventListener("mousedown", handleMouseDown); container.addEventListener("mousemove", handleMouseMove); container.addEventListener("mouseup", handleMouseUp); container.addEventListener("mouseleave", handleMouseLeave); } return () => { if (container) { container.removeEventListener("wheel", handleWheel); container.removeEventListener("mousedown", handleMouseDown); container.removeEventListener("mousemove", handleMouseMove); container.removeEventListener("mouseup", handleMouseUp); container.removeEventListener("mouseleave", handleMouseLeave); } }; }, []); // Helper function to format option names (customize as needed) const formatOptionName = (option: string): string => { // Replace underscores with spaces and capitalize the first letter return option.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase()); }; return (
{Object.keys(zonesData).map((zoneName, index) => (
{ console.log('zoneName: ', zoneName); setSelectedZone({ zoneName, activeSides: zonesData[zoneName].activeSides || [], panelOrder: zonesData[zoneName].panelOrder || [], lockedPanels: zonesData[zoneName].lockedPanels || [], widgets: zonesData[zoneName].widgets || [], }) // setSelectedZone({ // zoneName, // ...zonesData[zoneName], // }); console.log(selectedZone); }} > {zoneName}
))}
); }; export default DisplayZone;