vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

refactor(companion): simplify context menu implementation and improve layout for badge spacing (#27265)

Browse Source
This commit is contained in:
Beto
2026-01-26 22:52:38 +00:00
committed by GitHub
parent 17cc9358d7
commit 46d54b36ce
1 changed files with 65 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
companion/components/event-type-list-item/EventTypeListItem.ios.tsx
+65 -86
View File
@@ -90,94 +90,73 @@ export const EventTypeListItem = ({
<View
className={`bg-cal-bg active:bg-cal-bg-secondary ${!isLast ? "border-b border-cal-border" : ""}`}
>
{/* Native iOS Context Menu for long-press */}
<Host matchContents>
<ContextMenu
modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
activationMethod="longPress"
{/* Calculate minHeight based on badge rows to ensure proper spacing */}
{/* 1-3 badges = 1 row, 4-5 badges = likely 2 rows, 6 badges = 2 rows */}
<View
className="flex-row items-start justify-between"
style={{
paddingVertical: 16,
minHeight: badgeCount <= 3 ? 100 : badgeCount <= 5 ? 120 : 160,
}}
>
<Pressable
onPress={() => handleEventTypePress(item)}
style={{
paddingLeft: 16,
paddingBottom: 10,
flex: 1,
marginRight: 12,
}}
>
<ContextMenu.Items>
{eventTypes.map((eventType) => (
<Button
key={eventType.label}
systemImage={eventType.icon}
onPress={eventType.onPress}
role={eventType.role}
label={eventType.label}
/>
))}
</ContextMenu.Items>
<ContextMenu.Trigger>
{/* Calculate minHeight based on badge rows to ensure proper spacing */}
{/* 1-3 badges = 1 row, 4-5 badges = likely 2 rows, 6 badges = 2 rows */}
<View
className="flex-row items-start justify-between"
style={{
paddingVertical: 16,
minHeight: badgeCount <= 3 ? 100 : badgeCount <= 5 ? 130 : 160,
}}
>
<Pressable
onPress={() => handleEventTypePress(item)}
style={{
paddingLeft: 16,
paddingBottom: 10,
flex: 1,
marginRight: 12,
}}
>
<EventTypeTitle
title={item.title}
username={item.users?.[0]?.username}
slug={item.slug}
bookingUrl={item.bookingUrl}
/>
<EventTypeDescription normalizedDescription={normalizedDescription} />
<EventTypeBadges
formattedDuration={formattedDuration}
hidden={item.hidden}
seats={item.seats}
hasPrice={hasPrice}
formattedPrice={formattedPrice}
confirmationPolicy={item.confirmationPolicy}
recurrence={item.recurrence}
/>
</Pressable>
<EventTypeTitle
title={item.title}
username={item.users?.[0]?.username}
slug={item.slug}
bookingUrl={item.bookingUrl}
/>
<EventTypeDescription normalizedDescription={normalizedDescription} />
<EventTypeBadges
formattedDuration={formattedDuration}
hidden={item.hidden}
seats={item.seats}
hasPrice={hasPrice}
formattedPrice={formattedPrice}
confirmationPolicy={item.confirmationPolicy}
recurrence={item.recurrence}
/>
</Pressable>
<View style={{ paddingRight: 16, paddingTop: 4, flexShrink: 0 }}>
<Host matchContents>
<ContextMenu
modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
activationMethod="singlePress"
>
<ContextMenu.Items>
{eventTypes.map((eventType) => (
<Button
key={eventType.label}
systemImage={eventType.icon}
onPress={eventType.onPress}
role={eventType.role}
label={eventType.label}
/>
))}
</ContextMenu.Items>
<ContextMenu.Trigger>
<HStack>
<Image
systemName="ellipsis"
color="primary"
size={24}
modifiers={[frame({ height: 24, width: 17 })]}
/>
</HStack>
</ContextMenu.Trigger>
</ContextMenu>
</Host>
</View>
</View>
</ContextMenu.Trigger>
</ContextMenu>
</Host>
<View style={{ paddingRight: 16, paddingTop: 4, flexShrink: 0 }}>
<Host matchContents>
<ContextMenu
modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
activationMethod="singlePress"
>
<ContextMenu.Items>
{eventTypes.map((eventType) => (
<Button
key={eventType.label}
systemImage={eventType.icon}
onPress={eventType.onPress}
role={eventType.role}
label={eventType.label}
/>
))}
</ContextMenu.Items>
<ContextMenu.Trigger>
<HStack>
<Image
systemName="ellipsis"
color="primary"
size={24}
modifiers={[frame({ height: 24, width: 17 })]}
/>
</HStack>
</ContextMenu.Trigger>
</ContextMenu>
</Host>
</View>
</View>
</View>
);
};