ar-design 0.4.33 → 0.4.35

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

@@ -16,10 +16,12 @@
       > .item {
         display: flex;
         flex-direction: column;
+        flex: 1;
         align-items: center;
         gap: 1rem;
         width: calc(100% / 7);
         padding: 0.5rem 0;
+        text-align: center;
 
         > .day-name {
           color: var(--gray-400);
@@ -33,11 +35,16 @@
     }
 
     > .body {
+      position: relative;
       display: flex;
       flex-direction: row;
       width: 100%;
 
       > .clocks {
+        position: relative;
+        width: 50px;
+        z-index: 1;
+
         > div {
           height: 60px;
 
@@ -54,25 +61,7 @@
         height: calc(24 * 60px);
         border: solid 1px transparent;
         border-top-color: var(--gray-200);
-        overflow: hidden;
-
-        > .events-layer {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          z-index: 1;
-
-          > .event-box {
-            position: absolute;
-            width: calc(100% / 7);
-            padding: 0.5rem;
-            color: var(--white);
-            font-size: 12px;
-          }
-        }
+        z-index: 1;
 
         > .row {
           position: relative;
@@ -123,6 +112,33 @@
           }
         }
       }
+
+      > .events-layer {
+        position: absolute;
+        right: 0;
+        width: calc(100% - 50px); /* Solda yer alan clocks'dan dolayı -50px yapıldı. */
+        height: calc(24 * 60px);
+        z-index: 2;
+
+        > .event-box {
+          position: absolute;
+          width: calc(100% / 7);
+          padding: 0.5rem;
+          color: var(--white);
+          font-size: 12px;
+          overflow: hidden;
+        }
+      }
     }
   }
 }
+
+.ar-calendar-tooltip {
+  position: fixed;
+  background-color: var(--black);
+  padding: 1rem;
+  border-radius: var(--border-radius-sm);
+  color: var(--white);
+  pointer-events: none;
+  z-index: 200;
+}

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,61 +1,138 @@
-import React, { useMemo } from "react";
-const Week = function ({ data, renderItem, states, config }) {
+import React, { useEffect, useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+const Week = function ({ trackedBy, data, renderItem, states, config }) {
+    // states
+    const [mouseCoordinate, setMouseCoordinate] = useState({
+        x: 0,
+        y: 0,
+        isRightHalf: false,
+        isBottomHalf: false,
+    });
+    const [activeTooltip, setActiveTooltip] = useState(null);
+    // variables
     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]);
-    return (React.createElement("div", { className: "ar-calendar-week-view" },
-        React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item", style: { flex: 1, textAlign: "center" } },
-            React.createElement("span", { className: "day-name" }, day.toLocaleString(config?.locale ?? "tr", { weekday: "short" }).toUpperCase()),
-            React.createElement("span", { className: "date" }, day.getDate()))))),
-        React.createElement("div", { className: "body" },
-            React.createElement("div", { className: "clocks", style: { width: "50px" } }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
-                React.createElement("span", null,
-                    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", { key: `${eventIdx}-${dayIndex}`, 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;
+    // useEffects
+    useEffect(() => {
+        const handleMouseMove = (event) => {
+            setMouseCoordinate({
+                x: event.clientX,
+                y: event.clientY,
+                isRightHalf: event.clientX > window.innerWidth / 2,
+                isBottomHalf: event.clientY > window.innerHeight / 2,
+            });
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "ar-calendar-week-view" },
+            React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item" },
+                React.createElement("span", { className: "day-name" }, day.toLocaleString(config?.locale ?? "tr", { weekday: "short" }).toUpperCase()),
+                React.createElement("span", { className: "date" }, day.getDate()))))),
+            React.createElement("div", { className: "body" },
+                React.createElement("div", { className: "clocks" }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
+                    React.createElement("span", null,
+                        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" }, 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 &&
+            ReactDOM.createPortal(React.createElement("div", { className: "ar-calendar-tooltip", style: {
+                    top: mouseCoordinate.y,
+                    left: mouseCoordinate.x,
+                    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();
@@ -84,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.33",
+  "version": "0.4.35",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",