ar-design 0.4.33 → 0.4.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16,10 +16,12 @@
|
|
|
16
16
|
> .item {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
|
+
flex: 1;
|
|
19
20
|
align-items: center;
|
|
20
21
|
gap: 1rem;
|
|
21
22
|
width: calc(100% / 7);
|
|
22
23
|
padding: 0.5rem 0;
|
|
24
|
+
text-align: center;
|
|
23
25
|
|
|
24
26
|
> .day-name {
|
|
25
27
|
color: var(--gray-400);
|
|
@@ -33,11 +35,16 @@
|
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
> .body {
|
|
38
|
+
position: relative;
|
|
36
39
|
display: flex;
|
|
37
40
|
flex-direction: row;
|
|
38
41
|
width: 100%;
|
|
39
42
|
|
|
40
43
|
> .clocks {
|
|
44
|
+
position: relative;
|
|
45
|
+
width: 50px;
|
|
46
|
+
z-index: 1;
|
|
47
|
+
|
|
41
48
|
> div {
|
|
42
49
|
height: 60px;
|
|
43
50
|
|
|
@@ -54,25 +61,7 @@
|
|
|
54
61
|
height: calc(24 * 60px);
|
|
55
62
|
border: solid 1px transparent;
|
|
56
63
|
border-top-color: var(--gray-200);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
> .events-layer {
|
|
60
|
-
position: absolute;
|
|
61
|
-
top: 0;
|
|
62
|
-
left: 0;
|
|
63
|
-
width: 100%;
|
|
64
|
-
height: 100%;
|
|
65
|
-
pointer-events: none;
|
|
66
|
-
z-index: 1;
|
|
67
|
-
|
|
68
|
-
> .event-box {
|
|
69
|
-
position: absolute;
|
|
70
|
-
width: calc(100% / 7);
|
|
71
|
-
padding: 0.5rem;
|
|
72
|
-
color: var(--white);
|
|
73
|
-
font-size: 12px;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
64
|
+
z-index: 1;
|
|
76
65
|
|
|
77
66
|
> .row {
|
|
78
67
|
position: relative;
|
|
@@ -123,6 +112,34 @@
|
|
|
123
112
|
}
|
|
124
113
|
}
|
|
125
114
|
}
|
|
115
|
+
|
|
116
|
+
> .events-layer {
|
|
117
|
+
position: absolute;
|
|
118
|
+
right: 0;
|
|
119
|
+
width: calc(100% - 50px); /* Solda yer alan clocks'dan dolayı -50px yapıldı. */
|
|
120
|
+
height: calc(24 * 60px);
|
|
121
|
+
z-index: 2;
|
|
122
|
+
|
|
123
|
+
> .event-box {
|
|
124
|
+
position: absolute;
|
|
125
|
+
width: calc(100% / 7);
|
|
126
|
+
padding: 0.5rem;
|
|
127
|
+
color: var(--white);
|
|
128
|
+
font-size: 12px;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
z-index: 10;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
126
133
|
}
|
|
127
134
|
}
|
|
128
135
|
}
|
|
136
|
+
|
|
137
|
+
.ar-calendar-tooltip {
|
|
138
|
+
position: fixed;
|
|
139
|
+
background-color: var(--black);
|
|
140
|
+
padding: 1rem;
|
|
141
|
+
border-radius: var(--border-radius-sm);
|
|
142
|
+
color: var(--white);
|
|
143
|
+
pointer-events: none;
|
|
144
|
+
z-index: 200;
|
|
145
|
+
}
|
|
@@ -1,21 +1,49 @@
|
|
|
1
|
-
import React, { useMemo } from "react";
|
|
1
|
+
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import ReactDOM from "react-dom";
|
|
2
3
|
const Week = function ({ data, renderItem, states, config }) {
|
|
4
|
+
// refs
|
|
5
|
+
const _eventBox = useRef([]);
|
|
6
|
+
// states
|
|
7
|
+
const [mouseCoordinate, setMouseCoordinate] = useState({
|
|
8
|
+
x: 0,
|
|
9
|
+
y: 0,
|
|
10
|
+
isRightHalf: false,
|
|
11
|
+
isBottomHalf: false,
|
|
12
|
+
});
|
|
13
|
+
const [activeTooltip, setActiveTooltip] = useState(null);
|
|
14
|
+
// variables
|
|
3
15
|
const startHour = 0;
|
|
4
16
|
const endHour = 24;
|
|
5
17
|
const hours = endHour - startHour;
|
|
6
18
|
const cellHeight = 60;
|
|
19
|
+
// methods
|
|
7
20
|
const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
21
|
+
// useEffects
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
const handleMouseMove = (event) => {
|
|
24
|
+
setMouseCoordinate({
|
|
25
|
+
x: event.clientX,
|
|
26
|
+
y: event.clientY,
|
|
27
|
+
isRightHalf: event.clientX > window.innerWidth / 2,
|
|
28
|
+
isBottomHalf: event.clientY > window.innerHeight / 2,
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
32
|
+
return () => {
|
|
33
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
34
|
+
};
|
|
35
|
+
}, []);
|
|
36
|
+
return (React.createElement(React.Fragment, null,
|
|
37
|
+
React.createElement("div", { className: "ar-calendar-week-view" },
|
|
38
|
+
React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item" },
|
|
39
|
+
React.createElement("span", { className: "day-name" }, day.toLocaleString(config?.locale ?? "tr", { weekday: "short" }).toUpperCase()),
|
|
40
|
+
React.createElement("span", { className: "date" }, day.getDate()))))),
|
|
41
|
+
React.createElement("div", { className: "body" },
|
|
42
|
+
React.createElement("div", { className: "clocks" }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
|
|
43
|
+
React.createElement("span", null,
|
|
44
|
+
String(startHour + index).padStart(2, "0"),
|
|
45
|
+
":00"))))),
|
|
46
|
+
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" }))))))),
|
|
19
47
|
React.createElement("div", { className: "events-layer" }, data.flatMap((event, eventIdx) => {
|
|
20
48
|
const eventColor = getColor(eventIdx);
|
|
21
49
|
// Her etkinlik için haftanın günlerini gezip, o güne düşen parçayı hesaplıyoruz
|
|
@@ -36,7 +64,11 @@ const Week = function ({ data, renderItem, states, config }) {
|
|
|
36
64
|
// Durum Kontrolleri
|
|
37
65
|
const isContinuedFromYesterday = event.start < dayStart;
|
|
38
66
|
const isContinuingTomorrow = event.end > dayEnd;
|
|
39
|
-
return (React.createElement("div", {
|
|
67
|
+
return (React.createElement("div", { ref: (element) => {
|
|
68
|
+
if (!element)
|
|
69
|
+
return;
|
|
70
|
+
_eventBox.current[dayIndex] = element;
|
|
71
|
+
}, key: `${eventIdx}-${dayIndex}`, onMouseEnter: () => setActiveTooltip({ content: renderItem(event, eventIdx), id: eventIdx }), onMouseLeave: () => setActiveTooltip(null), className: "event-box", style: {
|
|
40
72
|
backgroundColor: eventColor.bg,
|
|
41
73
|
top: `${top}px`,
|
|
42
74
|
height: `${height}px`,
|
|
@@ -53,7 +85,13 @@ const Week = function ({ data, renderItem, states, config }) {
|
|
|
53
85
|
}
|
|
54
86
|
return null;
|
|
55
87
|
});
|
|
56
|
-
}))))
|
|
88
|
+
})))),
|
|
89
|
+
activeTooltip &&
|
|
90
|
+
ReactDOM.createPortal(React.createElement("div", { className: "ar-calendar-tooltip", style: {
|
|
91
|
+
top: mouseCoordinate.y,
|
|
92
|
+
left: mouseCoordinate.x,
|
|
93
|
+
transform: `translate(${mouseCoordinate.isRightHalf ? "-110%" : "10%"}, ${mouseCoordinate.isBottomHalf ? "-110%" : "10%"})`,
|
|
94
|
+
} }, activeTooltip.content), document.body)));
|
|
57
95
|
};
|
|
58
96
|
// Yardımcı Fonksiyonlar aynı kalıyor
|
|
59
97
|
const getWeekRange = (date, weekStartsOn = 1) => {
|