ar-design 0.4.34 → 0.4.35

package/dist/assets/css/components/data-display/calendar/styles.week-view.css

@@ -127,7 +127,6 @@
           color: var(--white);
           font-size: 12px;
           overflow: hidden;
-          z-index: 10;
         }
       }
     }

package/dist/components/data-display/calendar/Body.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { View } from "../../../libs/types";
 import { CalendarEvent } from "./IProps";
 interface IProps<T> {
+    trackedBy: keyof (T & CalendarEvent);
     data: (T & CalendarEvent)[];
     renderItem: (item: T, index: number) => React.JSX.Element;
     states: {
@@ -18,5 +19,5 @@ interface IProps<T> {
         locale?: Intl.LocalesArgument;
     };
 }
-declare const Body: <T>({ data, renderItem, states, config }: IProps<T>) => React.JSX.Element;
+declare const Body: <T>({ trackedBy, data, renderItem, states, config }: IProps<T>) => React.JSX.Element;
 export default Body;

package/dist/components/data-display/calendar/Body.js

@@ -2,11 +2,11 @@ import React from "react";
 import Day from "./views/Day";
 import Week from "./views/Week";
 import Month from "./views/Month";
-const Body = function ({ data, renderItem, states, config }) {
+const Body = function ({ trackedBy, data, renderItem, states, config }) {
     if (states.view.get === "Day")
         return React.createElement(Day, null);
     else if (states.view.get === "Week")
-        return React.createElement(Week, { data: data, renderItem: renderItem, states: { currentDate: states.currentDate }, config: config });
+        return (React.createElement(Week, { trackedBy: trackedBy, data: data, renderItem: renderItem, states: { currentDate: states.currentDate }, config: config }));
     else if (states.view.get === "Month")
         return React.createElement(Month, null);
     return React.createElement(React.Fragment, null, "...");

package/dist/components/data-display/calendar/IProps.d.ts

@@ -3,6 +3,7 @@ export type CalendarEvent = {
     end: Date;
 };
 interface IProps<T> {
+    trackedBy: keyof (T & CalendarEvent);
     data: (T & CalendarEvent)[];
     renderItem: (item: T, index: number) => React.JSX.Element;
     config?: {

package/dist/components/data-display/calendar/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/calendar/styles.css";
 declare const Calendar: {
-    <T>({ data, renderItem, config }: IProps<T>): React.JSX.Element;
+    <T>({ trackedBy, data, renderItem, config }: IProps<T>): React.JSX.Element;
     displayName: string;
 };
 export default Calendar;

package/dist/components/data-display/calendar/index.js

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import Body from "./Body";
 import Header from "./Header";
 import "../../../assets/css/components/data-display/calendar/styles.css";
-const Calendar = function ({ data, renderItem, config }) {
+const Calendar = function ({ trackedBy, data, renderItem, config }) {
     // states
     const [currentDate, setCurrentDate] = useState(new Date());
     const [view, setView] = useState("Week");
@@ -15,7 +15,7 @@ const Calendar = function ({ data, renderItem, config }) {
                     set: setView,
                 },
             }, config: config }),
-        React.createElement(Body, { data: data, renderItem: renderItem, states: {
+        React.createElement(Body, { trackedBy: trackedBy, data: data, renderItem: renderItem, states: {
                 currentDate: { get: currentDate, set: setCurrentDate },
                 view: {
                     get: view,

package/dist/components/data-display/calendar/views/Week.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { CalendarEvent } from "../IProps";
 interface IProps<T> {
+    trackedBy: keyof (T & CalendarEvent);
     data: (T & CalendarEvent)[];
     renderItem: (item: T, index: number) => React.JSX.Element;
     states: {
@@ -14,5 +15,5 @@ interface IProps<T> {
         weekStartsOn?: number;
     };
 }
-declare const Week: <T>({ data, renderItem, states, config }: IProps<T>) => React.JSX.Element;
+declare const Week: <T>({ trackedBy, data, renderItem, states, config }: IProps<T>) => React.JSX.Element;
 export default Week;

package/dist/components/data-display/calendar/views/Week.js

@@ -1,8 +1,6 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
-const Week = function ({ data, renderItem, states, config }) {
-    // refs
-    const _eventBox = useRef([]);
+const Week = function ({ trackedBy, data, renderItem, states, config }) {
     // states
     const [mouseCoordinate, setMouseCoordinate] = useState({
         x: 0,
@@ -15,7 +13,7 @@ const Week = function ({ data, renderItem, states, config }) {
     const startHour = 0;
     const endHour = 24;
     const hours = endHour - startHour;
-    const cellHeight = 60;
+    // const cellHeight = 60;
     // methods
     const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
     // useEffects
@@ -44,46 +42,32 @@ const Week = function ({ data, renderItem, states, config }) {
                         String(startHour + index).padStart(2, "0"),
                         ":00"))))),
                 React.createElement("div", { role: "grid", className: "grid" }, Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (React.createElement("div", { key: colIndex, className: "cell" }))))))),
-                React.createElement("div", { className: "events-layer" }, data.flatMap((event, eventIdx) => {
-                    const eventColor = getColor(eventIdx);
-                    // Her etkinlik için haftanın günlerini gezip, o güne düşen parçayı hesaplıyoruz
-                    return weekDays.map((day, dayIndex) => {
-                        const dayStart = new Date(day);
-                        dayStart.setHours(0, 0, 0, 0);
-                        const dayEnd = new Date(day);
-                        dayEnd.setHours(23, 59, 59, 999);
-                        // Etkinlik bu günle kesişiyor mu?
-                        const overlapStart = new Date(Math.max(event.start.getTime(), dayStart.getTime()));
-                        const overlapEnd = new Date(Math.min(event.end.getTime(), dayEnd.getTime()));
-                        if (overlapStart < overlapEnd) {
-                            // Bu güne düşen kısmın yükseklik ve top değerleri
-                            const startMinutes = overlapStart.getHours() * 60 + overlapStart.getMinutes();
-                            const durationMinutes = (overlapEnd.getTime() - overlapStart.getTime()) / 60000;
-                            const top = (startMinutes / 60) * cellHeight;
-                            const height = (durationMinutes / 60) * cellHeight;
-                            // Durum Kontrolleri
-                            const isContinuedFromYesterday = event.start < dayStart;
-                            const isContinuingTomorrow = event.end > dayEnd;
-                            return (React.createElement("div", { ref: (element) => {
-                                    if (!element)
-                                        return;
-                                    _eventBox.current[dayIndex] = element;
-                                }, key: `${eventIdx}-${dayIndex}`, onMouseEnter: () => setActiveTooltip({ content: renderItem(event, eventIdx), id: eventIdx }), onMouseLeave: () => setActiveTooltip(null), className: "event-box", style: {
-                                    backgroundColor: eventColor.bg,
-                                    top: `${top}px`,
-                                    height: `${height}px`,
-                                    left: `${(100 / 7) * dayIndex}%`,
-                                    width: `${100 / 7}%`,
-                                    borderTop: isContinuedFromYesterday ? "none" : `1px solid ${eventColor.border}`,
-                                    borderBottom: isContinuingTomorrow ? "none" : `1px solid ${eventColor.border}`,
-                                    borderRadius: isContinuedFromYesterday
-                                        ? "0 0 var(--border-radius-sm) var(--border-radius-sm)"
-                                        : isContinuingTomorrow
-                                            ? "var(--border-radius-sm) var(--border-radius-sm) 0 0"
-                                            : "var(--border-radius-sm)",
-                                } }, !isContinuedFromYesterday && renderItem(event, eventIdx)));
-                        }
-                        return null;
+                React.createElement("div", { className: "events-layer" }, weekDays.map((day, dayIndex) => {
+                    const dayStart = new Date(day).setHours(0, 0, 0, 0);
+                    const dayEnd = new Date(day).setHours(23, 59, 59, 999);
+                    // 1. Bu güne ait etkinlikleri filtrele ve sırala.
+                    const dayEvents = data
+                        .filter((event) => {
+                        return event.start.getTime() <= dayEnd && event.end.getTime() >= dayStart;
+                    })
+                        .sort((a, b) => a.start.getTime() - b.start.getTime());
+                    // 2. Çakışmaları hesapla (Görsel yerleşim için kritik adım).
+                    const positionedEvents = computeEventLayout(dayEvents, dayStart, dayEnd);
+                    return positionedEvents.map(({ event, layout, originalIndex }) => {
+                        const uniqueValue = event[trackedBy];
+                        const eventColor = getColor(uniqueValue);
+                        return (React.createElement("div", { key: `${originalIndex}-${dayIndex}`, onMouseEnter: () => setActiveTooltip({ content: renderItem(event, originalIndex), id: originalIndex }), onMouseLeave: () => setActiveTooltip(null), className: "event-box", style: {
+                                backgroundColor: eventColor.bg,
+                                position: "absolute",
+                                top: `${layout.top}px`,
+                                height: `${layout.height}px`,
+                                // Dinamik genişlik ve sol mesafe hesaplama.
+                                left: `calc(${(100 / 7) * dayIndex}% + ${(layout.column * (100 / 7)) / layout.totalColumns}%)`,
+                                width: `${100 / 7 / layout.totalColumns}%`,
+                                border: `1px solid ${eventColor.border}`,
+                                borderRadius: "var(--border-radius-sm)",
+                                zIndex: 10,
+                            } }, layout.height > 20 && renderItem(event, originalIndex)));
                     });
                 })))),
         activeTooltip &&
@@ -93,7 +77,62 @@ const Week = function ({ data, renderItem, states, config }) {
                     transform: `translate(${mouseCoordinate.isRightHalf ? "-110%" : "10%"}, ${mouseCoordinate.isBottomHalf ? "-110%" : "10%"})`,
                 } }, activeTooltip.content), document.body)));
 };
-// Yardımcı Fonksiyonlar aynı kalıyor
+/**
+ * Etkinliklerin çakışma durumuna göre konumlarını hesaplayan yardımcı fonksiyon
+ */
+function computeEventLayout(events, dayStart, dayEnd) {
+    const cellHeight = 60;
+    const results = [];
+    // Gruplandırma (Aynı anda çakışan etkinlik kümeleri)
+    let clusters = [];
+    let lastEventEnd = 0;
+    events.forEach((event, idx) => {
+        const start = Math.max(event.start.getTime(), dayStart);
+        const end = Math.min(event.end.getTime(), dayEnd);
+        if (start >= lastEventEnd) {
+            clusters.push([]); // Yeni bir küme başlat
+        }
+        const lastCluster = clusters[clusters.length - 1];
+        lastCluster.push({ event, idx, start, end });
+        lastEventEnd = Math.max(lastEventEnd, end);
+    });
+    // Her küme içindeki kolonları hesapla
+    clusters.forEach((cluster) => {
+        const columns = [];
+        cluster.forEach((item) => {
+            let placed = false;
+            for (let i = 0; i < columns.length; i++) {
+                // Eğer bu kolondaki son etkinlikle çakışmıyorsa buraya koy
+                const lastInColumn = columns[i][columns[i].length - 1];
+                if (item.start >= lastInColumn.end) {
+                    columns[i].push(item);
+                    placed = true;
+                    break;
+                }
+            }
+            if (!placed) {
+                columns.push([item]); // Yeni kolon aç
+            }
+        });
+        // Sonuçları formatla
+        cluster.forEach((item) => {
+            const colIndex = columns.findIndex((col) => col.includes(item));
+            const startMinutes = new Date(item.start).getHours() * 60 + new Date(item.start).getMinutes();
+            const duration = (item.end - item.start) / 60000;
+            results.push({
+                event: item.event,
+                originalIndex: item.idx,
+                layout: {
+                    top: (startMinutes / 60) * cellHeight,
+                    height: (duration / 60) * cellHeight,
+                    column: colIndex,
+                    totalColumns: columns.length,
+                },
+            });
+        });
+    });
+    return results;
+}
 const getWeekRange = (date, weekStartsOn = 1) => {
     const current = new Date(date);
     const currentDay = current.getDay();
@@ -122,7 +161,13 @@ const getColor = (id) => {
         { bg: "#e91e63", border: "#c2185b" }, // Pembe
         { bg: "#00bcd4", border: "#0097a7" }, // Turkuaz
     ];
-    const index = typeof id === "number" ? id : id.length;
+    // Eğer id string ise karakter kodlarının toplamını alarak tutarlı bir index üretiriz
+    let hash = 0;
+    const identifier = String(id);
+    for (let i = 0; i < identifier.length; i++) {
+        hash = identifier.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const index = Math.abs(hash);
     return colors[index % colors.length];
 };
 export default Week;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.34",
+  "version": "0.4.35",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",