akfatimeline 1.0.0 → 1.0.4

package/dist/dist/hooks/useDragAndDrop.js

@@ -0,0 +1,80 @@
+// src/hooks/useDragAndDrop.js
+import { useState } from "react";
+import { parseDate } from "../utils/dateUtils"; // Named import
+
+const useDragAndDrop = (initialEvents = []) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState(null);
+    const [dragEnd, setDragEnd] = useState(null);
+    const [events, setEvents] = useState(initialEvents);
+
+    // Sürükleme başlat
+    const startDrag = (resourceId, date) => {
+        setIsDragging(true);
+        setDragStart({ resourceId, date });
+        setDragEnd({ resourceId, date });
+    };
+
+    // Sürükleme hareketi
+    const updateDrag = (resourceId, date) => {
+        if (!isDragging) return;
+        setDragEnd({ resourceId, date });
+    };
+
+    // Sürükleme bitişi
+    const endDrag = (dates) => {
+        if (!isDragging || !dragStart || !dragEnd) return;
+        if (dragStart.resourceId !== dragEnd.resourceId) {
+            resetDrag();
+            return;
+        }
+
+        const startDateIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).toDateString() === parseDate(dragStart.date.fullDate).toDateString()
+        );
+        const endDateIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).toDateString() === parseDate(dragEnd.date.fullDate).toDateString()
+        );
+
+        if (startDateIndex === -1 || endDateIndex === -1) {
+            resetDrag();
+            return;
+        }
+
+        const sortedStartIndex = Math.min(startDateIndex, endDateIndex);
+        const sortedEndIndex = Math.max(startDateIndex, endDateIndex);
+        const startDate = dates[sortedStartIndex].fullDate;
+        const endDate = dates[sortedEndIndex].fullDate;
+
+        const newEvent = {
+            id: Date.now(),
+            title: "Yeni Etkinlik",
+            resourceId: dragStart.resourceId,
+            startDate: startDate,
+            endDate: endDate,
+            color: "#ff7f50",
+        };
+
+        setEvents((prev) => [...prev, newEvent]);
+        resetDrag();
+    };
+
+    const resetDrag = () => {
+        setIsDragging(false);
+        setDragStart(null);
+        setDragEnd(null);
+    };
+
+    return {
+        events,
+        isDragging,
+        dragStart,
+        dragEnd,
+        startDrag,
+        updateDrag,
+        endDrag,
+        setEvents,
+    };
+};
+
+export default useDragAndDrop;

package/dist/dist/hooks/useEventDragDrop.js

@@ -0,0 +1,120 @@
+import { useState } from "react";
+
+const useEventDragDrop = (events, setEvents, setDropInfo) => {
+  const [draggingEvent, setDraggingEvent] = useState(null);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [mode, setMode] = useState(null); // "drag" veya "extend"
+
+  const handleDragStart = (event, eventId) => {
+    if (mode === "extend") return; // Uzatma modundaysa taşıma işlemini başlatma
+
+    event.stopPropagation();
+
+    const eventElement = event.target;
+    const eventRect = eventElement.getBoundingClientRect();
+    const offset = event.clientX - eventRect.left;
+
+    setDraggingEvent(eventId);
+    setDragOffset(offset);
+    setMode("drag"); // Modu taşıma olarak ayarla
+
+    const draggedEvent = events.find((evt) => evt.id === eventId);
+    if (draggedEvent) {
+      console.log("Dragging Event Start:", draggedEvent.startDate);
+      console.log("Dragging Event End:", draggedEvent.endDate);
+    }
+  };
+
+  const handleExtendStart = (event, eventId) => {
+    event.stopPropagation();
+
+    setDraggingEvent(eventId);
+    setMode("extend"); // Modu uzatma olarak ayarla
+  };
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+  };
+
+  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);
+
+        setEvents((prevEvents) =>
+          prevEvents.map((evt) =>
+            evt.id === draggingEvent
+              ? {
+                  ...evt,
+                  resourceId,
+                  startDate: newStartDate,
+                  endDate: newEndDate,
+                }
+              : 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;
+
+    setEvents((prevEvents) =>
+      prevEvents.map((evt) =>
+        evt.id === eventId
+          ? {
+              ...evt,
+              endDate: newEndDate,
+            }
+          : evt
+      )
+    );
+
+    console.log("Extended Event ID:", eventId, "New End Date:", newEndDate);
+
+    setDraggingEvent(null);
+    setMode(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggingEvent(null);
+    setDragOffset(0);
+    setMode(null);
+  };
+
+  return {
+    handleDragStart,
+    handleExtendStart,
+    handleDragOver,
+    handleDrop,
+    handleExtend,
+    handleDragEnd,
+  };
+};
+
+export default useEventDragDrop;

package/dist/dist/hooks/useExtendEvent.js

@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+
+const useExtendEvent = (events, setEvents) => {
+  /**
+   * Etkinliği uzatmak veya kısaltmak için kullanılan işlev.
+   * @param {number} eventId - Güncellenmesi gereken etkinliğin ID'si.
+   * @param {Date} newEndDate - Etkinliğin yeni bitiş tarihi.
+   */
+  const extendEvent = useCallback(
+    (eventId, newEndDate) => {
+      setEvents((prevEvents) =>
+        prevEvents.map((event) =>
+          event.id === eventId
+            ? {
+                ...event,
+                endDate: newEndDate, // Yeni bitiş tarihini günceller
+              }
+            : event // Diğer etkinlikler aynı kalır
+        )
+      );
+    },
+    [setEvents]
+  );
+
+  return { extendEvent };
+};
+
+export default useExtendEvent;

package/dist/dist/utils/dateUtils.js

@@ -0,0 +1,36 @@
+// src/utils/dateUtils.js
+
+/**
+ * "dd/mm/yyyy" formatındaki bir tarih string'ini Date objesine dönüştürür.
+ * Eğer dateInput bir string değilse, direkt Date objesini döndürür.
+ * @param {string | Object | Date} dateInput - "dd/mm/yyyy" formatında tarih stringi veya {fullDate: Date, display: string} objesi veya Date objesi.
+ * @returns {Date} - Date objesi.
+ */
+export const parseDate = (dateInput) => {
+  if (dateInput instanceof Date) {
+    return dateInput;
+  }
+  if (typeof dateInput === 'string') {
+    const [day, month, year] = dateInput.split("/").map(Number);
+    return new Date(year, month - 1, day);
+  } else if (typeof dateInput === 'object' && dateInput.fullDate instanceof Date) {
+    return new Date(dateInput.fullDate.getTime() + dateInput.fullDate.getTimezoneOffset() * 60000);
+  } else {
+    console.error("parseDate received invalid input:", dateInput);
+    return new Date(); // veya hata fırlat
+  }
+};
+
+/**
+ * Bir tarihin belirli bir aralık içinde olup olmadığını kontrol eder.
+ * @param {string | Object | Date} date - "dd/mm/yyyy" formatında tarih stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+ * @param {string | Object | Date} startDate - "dd/mm/yyyy" formatında başlangıç tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+ * @param {string | Object | Date} endDate - "dd/mm/yyyy" formatında bitiş tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+ * @returns {boolean} - Tarih aralık içinde ise true, değilse false.
+ */
+export const isDateInRange = (date, startDate, endDate) => {
+  const d = parseDate(date);
+  const start = parseDate(startDate);
+  const end = parseDate(endDate);
+  return d >= start && d <= end;
+};

package/dist/dist/utils/filterTimelineData.js

@@ -0,0 +1,21 @@
+const filterTimelineData = (dates, startDate, dayCount) => {
+    const startIndex = dates.findIndex(
+      (date) => date.fullDate.toISOString().split("T")[0] === startDate
+    );
+  
+    if (startIndex === -1) {
+      console.warn("Seçilen başlangıç tarihi bulunamadı.");
+      return { filteredDates: [] };
+    }
+  
+    const filteredDates = dates.slice(startIndex, startIndex + dayCount);
+  
+    return {
+      filteredDates,
+      startIndex,
+      endIndex: startIndex + dayCount - 1,
+    };
+  };
+  
+  export default filterTimelineData;
+  

package/dist/dist/utils/timelineUtils.js

@@ -0,0 +1,40 @@
+// src/utils/timelineUtils.js
+
+export const generateTimelineData = (startYear, endYear) => {
+    const dayNames = ["Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt"];
+    const monthNames = [
+      "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran",
+      "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık",
+    ];
+  
+    const dates = [];
+    const monthHeaders = [];
+  
+    for (let year = startYear; year <= endYear; year++) {
+      for (let month = 1; month <= 12; month++) {
+        const daysInMonth = new Date(year, month, 0).getDate();
+        const startIndex = dates.length;
+  
+        for (let day = 1; day <= daysInMonth; day++) {
+          const date = new Date(year, month - 1, day);
+          const dayName = dayNames[date.getDay()];
+          dates.push({
+            fullDate: date,
+            display: `${day} ${dayName}`,
+          });
+        }
+  
+        const endIndex = dates.length - 1;
+        monthHeaders.push({
+          monthName: monthNames[month - 1],
+          year,
+          startIndex,
+          endIndex,
+          totalDays: endIndex - startIndex + 1,
+        });
+      }
+    }
+  
+    return { dates, monthHeaders };
+  };
+  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfatimeline",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "A customizable timeline component for React applications",
   "main": "dist/Timeline.js",
   "module": "dist/Timeline.js",
@@ -46,5 +46,24 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AKFAPLUS/akfatimeline.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AKFAPLUS/akfatimeline/issues"
+  },
+  "homepage": "https://github.com/AKFAPLUS/akfatimeline#readme",
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "babel-loader": "^9.2.1",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   }
 }

package/public/index kutuphane /304/261c/304/261n.html"

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/index tasarim icin.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>