ar-design 0.4.27 → 0.4.29

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

@@ -11,6 +11,7 @@
       display: flex;
       flex-direction: row;
       width: 100%;
+      padding-left: 50px;
 
       > .item {
         display: flex;
@@ -50,22 +51,24 @@
       > .grid {
         position: relative;
         width: 100%;
+        height: calc(24 * 60px);
         border: solid 1px transparent;
         border-top-color: var(--gray-200);
+        overflow: hidden;
 
         > .events-layer {
           position: absolute;
           top: 0;
           left: 0;
-          right: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
           z-index: 1;
 
           > .event-box {
             position: absolute;
-            background-color: rgba(var(--primary-rgb), 0.75);
             width: calc(100% / 7);
             padding: 0.5rem;
-            border-radius: var(--border-radius-sm);
             color: var(--white);
             font-size: 12px;
           }
@@ -73,6 +76,7 @@
 
         > .row {
           position: relative;
+          height: 60px;
           margin: auto;
 
           &:nth-child(2) {

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

@@ -1,8 +1,9 @@
 import React from "react";
 import { View } from "../../../libs/types";
 import { CalendarEvent } from "./IProps";
-interface IProps {
-    data: CalendarEvent[];
+interface IProps<T> {
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
     states: {
         currentDate: {
             get: Date;
@@ -17,5 +18,5 @@ interface IProps {
         locale?: Intl.LocalesArgument;
     };
 }
-declare const Body: ({ data, states, config }: IProps) => React.JSX.Element;
+declare const Body: <T>({ 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 = ({ data, states, config }) => {
+const Body = function ({ 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, states: { currentDate: states.currentDate }, config: config });
+        return React.createElement(Week, { 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

@@ -2,8 +2,9 @@ export type CalendarEvent = {
     start: Date;
     end: Date;
 };
-interface IProps {
-    data: CalendarEvent[];
+interface IProps<T> {
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
     config?: {
         locale?: Intl.LocalesArgument;
         weekStartsOn?: number;

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

@@ -1,5 +1,8 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/calendar/styles.css";
-declare const Calendar: React.FC<IProps>;
+declare const Calendar: {
+    <T>({ 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 = ({ data, config }) => {
+const Calendar = function ({ data, renderItem, config }) {
     // states
     const [currentDate, setCurrentDate] = useState(new Date());
     const [view, setView] = useState("Week");
@@ -15,7 +15,7 @@ const Calendar = ({ data, config }) => {
                     set: setView,
                 },
             }, config: config }),
-        React.createElement(Body, { data: data, states: {
+        React.createElement(Body, { data: data, renderItem: renderItem, states: {
                 currentDate: { get: currentDate, set: setCurrentDate },
                 view: {
                     get: view,

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

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

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

@@ -1,82 +1,61 @@
-import React, { useEffect, useMemo, useState } from "react";
-const Week = ({ data, states, config }) => {
+import React, { useMemo } from "react";
+const Week = function ({ data, renderItem, states, config }) {
     const startHour = 0;
     const endHour = 24;
     const hours = endHour - startHour;
     const cellHeight = 60;
-    // const slotDuration = 15;
-    // const slotHeight = cellHeight / (60 / slotDuration);
-    // states
-    const [events, setEvents] = useState([]);
-    // const [tempStart, setTempStart] = useState<{
-    //   date: Date;
-    //   minutes: number;
-    // } | null>(null);
-    // methods
-    // const handleClick = (weekDay: Date, hourIndex: number) => (event: React.MouseEvent<HTMLDivElement>) => {
-    //   const rect = event.currentTarget.getBoundingClientRect();
-    //   const y = event.clientY - rect.top;
-    //   const slotIndex = Math.floor(y / slotHeight);
-    //   const minutes = hourIndex * 60 + slotIndex * slotDuration;
-    //   if (!tempStart) {
-    //     setTempStart({ date: weekDay, minutes });
-    //     return;
-    //   }
-    //   const startMinutes = Math.min(tempStart.minutes, minutes);
-    //   const endMinutes = Math.max(tempStart.minutes, minutes) + slotDuration;
-    //   const startDate = new Date(weekDay);
-    //   startDate.setHours(Math.floor(startMinutes / 60), startMinutes % 60, 0, 0);
-    //   const endDate = new Date(weekDay);
-    //   endDate.setHours(Math.floor(endMinutes / 60), endMinutes % 60, 0, 0);
-    //   setEvents((prev) => [...prev, { start: startDate, end: endDate }]);
-    //   setTempStart(null);
-    // };
     const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
-    // useEffects
-    useEffect(() => {
-        setEvents(data);
-    }, [data]);
     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" },
-            React.createElement("span", { className: "day-name" }, day
-                .toLocaleString(config?.locale ?? "tr", {
-                weekday: "short",
-            })
-                .toUpperCase()),
+        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" }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
+            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" },
-                React.createElement("div", { className: "events-layer" }, events.map((event, index) => {
-                    const dayIndex = weekDays.findIndex((d) => d.toDateString() === event.start.toDateString());
-                    if (dayIndex === -1)
+                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;
-                    const startMinutes = event.start.getHours() * 60 + event.start.getMinutes();
-                    const durationMinutes = (event.end.getTime() - event.start.getTime()) / 60000;
-                    const top = (startMinutes / 60) * cellHeight;
-                    const height = (durationMinutes / 60) * cellHeight;
-                    return (React.createElement("div", { key: index, className: "event-box", style: {
-                            top,
-                            height,
-                            left: `${(100 / 7) * dayIndex}%`,
-                        } },
-                        event.start.toLocaleTimeString(config?.locale ?? "tr-TR", {
-                            hour: "2-digit",
-                            minute: "2-digit",
-                        }),
-                        " - ",
-                        event.end.toLocaleTimeString(config?.locale ?? "tr-TR", {
-                            hour: "2-digit",
-                            minute: "2-digit",
-                        })));
-                })),
-                Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (
-                // <div key={colIndex} className="cell" onClick={handleClick(weekDay, rowIndex)} />
-                React.createElement("div", { key: colIndex, className: "cell" }))))))))));
+                    });
+                }))))));
 };
+// Yardımcı Fonksiyonlar aynı kalıyor
 const getWeekRange = (date, weekStartsOn = 1) => {
     const current = new Date(date);
     const currentDay = current.getDay();
@@ -96,4 +75,16 @@ const getWeekDays = (date, weekStartsOn = 1) => {
         return d;
     });
 };
+const getColor = (id) => {
+    const colors = [
+        { bg: "#3174ad", border: "#2a6293" }, // Mavi
+        { bg: "#4caf50", border: "#388e3c" }, // Yeşil
+        { bg: "#ff9800", border: "#f57c00" }, // Turuncu
+        { bg: "#9c27b0", border: "#7b1fa2" }, // Mor
+        { bg: "#e91e63", border: "#c2185b" }, // Pembe
+        { bg: "#00bcd4", border: "#0097a7" }, // Turkuaz
+    ];
+    const index = typeof id === "number" ? id : id.length;
+    return colors[index % colors.length];
+};
 export default Week;

package/package.json

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