Skip to content

Commit a46800c

Browse files
defymecobradefymecobra
committed
[frontend]: fix format
1 parent 0727139 commit a46800c

File tree

9 files changed

+344
-179
lines changed

9 files changed

+344
-179
lines changed

‎src/frontend/src/widgets/calendar/CalendarWidget.tsx‎

Lines changed: 154 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,13 @@ interface EventPillProps {
159159
onDragStart?: () => void;
160160
}
161161

162-
const EventPill: React.FC<EventPillProps> = ({ event, onClick, compact, draggable, onDragStart }) => {
162+
const EventPill: React.FC<EventPillProps> = ({
163+
event,
164+
onClick,
165+
compact,
166+
draggable,
167+
onDragStart,
168+
}) => {
163169
const bgColor = event.color
164170
? `var(--${event.color.toLowerCase()}, var(--primary))`
165171
: 'var(--primary)';
@@ -172,11 +178,15 @@ const EventPill: React.FC<EventPillProps> = ({ event, onClick, compact, draggabl
172178
onClick?.(event.id);
173179
}}
174180
draggable={draggable}
175-
onDragStart={draggable ? (e) => {
176-
e.dataTransfer.setData('text/plain', event.id);
177-
e.dataTransfer.effectAllowed = 'move';
178-
onDragStart?.();
179-
} : undefined}
181+
onDragStart={
182+
draggable
183+
? e => {
184+
e.dataTransfer.setData('text/plain', event.id);
185+
e.dataTransfer.effectAllowed = 'move';
186+
onDragStart?.();
187+
}
188+
: undefined
189+
}
180190
className={cn(
181191
'w-full text-left rounded px-1.5 truncate cursor-pointer transition-opacity hover:opacity-80',
182192
compact ? 'text-[11px] py-px leading-snug' : 'text-xs py-0.5',
@@ -193,7 +203,9 @@ const EventPill: React.FC<EventPillProps> = ({ event, onClick, compact, draggabl
193203
) : (
194204
<>
195205
{!compact && !event.allDay && (
196-
<span className="mr-1 opacity-80">{format(event.start, 'HH:mm')}</span>
206+
<span className="mr-1 opacity-80">
207+
{format(event.start, 'HH:mm')}
208+
</span>
197209
)}
198210
{event.title}
199211
</>
@@ -258,7 +270,9 @@ const MonthView: React.FC<MonthViewProps> = ({
258270

259271
const dayNames = useMemo(() => {
260272
const start = startOfWeek(new Date(), { weekStartsOn: 1 });
261-
return Array.from({ length: 7 }, (_, i) => format(addDays(start, i), 'EEE'));
273+
return Array.from({ length: 7 }, (_, i) =>
274+
format(addDays(start, i), 'EEE')
275+
);
262276
}, []);
263277

264278
return (
@@ -276,9 +290,15 @@ const MonthView: React.FC<MonthViewProps> = ({
276290
</div>
277291

278292
{/* Weeks */}
279-
<div className="grid flex-1" style={{ gridTemplateRows: `repeat(${weeks.length}, 1fr)` }}>
293+
<div
294+
className="grid flex-1"
295+
style={{ gridTemplateRows: `repeat(${weeks.length}, 1fr)` }}
296+
>
280297
{weeks.map((week, wi) => (
281-
<div key={wi} className="grid grid-cols-7 border-b border-border last:border-b-0">
298+
<div
299+
key={wi}
300+
className="grid grid-cols-7 border-b border-border last:border-b-0"
301+
>
282302
{week.map(day => {
283303
const key = format(day, 'yyyy-MM-dd');
284304
const dayEvents = eventsByDay.get(key) || [];
@@ -296,26 +316,59 @@ const MonthView: React.FC<MonthViewProps> = ({
296316
)}
297317
onClick={() => {
298318
const dayStart = startOfDay(day);
299-
onSelectSlot(dayStart.toISOString(), endOfDay(day).toISOString());
319+
onSelectSlot(
320+
dayStart.toISOString(),
321+
endOfDay(day).toISOString()
322+
);
300323
}}
301-
onDragOver={enableDragDrop ? (e) => { e.preventDefault(); e.currentTarget.classList.add('bg-primary/10'); } : undefined}
302-
onDragLeave={enableDragDrop ? (e) => { e.currentTarget.classList.remove('bg-primary/10'); } : undefined}
303-
onDrop={enableDragDrop ? (e) => {
304-
e.preventDefault();
305-
e.currentTarget.classList.remove('bg-primary/10');
306-
const eventId = e.dataTransfer.getData('text/plain');
307-
if (eventId && onEventMove) {
308-
const droppedEvent = events.find(ev => ev.id === eventId);
309-
if (droppedEvent) {
310-
const duration = droppedEvent.end.getTime() - droppedEvent.start.getTime();
311-
const newStart = new Date(day);
312-
newStart.setHours(droppedEvent.start.getHours(), droppedEvent.start.getMinutes());
313-
const newEnd = new Date(newStart.getTime() + duration);
314-
onEventMove(eventId, newStart.toISOString(), newEnd.toISOString());
315-
}
316-
}
317-
setDraggedEventId(null);
318-
} : undefined}
324+
onDragOver={
325+
enableDragDrop
326+
? e => {
327+
e.preventDefault();
328+
e.currentTarget.classList.add('bg-primary/10');
329+
}
330+
: undefined
331+
}
332+
onDragLeave={
333+
enableDragDrop
334+
? e => {
335+
e.currentTarget.classList.remove('bg-primary/10');
336+
}
337+
: undefined
338+
}
339+
onDrop={
340+
enableDragDrop
341+
? e => {
342+
e.preventDefault();
343+
e.currentTarget.classList.remove('bg-primary/10');
344+
const eventId = e.dataTransfer.getData('text/plain');
345+
if (eventId && onEventMove) {
346+
const droppedEvent = events.find(
347+
ev => ev.id === eventId
348+
);
349+
if (droppedEvent) {
350+
const duration =
351+
droppedEvent.end.getTime() -
352+
droppedEvent.start.getTime();
353+
const newStart = new Date(day);
354+
newStart.setHours(
355+
droppedEvent.start.getHours(),
356+
droppedEvent.start.getMinutes()
357+
);
358+
const newEnd = new Date(
359+
newStart.getTime() + duration
360+
);
361+
onEventMove(
362+
eventId,
363+
newStart.toISOString(),
364+
newEnd.toISOString()
365+
);
366+
}
367+
}
368+
setDraggedEventId(null);
369+
}
370+
: undefined
371+
}
319372
>
320373
<div className="flex justify-end mb-0.5">
321374
<span
@@ -336,7 +389,11 @@ const MonthView: React.FC<MonthViewProps> = ({
336389
onClick={onEventClick}
337390
compact
338391
draggable={enableDragDrop}
339-
onDragStart={enableDragDrop ? () => setDraggedEventId(event.id) : undefined}
392+
onDragStart={
393+
enableDragDrop
394+
? () => setDraggedEventId(event.id)
395+
: undefined
396+
}
340397
/>
341398
))}
342399
{dayEvents.length > MAX_VISIBLE && (
@@ -380,10 +437,7 @@ const TimeGrid: React.FC<TimeGridProps> = ({
380437
const dayStart = startOfDay(day);
381438
const dayEnd = endOfDay(day);
382439
return events.filter(
383-
e =>
384-
!e.allDay &&
385-
e.start < dayEnd &&
386-
e.end > dayStart
440+
e => !e.allDay && e.start < dayEnd && e.end > dayStart
387441
);
388442
},
389443
[events]
@@ -460,7 +514,10 @@ const TimeGrid: React.FC<TimeGridProps> = ({
460514

461515
{/* Time grid body */}
462516
<div className="flex-1 overflow-y-auto">
463-
<div className="flex relative" style={{ height: HOURS.length * HOUR_HEIGHT }}>
517+
<div
518+
className="flex relative"
519+
style={{ height: HOURS.length * HOUR_HEIGHT }}
520+
>
464521
{/* Time labels */}
465522
<div className="w-16 flex-shrink-0 relative">
466523
{HOURS.map(hour => (
@@ -503,23 +560,51 @@ const TimeGrid: React.FC<TimeGridProps> = ({
503560
slotEnd.toISOString()
504561
);
505562
}}
506-
onDragOver={enableDragDrop ? (e) => { e.preventDefault(); e.currentTarget.classList.add('bg-primary/10'); } : undefined}
507-
onDragLeave={enableDragDrop ? (e) => { e.currentTarget.classList.remove('bg-primary/10'); } : undefined}
508-
onDrop={enableDragDrop ? (e) => {
509-
e.preventDefault();
510-
e.currentTarget.classList.remove('bg-primary/10');
511-
const eventId = e.dataTransfer.getData('text/plain');
512-
if (eventId && onEventMove) {
513-
const droppedEvent = events.find(ev => ev.id === eventId);
514-
if (droppedEvent) {
515-
const duration = droppedEvent.end.getTime() - droppedEvent.start.getTime();
516-
const newStart = new Date(day);
517-
newStart.setHours(hour, 0, 0, 0);
518-
const newEnd = new Date(newStart.getTime() + duration);
519-
onEventMove(eventId, newStart.toISOString(), newEnd.toISOString());
520-
}
521-
}
522-
} : undefined}
563+
onDragOver={
564+
enableDragDrop
565+
? e => {
566+
e.preventDefault();
567+
e.currentTarget.classList.add('bg-primary/10');
568+
}
569+
: undefined
570+
}
571+
onDragLeave={
572+
enableDragDrop
573+
? e => {
574+
e.currentTarget.classList.remove('bg-primary/10');
575+
}
576+
: undefined
577+
}
578+
onDrop={
579+
enableDragDrop
580+
? e => {
581+
e.preventDefault();
582+
e.currentTarget.classList.remove('bg-primary/10');
583+
const eventId =
584+
e.dataTransfer.getData('text/plain');
585+
if (eventId && onEventMove) {
586+
const droppedEvent = events.find(
587+
ev => ev.id === eventId
588+
);
589+
if (droppedEvent) {
590+
const duration =
591+
droppedEvent.end.getTime() -
592+
droppedEvent.start.getTime();
593+
const newStart = new Date(day);
594+
newStart.setHours(hour, 0, 0, 0);
595+
const newEnd = new Date(
596+
newStart.getTime() + duration
597+
);
598+
onEventMove(
599+
eventId,
600+
newStart.toISOString(),
601+
newEnd.toISOString()
602+
);
603+
}
604+
}
605+
}
606+
: undefined
607+
}
523608
/>
524609
))}
525610

@@ -544,13 +629,17 @@ const TimeGrid: React.FC<TimeGridProps> = ({
544629
<button
545630
key={event.id}
546631
draggable={enableDragDrop}
547-
onDragStart={enableDragDrop ? (e) => {
548-
e.dataTransfer.setData('text/plain', event.id);
549-
e.dataTransfer.effectAllowed = 'move';
550-
} : undefined}
632+
onDragStart={
633+
enableDragDrop
634+
? e => {
635+
e.dataTransfer.setData('text/plain', event.id);
636+
e.dataTransfer.effectAllowed = 'move';
637+
}
638+
: undefined
639+
}
551640
className={cn(
552-
"absolute left-0.5 right-1 rounded px-1.5 py-0.5 text-xs overflow-hidden cursor-pointer hover:opacity-80 transition-opacity text-left",
553-
enableDragDrop && "cursor-grab active:cursor-grabbing"
641+
'absolute left-0.5 right-1 rounded px-1.5 py-0.5 text-xs overflow-hidden cursor-pointer hover:opacity-80 transition-opacity text-left',
642+
enableDragDrop && 'cursor-grab active:cursor-grabbing'
554643
)}
555644
style={{
556645
top: topPx,
@@ -566,7 +655,9 @@ const TimeGrid: React.FC<TimeGridProps> = ({
566655
title={event.title}
567656
>
568657
{event.content ? (
569-
<div className="w-full h-full overflow-hidden">{event.content}</div>
658+
<div className="w-full h-full overflow-hidden">
659+
{event.content}
660+
</div>
570661
) : (
571662
<>
572663
<div className="font-medium truncate">
@@ -603,7 +694,7 @@ interface WeekViewProps {
603694
enableDragDrop?: boolean;
604695
}
605696

606-
const WeekView: React.FC<WeekViewProps> = (props) => {
697+
const WeekView: React.FC<WeekViewProps> = props => {
607698
const days = useMemo(() => {
608699
const weekStart = startOfWeek(props.currentDate, { weekStartsOn: 1 });
609700
return Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
@@ -632,7 +723,7 @@ interface DayViewProps {
632723
enableDragDrop?: boolean;
633724
}
634725

635-
const DayView: React.FC<DayViewProps> = (props) => {
726+
const DayView: React.FC<DayViewProps> = props => {
636727
const days = useMemo(() => [props.currentDate], [props.currentDate]);
637728

638729
return (
@@ -782,7 +873,8 @@ export const CalendarWidget: React.FC<CalendarWidgetProps> = ({
782873
);
783874

784875
const calendarEvents = useCalendarData(slots, widgetNodeChildren);
785-
const { handleEventClick, handleSelectSlot, handleEventMove } = useCalendarHandlers(id);
876+
const { handleEventClick, handleSelectSlot, handleEventMove } =
877+
useCalendarHandlers(id);
786878

787879
const onNavigate = useCallback(
788880
(action: 'prev' | 'next' | 'today') => {

‎src/frontend/src/widgets/calendar/useCalendarData.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React from 'react';
22
import { parseISO } from 'date-fns';
3-
import type {
4-
CalendarEvent,
5-
WidgetNodeChild,
6-
} from './types';
3+
import type { CalendarEvent, WidgetNodeChild } from './types';
74

85
export function useCalendarData(
96
slots: { default?: React.ReactNode[] } | undefined,
@@ -18,8 +15,7 @@ export function useCalendarData(
1815

1916
widgetNodeChildren.forEach((widgetNode, index) => {
2017
if (widgetNode.type === 'Ivy.CalendarEvent') {
21-
const eventId =
22-
(widgetNode.props.eventId as string) || widgetNode.id;
18+
const eventId = (widgetNode.props.eventId as string) || widgetNode.id;
2319
const title = (widgetNode.props.title as string) || '';
2420
const startStr = widgetNode.props.start as string | undefined;
2521
const endStr = widgetNode.props.end as string | undefined;
@@ -34,7 +30,9 @@ export function useCalendarData(
3430

3531
try {
3632
start = parseISO(startStr);
37-
end = endStr ? parseISO(endStr) : new Date(start.getTime() + 60 * 60 * 1000);
33+
end = endStr
34+
? parseISO(endStr)
35+
: new Date(start.getTime() + 60 * 60 * 1000);
3836
} catch {
3937
return;
4038
}

‎src/frontend/src/widgets/charts/RadialBarChartWidget.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,8 @@ const RadialBarChartWidget: React.FC<RadialBarChartWidgetProps> = ({
107107
coordinateSystem: 'polar',
108108
data: data.map(d => d[key]),
109109
animation: barConfig.animated ?? RADIAL_BAR_DEFAULTS.animated,
110-
showBackground: barConfig.background ?? RADIAL_BAR_DEFAULTS.background,
110+
showBackground:
111+
barConfig.background ?? RADIAL_BAR_DEFAULTS.background,
111112
backgroundStyle: {
112113
color: 'rgba(180, 180, 180, 0.2)',
113114
},
@@ -145,13 +146,17 @@ const RadialBarChartWidget: React.FC<RadialBarChartWidgetProps> = ({
145146
startAngle: startAngle,
146147
endAngle: endAngle,
147148
axisLine: {
148-
show: polarAngleAxisConfig?.axisLine ?? POLAR_ANGLE_AXIS_DEFAULTS.axisLine,
149+
show:
150+
polarAngleAxisConfig?.axisLine ??
151+
POLAR_ANGLE_AXIS_DEFAULTS.axisLine,
149152
lineStyle: {
150153
color: polarAngleAxisConfig?.stroke ?? themeColors.mutedForeground,
151154
},
152155
},
153156
axisTick: {
154-
show: polarAngleAxisConfig?.tickLine ?? POLAR_ANGLE_AXIS_DEFAULTS.tickLine,
157+
show:
158+
polarAngleAxisConfig?.tickLine ??
159+
POLAR_ANGLE_AXIS_DEFAULTS.tickLine,
155160
},
156161
axisLabel: {
157162
color: themeColors.foreground,

0 commit comments

Comments
 (0)