@kkkarsss/ui 1.2.1 → 1.2.2

package/dist/ui/information/calendar-like/calendar-item.js

@@ -1,14 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ExternalLink } from 'lucide-react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { jc } from '../../../utils';
 import { Flex } from '../../layout';
-import { Typo } from '../text/typo';
-export const CalendarItem = ({ title, isCompleted, isInWork, onClick, icon, color, className, }) => {
+export const CalendarItem = ({ title, isCompleted, isInWork, icon, color, className }) => {
     return (_jsx("div", { className: jc('w-full h-full rounded-[8px] border flex flex-col transition-colors relative', !color && (isCompleted ? 'border-secondary bg-accent' : 'border-accent bg-accent'), className), style: {
             backgroundColor: color ? color : undefined,
             borderColor: color ? color : undefined,
-        }, children: _jsxs(Flex, { gap: "8px", align: "center", justify: "space-between", type: "fill", children: [_jsxs(Flex, { gap: "8px", align: "center", type: "fill", className: "min-w-0 flex-1", children: [typeof title === 'string' ? (_jsx(Typo, { size: "s", weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: title })) : (title), isInWork && icon] }), onClick && (_jsx("div", { onClick: (e) => {
-                        e.stopPropagation();
-                        onClick();
-                    }, className: "cursor-pointer hover:text-primary transition-colors pr-l", children: _jsx(ExternalLink, { size: 14 }) }))] }) }));
+        }, children: _jsx(Flex, { gap: "8px", align: "center", justify: "space-between", type: "fill", children: _jsxs(Flex, { gap: "8px", align: "center", type: "fill", className: "min-w-0 flex-1", children: [title, isInWork && icon] }) }) }));
 };

package/dist/ui/information/calendar-like/calendar-like.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useRef } from 'react';
 import { CalendarItemWrapper } from './calendar-item-wrapper';
 import { CalendarSlot } from './calendar-slot';
 import { calculateTaskPositions, groupTasksBySlot } from './utils';
@@ -8,10 +8,55 @@ export * from './types';
 export * from './calendar-item-wrapper';
 export * from './calendar-item';
 const DEFAULT_SLOTS = Array.from({ length: 96 }, (_, i) => i);
-export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
+const CurrentTimeLine = () => {
+    const [now, setNow] = useState(new Date());
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setNow(new Date());
+        }, 60000);
+        return () => clearInterval(interval);
+    }, []);
+    const topOffset = useMemo(() => {
+        const hours = now.getHours();
+        const minutes = now.getMinutes();
+        const totalMinutes = hours * 60 + minutes;
+        // 15 минут = 20 пикселей (высота слота)
+        return totalMinutes * (20 / 15);
+    }, [now]);
+    return (_jsxs("div", { className: "absolute left-0 right-0 z-50 pointer-events-none flex items-center", style: { top: `${topOffset}px` }, children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-red-500 -ml-1" }), _jsx("div", { className: "flex-1 h-[2px] bg-red-500" })] }));
+};
+export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = true, autoScrollToCurrentTime = true, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
+    const containerRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const tasksWithPosition = useMemo(() => calculateTaskPositions(tasks), [tasks]);
     const tasksBySlot = useMemo(() => groupTasksBySlot(tasksWithPosition), [tasksWithPosition]);
+    useEffect(() => {
+        if (showCurrentTime && autoScrollToCurrentTime && containerRef.current) {
+            const now = new Date();
+            const hours = now.getHours();
+            const minutes = now.getMinutes();
+            const totalMinutes = hours * 60 + minutes;
+            // 15 минут = 20 пикселей (высота слота)
+            const topOffset = totalMinutes * (20 / 15);
+            // Находим ближайший скроллируемый родитель или используем окно
+            const scrollParent = (node) => {
+                if (!node)
+                    return null;
+                const style = window.getComputedStyle(node);
+                if (/(auto|scroll)/.test(style.overflow + style.overflowY))
+                    return node;
+                return scrollParent(node.parentElement);
+            };
+            const parent = scrollParent(containerRef.current);
+            if (parent) {
+                const containerTop = containerRef.current.getBoundingClientRect().top + parent.scrollTop;
+                parent.scrollTo({
+                    top: containerTop + topOffset - parent.clientHeight / 2,
+                    behavior: 'smooth',
+                });
+            }
+        }
+    }, [showCurrentTime, autoScrollToCurrentTime]);
     const handleDragStart = (e, task) => {
         setIsDragging(true);
         e.dataTransfer.setData('taskId', task.id);
@@ -40,8 +85,8 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, renderTask, onTaskD
             onTaskDrop(taskId, hour, minutes);
         }
     };
-    return (_jsx("div", { className: jc('relative border-l border-secondary/20 ml-12 select-none', isDragging ? 'is-dragging' : ''), children: slots.map((slotIndex) => {
-            const tasksForSlot = tasksBySlot[slotIndex];
-            return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, children: tasksForSlot?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: (e) => handleDragStart(e, task), onDragEnd: handleDragEnd, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, slotIndex));
-        }) }));
+    return (_jsxs("div", { ref: containerRef, className: jc('relative border-l border-secondary/20 ml-12 select-none', isDragging ? 'is-dragging' : ''), children: [showCurrentTime && _jsx(CurrentTimeLine, {}), slots.map((slotIndex) => {
+                const tasksForSlot = tasksBySlot[slotIndex];
+                return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, children: tasksForSlot?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: (e) => handleDragStart(e, task), onDragEnd: handleDragEnd, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, slotIndex));
+            })] }));
 };

package/dist/ui/information/calendar-like/types.d.ts

@@ -17,6 +17,8 @@ export type TCalendarLikeProps = {
     tasks: TCalendarTask[];
     hours?: number[];
     slots?: number[];
+    showCurrentTime?: boolean;
+    autoScrollToCurrentTime?: boolean;
     renderTask: (task: TCalendarTask) => ReactNode;
     onTaskDrop?: (taskId: string, hour: number, minutes: number) => void;
     onTaskResize?: (taskId: string, newEstimatedTime: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",