akfatimeline 1.0.2 → 1.0.4

package/src/components/Timeline/Timeline.js

@@ -35,32 +35,56 @@ const Timeline = ({
 
   // Yatay scroll özelliği aç/kapa
   horizontalScrollOn = false, // Varsayılan false
+
+  dayRange = 30,
+  setDayRange,
+  themeType = "light", // Tema bilgisi varsayılan olarak light
+
+  eventTooltipOn = true,
+  tooltipComponent: TooltipComponent, // Özelleştirilebilir Tooltip bileşeni
+  tempEventStyle = {},
+  eventStyleResolver = () => ({}),
+
+  onToday,
+  onAdvance,
+  onRetreat,
+  onMonthAdvance,
+  onMonthRetreat,
 }) => {
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
   // ---------------------------------------------------------
   const timelineData = generateTimelineData(2020, 2030); // 10 yıllık veri
   const { dates, monthHeaders } = timelineData;
-
-  // ---------------------------------------------------------
-  // 2) local state
-  // ---------------------------------------------------------
-  const [collapsedGroups, setCollapsedGroups] = useState({});
   const [selectedDate, setSelectedDate] = useState(() => {
     const date = programDate ? new Date(programDate) : new Date();
-    date.setDate(date.getDate() - 3);
+    date.setDate(date.getDate() - 3); // Program tarihinden 3 gün öncesini al
     return date;
   });
+  
+  // ---------------------------------------------------------
+  // 2) local state
+  // ---------------------------------------------------------
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+
   const [localEvents, setLocalEvents] = useState(events);
 
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
 
   // dayRange = ekranda göstermeyi istediğimiz gün/hücre sayısı (ör. 30 gün)
-  const [dayRange, setDayRange] = useState(30);
 
-  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(themeType === "dark");
+
+  useEffect(() => {
+    if (themeType !== undefined) {
+      setIsDarkMode(themeType === "dark");
+    }
+  }, [themeType]);
 
+  const toggleDarkMode = () => {
+    setIsDarkMode((prev) => !prev);
+  };
   // ---------------------------------------------------------
   // 3) Sabit hücre genişliği (örneğin 56.95 px)
   //    Container genişliği = dayRange * cellWidth
@@ -119,43 +143,49 @@ const Timeline = ({
 
   // ---------------------------------------------------------
   // 7) Navigation fonksiyonları
-  // ---------------------------------------------------------
+  // ---------------------------------------------------------  const { dates, monthHeaders } = timelineData;
+
+
+
+  const handleDateChange = (newDate) => {
+    setSelectedDate(new Date(newDate));
+  };
+
   const handleToday = () => {
-    const date = programDate ? new Date(programDate) : new Date();
-    date.setDate(date.getDate() - 3);
-    setSelectedDate(date);
+    const today = new Date();
+    today.setDate(today.getDate() - 3); // Bugünden 3 gün öncesini ayarla
+    setSelectedDate(today);
   };
+  
 
-  const handleAdvance = () =>
+  const handleAdvance = () => {
     setSelectedDate((prev) => new Date(prev.getTime() + 5 * 24 * 60 * 60 * 1000));
+  };
 
-  const handleRetreat = () =>
+  const handleRetreat = () => {
     setSelectedDate((prev) => new Date(prev.getTime() - 5 * 24 * 60 * 60 * 1000));
+  };
 
-  const handleMonthRetreat = () =>
+  const handleMonthAdvance = () => {
     setSelectedDate((prev) => {
       const newDate = new Date(prev);
-      newDate.setMonth(newDate.getMonth() - 1);
+      newDate.setMonth(newDate.getMonth() + 1);
       return newDate;
     });
+  };
 
-  const handleMonthAdvance = () =>
+  const handleMonthRetreat = () => {
     setSelectedDate((prev) => {
       const newDate = new Date(prev);
-      newDate.setMonth(newDate.getMonth() + 1);
+      newDate.setMonth(newDate.getMonth() - 1);
       return newDate;
     });
+  };
 
   // ---------------------------------------------------------
   // 8) Dark Mode
   // ---------------------------------------------------------
-  const toggleDarkMode = () => {
-    setIsDarkMode((prevMode) => !prevMode);
-  };
 
-  useEffect(() => {
-    document.body.classList.toggle("dark-mode", isDarkMode);
-  }, [isDarkMode]);
 
   // ---------------------------------------------------------
   // 9) Ay başlıklarını filtrele
@@ -181,21 +211,22 @@ const Timeline = ({
       {masterHeaderView && (
       <div className="timeline-master-header">
         <MasterHeader
+          selectedDate={selectedDate} // Seçili tarihi gönder
+          onDateSelect={handleDateChange}
           onToday={handleToday}
           onAdvance={handleAdvance}
           onRetreat={handleRetreat}
           onMonthAdvance={handleMonthAdvance}
           onMonthRetreat={handleMonthRetreat}
           dayRange={dayRange}
-          setDayRange={setDayRange}  // dayRange'ı burada user değiştirebilir
-          isDarkMode={isDarkMode}
-          toggleDarkMode={toggleDarkMode}
+          setDayRange={setDayRange}
         />
       </div>
 )}
       {/* Body: Sol kısım => Resources, Sağ kısım => timeline */}
       <div className="timeline-body">
-        <div className="timeline-resources-container">
+        <div className="timeline-resources-container"
+        style={{ overflow: "hidden"}}>
         <ResourcesHeader content={resourceHeaderContent} />
         <Resources
             groupedResources={resources}
@@ -205,21 +236,14 @@ const Timeline = ({
           />
         </div>
 
-        {/* 
-          Dış kap => .timeline-scrollable-container
-          horizontalScrollOn => overflow-x auto/hidden 
-        */}
+
         <div
           className="timeline-scrollable-container"
           style={{
             overflowX: horizontalScrollOn ? "auto" : "hidden",
           }}
         >
-          {/*
-            İç kap => .timeline-header-content-wrapper
-            Genişlik => dayRange * cellWidth px (eğer horizontalScrollOn=true)
-            Yoksa 100% (scroll devre dışı)
-          */}
+
           <div
             className="timeline-header-content-wrapper"
             style={{
@@ -231,22 +255,20 @@ const Timeline = ({
               monthHeaders={filteredMonthHeaders}
             />
 
-            <TimelineContent
-              // Props
+<TimelineContent
               groupedResources={resources}
               dates={filteredDates}
               collapsedGroups={collapsedGroups}
               events={localEvents}
               setEvents={setLocalEvents}
-              onEventClick={handleEventClick}
-              todayIndex={todayIndex}
-              totalDays={totalDays}
+              onEventClick={onEventClick}
+              todayIndex={filteredDates.findIndex(
+                (d) => new Date(d.fullDate).toDateString() === new Date().toDateString()
+              )}
               indicatorOn={indicatorOn}
               resourceSettings={resourceSettings}
               toggleGroupCollapse={toggleGroupCollapse}
               setDropInfo={setDropInfo}
-
-              // Yeni prop'lar
               eventsDragOn={eventsDragOn}
               eventsExtendOn={eventsExtendOn}
               createNewEventOn={createNewEventOn}
@@ -254,6 +276,11 @@ const Timeline = ({
               onExtendInfo={onExtendInfo}
               onCreateEventInfo={onCreateEventInfo}
               onEventRightClick={onEventRightClick}
+              eventTooltipOn={eventTooltipOn} // Tooltip kontrolü
+              tooltipComponent={TooltipComponent} // Özelleştirilebilir Tooltip bileşeni
+              tempEventStyle = {tempEventStyle}
+              eventStyleResolver={eventStyleResolver}
+
             />
 
             {/* Tooltip */}

package/src/components/Timeline/TimelineContent.js

@@ -18,22 +18,35 @@ const TimelineContent = ({
   resourceSettings,
   setDropInfo,
 
-  // Yeni prop'lar
+  
   eventsDragOn = true,
   eventsExtendOn = true,
   createNewEventOn = true,
-  onDragInfo,
+
   onExtendInfo,
   onCreateEventInfo,
   onEventRightClick,
+
+  eventTooltipOn = true, 
+  tooltipComponent: TooltipComponent,
+  tempEventStyle = {},
+
+  eventStyleResolver = () => ({}),
 }) => {
   // ------------------- HOOKS & STATE -------------------
   const containerRef = useRef(null);
 
   // Drag
   const { isDragging, dragStart, dragEnd } = useDragAndDrop(events, setEvents);
-  const { handleDragStart, handleDragOver, handleDrop, handleDragEnd } =
-    useEventDragDrop(events, setEvents, setDropInfo);
+  const { handleDragStart, handleDragOver, handleDrop, handleDragEnd } = useEventDragDrop(
+    events,
+    setEvents,
+    setDropInfo // Doğrudan setDropInfo'yu geçiriyoruz
+  );
+  
+
+
+  
 
   // Extend
   const { extendEvent } = useExtendEvent(events, setEvents);
@@ -55,9 +68,14 @@ const TimelineContent = ({
   // ------------------- Tooltip Logic -------------------
   const handleEventClickInternal = (event, e) => {
     e.stopPropagation();
+    // Eğer mod "extend" ise tooltip'i açma
+    if (mode === "extend") {
+      return;
+    }
+  
     // Harici callback
     if (onEventClick) onEventClick(event, e);
-
+  
     // Tooltip göstermek
     const eventElement = e.currentTarget;
     if (eventElement) {
@@ -69,6 +87,7 @@ const TimelineContent = ({
       setSelectedEvent(event);
     }
   };
+  
 
   const handleCloseTooltip = () => {
     setSelectedEvent(null);
@@ -154,8 +173,11 @@ const TimelineContent = ({
       return;
     }
     handleDragEnd();
-    // onDragInfo(...) => if needed
+  
+
   };
+  
+  
 
   // ------------------- Extend Logic -------------------
   const handleMouseDownExtend = (mouseEvent, event) => {
@@ -199,11 +221,16 @@ const TimelineContent = ({
         });
       }
     }
-    setMode(null);
+  
+    // Tooltip açılmasını engellemek için modun null olmasını geciktiriyoruz
+    setTimeout(() => {
+      setMode(null);
+    }, 100); // 100ms gecikme
     setExtendingEvent(null);
     setOriginalEndDate(null);
     setStartMouseX(null);
   };
+  
 
   useEffect(() => {
     if (mode === "extend") {
@@ -273,6 +300,11 @@ const TimelineContent = ({
     };
   };
 
+
+  
+
+  
+  
   // ------------------- RENDER -------------------
   return (
     <div
@@ -283,138 +315,131 @@ const TimelineContent = ({
         <Indicator todayIndex={todayIndex} totalDays={totalDays} />
       )}
 
-      {groupedResources.map((group, groupIndex) => (
-        <div key={groupIndex} className="timeline-group-container">
-          {/* Grup Başlığı */}
-          {resourceSettings.isGrouped && (
-            <div className="timeline-group-header-row">
-              {dates.map((dateObj, colIndex) => (
-                <div
-                  key={`group-header-${groupIndex}-${colIndex}`}
-                  className="timeline-group-header-cell"
-                ></div>
-              ))}
-            </div>
-          )}
-
-          {/* Kaynaklar */}
-          {!collapsedGroups[group.groupName] &&
-            group.resources.map((resource, rowIndex) => {
-              const resourceEvents = events.filter((ev) => ev.resourceId === resource.id);
+{groupedResources.map((group, groupIndex) => (
+  <div key={groupIndex} className="timeline-group-container">
+    {/* Grup Başlığı */}
+    {resourceSettings.isGrouped && (
+      <div className="timeline-group-header-row">
+        {dates.map((dateObj, colIndex) => (
+          <div
+            key={`group-header-${groupIndex}-${colIndex}`}
+            className="timeline-group-header-cell"
+          ></div>
+        ))}
+      </div>
+    )}
+
+    {/* Kaynaklar */}
+    {!collapsedGroups[group.groupName] &&
+      group.resources.map((resource, rowIndex) => {
+        const resourceEvents = events.filter((ev) => ev.resourceId === resource.id);
+
+        return (
+          <div key={resource.id} className="timeline-resource-row">
+            {/* Her resource row'u */}
+            {resourceEvents.map((event) => {
+              const { isVisible, left, width, isPartialStart, isPartialEnd } =
+                calculatePosition(event, dates);
+              if (!isVisible) return null;
+
+              // Kullanıcıdan gelen stil
+              const eventStyle = eventStyleResolver ? eventStyleResolver(event) : {};
 
               return (
-                <div key={resource.id} className="timeline-resource-row">
-                  {/* Her resource row'u */}
-                  {resourceEvents.map((event) => {
-                    const { isVisible, left, width, isPartialStart, isPartialEnd } =
-                      calculatePosition(event, dates);
-                    if (!isVisible) return null;
-
-                    return (
-                      <div
-                        key={event.id}
-                        className="timeline-event"
-                        draggable={mode !== "extend" && eventsDragOn}
-                        onDragStart={(e) => {
-                          if (mode === "extend") {
-                            e.preventDefault();
-                            return;
-                          }
-                          handleDragStartSafe(e, event.id);
-                        }}
-                        onDragEnd={(e) => {
-                          if (mode === "extend") {
-                            e.preventDefault();
-                            return;
-                          }
-                          handleDragEndSafe(e);
-                        }}
-                        onContextMenu={(reactEvent) => handleRightClickEvent(event, reactEvent)}
-                        onClick={(ev) => handleEventClickInternal(event, ev)}
-                        style={{
-                          left,
-                          width,
-                          top: "5px",
-                          // color from var(--timeline-event-text-color)
-                          // background from event.color or var(...) => if event.color empty, fallback in CSS
-                          borderTopLeftRadius: isPartialStart ? "0px" : "20px",
-                          borderBottomLeftRadius: isPartialStart ? "0px" : "20px",
-                          borderTopRightRadius: isPartialEnd ? "0px" : "20px",
-                          borderBottomRightRadius: isPartialEnd ? "0px" : "20px",
-                          cursor: mode === "extend" ? "col-resize" : "grab",
-                        }}
-                      >
-                        {event.title}
-                        {eventsExtendOn && (
-                          <div
-                            className="timeline-event-extend-handle"
-                            onMouseDown={(mouseEvent) => {
-                              mouseEvent.stopPropagation();
-                              handleMouseDownExtend(mouseEvent, event);
-                            }}
-                          ></div>
-                        )}
-                      </div>
-                    );
-                  })}
-
-                  {/* Geçici (yeni) event */}
-                  {tempEvent && tempEvent.resourceId === resource.id && (
+                <div
+                  key={event.id}
+                  className="timeline-event"
+                  draggable={mode !== "extend" && eventsDragOn}
+                  onDragStart={(e) => {
+                    if (mode === "extend") {
+                      e.preventDefault();
+                      return;
+                    }
+                    handleDragStartSafe(e, event.id);
+                  }}
+                  onDragEnd={(e) => {
+                    if (mode === "extend") {
+                      e.preventDefault();
+                      return;
+                    }
+                    handleDragEndSafe(e);
+                  }}
+                  onContextMenu={(reactEvent) => handleRightClickEvent(event, reactEvent)}
+                  onClick={(ev) => handleEventClickInternal(event, ev)}
+                  style={{
+                    left,
+                    width,
+                    top: "5px",
+                    borderTopLeftRadius: isPartialStart ? "0px" : "20px",
+                    borderBottomLeftRadius: isPartialStart ? "0px" : "20px",
+                    borderTopRightRadius: isPartialEnd ? "0px" : "20px",
+                    borderBottomRightRadius: isPartialEnd ? "0px" : "20px",
+                    cursor: mode === "extend" ? "col-resize" : "grab",
+                    ...eventStyle, // Kullanıcı tarafından tanımlanan stiller
+                  }}
+                >
+                  {event.title}
+                  {eventsExtendOn && (
                     <div
-                      className="timeline-temp-event"
-                      style={{
-                        ...calculatePosition(tempEvent, dates),
-                        top: "5px",
+                      className="timeline-event-extend-handle"
+                      onMouseDown={(mouseEvent) => {
+                        mouseEvent.stopPropagation();
+                        handleMouseDownExtend(mouseEvent, event);
                       }}
-                    >
-                      {tempEvent.title}
-                    </div>
-                  )}
-
-                  {/* Tarih Hücreleri */}
-                  {dates.map((dateObj, colIndex) => (
-                    <div
-                      key={`cell-${groupIndex}-${rowIndex}-${colIndex}`}
-                      className={`timeline-cell ${
-                        isCellSelected(resource.id, dateObj) ? "selected" : ""
-                      }`}
-                      data-date={JSON.stringify(dateObj)}
-                      data-resource-id={resource.id}
-                      onMouseDown={() => handleCellClick(resource.id, dateObj)}
-                      onDragOver={(e) => handleDragOver(e)}
-                      onDrop={(e) =>
-                        handleDrop(e, resource.id, parseDate(dateObj.fullDate))
-                      }
                     ></div>
-                  ))}
+                  )}
                 </div>
               );
             })}
-        </div>
-      ))}
+
+            {/* Geçici (yeni) event */}
+            {tempEvent && tempEvent.resourceId === resource.id && (
+              <div
+                className="timeline-temp-event"
+                style={{
+                  ...calculatePosition(tempEvent, dates),
+                  ...tempEventStyle, // Kullanıcının geçtiği stiller
+                }}
+              >
+                {tempEvent.title}
+              </div>
+            )}
+
+            {/* Tarih Hücreleri */}
+            {dates.map((dateObj, colIndex) => (
+              <div
+                key={`cell-${groupIndex}-${rowIndex}-${colIndex}`}
+                className={`timeline-cell ${
+                  isCellSelected(resource.id, dateObj) ? "selected" : ""
+                }`}
+                data-date={JSON.stringify(dateObj)}
+                data-resource-id={resource.id}
+                onMouseDown={() => handleCellClick(resource.id, dateObj)}
+                onDragOver={(e) => handleDragOver(e)}
+                onDrop={(e) =>
+                  handleDrop(e, resource.id, parseDate(dateObj.fullDate))
+                }
+              ></div>
+            ))}
+          </div>
+        );
+      })}
+  </div>
+))}
+
 
       {/* Tooltip vb. */}
-      {selectedEvent && (
-        // "timeline-event-tooltip" gibi className tanımlanabilir
-        // eğer custom css istenirse
-        <div
-          style={{
-            position: "absolute",
-            top: tooltipPosition.top,
-            left: tooltipPosition.left,
-            // ...
-            backgroundColor: "#333",
-            color: "#fff",
-            padding: "5px",
-            borderRadius: "4px",
-            zIndex: 999,
-          }}
-        >
-          <button onClick={() => handleCloseTooltip()}>X</button>
-          {/* Content */}
-          {selectedEvent.title}
-        </div>
-      )}
+      {eventTooltipOn && selectedEvent && TooltipComponent && mode !== "extend" && (
+  <TooltipComponent
+    event={selectedEvent}
+    position={tooltipPosition}
+    onClose={handleCloseTooltip}
+  />
+)}
+
+
+
+
     </div>
   );
 };

package/src/hooks/useEventDragDrop.js

@@ -38,20 +38,34 @@ const useEventDragDrop = (events, setEvents, setDropInfo) => {
 
   const handleDrop = (event, resourceId, targetDate) => {
     event.preventDefault();
-
+  
     if (mode === "drag" && draggingEvent) {
       const draggedEvent = events.find((evt) => evt.id === draggingEvent);
-
+  
       if (draggedEvent) {
         const duration = draggedEvent.endDate - draggedEvent.startDate;
         const cellWidth = event.target.offsetWidth || 30;
         const offsetDays = Math.floor(dragOffset / cellWidth);
         const newStartDate = new Date(targetDate.getTime() - offsetDays * 24 * 60 * 60 * 1000);
         const newEndDate = new Date(newStartDate.getTime() + duration);
-
-        console.log("New Start Date:", newStartDate);
-        console.log("New End Date:", newEndDate);
-
+  
+        // Callback kontrolü ve loglama
+        if (setDropInfo) {
+          console.log("setDropInfo is being called with:", {
+            id: draggingEvent,
+            newResourceId: resourceId,
+            newStartDate,
+            newEndDate,
+          });
+          setDropInfo({
+            id: draggingEvent,
+            newResourceId: resourceId,
+            newStartDate,
+            newEndDate,
+          });
+        }
+  
+        // Event güncellemesi
         setEvents((prevEvents) =>
           prevEvents.map((evt) =>
             evt.id === draggingEvent
@@ -64,22 +78,14 @@ const useEventDragDrop = (events, setEvents, setDropInfo) => {
               : evt
           )
         );
-
-        if (setDropInfo) {
-          setDropInfo({
-            id: draggingEvent,
-            newResourceId: resourceId,
-            newStartDate,
-            newEndDate,
-          });
-        }
       }
     }
-
+  
     setDraggingEvent(null);
     setDragOffset(0);
     setMode(null);
   };
+  
 
   const handleExtend = (event, eventId, newEndDate) => {
     if (mode !== "extend" || draggingEvent !== eventId) return;