Skip to content

Commit 285f161

Browse files
betomoedanobetomoedano
authored
refactor(companion): event type details screen improvements (calcom#26415)
* refactor(companion): move EventTypeDetail component to a new file and update routing * refactor(companion): format code for better readability in TabLayout and EventTypeDetail components * refactor(companion): improve code formatting and readability in EventTypeDetail component * refactor(companion): enhance code readability and formatting in EventTypeDetail component * refactor(companion): improve code formatting and readability in EventTypeDetail component * refactor(companion): enhance code formatting and readability in EventTypeDetail component * refactor(companion): improve code formatting and readability in TabLayout component
1 parent 9c08c5f commit 285f161

3 files changed

Lines changed: 104 additions & 153 deletions

File tree

‎companion/app/(tabs)/(event-types)/_layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { Stack } from "expo-router";
33
export default function EventTypesLayout() {
44
return (
55
<Stack>
6-
<Stack.Screen name="index" options={{ headerShown: false }} />
6+
<Stack.Screen name="index" options={{}} />
7+
<Stack.Screen name="event-type-detail" options={{}} />
78
</Stack>
89
);
910
}

companion/app/event-type-detail.tsx renamed to companion/app/(tabs)/(event-types)/event-type-detail.tsx

Lines changed: 101 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Ionicons } from "@expo/vector-icons";
22
import * as Clipboard from "expo-clipboard";
3-
import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
43
import { Stack, useLocalSearchParams, useRouter } from "expo-router";
5-
import { useCallback, useEffect, useState } from "react";
4+
import { Activity, useCallback, useEffect, useState } from "react";
65
import {
76
Alert,
87
Animated,
@@ -39,6 +38,7 @@ import {
3938
validateLocationItem,
4039
} from "@/utils/locationHelpers";
4140
import { safeLogError } from "@/utils/safeLogger";
41+
import { isLiquidGlassAvailable } from "expo-glass-effect";
4242

4343
// Type definitions for extended EventType fields not in the base type
4444
interface EventTypeExtended {
@@ -1141,20 +1141,44 @@ export default function EventTypeDetail() {
11411141
headerRight:
11421142
Platform.OS === "android" || Platform.OS === "web" ? renderHeaderRight : undefined,
11431143
headerShown: Platform.OS !== "ios",
1144+
headerTransparent: Platform.select({
1145+
ios: true,
1146+
}),
11441147
}}
11451148
/>
11461149

11471150
{Platform.OS === "ios" && (
1148-
<Stack.Header>
1149-
<Stack.Header.Left>
1150-
<Stack.Header.Button onPress={() => router.back()}>
1151-
<Stack.Header.Icon sf="xmark" />
1152-
</Stack.Header.Button>
1153-
</Stack.Header.Left>
1154-
1155-
<Stack.Header.Title>{headerTitle}</Stack.Header.Title>
1156-
1151+
<Stack.Header blurEffect={isLiquidGlassAvailable() ? undefined : "light"}>
11571152
<Stack.Header.Right>
1153+
<Stack.Header.Menu>
1154+
<Stack.Header.Label>
1155+
{activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}
1156+
</Stack.Header.Label>
1157+
{tabs.map((tab) => (
1158+
<Stack.Header.MenuAction
1159+
key={tab.id}
1160+
isOn={activeTab === tab.id}
1161+
icon={
1162+
activeTab === tab.id
1163+
? "checkmark"
1164+
: tab.icon === "link"
1165+
? "link"
1166+
: tab.icon === "calendar"
1167+
? "calendar"
1168+
: tab.icon === "time"
1169+
? "clock"
1170+
: tab.icon === "settings"
1171+
? "gearshape"
1172+
: tab.icon === "refresh"
1173+
? "arrow.clockwise"
1174+
: "ellipsis"
1175+
}
1176+
onPress={() => setActiveTab(tab.id)}
1177+
>
1178+
{tab.label}
1179+
</Stack.Header.MenuAction>
1180+
))}
1181+
</Stack.Header.Menu>
11581182
<Stack.Header.Button
11591183
onPress={handleSave}
11601184
disabled={saving}
@@ -1168,96 +1192,52 @@ export default function EventTypeDetail() {
11681192
)}
11691193

11701194
<View className="flex-1 bg-[#f8f9fa]">
1171-
{/* Tabs */}
1172-
{isLiquidGlassAvailable() ? (
1173-
<GlassView
1174-
glassEffectStyle="regular"
1175-
style={{
1176-
paddingTop: 12,
1177-
paddingBottom: 12,
1178-
}}
1179-
>
1180-
<ScrollView
1181-
horizontal
1182-
showsHorizontalScrollIndicator={false}
1183-
contentContainerStyle={{ paddingHorizontal: 12, gap: 4 }}
1184-
>
1185-
{tabs.map((tab) => (
1186-
<TouchableOpacity
1187-
key={tab.id}
1188-
className={`min-w-[90px] items-center rounded-[24px] px-3 py-3 md:px-5 ${
1189-
activeTab === tab.id ? "bg-[rgba(0,0,0,0.08)]" : ""
1190-
}`}
1191-
onPress={() => setActiveTab(tab.id)}
1192-
>
1193-
<View className="flex-row items-center gap-2">
1194-
<Ionicons
1195-
name={tab.icon}
1196-
size={18}
1197-
color={activeTab === tab.id ? "#007AFF" : "#666"}
1198-
/>
1199-
<Text
1200-
className={`text-base font-medium ${
1201-
activeTab === tab.id ? "font-semibold text-[#007AFF]" : "text-[#666]"
1202-
}`}
1203-
>
1204-
{tab.label}
1205-
</Text>
1206-
</View>
1207-
</TouchableOpacity>
1208-
))}
1209-
</ScrollView>
1210-
</GlassView>
1211-
) : (
1212-
<View
1213-
style={{
1214-
paddingTop: Platform.OS === "ios" ? 12 : insets.top + 70,
1215-
paddingBottom: 12,
1216-
backgroundColor: "rgba(255, 255, 255, 0.9)",
1217-
borderBottomWidth: 0.5,
1218-
borderBottomColor: "#C6C6C8",
1219-
}}
1220-
>
1221-
<ScrollView
1222-
horizontal
1223-
showsHorizontalScrollIndicator={false}
1224-
contentContainerStyle={{ paddingHorizontal: 12, gap: 4 }}
1225-
>
1226-
{tabs.map((tab) => (
1227-
<TouchableOpacity
1228-
key={tab.id}
1229-
className={`min-w-[90px] items-center rounded-[24px] px-3 py-3 md:px-5 ${
1230-
activeTab === tab.id ? "bg-[#EEEFF2]" : ""
1231-
}`}
1232-
onPress={() => setActiveTab(tab.id)}
1233-
>
1234-
<View className="flex-row items-center gap-2">
1235-
<Ionicons
1236-
name={tab.icon}
1237-
size={18}
1238-
color={activeTab === tab.id ? "#007AFF" : "#666"}
1239-
/>
1240-
<Text
1241-
className={`text-base font-medium ${
1242-
activeTab === tab.id ? "font-semibold text-[#007AFF]" : "text-[#666]"
1243-
}`}
1244-
>
1245-
{tab.label}
1246-
</Text>
1247-
</View>
1248-
</TouchableOpacity>
1249-
))}
1250-
</ScrollView>
1251-
</View>
1252-
)}
1253-
1254-
{/* Content */}
12551195
<ScrollView
12561196
style={{
12571197
flex: 1,
12581198
}}
1259-
contentContainerStyle={{ padding: 20, paddingBottom: 200 }}
1199+
contentContainerStyle={{ padding: 16, paddingBottom: 200 }}
1200+
contentInsetAdjustmentBehavior="automatic"
12601201
>
1202+
<Activity mode={Platform.OS !== "ios" ? "visible" : "hidden"}>
1203+
<View
1204+
style={{
1205+
paddingBottom: 12,
1206+
}}
1207+
>
1208+
<ScrollView
1209+
horizontal
1210+
showsHorizontalScrollIndicator={false}
1211+
contentContainerStyle={{ paddingHorizontal: 12, gap: 4 }}
1212+
>
1213+
{tabs.map((tab) => (
1214+
<TouchableOpacity
1215+
key={tab.id}
1216+
className={`min-w-[90px] items-center rounded-[24px] px-3 py-3 md:px-5 ${
1217+
activeTab === tab.id ? "bg-[#EEEFF2]" : ""
1218+
}`}
1219+
onPress={() => setActiveTab(tab.id)}
1220+
>
1221+
<View className="flex-row items-center gap-2">
1222+
<Ionicons
1223+
name={tab.icon}
1224+
size={18}
1225+
color={activeTab === tab.id ? "#007AFF" : "#666"}
1226+
/>
1227+
<Text
1228+
className={`text-base font-medium ${
1229+
activeTab === tab.id ? "font-semibold text-[#007AFF]" : "text-[#666]"
1230+
}`}
1231+
>
1232+
{tab.label}
1233+
</Text>
1234+
</View>
1235+
</TouchableOpacity>
1236+
))}
1237+
</ScrollView>
1238+
</View>
1239+
</Activity>
1240+
12611241
{activeTab === "basics" ? (
12621242
<BasicsTab
12631243
eventTitle={eventTitle}
@@ -2007,27 +1987,10 @@ export default function EventTypeDetail() {
20071987
</View>
20081988
</View>
20091989
) : null}
2010-
</ScrollView>
20111990

2012-
{/* Bottom Action Bar */}
2013-
<GlassView
2014-
style={{
2015-
position: "absolute",
2016-
bottom: 0,
2017-
left: 0,
2018-
right: 0,
2019-
paddingTop: 16,
2020-
paddingHorizontal: 20,
2021-
backgroundColor: "#f8f9fa",
2022-
borderTopWidth: 0.5,
2023-
borderTopColor: "#E5E5EA",
2024-
paddingBottom: insets.bottom + 12,
2025-
}}
2026-
glassEffectStyle="clear"
2027-
>
2028-
<View className="flex-row items-center justify-between">
2029-
<View className="flex-row items-center gap-2">
2030-
<Text className="text-base font-medium text-[#333]">Hidden</Text>
1991+
<View className="rounded-2xl bg-white p-5 mt-3 gap-3">
1992+
<View className="h-12 flex-row items-center justify-between">
1993+
<Text>Hidden</Text>
20311994
<Switch
20321995
value={isHidden}
20331996
onValueChange={setIsHidden}
@@ -2036,45 +1999,31 @@ export default function EventTypeDetail() {
20361999
/>
20372000
</View>
20382001

2039-
<View className="flex-row items-center gap-3">
2040-
<GlassView
2041-
className="overflow-hidden rounded-full bg-[rgba(255,255,255,0.1)]"
2042-
glassEffectStyle="clear"
2043-
>
2044-
<TouchableOpacity
2045-
className="h-11 w-11 items-center justify-center"
2046-
onPress={handlePreview}
2047-
>
2048-
<Ionicons name="open-outline" size={20} color="#000" />
2049-
</TouchableOpacity>
2050-
</GlassView>
2002+
<TouchableOpacity
2003+
className="h-12 flex-row items-center justify-between"
2004+
onPress={handlePreview}
2005+
>
2006+
<Text>Preview</Text>
2007+
<Ionicons name="open-outline" size={20} color="#000" />
2008+
</TouchableOpacity>
20512009

2052-
<GlassView
2053-
className="overflow-hidden rounded-full bg-[rgba(255,255,255,0.1)]"
2054-
glassEffectStyle="clear"
2055-
>
2056-
<TouchableOpacity
2057-
className="h-11 w-11 items-center justify-center"
2058-
onPress={handleCopyLink}
2059-
>
2060-
<Ionicons name="link-outline" size={20} color="#000" />
2061-
</TouchableOpacity>
2062-
</GlassView>
2010+
<TouchableOpacity
2011+
className="h-12 flex-row items-center justify-between"
2012+
onPress={handleCopyLink}
2013+
>
2014+
<Text>Copy Link</Text>
2015+
<Ionicons name="link-outline" size={20} color="#000" />
2016+
</TouchableOpacity>
20632017

2064-
<GlassView
2065-
className="overflow-hidden rounded-full bg-[rgba(255,255,255,0.1)]"
2066-
glassEffectStyle="clear"
2067-
>
2068-
<TouchableOpacity
2069-
className="h-11 w-11 items-center justify-center"
2070-
onPress={handleDelete}
2071-
>
2072-
<Ionicons name="trash-outline" size={20} color="#800020" />
2073-
</TouchableOpacity>
2074-
</GlassView>
2075-
</View>
2018+
<TouchableOpacity
2019+
className="h-12 flex-row items-center justify-between"
2020+
onPress={handleDelete}
2021+
>
2022+
<Text className="text-red-500">Delete</Text>
2023+
<Ionicons name="trash-outline" size={20} color="#ef4444" />
2024+
</TouchableOpacity>
20762025
</View>
2077-
</GlassView>
2026+
</ScrollView>
20782027
</View>
20792028
</>
20802029
);

‎companion/app/(tabs)/_layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default function TabLayout() {
1515
default: { color: "#8E8E93", fontSize: 8.5 }, // Gray text when unselected
1616
selected: { color: "#000000", fontSize: 10 }, // Black text when selected
1717
}}
18+
disableTransparentOnScrollEdge={true}
1819
>
1920
<NativeTabs.Trigger name="(event-types)">
2021
<NativeTabs.Trigger.Icon

0 commit comments

Comments
 (0)