akfatimeline 1.0.6 → 1.2.0

package/src/components/Timeline/LoadingSpinner.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import './Timeline.css';
+
+/**
+ * Loading Spinner Component
+ * Yükleme durumlarında gösterilir
+ */
+const LoadingSpinner = ({ 
+  size = 'medium', // 'small', 'medium', 'large'
+  type = 'spinner', // 'spinner', 'dots', 'pulse'
+  className = '',
+  overlay = false // Overlay gösterilsin mi?
+}) => {
+  if (overlay) {
+    return (
+      <div className="loading-overlay">
+        <div className={`loading-spinner loading-spinner-${type} loading-spinner-${size} ${className}`}>
+          {type === 'spinner' && <div className="spinner-circle"></div>}
+          {type === 'dots' && (
+            <div className="dots-container">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          )}
+          {type === 'pulse' && <div className="pulse-circle"></div>}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`loading-spinner loading-spinner-${type} loading-spinner-${size} ${className}`}>
+      {type === 'spinner' && <div className="spinner-circle"></div>}
+      {type === 'dots' && (
+        <div className="dots-container">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      )}
+      {type === 'pulse' && <div className="pulse-circle"></div>}
+    </div>
+  );
+};
+
+export default LoadingSpinner;
+

package/src/components/Timeline/MasterHeader.js

@@ -1,68 +1,104 @@
-import React from "react";
-import "./Timeline.css"; // veya MasterHeader.css, eğer ayrı dosyaya koyacaksan
-import "flatpickr/dist/themes/material_green.css"; // Flatpickr Tema
-
-const MasterHeader = ({
-  selectedDate,
-  onDateSelect,
-  onToday,
-  onAdvance,
-  onRetreat,
-  onMonthAdvance,
-  onMonthRetreat,
-  dayRange,
-  setDayRange,
-}) => {
-  const formattedDate = new Date(
-    selectedDate.getTime() + 24 * 60 * 60 * 1000 - selectedDate.getTimezoneOffset() * 60000
-  )
-    .toISOString()
-    .split("T")[0]; // YYYY-MM-DD formatı
-
-  return (
-    <div className="master-header-container">
-      <div className="master-header-buttons">
-        <button className="master-header-btn" onClick={onMonthRetreat}>
-          1 Ay Geri
-        </button>
-
-        <button className="master-header-btn" onClick={onRetreat}>
-          5 Gün Geri
-        </button>
-
-        <input
-  type="date"
-  className="master-header-date-picker"
-  value={formattedDate} // Seçili tarih burada gösteriliyor
-  onChange={(e) => onDateSelect(e.target.value)} // Tarih seçimi
-  onKeyDown={(e) => e.preventDefault()} // Manuel girişleri engelle
-/>
-
-
-        <button className="master-header-btn" onClick={onAdvance}>
-          5 Gün İleri
-        </button>
-
-        <button className="master-header-btn" onClick={onMonthAdvance}>
-          1 Ay İleri
-        </button>
-
-        <button className="master-header-btn" onClick={onToday}>
-          Bugün
-        </button>
-      </div>
-
-      <select
-        className="master-header-select"
-        value={dayRange}
-        onChange={(e) => setDayRange(parseInt(e.target.value, 10))}
-      >
-        <option value={30}>30 Gün</option>
-        <option value={60}>60 Gün</option>
-        <option value={90}>90 Gün</option>
-      </select>
-    </div>
-  );
-};
-
-export default MasterHeader;
+import React from "react";
+import "./Timeline.css";
+
+const MasterHeader = ({
+  selectedDate,
+  onDateSelect,
+  onToday,
+  onAdvance,
+  onRetreat,
+  onMonthAdvance,
+  onMonthRetreat,
+  dayRange,
+  setDayRange,
+  zoomLevel = 1.0,
+  setZoomLevel,
+  zoomOn = true,
+  minZoomLevel = 0.5,
+  maxZoomLevel = 3.0,
+  zoomStep = 0.25,
+}) => {
+  const formattedDate = new Date(
+    selectedDate.getTime() + 24 * 60 * 60 * 1000 - selectedDate.getTimezoneOffset() * 60000
+  )
+    .toISOString()
+    .split("T")[0]; // YYYY-MM-DD formatı
+
+  return (
+    <div className="master-header-container">
+      <div className="master-header-buttons">
+        <button className="master-header-btn" onClick={onMonthRetreat}>
+          1 Ay Geri
+        </button>
+
+        <button className="master-header-btn" onClick={onRetreat}>
+          5 Gün Geri
+        </button>
+
+        <input
+  type="date"
+  className="master-header-date-picker"
+  value={formattedDate} // Seçili tarih burada gösteriliyor
+  onChange={(e) => onDateSelect(e.target.value)} // Tarih seçimi
+  onKeyDown={(e) => e.preventDefault()} // Manuel girişleri engelle
+/>
+
+
+        <button className="master-header-btn" onClick={onAdvance}>
+          5 Gün İleri
+        </button>
+
+        <button className="master-header-btn" onClick={onMonthAdvance}>
+          1 Ay İleri
+        </button>
+
+        <button className="master-header-btn" onClick={onToday}>
+          Bugün
+        </button>
+      </div>
+
+      <select
+        className="master-header-select"
+        value={dayRange}
+        onChange={(e) => setDayRange(parseInt(e.target.value, 10))}
+      >
+        <option value={30}>30 Gün</option>
+        <option value={60}>60 Gün</option>
+        <option value={90}>90 Gün</option>
+      </select>
+
+      {/* Zoom Kontrolleri */}
+      {zoomOn && setZoomLevel && (
+        <div className="master-header-zoom-controls">
+          <button
+            className="master-header-btn"
+            onClick={() => {
+              const newZoom = Math.max(minZoomLevel, zoomLevel - zoomStep);
+              setZoomLevel(newZoom);
+            }}
+            disabled={zoomLevel <= minZoomLevel}
+            title={`Zoom Out (${Math.round((zoomLevel - zoomStep) * 100)}%)`}
+          >
+            −
+          </button>
+          <span className="master-header-zoom-level">
+            {Math.round(zoomLevel * 100)}%
+          </span>
+          <button
+            className="master-header-btn"
+            onClick={() => {
+              const newZoom = Math.min(maxZoomLevel, zoomLevel + zoomStep);
+              setZoomLevel(newZoom);
+            }}
+            disabled={zoomLevel >= maxZoomLevel}
+            title={`Zoom In (${Math.round((zoomLevel + zoomStep) * 100)}%)`}
+          >
+            +
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MasterHeader;

package/src/components/Timeline/Resources.js

@@ -1,53 +1,53 @@
-import React from "react";
-
-const Resources = ({
-  groupedResources = [], // Kaynakların listesi
-  collapsedGroups = {}, // Grupların açık/kapalı durumunu tutan nesne
-  toggleGroupCollapse, // Grupları açma/kapama fonksiyonu
-  resourceSettings = {
-    showIdAsName: false, // Varsayılan: `name` varsa onu göster, yoksa `id`
-    isGrouped: true, // Varsayılan: Gruplama açık
-    isCollapsible: true, // Varsayılan: Gruplar açılıp kapanabilir
-  },
-}) => {
-  const { showIdAsName, isGrouped, isCollapsible } = resourceSettings;
-
-  return (
-    <div className="timeline-resources">
-      {isGrouped ? (
-        // Gruplama aktif
-        groupedResources.map((group, groupIndex) => (
-          <div key={groupIndex} className="resource-group">
-            {/* Grup Başlığı */}
-            <div
-              className="resource-group-header"
-              onClick={() => isCollapsible && toggleGroupCollapse(group.groupName)}
-            >
-              {group.groupName}{" "}
-              {isCollapsible && (collapsedGroups[group.groupName] ? "▲" : "▼")}
-            </div>
-
-            {/* Grup İçindeki Kaynaklar */}
-            {!collapsedGroups[group.groupName] &&
-              group.resources.map((resource, resourceIndex) => (
-                <div key={resourceIndex} className="resource-cell">
-                  {showIdAsName ? resource.id : resource.name || resource.id}
-                  {/* Eğer `name` yoksa `id` kullanılır */}
-                </div>
-              ))}
-          </div>
-        ))
-      ) : (
-        // Gruplama yok
-        groupedResources.flatMap((group) => group.resources).map((resource, resourceIndex) => (
-          <div key={resourceIndex} className="resource-cell">
-            {showIdAsName ? resource.id : resource.name || resource.id}
-            {/* Eğer `name` yoksa `id` kullanılır */}
-          </div>
-        ))
-      )}
-    </div>
-  );
-};
-
-export default Resources;
+import React from "react";
+
+const Resources = ({
+  groupedResources = [], // Kaynakların listesi
+  collapsedGroups = {}, // Grupların açık/kapalı durumunu tutan nesne
+  toggleGroupCollapse, // Grupları açma/kapama fonksiyonu
+  resourceSettings = {
+    showIdAsName: false, // Varsayılan: `name` varsa onu göster, yoksa `id`
+    isGrouped: true, // Varsayılan: Gruplama açık
+    isCollapsible: true, // Varsayılan: Gruplar açılıp kapanabilir
+  },
+}) => {
+  const { showIdAsName, isGrouped, isCollapsible } = resourceSettings;
+
+  return (
+    <div className="timeline-resources">
+      {isGrouped ? (
+        // Gruplama aktif
+        groupedResources.map((group, groupIndex) => (
+          <div key={groupIndex} className="resource-group">
+            {/* Grup Başlığı */}
+            <div
+              className="resource-group-header"
+              onClick={() => isCollapsible && toggleGroupCollapse(group.groupName)}
+            >
+              {group.groupName}{" "}
+              {isCollapsible && (collapsedGroups[group.groupName] ? "▲" : "▼")}
+            </div>
+
+            {/* Grup İçindeki Kaynaklar */}
+            {!collapsedGroups[group.groupName] &&
+              group.resources.map((resource, resourceIndex) => (
+                <div key={resourceIndex} className="resource-cell">
+                  {showIdAsName ? resource.id : resource.name || resource.id}
+                  {/* Eğer `name` yoksa `id` kullanılır */}
+                </div>
+              ))}
+          </div>
+        ))
+      ) : (
+        // Gruplama yok
+        groupedResources.flatMap((group) => group.resources).map((resource, resourceIndex) => (
+          <div key={resourceIndex} className="resource-cell">
+            {showIdAsName ? resource.id : resource.name || resource.id}
+            {/* Eğer `name` yoksa `id` kullanılır */}
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
+
+export default Resources;

package/src/components/Timeline/ResourcesHeader.js

@@ -1,14 +1,14 @@
-// ResourcesHeader.js
-import React from "react";
-import "./Timeline.css";
-
-const ResourcesHeader = ({ content }) => {
-  return (
-    <div className="resources-header">
-      {/* content => string veya React node */}
-      {content}
-    </div>
-  );
-};
-
-export default ResourcesHeader;
+// ResourcesHeader.js
+import React from "react";
+import "./Timeline.css";
+
+const ResourcesHeader = ({ content }) => {
+  return (
+    <div className="resources-header">
+      {/* content => string veya React node */}
+      {content}
+    </div>
+  );
+};
+
+export default ResourcesHeader;