akfatimeline 1.0.6 → 1.2.0

package/dist/dist/components/Timeline/TimelineContent.js

@@ -1,446 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { parseDate } from "../../utils/dateUtils";
-import useDragAndDrop from "../../hooks/useDragAndDrop";
-import useEventDragDrop from "../../hooks/useEventDragDrop";
-import Indicator from "./Indicator";
-import useExtendEvent from "../../hooks/useExtendEvent";
-// import "./Timeline.css"; // varsayalım "Timeline.css" globalde import ediliyor
-
-const TimelineContent = ({
-  groupedResources,
-  dates,
-  collapsedGroups,
-  events,
-  setEvents,
-  onEventClick,
-  todayIndex,
-  indicatorOn,
-  resourceSettings,
-  setDropInfo,
-
-  
-  eventsDragOn = true,
-  eventsExtendOn = true,
-  createNewEventOn = true,
-
-  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 // Doğrudan setDropInfo'yu geçiriyoruz
-  );
-  
-
-
-  
-
-  // Extend
-  const { extendEvent } = useExtendEvent(events, setEvents);
-  const [mode, setMode] = useState(null); // null | "extend"
-  const [extendingEvent, setExtendingEvent] = useState(null);
-  const [originalEndDate, setOriginalEndDate] = useState(null);
-  const [startMouseX, setStartMouseX] = useState(null);
-
-  // Create new event
-  const [isCreating, setIsCreating] = useState(false);
-  const [tempEvent, setTempEvent] = useState(null);
-
-  // Tooltip
-  const [selectedEvent, setSelectedEvent] = useState(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-
-  const totalDays = dates.length;
-
-  // ------------------- 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) {
-      const rect = eventElement.getBoundingClientRect();
-      setTooltipPosition({
-        top: rect.top + window.scrollY,
-        left: rect.left + rect.width / 2 + window.scrollX,
-      });
-      setSelectedEvent(event);
-    }
-  };
-  
-
-  const handleCloseTooltip = () => {
-    setSelectedEvent(null);
-  };
-
-  // ------------------- Create New Event -------------------
-  const handleCellClick = (resourceId, date) => {
-    if (!createNewEventOn) return; // create devrede değilse
-
-    const startDate = parseDate(date.fullDate);
-    const newEvent = {
-      id: Date.now(),
-      title: "1 Gece",
-      startDate,
-      endDate: new Date(startDate.getTime() + 24 * 60 * 60 * 1000),
-      resourceId,
-      // color => var(--timeline-new-event-background-color) => => Sonra inline style yerine className
-      color: "", // Bunu .css’te "var(--timeline-new-event-background-color)" atayabilirsin
-    };
-    setTempEvent(newEvent);
-    setIsCreating(true);
-  };
-
-  useEffect(() => {
-    if (!createNewEventOn) return;
-    if (!isCreating) return;
-    if (mode === "extend") {
-      console.log(">>> 'extend' mode, skip new event creation");
-      return;
-    }
-
-    const handleMouseMove = (e) => {
-      if (!isCreating || !tempEvent) return;
-      const cell = document.elementFromPoint(e.clientX, e.clientY);
-      const cellW = cell?.offsetWidth || 30;
-
-      const startX = tempEvent.startX || e.clientX;
-      const deltaX = e.clientX - startX;
-      const daysToAdd = Math.max(1, Math.floor(deltaX / cellW));
-
-      const newEndDate = new Date(tempEvent.startDate.getTime());
-      newEndDate.setDate(newEndDate.getDate() + daysToAdd);
-
-      setTempEvent({
-        ...tempEvent,
-        endDate: newEndDate,
-        startX: startX,
-        title: `${daysToAdd} Gece`,
-      });
-    };
-
-    const handleMouseUp = () => {
-      if (isCreating && tempEvent) {
-        setEvents([...events, tempEvent]);
-        if (onCreateEventInfo) {
-          onCreateEventInfo(tempEvent);
-        }
-      }
-      setTempEvent(null);
-      setIsCreating(false);
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [createNewEventOn, isCreating, mode, tempEvent, events, onCreateEventInfo, setEvents]);
-
-  // ------------------- Drag Logic -------------------
-  const handleDragStartSafe = (e, eventId) => {
-    if (!eventsDragOn) {
-      e.preventDefault();
-      return;
-    }
-    handleDragStart(e, eventId);
-  };
-  const handleDragEndSafe = (e) => {
-    if (!eventsDragOn) {
-      e.preventDefault();
-      return;
-    }
-    handleDragEnd();
-  
-
-  };
-  
-  
-
-  // ------------------- Extend Logic -------------------
-  const handleMouseDownExtend = (mouseEvent, event) => {
-    if (!eventsExtendOn) return;
-    mouseEvent.stopPropagation();
-    console.log(">>> Extend start ID:", event.id);
-    setMode("extend");
-    setExtendingEvent(event);
-    setOriginalEndDate(event.endDate);
-    setStartMouseX(mouseEvent.clientX);
-  };
-
-  const handleMouseMoveExtend = (e) => {
-    if (mode !== "extend" || !extendingEvent) return;
-    if (!eventsExtendOn) return;
-
-    const currentMouseX = e.clientX;
-    const deltaX = currentMouseX - (startMouseX ?? 0);
-    const cellW = 30;
-    const daysToAdd = Math.floor(deltaX / cellW);
-
-    const newEndDate = new Date((originalEndDate ?? new Date()).getTime());
-    newEndDate.setDate(newEndDate.getDate() + daysToAdd);
-
-
-    setEvents((prev) =>
-      prev.map((evt) => (evt.id === extendingEvent.id ? { ...evt, endDate: newEndDate } : evt))
-    );
-  };
-
-  const handleMouseUpExtend = () => {
-    console.log(">>> Extend finished ID:", extendingEvent?.id);
-    if (onExtendInfo && extendingEvent) {
-      // callback
-      const updatedEvent = events.find((ev) => ev.id === extendingEvent.id);
-      if (updatedEvent) {
-        onExtendInfo({
-          eventId: extendingEvent.id,
-          newEndDate: updatedEvent.endDate,
-        });
-      }
-    }
-  
-    // 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") {
-      const onMove = (e) => handleMouseMoveExtend(e);
-      const onUp = () => handleMouseUpExtend();
-      document.addEventListener("mousemove", onMove);
-      document.addEventListener("mouseup", onUp);
-      return () => {
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
-      };
-    }
-  }, [mode, extendingEvent, eventsExtendOn, originalEndDate, startMouseX]);
-
-  // ------------------- Right Click (context) -------------------
-  const handleRightClickEvent = (evt, reactEvent) => {
-    reactEvent.preventDefault();
-    if (onEventRightClick) onEventRightClick(evt, reactEvent);
-  };
-
-  // ------------------- Helper isCellSelected -------------------
-  const isCellSelected = (resourceId, date) => {
-    if (!dragStart || !dragEnd) return false;
-    if (resourceId !== dragStart.resourceId) return false;
-
-    const startIndex = dates.findIndex((d) => parseDate(d.fullDate).getTime() === parseDate(dragStart.date).getTime());
-    const endIndex = dates.findIndex((d) => parseDate(d.fullDate).getTime() === parseDate(dragEnd.date).getTime());
-    const currentIndex = dates.findIndex((d) => parseDate(d.fullDate).getTime() === parseDate(date.fullDate).getTime());
-
-    if (startIndex === -1 || endIndex === -1 || currentIndex === -1) return false;
-
-    return currentIndex >= Math.min(startIndex, endIndex) && currentIndex <= Math.max(startIndex, endIndex);
-  };
-
-  // ------------------- calculatePosition -------------------
-  const calculatePosition = (ev, dateArr) => {
-    const startDate = parseDate(ev.startDate);
-    const endDate = parseDate(ev.endDate);
-
-    const startIndex = dateArr.findIndex((d) => parseDate(d.fullDate).toDateString() === startDate.toDateString());
-    const endIndex = dateArr.findIndex((d) => parseDate(d.fullDate).toDateString() === endDate.toDateString());
-
-    const totalDays = dateArr.length;
-    if (startIndex < 0 && endIndex < 0) {
-      return { isVisible: false, left: 0, width: 0, isPartialStart: false, isPartialEnd: false };
-    }
-    if (startIndex >= totalDays && endIndex >= totalDays) {
-      return { isVisible: false, left: 0, width: 0, isPartialStart: false, isPartialEnd: false };
-    }
-
-    const effectiveStartIndex = Math.max(startIndex, 0);
-    const effectiveEndIndex = Math.min(endIndex, totalDays - 1);
-
-    const isPartialStart = startIndex < 0;
-    const isPartialEnd = endIndex >= totalDays;
-
-    const leftPercentage = ((effectiveStartIndex + (isPartialStart ? 0 : 0.5)) / totalDays) * 100;
-    const rightPercentage = ((effectiveEndIndex + (isPartialEnd ? 1 : 0.5)) / totalDays) * 100;
-    const widthPercentage = rightPercentage - leftPercentage;
-
-    return {
-      isVisible: true,
-      left: `${leftPercentage}%`,
-      width: `${widthPercentage}%`,
-      isPartialStart,
-      isPartialEnd,
-    };
-  };
-
-
-  
-
-  
-  
-  // ------------------- RENDER -------------------
-  return (
-    <div
-      ref={containerRef}
-      className="timeline-content-container" // Yeni class, stilini timeline.css'e ekleyebilirsin
-    >
-      {indicatorOn && (
-        <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);
-
-        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={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-event-extend-handle"
-                      onMouseDown={(mouseEvent) => {
-                        mouseEvent.stopPropagation();
-                        handleMouseDownExtend(mouseEvent, event);
-                      }}
-                    ></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. */}
-      {eventTooltipOn && selectedEvent && TooltipComponent && mode !== "extend" && (
-  <TooltipComponent
-    event={selectedEvent}
-    position={tooltipPosition}
-    onClose={handleCloseTooltip}
-  />
-)}
-
-
-
-
-    </div>
-  );
-};
-
-export default TimelineContent;

package/dist/dist/components/Timeline/TimelineEvents.js

@@ -1,114 +0,0 @@
-// src/components/Timeline/TimelineEvents.js
-import React from "react";
-import { isDateInRange, parseDate } from "../../utils/dateUtils";
-
-const TimelineEvents = ({ date, events, resourceId, onDelete }) => {
-  // Gelen tüm props'ları kontrol et
-  console.log("TimelineEvents Props:", { date, events, resourceId, onDelete });
-
-  const dateToCompare = date?.fullDate;
-
-  if (!dateToCompare) {
-    console.error("Hata: date.fullDate değeri tanımlı değil.");
-    return null;
-  }
-
-  if (!Array.isArray(events)) {
-    console.error("Hata: events bir dizi değil.", events);
-    return null;
-  }
-
-  if (!resourceId) {
-    console.error("Hata: resourceId değeri tanımlı değil.");
-    return null;
-  }
-
-  // Event'leri filtrele: Tarih aralığı ve resource eşleşmesi ile
-  const filteredEvents = events.filter((event) => {
-    const isMatch =
-      event.resourceId === resourceId &&
-      isDateInRange(dateToCompare, event.startDate, event.endDate);
-    console.log(
-      "Event Filtering:",
-      {
-        event,
-        dateToCompare,
-        isMatch,
-        resourceId,
-        startDate: event.startDate,
-        endDate: event.endDate,
-      }
-    );
-    return isMatch;
-  });
-
-  console.log("Filtered Events for Resource:", { resourceId, filteredEvents });
-
-  return (
-    <div style={{ position: "relative", height: "100%", width: "100%" }}>
-      {filteredEvents.map((event) => {
-        const eventStartDate = parseDate(event.startDate);
-        const eventEndDate = parseDate(event.endDate);
-
-        if (!eventStartDate || !eventEndDate) {
-          console.error("Hata: Etkinlik başlangıç veya bitiş tarihi hatalı.", {
-            event,
-          });
-          return null;
-        }
-
-        const durationInDays = Math.floor(
-          (eventEndDate - eventStartDate) / (24 * 60 * 60 * 1000) + 1
-        );
-
-        return (
-          <div
-            key={event.id}
-            onClick={(e) => {
-              e.stopPropagation(); // Sürükleme işlemini engelle
-              if (window.confirm(`\"${event.title}\" etkinliğini silmek istiyor musun?`)) {
-                onDelete(event.id);
-              }
-            }}
-            style={{
-              position: "absolute",
-              top: "5px", // Üstten biraz boşluk
-              left: "5px", // Soldan biraz boşluk
-              width: `calc(${durationInDays * 100}% - 10px)`, // Sağdan ve soldan 5px boşluk için 10px çıkarıldı
-              height: `calc(100% - 10px)`, // Alttan ve üstten 5px boşluk için 10px çıkarıldı
-              backgroundColor: event.color,
-              color: "#fff",
-              fontSize: "14px",
-              padding: "5px 10px",
-              borderRadius: "6px",
-              textAlign: "left",
-              display: "flex",
-              alignItems: "center",
-              boxSizing: "border-box",
-              zIndex: 10,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              border: "1px solid #fff",
-              cursor: "pointer",
-              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
-              transition: "transform 0.2s ease, box-shadow 0.2s ease",
-            }}
-            onMouseOver={(e) => {
-              e.currentTarget.style.transform = "scale(1.02)";
-              e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
-            }}
-            onMouseOut={(e) => {
-              e.currentTarget.style.transform = "scale(1)";
-              e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
-            }}
-          >
-            {event.title}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default TimelineEvents;

package/dist/dist/components/Timeline/TimelineHeader.js

@@ -1,43 +0,0 @@
-import React from "react";
-import "./Timeline.css"; // CSS dosyasını import etmeyi unutma
-
-const TimelineHeader = ({ dates, monthHeaders }) => {
-  return (
-    <div className="timeline-header-container">
-      {/* Ay ve Yıl Başlıkları */}
-      <div className="timeline-header-month-row">
-        {monthHeaders.map((monthHeader, index) => (
-          <div
-            key={index}
-            className="timeline-header-month-cell"
-            style={{
-              flex: monthHeader.endIndex - monthHeader.startIndex + 1,
-              borderRight:
-                index < monthHeaders.length - 1 ? "1px solid var(--border-color)" : "none",
-            }}
-          >
-            {monthHeader.monthName} {monthHeader.year}
-          </div>
-        ))}
-      </div>
-
-      {/* Günlük Hücreler */}
-      <div className="timeline-header-day-row">
-        {dates.map((date, index) => (
-          <div
-            key={index}
-            className="timeline-header-day-cell"
-            style={{
-              flex: 1,
-              borderRight: index < dates.length - 1 ? "1px solid var(--border-color)" : "none",
-            }}
-          >
-            {date.display}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default TimelineHeader;

package/dist/dist/components/Timeline/TimelineMonthContainer.js

@@ -1,29 +0,0 @@
-import React from "react";
-import TimelineHeader from "./TimelineHeader";
-import TimelineContent from "./TimelineContent";
-
-const TimelineMonthContainer = ({
-  dates,
-  month,
-  groupedResources,
-  collapsedGroups,
-  toggleGroupCollapse,
-}) => {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
-      {/* Timeline Header */}
-      <TimelineHeader dates={dates} monthHeaders={[{ month, startIndex: 0, endIndex: dates.length - 1 }]} />
-
-      {/* Timeline Content */}
-      <div style={{ display: "flex" }}>
-        <TimelineContent
-          groupedResources={groupedResources}
-          dates={dates}
-          collapsedGroups={collapsedGroups}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default TimelineMonthContainer;

package/dist/dist/components/Timeline/TimelineResources.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import './Timeline.css';
-
-const TimelineResources = ({ resources }) => {
-  return (
-    <div className="timeline-resources">
-      {resources.map((resource, index) => (
-        <div key={index} className="resource-cell">
-          {resource}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default TimelineResources;