akfatimeline 1.1.1 → 2.0.0

package/{src/components/Timeline/TimelineHeader.js → dist/components/Timeline/TimelineHeader.jsx}

@@ -1,54 +1,55 @@
-import React from "react";
-import "./Timeline.css"; // CSS dosyasını import etmeyi unutma
-import { parseDate } from "../../utils/dateUtils";
-
-const TimelineHeader = ({ dates, monthHeaders, highlightWeekends = false }) => {
-  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) => {
-          // Hafta sonu kontrolü
-          let isWeekend = false;
-          if (highlightWeekends) {
-            const cellDate = parseDate(date.fullDate);
-            const dayOfWeek = cellDate.getDay(); // 0 = Pazar, 6 = Cumartesi
-            isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
-          }
-          
-          return (
-            <div
-              key={index}
-              className={`timeline-header-day-cell ${isWeekend ? "timeline-header-day-weekend" : ""}`}
-              style={{
-                flex: 1,
-                borderRight: index < dates.length - 1 ? "1px solid var(--border-color)" : "none",
-              }}
-            >
-              {date.display}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default TimelineHeader;
+import React from "react";
+import "./Timeline.css"; // CSS dosyasını import etmeyi unutma
+import { parseDate } from "../../utils/dateUtils";
+
+const TimelineHeader = ({ dates, monthHeaders, highlightWeekends = false }) => {
+  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) => {
+          // Hafta sonu kontrolü
+          let isWeekend = false;
+          if (highlightWeekends) {
+            const cellDate = parseDate(date.fullDate);
+            const dayOfWeek = cellDate.getDay(); // 0 = Pazar, 6 = Cumartesi
+            isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+          }
+          
+          return (
+            <div
+              key={index}
+              className={`timeline-header-day-cell ${isWeekend ? "timeline-header-day-weekend" : ""}`}
+              style={{
+                flex: 1,
+                borderRight: index < dates.length - 1 ? "1px solid var(--border-color)" : "none",
+              }}
+            >
+              {date.display}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TimelineHeader;
+

package/dist/components/Timeline/TimelineMonthContainer.js

@@ -1,6 +1,6 @@
 import React from "react";
-import TimelineHeader from "./TimelineHeader";
-import TimelineContent from "./TimelineContent";
+import TimelineHeader from "./TimelineHeader.jsx";
+import TimelineContent from "./TimelineContent.jsx";
 
 const TimelineMonthContainer = ({
   dates,

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "akfatimeline",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "A customizable timeline component for React applications",
-  "main": "dist/Timeline.js",
-  "module": "src/library.js",
+  "main": "./src/library.js",
+  "module": "./src/library.js",
+  "types": "./src/library.js",
   "files": [
     "dist",
     "src",
@@ -12,11 +13,61 @@
   ],
   "exports": {
     ".": {
+      "types": "./src/library.js",
       "import": "./src/library.js",
       "require": "./dist/Timeline.js",
       "default": "./src/library.js"
     },
-    "./components/Timeline/Timeline.css": "./src/components/Timeline/Timeline.css"
+    "./css": "./src/components/Timeline/Timeline.css",
+    "./components/Timeline/Timeline.css": "./src/components/Timeline/Timeline.css",
+    "./Timeline": {
+      "types": "./src/components/Timeline/Timeline.jsx",
+      "import": "./src/components/Timeline/Timeline.jsx",
+      "require": "./dist/components/Timeline/Timeline.js",
+      "default": "./src/components/Timeline/Timeline.jsx"
+    },
+    "./DailyView": {
+      "types": "./src/components/Timeline/DailyView.jsx",
+      "import": "./src/components/Timeline/DailyView.jsx",
+      "require": "./dist/components/Timeline/DailyView.js",
+      "default": "./src/components/Timeline/DailyView.jsx"
+    },
+    "./ContextMenu": {
+      "types": "./src/components/Timeline/ContextMenu.jsx",
+      "import": "./src/components/Timeline/ContextMenu.jsx",
+      "require": "./dist/components/Timeline/ContextMenu.js",
+      "default": "./src/components/Timeline/ContextMenu.jsx"
+    },
+    "./EventDetailModal": {
+      "types": "./src/components/Timeline/EventDetailModal.jsx",
+      "import": "./src/components/Timeline/EventDetailModal.jsx",
+      "require": "./dist/components/Timeline/EventDetailModal.js",
+      "default": "./src/components/Timeline/EventDetailModal.jsx"
+    },
+    "./EventIcon": {
+      "types": "./src/components/Timeline/EventIcon.jsx",
+      "import": "./src/components/Timeline/EventIcon.jsx",
+      "require": "./dist/components/Timeline/EventIcon.js",
+      "default": "./src/components/Timeline/EventIcon.jsx"
+    },
+    "./EventBadge": {
+      "types": "./src/components/Timeline/EventBadge.jsx",
+      "import": "./src/components/Timeline/EventBadge.jsx",
+      "require": "./dist/components/Timeline/EventBadge.js",
+      "default": "./src/components/Timeline/EventBadge.jsx"
+    },
+    "./LoadingSpinner": {
+      "types": "./src/components/Timeline/LoadingSpinner.jsx",
+      "import": "./src/components/Timeline/LoadingSpinner.jsx",
+      "require": "./dist/components/Timeline/LoadingSpinner.js",
+      "default": "./src/components/Timeline/LoadingSpinner.jsx"
+    },
+    "./AutocompleteSelect": {
+      "types": "./src/components/Timeline/AutocompleteSelect.jsx",
+      "import": "./src/components/Timeline/AutocompleteSelect.jsx",
+      "require": "./dist/components/Timeline/AutocompleteSelect.js",
+      "default": "./src/components/Timeline/AutocompleteSelect.jsx"
+    }
   },
   "dependencies": {
     "react": "^19.2.3",

package/src/components/Timeline/AutocompleteSelect.jsx

@@ -0,0 +1,150 @@
+import React, { useState, useRef, useEffect } from "react";
+import "./Timeline.css";
+
+const AutocompleteSelect = ({
+  options = [],
+  value = null,
+  onChange = () => {},
+  placeholder = "Seçiniz...",
+  getOptionLabel = (option) => option?.label || option?.name || String(option),
+  getOptionValue = (option) => option?.value || option?.id || option,
+  filterOptions = (options, inputValue) => {
+    if (!inputValue) return options;
+    const lowerInput = inputValue.toLowerCase();
+    return options.filter((option) => {
+      const label = getOptionLabel(option).toLowerCase();
+      return label.includes(lowerInput);
+    });
+  },
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+
+  // Seçili değerin label'ını bul
+  const selectedOption = options.find(
+    (opt) => getOptionValue(opt) === value
+  );
+  const displayValue = selectedOption
+    ? getOptionLabel(selectedOption)
+    : inputValue || placeholder;
+
+  // Input değiştiğinde filtrele
+  useEffect(() => {
+    if (isOpen) {
+      const filtered = filterOptions(options, inputValue);
+      setFilteredOptions(filtered);
+    } else {
+      setFilteredOptions(options);
+    }
+  }, [inputValue, isOpen, options, filterOptions]);
+
+  // Dışarı tıklandığında kapat
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setInputValue("");
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setIsOpen(true);
+  };
+
+  const handleSelect = (option) => {
+    const optionValue = getOptionValue(option);
+    onChange(optionValue, option);
+    setInputValue("");
+    setIsOpen(false);
+  };
+
+  const handleFocus = () => {
+    setIsOpen(true);
+    if (selectedOption) {
+      setInputValue(getOptionLabel(selectedOption));
+    }
+  };
+
+  const handleBlur = () => {
+    // Input blur olduğunda hemen kapatma, click outside ile kapatılacak
+    setTimeout(() => {
+      if (!containerRef.current?.contains(document.activeElement)) {
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue("");
+        }
+      }
+    }, 200);
+  };
+
+  return (
+    <div className="autocomplete-select-container" ref={containerRef}>
+      <div
+        className={`autocomplete-select-input ${isOpen ? "open" : ""}`}
+        onClick={() => {
+          setIsOpen(!isOpen);
+          inputRef.current?.focus();
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={isOpen ? inputValue : displayValue}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          className="autocomplete-select-input-field"
+        />
+        <span className="autocomplete-select-arrow">
+          {isOpen ? "▲" : "▼"}
+        </span>
+      </div>
+
+      {isOpen && (
+        <div className="autocomplete-select-dropdown">
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((option, index) => {
+              const optionValue = getOptionValue(option);
+              const optionLabel = getOptionLabel(option);
+              const isSelected = optionValue === value;
+
+              return (
+                <div
+                  key={index}
+                  className={`autocomplete-select-option ${
+                    isSelected ? "selected" : ""
+                  }`}
+                  onClick={() => handleSelect(option)}
+                  onMouseDown={(e) => e.preventDefault()} // Blur'u engelle
+                >
+                  {optionLabel}
+                </div>
+              );
+            })
+          ) : (
+            <div className="autocomplete-select-no-results">
+              Sonuç bulunamadı
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AutocompleteSelect;
+

package/src/components/Timeline/ContextMenu.jsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './Timeline.css';
+
+/**
+ * Context Menu Component
+ * Sağ tık menüsü için özelleştirilebilir menü bileşeni
+ */
+const ContextMenu = ({ 
+  isOpen, 
+  position, 
+  onClose, 
+  menuItems = [],
+  resource = null,
+  date = null,
+}) => {
+  const menuRef = useRef(null);
+  const [adjustedPosition, setAdjustedPosition] = useState(position);
+
+  // Menü pozisyonunu mouse'a yakın tut ve ekran sınırları içinde tut
+  useEffect(() => {
+    if (!menuRef.current || !position || !isOpen) {
+      setAdjustedPosition(position);
+      return;
+    }
+
+    // Menü render edildikten sonra pozisyonu ayarla
+    const updatePosition = () => {
+      const menuRect = menuRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let adjustedX = position.x;
+      let adjustedY = position.y;
+
+      // Sağa taşma kontrolü
+      if (position.x + menuRect.width > viewportWidth) {
+        adjustedX = position.x - menuRect.width;
+      }
+
+      // Aşağıya taşma kontrolü
+      if (position.y + menuRect.height > viewportHeight) {
+        adjustedY = position.y - menuRect.height;
+      }
+
+      // Sola taşma kontrolü
+      if (adjustedX < 10) {
+        adjustedX = 10;
+      }
+
+      // Yukarıya taşma kontrolü
+      if (adjustedY < 10) {
+        adjustedY = 10;
+      }
+
+      setAdjustedPosition({ x: adjustedX, y: adjustedY });
+    };
+
+    // Menü render edildikten sonra pozisyonu güncelle
+    setTimeout(updatePosition, 0);
+  }, [position, isOpen]);
+
+  // Menü dışına tıklanınca kapat
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+      // Scroll olduğunda menüyü kapat
+      document.addEventListener('scroll', onClose, true);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener('scroll', onClose, true);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !position) return null;
+
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      item.onClick(resource, date);
+    }
+    if (item.closeOnClick !== false) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      ref={menuRef}
+      className="context-menu"
+      style={{
+        position: 'fixed',
+        left: `${(adjustedPosition?.x ?? position.x) - 150}px`,
+        top: `${(adjustedPosition?.y ?? position.y) - 150}px`,
+        zIndex: 10005,
+      }}
+    >
+      <div className="context-menu-content">
+        {menuItems.length === 0 ? (
+          <div className="context-menu-item context-menu-item-disabled">
+            Menü öğesi yok
+          </div>
+        ) : (
+          menuItems.map((item, index) => {
+            if (item.separator) {
+              return <div key={`separator-${index}`} className="context-menu-separator" />;
+            }
+
+            if (item.hidden) {
+              return null;
+            }
+
+            return (
+              <div
+                key={item.id || index}
+                className={`context-menu-item ${item.disabled ? 'context-menu-item-disabled' : ''} ${item.danger ? 'context-menu-item-danger' : ''}`}
+                onClick={() => !item.disabled && handleItemClick(item)}
+                title={item.tooltip || item.label}
+              >
+                {item.icon && <span className="context-menu-item-icon">{item.icon}</span>}
+                <span className="context-menu-item-label">{item.label}</span>
+                {item.shortcut && (
+                  <span className="context-menu-item-shortcut">{item.shortcut}</span>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContextMenu;
+