@kkkarsss/ui 1.0.0 → 1.0.1
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.
|
@@ -20,5 +20,6 @@ export type TCalendarLikeProps = {
|
|
|
20
20
|
hours?: number[];
|
|
21
21
|
onDrop?: (e: DragEvent<HTMLDivElement>, hour: number) => void;
|
|
22
22
|
renderItem?: (hour: number) => ReactNode;
|
|
23
|
+
onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;
|
|
23
24
|
};
|
|
24
25
|
export declare const CalendarLike: FC<TCalendarLikeProps>;
|
|
@@ -63,9 +63,47 @@ export const CalendarItem = ({ id, title, description, isCompleted, isInWork, on
|
|
|
63
63
|
}, className: "cursor-pointer hover:text-primary transition-colors p-0.5", children: _jsx(ExternalLink, { size: 14 }) }))] }), description && displayEstimatedTime > 30 && (_jsx("div", { className: "truncate", children: _jsx(Typo, { size: "xs", color: "secondary", children: description }) })), onResize && !isCompleted && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
|
|
64
64
|
};
|
|
65
65
|
const DEFAULT_HOURS = Array.from({ length: 24 }, (_, i) => i);
|
|
66
|
-
export const CalendarLike = ({ hours = DEFAULT_HOURS, onDrop, renderItem }) => {
|
|
66
|
+
export const CalendarLike = ({ hours = DEFAULT_HOURS, onDrop, renderItem, onCreateTask }) => {
|
|
67
|
+
const [selection, setSelection] = useState(null);
|
|
67
68
|
const handleDragOver = (e) => {
|
|
68
69
|
e.preventDefault();
|
|
69
70
|
};
|
|
70
|
-
|
|
71
|
+
const handleMouseDown = (e, hour) => {
|
|
72
|
+
if (e.button !== 0 || !onCreateTask)
|
|
73
|
+
return;
|
|
74
|
+
// Check if click is on a calendar item
|
|
75
|
+
if (e.target.closest('.calendar-item'))
|
|
76
|
+
return;
|
|
77
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
78
|
+
const offsetY = e.clientY - rect.top;
|
|
79
|
+
// Round to nearest 15 minutes
|
|
80
|
+
const startMinutes = Math.floor(offsetY / 20) * 15;
|
|
81
|
+
setSelection({
|
|
82
|
+
startHour: hour,
|
|
83
|
+
startMinutes,
|
|
84
|
+
currentEstimatedTime: 15,
|
|
85
|
+
});
|
|
86
|
+
const startY = e.clientY;
|
|
87
|
+
const onMouseMove = (moveEvent) => {
|
|
88
|
+
const deltaY = moveEvent.clientY - startY;
|
|
89
|
+
const newEstimatedTime = Math.max(15, Math.round(((deltaY / 80) * 60) / 15) * 15);
|
|
90
|
+
setSelection((prev) => (prev ? { ...prev, currentEstimatedTime: newEstimatedTime } : null));
|
|
91
|
+
};
|
|
92
|
+
const onMouseUp = () => {
|
|
93
|
+
document.removeEventListener('mousemove', onMouseMove);
|
|
94
|
+
document.removeEventListener('mouseup', onMouseUp);
|
|
95
|
+
setSelection((finalSelection) => {
|
|
96
|
+
if (finalSelection) {
|
|
97
|
+
onCreateTask(finalSelection.startHour, finalSelection.startMinutes, finalSelection.currentEstimatedTime);
|
|
98
|
+
}
|
|
99
|
+
return null;
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
document.addEventListener('mousemove', onMouseMove);
|
|
103
|
+
document.addEventListener('mouseup', onMouseUp);
|
|
104
|
+
};
|
|
105
|
+
return (_jsx(Offset, { type: 'vertical', children: _jsx("div", { className: "relative border-l border-secondary/20 ml-12 select-none", children: hours.map((hour) => (_jsxs("div", { onDragOver: handleDragOver, onDrop: (e) => onDrop?.(e, hour), onMouseDown: (e) => handleMouseDown(e, hour), className: "relative h-20 border-b border-secondary-foreground group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30", children: [_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) }), _jsxs("div", { className: "pl-4 py-1 relative h-full", children: [renderItem?.(hour), selection && selection.startHour === hour && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
|
|
106
|
+
top: `${(selection.startMinutes / 60) * 80}px`,
|
|
107
|
+
height: `${(selection.currentEstimatedTime / 60) * 80}px`,
|
|
108
|
+
}, children: _jsxs("div", { className: "p-1", children: [_jsx(Typo, { size: "xs", weight: "500", children: "\u041D\u043E\u0432\u0430\u044F \u0437\u0430\u0434\u0430\u0447\u0430" }), _jsxs(Typo, { size: "xs", color: "secondary", children: [selection.currentEstimatedTime, " \u043C\u0438\u043D"] })] }) }))] })] }, hour))) }) }));
|
|
71
109
|
};
|