Skip to content

Commit 46d54b3

Browse files
betomoedanobetomoedano
authored
refactor(companion): simplify context menu implementation and improve layout for badge spacing (calcom#27265)
1 parent 17cc935 commit 46d54b3

1 file changed

Lines changed: 65 additions & 86 deletions

File tree

‎companion/components/event-type-list-item/EventTypeListItem.ios.tsx‎

Lines changed: 65 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -90,94 +90,73 @@ export const EventTypeListItem = ({
9090
<View
9191
className={`bg-cal-bg active:bg-cal-bg-secondary ${!isLast ? "border-b border-cal-border" : ""}`}
9292
>
93-
{/* Native iOS Context Menu for long-press */}
94-
<Host matchContents>
95-
<ContextMenu
96-
modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
97-
activationMethod="longPress"
93+
{/* Calculate minHeight based on badge rows to ensure proper spacing */}
94+
{/* 1-3 badges = 1 row, 4-5 badges = likely 2 rows, 6 badges = 2 rows */}
95+
<View
96+
className="flex-row items-start justify-between"
97+
style={{
98+
paddingVertical: 16,
99+
minHeight: badgeCount <= 3 ? 100 : badgeCount <= 5 ? 120 : 160,
100+
}}
101+
>
102+
<Pressable
103+
onPress={() => handleEventTypePress(item)}
104+
style={{
105+
paddingLeft: 16,
106+
paddingBottom: 10,
107+
flex: 1,
108+
marginRight: 12,
109+
}}
98110
>
99-
<ContextMenu.Items>
100-
{eventTypes.map((eventType) => (
101-
<Button
102-
key={eventType.label}
103-
systemImage={eventType.icon}
104-
onPress={eventType.onPress}
105-
role={eventType.role}
106-
label={eventType.label}
107-
/>
108-
))}
109-
</ContextMenu.Items>
110-
<ContextMenu.Trigger>
111-
{/* Calculate minHeight based on badge rows to ensure proper spacing */}
112-
{/* 1-3 badges = 1 row, 4-5 badges = likely 2 rows, 6 badges = 2 rows */}
113-
<View
114-
className="flex-row items-start justify-between"
115-
style={{
116-
paddingVertical: 16,
117-
minHeight: badgeCount <= 3 ? 100 : badgeCount <= 5 ? 130 : 160,
118-
}}
119-
>
120-
<Pressable
121-
onPress={() => handleEventTypePress(item)}
122-
style={{
123-
paddingLeft: 16,
124-
paddingBottom: 10,
125-
flex: 1,
126-
marginRight: 12,
127-
}}
128-
>
129-
<EventTypeTitle
130-
title={item.title}
131-
username={item.users?.[0]?.username}
132-
slug={item.slug}
133-
bookingUrl={item.bookingUrl}
134-
/>
135-
<EventTypeDescription normalizedDescription={normalizedDescription} />
136-
<EventTypeBadges
137-
formattedDuration={formattedDuration}
138-
hidden={item.hidden}
139-
seats={item.seats}
140-
hasPrice={hasPrice}
141-
formattedPrice={formattedPrice}
142-
confirmationPolicy={item.confirmationPolicy}
143-
recurrence={item.recurrence}
144-
/>
145-
</Pressable>
111+
<EventTypeTitle
112+
title={item.title}
113+
username={item.users?.[0]?.username}
114+
slug={item.slug}
115+
bookingUrl={item.bookingUrl}
116+
/>
117+
<EventTypeDescription normalizedDescription={normalizedDescription} />
118+
<EventTypeBadges
119+
formattedDuration={formattedDuration}
120+
hidden={item.hidden}
121+
seats={item.seats}
122+
hasPrice={hasPrice}
123+
formattedPrice={formattedPrice}
124+
confirmationPolicy={item.confirmationPolicy}
125+
recurrence={item.recurrence}
126+
/>
127+
</Pressable>
146128

147-
<View style={{ paddingRight: 16, paddingTop: 4, flexShrink: 0 }}>
148-
<Host matchContents>
149-
<ContextMenu
150-
modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
151-
activationMethod="singlePress"
152-
>
153-
<ContextMenu.Items>
154-
{eventTypes.map((eventType) => (
155-
<Button
156-
key={eventType.label}
157-
systemImage={eventType.icon}
158-
onPress={eventType.onPress}
159-
role={eventType.role}
160-
label={eventType.label}
161-
/>
162-
))}
163-
</ContextMenu.Items>
164-
<ContextMenu.Trigger>
165-
<HStack>
166-
<Image
167-
systemName="ellipsis"
168-
color="primary"
169-
size={24}
170-
modifiers={[frame({ height: 24, width: 17 })]}
171-
/>
172-
</HStack>
173-
</ContextMenu.Trigger>
174-
</ContextMenu>
175-
</Host>
176-
</View>
177-
</View>
178-
</ContextMenu.Trigger>
179-
</ContextMenu>
180-
</Host>
129+
<View style={{ paddingRight: 16, paddingTop: 4, flexShrink: 0 }}>
130+
<Host matchContents>
131+
<ContextMenu
132+
modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
133+
activationMethod="singlePress"
134+
>
135+
<ContextMenu.Items>
136+
{eventTypes.map((eventType) => (
137+
<Button
138+
key={eventType.label}
139+
systemImage={eventType.icon}
140+
onPress={eventType.onPress}
141+
role={eventType.role}
142+
label={eventType.label}
143+
/>
144+
))}
145+
</ContextMenu.Items>
146+
<ContextMenu.Trigger>
147+
<HStack>
148+
<Image
149+
systemName="ellipsis"
150+
color="primary"
151+
size={24}
152+
modifiers={[frame({ height: 24, width: 17 })]}
153+
/>
154+
</HStack>
155+
</ContextMenu.Trigger>
156+
</ContextMenu>
157+
</Host>
158+
</View>
159+
</View>
181160
</View>
182161
);
183162
};

0 commit comments

Comments
 (0)