ar-design 0.4.27 → 0.4.28

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.
Files changed (3) hide show
  1. package/dist/assets/css/components/data-display/calendar/styles.week-view.css +7 -3
  2. package/dist/components/data-display/calendar/views/Week.js +64 -59
  3. package/package.json +1 -1
package/dist/assets/css/components/data-display/calendar/styles.week-view.css CHANGED
@@ -11,6 +11,7 @@
11
11
  display: flex;
12
12
  flex-direction: row;
13
13
  width: 100%;
14
+ padding-left: 50px;
14
15
 
15
16
  > .item {
16
17
  display: flex;
@@ -50,22 +51,24 @@
50
51
  > .grid {
51
52
  position: relative;
52
53
  width: 100%;
54
+ height: calc(24 * 60px);
53
55
  border: solid 1px transparent;
54
56
  border-top-color: var(--gray-200);
57
+ overflow: hidden;
55
58
 
56
59
  > .events-layer {
57
60
  position: absolute;
58
61
  top: 0;
59
62
  left: 0;
60
- right: 0;
63
+ width: 100%;
64
+ height: 100%;
65
+ pointer-events: none;
61
66
  z-index: 1;
62
67
 
63
68
  > .event-box {
64
69
  position: absolute;
65
- background-color: rgba(var(--primary-rgb), 0.75);
66
70
  width: calc(100% / 7);
67
71
  padding: 0.5rem;
68
- border-radius: var(--border-radius-sm);
69
72
  color: var(--white);
70
73
  font-size: 12px;
71
74
  }
@@ -73,6 +76,7 @@
73
76
 
74
77
  > .row {
75
78
  position: relative;
79
+ height: 60px;
76
80
  margin: auto;
77
81
 
78
82
  &:nth-child(2) {
package/dist/components/data-display/calendar/views/Week.js CHANGED
@@ -4,79 +4,72 @@ const Week = ({ data, states, config }) => {
4
4
  const endHour = 24;
5
5
  const hours = endHour - startHour;
6
6
  const cellHeight = 60;
7
- // const slotDuration = 15;
8
- // const slotHeight = cellHeight / (60 / slotDuration);
9
- // states
10
7
  const [events, setEvents] = useState([]);
11
- // const [tempStart, setTempStart] = useState<{
12
- // date: Date;
13
- // minutes: number;
14
- // } | null>(null);
15
- // methods
16
- // const handleClick = (weekDay: Date, hourIndex: number) => (event: React.MouseEvent<HTMLDivElement>) => {
17
- // const rect = event.currentTarget.getBoundingClientRect();
18
- // const y = event.clientY - rect.top;
19
- // const slotIndex = Math.floor(y / slotHeight);
20
- // const minutes = hourIndex * 60 + slotIndex * slotDuration;
21
- // if (!tempStart) {
22
- // setTempStart({ date: weekDay, minutes });
23
- // return;
24
- // }
25
- // const startMinutes = Math.min(tempStart.minutes, minutes);
26
- // const endMinutes = Math.max(tempStart.minutes, minutes) + slotDuration;
27
- // const startDate = new Date(weekDay);
28
- // startDate.setHours(Math.floor(startMinutes / 60), startMinutes % 60, 0, 0);
29
- // const endDate = new Date(weekDay);
30
- // endDate.setHours(Math.floor(endMinutes / 60), endMinutes % 60, 0, 0);
31
- // setEvents((prev) => [...prev, { start: startDate, end: endDate }]);
32
- // setTempStart(null);
33
- // };
34
8
  const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
35
- // useEffects
36
9
  useEffect(() => {
37
10
  setEvents(data);
38
11
  }, [data]);
39
12
  return (React.createElement("div", { className: "ar-calendar-week-view" },
40
- React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item" },
41
- React.createElement("span", { className: "day-name" }, day
42
- .toLocaleString(config?.locale ?? "tr", {
43
- weekday: "short",
44
- })
45
- .toUpperCase()),
13
+ React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item", style: { flex: 1, textAlign: "center" } },
14
+ React.createElement("span", { className: "day-name" }, day.toLocaleString(config?.locale ?? "tr", { weekday: "short" }).toUpperCase()),
46
15
  React.createElement("span", { className: "date" }, day.getDate()))))),
47
16
  React.createElement("div", { className: "body" },
48
- React.createElement("div", { className: "clocks" }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
17
+ React.createElement("div", { className: "clocks", style: { width: "50px" } }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
49
18
  React.createElement("span", null,
50
19
  String(startHour + index).padStart(2, "0"),
51
20
  ":00"))))),
52
21
  React.createElement("div", { role: "grid", className: "grid" },
53
- React.createElement("div", { className: "events-layer" }, events.map((event, index) => {
54
- const dayIndex = weekDays.findIndex((d) => d.toDateString() === event.start.toDateString());
55
- if (dayIndex === -1)
22
+ Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (React.createElement("div", { key: colIndex, className: "cell" })))))),
23
+ React.createElement("div", { className: "events-layer" }, events.flatMap((event, eventIdx) => {
24
+ const eventColor = getColor(eventIdx);
25
+ // Her etkinlik için haftanın günlerini gezip, o güne düşen parçayı hesaplıyoruz
26
+ return weekDays.map((day, dayIndex) => {
27
+ const dayStart = new Date(day);
28
+ dayStart.setHours(0, 0, 0, 0);
29
+ const dayEnd = new Date(day);
30
+ dayEnd.setHours(23, 59, 59, 999);
31
+ // Etkinlik bu günle kesişiyor mu?
32
+ const overlapStart = new Date(Math.max(event.start.getTime(), dayStart.getTime()));
33
+ const overlapEnd = new Date(Math.min(event.end.getTime(), dayEnd.getTime()));
34
+ if (overlapStart < overlapEnd) {
35
+ // Bu güne düşen kısmın yükseklik ve top değerleri
36
+ const startMinutes = overlapStart.getHours() * 60 + overlapStart.getMinutes();
37
+ const durationMinutes = (overlapEnd.getTime() - overlapStart.getTime()) / 60000;
38
+ const top = (startMinutes / 60) * cellHeight;
39
+ const height = (durationMinutes / 60) * cellHeight;
40
+ // Durum Kontrolleri
41
+ const isContinuedFromYesterday = event.start < dayStart;
42
+ const isContinuingTomorrow = event.end > dayEnd;
43
+ return (React.createElement("div", { key: `${eventIdx}-${dayIndex}`, className: "event-box", style: {
44
+ backgroundColor: eventColor.bg,
45
+ top: `${top}px`,
46
+ height: `${height}px`,
47
+ left: `${(100 / 7) * dayIndex}%`,
48
+ width: `${100 / 7}%`,
49
+ borderTop: isContinuedFromYesterday ? "none" : `1px solid ${eventColor.border}`,
50
+ borderBottom: isContinuingTomorrow ? "none" : `1px solid ${eventColor.border}`,
51
+ borderRadius: isContinuedFromYesterday
52
+ ? "0 0 var(--border-radius-sm) var(--border-radius-sm)"
53
+ : isContinuingTomorrow
54
+ ? "var(--border-radius-sm) var(--border-radius-sm) 0 0"
55
+ : "var(--border-radius-sm)",
56
+ } }, !isContinuedFromYesterday && (React.createElement(React.Fragment, null,
57
+ React.createElement("div", { className: "event-content" },
58
+ event.start.toLocaleTimeString(config?.locale ?? "tr-TR", {
59
+ hour: "2-digit",
60
+ minute: "2-digit",
61
+ }),
62
+ " - ",
63
+ event.end.toLocaleTimeString(config?.locale ?? "tr-TR", {
64
+ hour: "2-digit",
65
+ minute: "2-digit",
66
+ }))))));
67
+ }
56
68
  return null;
57
- const startMinutes = event.start.getHours() * 60 + event.start.getMinutes();
58
- const durationMinutes = (event.end.getTime() - event.start.getTime()) / 60000;
59
- const top = (startMinutes / 60) * cellHeight;
60
- const height = (durationMinutes / 60) * cellHeight;
61
- return (React.createElement("div", { key: index, className: "event-box", style: {
62
- top,
63
- height,
64
- left: `${(100 / 7) * dayIndex}%`,
65
- } },
66
- event.start.toLocaleTimeString(config?.locale ?? "tr-TR", {
67
- hour: "2-digit",
68
- minute: "2-digit",
69
- }),
70
- " - ",
71
- event.end.toLocaleTimeString(config?.locale ?? "tr-TR", {
72
- hour: "2-digit",
73
- minute: "2-digit",
74
- })));
75
- })),
76
- Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (
77
- // <div key={colIndex} className="cell" onClick={handleClick(weekDay, rowIndex)} />
78
- React.createElement("div", { key: colIndex, className: "cell" }))))))))));
69
+ });
70
+ }))))));
79
71
  };
72
+ // Yardımcı Fonksiyonlar aynı kalıyor
80
73
  const getWeekRange = (date, weekStartsOn = 1) => {
81
74
  const current = new Date(date);
82
75
  const currentDay = current.getDay();
@@ -96,4 +89,16 @@ const getWeekDays = (date, weekStartsOn = 1) => {
96
89
  return d;
97
90
  });
98
91
  };
92
+ const getColor = (id) => {
93
+ const colors = [
94
+ { bg: "#3174ad", border: "#2a6293" }, // Mavi
95
+ { bg: "#4caf50", border: "#388e3c" }, // Yeşil
96
+ { bg: "#ff9800", border: "#f57c00" }, // Turuncu
97
+ { bg: "#9c27b0", border: "#7b1fa2" }, // Mor
98
+ { bg: "#e91e63", border: "#c2185b" }, // Pembe
99
+ { bg: "#00bcd4", border: "#0097a7" }, // Turkuaz
100
+ ];
101
+ const index = typeof id === "number" ? id : id.length;
102
+ return colors[index % colors.length];
103
+ };
99
104
  export default Week;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.4.27",
3
+ "version": "0.4.28",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",