akfatimeline 1.0.6 → 1.2.0

package/src/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,158 @@
+import { useEffect, useCallback } from 'react';
+
+/**
+ * Keyboard shortcuts hook
+ * @param {Object} config - Keyboard shortcuts configuration
+ * @param {Function} config.onNavigateLeft - Left arrow key handler
+ * @param {Function} config.onNavigateRight - Right arrow key handler
+ * @param {Function} config.onNavigateUp - Up arrow key handler
+ * @param {Function} config.onNavigateDown - Down arrow key handler
+ * @param {Function} config.onDelete - Delete key handler
+ * @param {Function} config.onUndo - Ctrl+Z handler
+ * @param {Function} config.onRedo - Ctrl+Y handler
+ * @param {Function} config.onCopy - Ctrl+C handler
+ * @param {Function} config.onPaste - Ctrl+V handler
+ * @param {Function} config.onZoomIn - Ctrl+= or Ctrl++ handler
+ * @param {Function} config.onZoomOut - Ctrl+- handler
+ * @param {Object} config.keyMap - Custom key mappings (optional)
+ * @param {boolean} config.enabled - Enable/disable shortcuts
+ */
+const useKeyboardShortcuts = ({
+  onNavigateLeft,
+  onNavigateRight,
+  onNavigateUp,
+  onNavigateDown,
+  onDelete,
+  onUndo,
+  onRedo,
+  onCopy,
+  onPaste,
+  onZoomIn,
+  onZoomOut,
+  keyMap = {},
+  enabled = true,
+}) => {
+  // Default key mappings
+  const defaultKeyMap = {
+    navigateLeft: keyMap.navigateLeft || 'ArrowLeft',
+    navigateRight: keyMap.navigateRight || 'ArrowRight',
+    navigateUp: keyMap.navigateUp || 'ArrowUp',
+    navigateDown: keyMap.navigateDown || 'ArrowDown',
+    delete: keyMap.delete || 'Delete',
+    undo: keyMap.undo || { key: 'z', ctrl: true },
+    redo: keyMap.redo || { key: 'y', ctrl: true },
+    copy: keyMap.copy || { key: 'c', ctrl: true },
+    paste: keyMap.paste || { key: 'v', ctrl: true },
+    zoomIn: keyMap.zoomIn || { key: '=', ctrl: true },
+    zoomOut: keyMap.zoomOut || { key: '-', ctrl: true },
+  };
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!enabled) return;
+
+      const key = e.key;
+      const isCtrl = e.ctrlKey || e.metaKey; // Mac için cmd tuşu desteği
+
+      // Arrow keys
+      if (key === defaultKeyMap.navigateLeft && onNavigateLeft) {
+        e.preventDefault();
+        onNavigateLeft();
+      } else if (key === defaultKeyMap.navigateRight && onNavigateRight) {
+        e.preventDefault();
+        onNavigateRight();
+      } else if (key === defaultKeyMap.navigateUp && onNavigateUp) {
+        e.preventDefault();
+        onNavigateUp();
+      } else if (key === defaultKeyMap.navigateDown && onNavigateDown) {
+        e.preventDefault();
+        onNavigateDown();
+      }
+      // Delete key
+      else if (key === defaultKeyMap.delete && onDelete) {
+        e.preventDefault();
+        onDelete();
+      }
+      // Ctrl+Z (Undo)
+      else if (
+        isCtrl &&
+        key.toLowerCase() === defaultKeyMap.undo.key.toLowerCase() &&
+        onUndo
+      ) {
+        e.preventDefault();
+        onUndo();
+      }
+      // Ctrl+Y (Redo)
+      else if (
+        isCtrl &&
+        key.toLowerCase() === defaultKeyMap.redo.key.toLowerCase() &&
+        onRedo
+      ) {
+        e.preventDefault();
+        onRedo();
+      }
+      // Ctrl+C (Copy)
+      else if (
+        isCtrl &&
+        key.toLowerCase() === defaultKeyMap.copy.key.toLowerCase() &&
+        onCopy
+      ) {
+        e.preventDefault();
+        onCopy();
+      }
+      // Ctrl+V (Paste)
+      else if (
+        isCtrl &&
+        key.toLowerCase() === defaultKeyMap.paste.key.toLowerCase() &&
+        onPaste
+      ) {
+        e.preventDefault();
+        onPaste();
+      }
+      // Ctrl+= or Ctrl++ (Zoom In)
+      else if (
+        isCtrl &&
+        (key === '=' || key === '+' || (key === '=' && e.shiftKey)) &&
+        onZoomIn
+      ) {
+        e.preventDefault();
+        onZoomIn();
+      }
+      // Ctrl+- (Zoom Out)
+      else if (
+        isCtrl &&
+        key === '-' &&
+        onZoomOut
+      ) {
+        e.preventDefault();
+        onZoomOut();
+      }
+    },
+    [
+      enabled,
+      defaultKeyMap,
+      onNavigateLeft,
+      onNavigateRight,
+      onNavigateUp,
+      onNavigateDown,
+      onDelete,
+      onUndo,
+      onRedo,
+      onCopy,
+      onPaste,
+      onZoomIn,
+      onZoomOut,
+    ]
+  );
+
+  useEffect(() => {
+    if (enabled) {
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [enabled, handleKeyDown]);
+};
+
+export default useKeyboardShortcuts;

package/src/hooks/useTouchGestures.js

@@ -0,0 +1,90 @@
+// src/hooks/useTouchGestures.js
+
+import { useRef, useCallback } from 'react';
+
+/**
+ * Touch gesture hook for mobile support
+ * @param {Object} handlers - Gesture handlers
+ * @returns {Object} - Touch event handlers
+ */
+export const useTouchGestures = ({
+  onSwipeLeft,
+  onSwipeRight,
+  onSwipeUp,
+  onSwipeDown,
+  onPinch,
+  minSwipeDistance = 50,
+  enabled = true,
+}) => {
+  const touchStartRef = useRef(null);
+  const touchStartTimeRef = useRef(null);
+  const lastTouchRef = useRef(null);
+
+  const handleTouchStart = useCallback((e) => {
+    if (!enabled) return;
+    
+    const touch = e.touches[0];
+    touchStartRef.current = {
+      x: touch.clientX,
+      y: touch.clientY,
+    };
+    touchStartTimeRef.current = Date.now();
+    lastTouchRef.current = {
+      x: touch.clientX,
+      y: touch.clientY,
+    };
+  }, [enabled]);
+
+  const handleTouchMove = useCallback((e) => {
+    if (!enabled || !touchStartRef.current) return;
+    
+    const touch = e.touches[0];
+    if (lastTouchRef.current) {
+      lastTouchRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+      };
+    }
+  }, [enabled]);
+
+  const handleTouchEnd = useCallback((e) => {
+    if (!enabled || !touchStartRef.current || !lastTouchRef.current) return;
+    
+    const touchEnd = e.changedTouches[0];
+    const deltaX = touchEnd.clientX - touchStartRef.current.x;
+    const deltaY = touchEnd.clientY - touchStartRef.current.y;
+    const deltaTime = Date.now() - touchStartTimeRef.current;
+    
+    const absDeltaX = Math.abs(deltaX);
+    const absDeltaY = Math.abs(deltaY);
+    
+    // Hızlı swipe kontrolü (300ms içinde)
+    if (deltaTime < 300 && (absDeltaX > minSwipeDistance || absDeltaY > minSwipeDistance)) {
+      if (absDeltaX > absDeltaY) {
+        // Yatay swipe
+        if (deltaX > 0 && onSwipeRight) {
+          onSwipeRight();
+        } else if (deltaX < 0 && onSwipeLeft) {
+          onSwipeLeft();
+        }
+      } else {
+        // Dikey swipe
+        if (deltaY > 0 && onSwipeDown) {
+          onSwipeDown();
+        } else if (deltaY < 0 && onSwipeUp) {
+          onSwipeUp();
+        }
+      }
+    }
+    
+    touchStartRef.current = null;
+    lastTouchRef.current = null;
+  }, [enabled, minSwipeDistance, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]);
+
+  return {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+  };
+};
+

package/src/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './demo.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -10,8 +9,3 @@ root.render(
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/src/library.js

@@ -0,0 +1,26 @@
+import Timeline from "./components/Timeline/Timeline";
+import DailyView from "./components/Timeline/DailyView";
+import ContextMenu from "./components/Timeline/ContextMenu";
+import EventDetailModal from "./components/Timeline/EventDetailModal";
+import EventIcon from "./components/Timeline/EventIcon";
+import EventBadge from "./components/Timeline/EventBadge";
+import LoadingSpinner from "./components/Timeline/LoadingSpinner";
+import AutocompleteSelect from "./components/Timeline/AutocompleteSelect";
+
+// Ana Timeline component'i default export
+export default Timeline;
+
+// Named exports - İsteğe bağlı kullanım için
+export {
+  DailyView,
+  ContextMenu,
+  EventDetailModal,
+  EventIcon,
+  EventBadge,
+  LoadingSpinner,
+  AutocompleteSelect,
+};
+
+// CSS dosyası package.json'da exports altında tanımlı
+// Kullanım: import 'akfatimeline/components/Timeline/Timeline.css'
+

package/src/utils/conflictUtils.js

@@ -0,0 +1,105 @@
+// src/utils/conflictUtils.js
+
+import { parseDate } from './dateUtils';
+import { getTimeFromDate } from './timeUtils';
+
+/**
+ * İki event'in çakışıp çakışmadığını kontrol eder (gün bazlı)
+ * @param {Object} event1 - İlk event
+ * @param {Object} event2 - İkinci event
+ * @returns {boolean} - Çakışma varsa true
+ */
+export const checkDayBasedConflict = (event1, event2) => {
+  if (event1.resourceId !== event2.resourceId) {
+    return false; // Farklı resource'larda çakışma olmaz
+  }
+
+  const start1 = parseDate(event1.startDate);
+  const end1 = parseDate(event1.endDate);
+  const start2 = parseDate(event2.startDate);
+  const end2 = parseDate(event2.endDate);
+
+  // Çakışma kontrolü: bir event'in başlangıcı diğerinin içinde mi?
+  return (start1 <= end2 && end1 >= start2);
+};
+
+/**
+ * İki event'in saat bazlı çakışıp çakışmadığını kontrol eder
+ * @param {Object} event1 - İlk event
+ * @param {Object} event2 - İkinci event
+ * @returns {boolean} - Çakışma varsa true
+ */
+export const checkTimeBasedConflict = (event1, event2) => {
+  if (event1.resourceId !== event2.resourceId) {
+    return false; // Farklı resource'larda çakışma olmaz
+  }
+
+  const start1 = parseDate(event1.startDate);
+  const end1 = parseDate(event1.endDate);
+  const start2 = parseDate(event2.startDate);
+  const end2 = parseDate(event2.endDate);
+
+  // Aynı gün mü kontrol et
+  if (start1.toDateString() !== start2.toDateString()) {
+    return false; // Farklı günlerde çakışma olmaz (günlük kullanım için)
+  }
+
+  // Saat bazlı çakışma kontrolü
+  const time1 = getTimeFromDate(start1);
+  const time1End = getTimeFromDate(end1);
+  const time2 = getTimeFromDate(start2);
+  const time2End = getTimeFromDate(end2);
+
+  return (time1.totalMinutes < time2End.totalMinutes && time1End.totalMinutes > time2.totalMinutes);
+};
+
+/**
+ * Bir event listesinde çakışmaları bulur
+ * @param {Array} events - Event listesi
+ * @param {boolean} timeMode - Saat bazlı mod aktif mi
+ * @returns {Array} - Çakışma bilgileri [{event1, event2, conflictType}]
+ */
+export const detectConflicts = (events, timeMode = false) => {
+  const conflicts = [];
+  const checkConflict = timeMode ? checkTimeBasedConflict : checkDayBasedConflict;
+
+  for (let i = 0; i < events.length; i++) {
+    for (let j = i + 1; j < events.length; j++) {
+      if (checkConflict(events[i], events[j])) {
+        conflicts.push({
+          event1: events[i],
+          event2: events[j],
+          conflictType: timeMode ? 'time' : 'day',
+          resourceId: events[i].resourceId,
+        });
+      }
+    }
+  }
+
+  return conflicts;
+};
+
+/**
+ * Belirli bir resource için çakışmaları bulur
+ * @param {Array} events - Event listesi
+ * @param {string} resourceId - Resource ID
+ * @param {boolean} timeMode - Saat bazlı mod aktif mi
+ * @returns {Array} - Çakışma bilgileri
+ */
+export const detectResourceConflicts = (events, resourceId, timeMode = false) => {
+  const resourceEvents = events.filter(e => e.resourceId === resourceId);
+  return detectConflicts(resourceEvents, timeMode);
+};
+
+/**
+ * Bir event'in diğer event'lerle çakışıp çakışmadığını kontrol eder
+ * @param {Object} event - Kontrol edilecek event
+ * @param {Array} otherEvents - Diğer event'ler
+ * @param {boolean} timeMode - Saat bazlı mod aktif mi
+ * @returns {Array} - Çakışan event'ler
+ */
+export const findEventConflicts = (event, otherEvents, timeMode = false) => {
+  const checkConflict = timeMode ? checkTimeBasedConflict : checkDayBasedConflict;
+  return otherEvents.filter(e => e.id !== event.id && checkConflict(event, e));
+};
+

package/src/utils/dateUtils.js

@@ -1,36 +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;
-};
+// 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/src/utils/filterTimelineData.js

@@ -1,21 +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;
+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/src/utils/filterUtils.js

@@ -0,0 +1,106 @@
+// src/utils/filterUtils.js
+
+import { parseDate } from './dateUtils';
+
+/**
+ * Event'leri başlığa göre filtreler
+ * @param {Array} events - Event listesi
+ * @param {string} searchTerm - Arama terimi
+ * @returns {Array} - Filtrelenmiş event listesi
+ */
+export const filterByTitle = (events, searchTerm) => {
+  if (!searchTerm || searchTerm.trim() === '') {
+    return events;
+  }
+  
+  const term = searchTerm.toLowerCase().trim();
+  return events.filter(event => 
+    event.title && event.title.toLowerCase().includes(term)
+  );
+};
+
+/**
+ * Event'leri tarih aralığına göre filtreler
+ * @param {Array} events - Event listesi
+ * @param {Date} startDate - Başlangıç tarihi
+ * @param {Date} endDate - Bitiş tarihi
+ * @returns {Array} - Filtrelenmiş event listesi
+ */
+export const filterByDateRange = (events, startDate, endDate) => {
+  if (!startDate && !endDate) {
+    return events;
+  }
+  
+  return events.filter(event => {
+    const eventStart = parseDate(event.startDate);
+    const eventEnd = parseDate(event.endDate);
+    
+    if (startDate && eventEnd < startDate) {
+      return false;
+    }
+    if (endDate && eventStart > endDate) {
+      return false;
+    }
+    
+    return true;
+  });
+};
+
+/**
+ * Event'leri resource'a göre filtreler
+ * @param {Array} events - Event listesi
+ * @param {Array} resourceIds - Resource ID listesi
+ * @returns {Array} - Filtrelenmiş event listesi
+ */
+export const filterByResource = (events, resourceIds) => {
+  if (!resourceIds || resourceIds.length === 0) {
+    return events;
+  }
+  
+  return events.filter(event => resourceIds.includes(event.resourceId));
+};
+
+/**
+ * Event'leri status'a göre filtreler
+ * @param {Array} events - Event listesi
+ * @param {Array} statuses - Status listesi
+ * @returns {Array} - Filtrelenmiş event listesi
+ */
+export const filterByStatus = (events, statuses) => {
+  if (!statuses || statuses.length === 0) {
+    return events;
+  }
+  
+  return events.filter(event => 
+    event.status && statuses.includes(event.status)
+  );
+};
+
+/**
+ * Tüm filtreleri uygular
+ * @param {Array} events - Event listesi
+ * @param {Object} filters - Filtre objesi {searchTerm, startDate, endDate, resourceIds, statuses}
+ * @returns {Array} - Filtrelenmiş event listesi
+ */
+export const applyFilters = (events, filters) => {
+  let filtered = events;
+  
+  if (filters.searchTerm) {
+    filtered = filterByTitle(filtered, filters.searchTerm);
+  }
+  
+  if (filters.startDate || filters.endDate) {
+    filtered = filterByDateRange(filtered, filters.startDate, filters.endDate);
+  }
+  
+  if (filters.resourceIds && filters.resourceIds.length > 0) {
+    filtered = filterByResource(filtered, filters.resourceIds);
+  }
+  
+  if (filters.statuses && filters.statuses.length > 0) {
+    filtered = filterByStatus(filtered, filters.statuses);
+  }
+  
+  return filtered;
+};
+