akfatimeline 2.2.3 → 2.2.5

package/dist/Timeline.js

@@ -4002,7 +4002,13 @@ const TimelineContent = _ref => {
     // Context menu açıldığında çağrılacak callback
 
     // Disable Dates
-    disableDates = null // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+    disableDates = null,
+    // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+
+    // Auto Select Enabled Range
+    autoSelectEnabledRange = false,
+    // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+    autoSelectRanges = null // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
   } = _ref;
   // ------------------- HOOKS & STATE -------------------
   const containerRef = (0,external_react_.useRef)(null);
@@ -4152,18 +4158,41 @@ const TimelineContent = _ref => {
       }
     }
 
-    // Eğer disableDates mode: 'include' ise ve ranges varsa, tıklanan tarihin range'ini bul
+    // Eğer disableDates mode: 'include' ise, tıklanan tarihin range'ini veya date'ini bul
     let startDate = clickedDate;
     let endDate = new Date(clickedDate.getTime() + 24 * 60 * 60 * 1000); // Varsayılan: 1 gün
     let enabledRange = null;
-    if (disableDates && disableDates.mode === 'include' && disableDates.ranges && disableDates.ranges.length > 0) {
-      enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
-      if (enabledRange) {
-        // Range bulundu, range'in tamamını seç
-        startDate = enabledRange.start;
-        // endDate'i direkt range'in end'i olarak kullan
-        // Range'in end'i zaten son günü temsil ediyor (inclusive)
-        endDate = enabledRange.end;
+    if (disableDates && disableDates.mode === 'include') {
+      // Önce ranges'te ara
+      if (disableDates.ranges && disableDates.ranges.length > 0) {
+        enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
+        if (enabledRange) {
+          // Range bulundu, range'in tamamını seç
+          startDate = enabledRange.start;
+          // endDate'i direkt range'in end'i olarak kullan
+          // Range'in end'i zaten son günü temsil ediyor (inclusive)
+          endDate = enabledRange.end;
+        }
+      }
+
+      // Eğer range bulunamadıysa, dates array'inde tek tek tarih var mı kontrol et
+      if (!enabledRange && disableDates.dates && disableDates.dates.length > 0) {
+        const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
+        const foundDate = disableDates.dates.find(d => {
+          const dObj = parseDate(d);
+          const dOnly = new Date(dObj.getFullYear(), dObj.getMonth(), dObj.getDate());
+          return dOnly.getTime() === clickedDateOnly.getTime();
+        });
+        if (foundDate) {
+          // Tek bir tarih bulundu, o tarihi seç (1 günlük event)
+          const foundDateObj = parseDate(foundDate);
+          startDate = new Date(foundDateObj.getFullYear(), foundDateObj.getMonth(), foundDateObj.getDate());
+          endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // 1 gün sonrası
+          enabledRange = {
+            start: startDate,
+            end: startDate
+          }; // Tek gün için range oluştur
+        }
       }
     }
 
@@ -5957,10 +5986,18 @@ const Timeline_Timeline_Timeline = _ref => {
     // Özelleştirilebilir tuş haritası
 
     // Disable Dates
-    disableDates = null // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+    disableDates = null,
+    // { mode: 'exclude' | 'include', dates: [], ranges: [] }
     // mode: 'exclude' = belirtilen tarihler disabled, 'include' = belirtilen tarihler enabled (diğerleri disabled)
     // dates: ['2025-01-15', '2025-01-20', ...] veya [Date, Date, ...] - Tekil tarihler
     // ranges: [{ start: '2025-01-15', end: '2025-01-20' }, ...] veya [{ start: Date, end: Date }, ...] - Tarih aralıkları
+
+    // Auto Select Enabled Range
+    autoSelectEnabledRange = false,
+    // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+    autoSelectRanges = null // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
+    // autoSelectRanges tanımlı olduğunda, tıklanan tarih bu range'lerden birinin içindeyse otomatik olarak tüm range seçilir
+    // autoSelectRanges: null ise ve disableDates mode: 'include' ise, disableDates.ranges kullanılır (geriye dönük uyumluluk)
   } = _ref;
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
@@ -6338,7 +6375,9 @@ const Timeline_Timeline_Timeline = _ref => {
     eventBadgeResolver: eventBadgeResolver,
     isLoading: isLoading,
     loadingType: loadingType,
-    disableDates: disableDates
+    disableDates: disableDates,
+    autoSelectEnabledRange: autoSelectEnabledRange,
+    autoSelectRanges: autoSelectRanges
   }), selectedEvent && /*#__PURE__*/external_react_default().createElement(Timeline_EventTooltip, {
     event: selectedEvent,
     position: tooltipPosition,

package/dist/components/Timeline/Timeline.jsx

@@ -127,6 +127,12 @@ const Timeline = ({
   // mode: 'exclude' = belirtilen tarihler disabled, 'include' = belirtilen tarihler enabled (diğerleri disabled)
   // dates: ['2025-01-15', '2025-01-20', ...] veya [Date, Date, ...] - Tekil tarihler
   // ranges: [{ start: '2025-01-15', end: '2025-01-20' }, ...] veya [{ start: Date, end: Date }, ...] - Tarih aralıkları
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
+  // autoSelectRanges tanımlı olduğunda, tıklanan tarih bu range'lerden birinin içindeyse otomatik olarak tüm range seçilir
+  // autoSelectRanges: null ise ve disableDates mode: 'include' ise, disableDates.ranges kullanılır (geriye dönük uyumluluk)
 }) => {
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
@@ -541,6 +547,8 @@ const Timeline = ({
               isLoading={isLoading}
               loadingType={loadingType}
               disableDates={disableDates}
+              autoSelectEnabledRange={autoSelectEnabledRange}
+              autoSelectRanges={autoSelectRanges}
 
             />
 

package/dist/components/Timeline/TimelineContent.jsx

@@ -70,6 +70,10 @@ const TimelineContent = ({
   
   // Disable Dates
   disableDates = null, // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
 }) => {
   // ------------------- HOOKS & STATE -------------------
   const containerRef = useRef(null);
@@ -221,19 +225,40 @@ const TimelineContent = ({
       }
     }
 
-    // Eğer disableDates mode: 'include' ise ve ranges varsa, tıklanan tarihin range'ini bul
+    // Eğer disableDates mode: 'include' ise, tıklanan tarihin range'ini veya date'ini bul
     let startDate = clickedDate;
     let endDate = new Date(clickedDate.getTime() + 24 * 60 * 60 * 1000); // Varsayılan: 1 gün
     let enabledRange = null;
     
-    if (disableDates && disableDates.mode === 'include' && disableDates.ranges && disableDates.ranges.length > 0) {
-      enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
-      if (enabledRange) {
-        // Range bulundu, range'in tamamını seç
-        startDate = enabledRange.start;
-        // endDate'i direkt range'in end'i olarak kullan
-        // Range'in end'i zaten son günü temsil ediyor (inclusive)
-        endDate = enabledRange.end;
+    if (disableDates && disableDates.mode === 'include') {
+      // Önce ranges'te ara
+      if (disableDates.ranges && disableDates.ranges.length > 0) {
+        enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
+        if (enabledRange) {
+          // Range bulundu, range'in tamamını seç
+          startDate = enabledRange.start;
+          // endDate'i direkt range'in end'i olarak kullan
+          // Range'in end'i zaten son günü temsil ediyor (inclusive)
+          endDate = enabledRange.end;
+        }
+      }
+      
+      // Eğer range bulunamadıysa, dates array'inde tek tek tarih var mı kontrol et
+      if (!enabledRange && disableDates.dates && disableDates.dates.length > 0) {
+        const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
+        const foundDate = disableDates.dates.find((d) => {
+          const dObj = parseDate(d);
+          const dOnly = new Date(dObj.getFullYear(), dObj.getMonth(), dObj.getDate());
+          return dOnly.getTime() === clickedDateOnly.getTime();
+        });
+        
+        if (foundDate) {
+          // Tek bir tarih bulundu, o tarihi seç (1 günlük event)
+          const foundDateObj = parseDate(foundDate);
+          startDate = new Date(foundDateObj.getFullYear(), foundDateObj.getMonth(), foundDateObj.getDate());
+          endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // 1 gün sonrası
+          enabledRange = { start: startDate, end: startDate }; // Tek gün için range oluştur
+        }
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfatimeline",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "description": "A customizable timeline component for React applications with disableDates, custom header buttons, and past date protection features",
   "main": "./src/library.js",
   "module": "./src/library.js",

package/src/App.js

@@ -55,6 +55,23 @@ const App = () => {
     ],
   };
   
+  // Auto Select Enabled Range - Belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  const [autoSelectEnabledRange, setAutoSelectEnabledRange] = useState(true); // true = aktif, false = pasif
+  
+  // Auto Select Ranges - Auto-select için range'ler (disableDates'ten bağımsız)
+  // Bu range'lere tıklandığında otomatik olarak tüm range seçilir
+  const autoSelectRanges = [
+    {
+      start: '2025-12-31', // 31 Aralık 2025
+      end: '2026-01-05',    // 5 Ocak 2026
+    },
+    // İstediğiniz kadar range ekleyebilirsiniz
+    // {
+    //   start: '2026-02-01',
+    //   end: '2026-02-10',
+    // },
+  ];
+  
   // Cell Tooltip için örnek fiyat verisi
   // Her gün için farklı fiyatlar tanımlanabilir
   const getCellTooltipContent = (resource, dateObj) => {
@@ -450,6 +467,9 @@ const resources = [
         <button onClick={() => setIsLoading(!isLoading)}>
           Loading: {isLoading ? "Açık" : "Kapalı"}
         </button>
+        <button onClick={() => setAutoSelectEnabledRange(!autoSelectEnabledRange)}>
+          Auto Select Enabled Range: {autoSelectEnabledRange ? "Açık" : "Kapalı"}
+        </button>
         <button onClick={handleToday}>Bugüne Git</button>
         <button onClick={handleRetreat}>5 Gün Geri</button>
         <button onClick={handleAdvance}>5 Gün İleri</button>
@@ -561,6 +581,8 @@ const resources = [
           />
         }
         disableDates={disableDates}
+        autoSelectEnabledRange={autoSelectEnabledRange}
+        autoSelectRanges={autoSelectRanges}
 
       />
     </div>

package/src/components/Timeline/Timeline.jsx

@@ -127,6 +127,12 @@ const Timeline = ({
   // mode: 'exclude' = belirtilen tarihler disabled, 'include' = belirtilen tarihler enabled (diğerleri disabled)
   // dates: ['2025-01-15', '2025-01-20', ...] veya [Date, Date, ...] - Tekil tarihler
   // ranges: [{ start: '2025-01-15', end: '2025-01-20' }, ...] veya [{ start: Date, end: Date }, ...] - Tarih aralıkları
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
+  // autoSelectRanges tanımlı olduğunda, tıklanan tarih bu range'lerden birinin içindeyse otomatik olarak tüm range seçilir
+  // autoSelectRanges: null ise ve disableDates mode: 'include' ise, disableDates.ranges kullanılır (geriye dönük uyumluluk)
 }) => {
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
@@ -541,6 +547,8 @@ const Timeline = ({
               isLoading={isLoading}
               loadingType={loadingType}
               disableDates={disableDates}
+              autoSelectEnabledRange={autoSelectEnabledRange}
+              autoSelectRanges={autoSelectRanges}
 
             />
 

package/src/components/Timeline/TimelineContent.jsx

@@ -70,6 +70,10 @@ const TimelineContent = ({
   
   // Disable Dates
   disableDates = null, // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
 }) => {
   // ------------------- HOOKS & STATE -------------------
   const containerRef = useRef(null);
@@ -221,19 +225,40 @@ const TimelineContent = ({
       }
     }
 
-    // Eğer disableDates mode: 'include' ise ve ranges varsa, tıklanan tarihin range'ini bul
+    // Eğer disableDates mode: 'include' ise, tıklanan tarihin range'ini veya date'ini bul
     let startDate = clickedDate;
     let endDate = new Date(clickedDate.getTime() + 24 * 60 * 60 * 1000); // Varsayılan: 1 gün
     let enabledRange = null;
     
-    if (disableDates && disableDates.mode === 'include' && disableDates.ranges && disableDates.ranges.length > 0) {
-      enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
-      if (enabledRange) {
-        // Range bulundu, range'in tamamını seç
-        startDate = enabledRange.start;
-        // endDate'i direkt range'in end'i olarak kullan
-        // Range'in end'i zaten son günü temsil ediyor (inclusive)
-        endDate = enabledRange.end;
+    if (disableDates && disableDates.mode === 'include') {
+      // Önce ranges'te ara
+      if (disableDates.ranges && disableDates.ranges.length > 0) {
+        enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
+        if (enabledRange) {
+          // Range bulundu, range'in tamamını seç
+          startDate = enabledRange.start;
+          // endDate'i direkt range'in end'i olarak kullan
+          // Range'in end'i zaten son günü temsil ediyor (inclusive)
+          endDate = enabledRange.end;
+        }
+      }
+      
+      // Eğer range bulunamadıysa, dates array'inde tek tek tarih var mı kontrol et
+      if (!enabledRange && disableDates.dates && disableDates.dates.length > 0) {
+        const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
+        const foundDate = disableDates.dates.find((d) => {
+          const dObj = parseDate(d);
+          const dOnly = new Date(dObj.getFullYear(), dObj.getMonth(), dObj.getDate());
+          return dOnly.getTime() === clickedDateOnly.getTime();
+        });
+        
+        if (foundDate) {
+          // Tek bir tarih bulundu, o tarihi seç (1 günlük event)
+          const foundDateObj = parseDate(foundDate);
+          startDate = new Date(foundDateObj.getFullYear(), foundDateObj.getMonth(), foundDateObj.getDate());
+          endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // 1 gün sonrası
+          enabledRange = { start: startDate, end: startDate }; // Tek gün için range oluştur
+        }
       }
     }