mirror of
https://github.com/hanzoai/calendar.git
synced 2026-10-30 14:46:43 +00:00
Dhairyashil ShindeandGitHub
9203cb262c
* react compiler * remove compilation mode 'all', it will use infer by default * feat(companion): add theme tokens, path aliases, and component improvements - Extend tailwind.config.js with Cal.com brand color tokens (cal.text, cal.bg, cal.border, cal.accent, cal.brand) - Create theme/colors.ts for JS usage where Tailwind classes can't be used - Configure path aliases in tsconfig.json (@/components, @/hooks, @/utils, etc.) - Add expo-image and expo-haptics dependencies - Enhance AppPressable with Reanimated animations (opacity + scale) and haptic feedback - Extract shared logic from BookingListItem into useBookingListItemData hook and BookingListItemParts - Extract shared logic from EventTypeListItem into useEventTypeListItemData hook and EventTypeListItemParts - Extract shared logic from AvailabilityListItem into AvailabilityListItemParts - Update all list item components to use new theme tokens instead of hardcoded hex values * fix react compiler non memo issue * feat(companion): migrate to path aliases and expo-image - Remove theme/colors.ts and theme/index.ts (defer dark mode to future PR) - Replace colors import with hardcoded hex values in components - Migrate all files to use path aliases (@/components/*, @/hooks/*, etc.) - Migrate SvgImage to use expo-image for better performance - Update tsconfig.json to remove @/theme/* alias * fix(companion): add path aliases to extension tsconfig Add baseUrl and paths configuration to tsconfig.extension.json to support path aliases in shared types used by the extension build.
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { Image } from "expo-image";
|
|
import type React from "react";
|
|
import { useState } from "react";
|
|
import { View } from "react-native";
|
|
import { SvgUri } from "react-native-svg";
|
|
|
|
interface SvgImageProps {
|
|
uri: string;
|
|
width: number;
|
|
height: number;
|
|
style?: { marginRight?: number };
|
|
}
|
|
|
|
/**
|
|
* Component that can display both SVG and regular images
|
|
* Falls back to regular Image if SVG fails
|
|
*/
|
|
export const SvgImage: React.FC<SvgImageProps> = ({ uri, width, height, style }) => {
|
|
const [useFallback, setUseFallback] = useState(false);
|
|
// Extract pathname (ignore query strings and hash) to detect SVG correctly
|
|
// Handles URLs like: icon.svg?variant=dark or icon.svg#hash
|
|
const pathname = uri.split("?")[0].split("#")[0];
|
|
const isSvg = pathname.toLowerCase().endsWith(".svg");
|
|
|
|
if (!isSvg || useFallback) {
|
|
// Use expo-image for non-SVG or if SVG failed (better performance with caching)
|
|
return (
|
|
<View style={style}>
|
|
<Image
|
|
source={{ uri }}
|
|
style={{ width, height }}
|
|
contentFit="contain"
|
|
transition={200}
|
|
onError={() => {
|
|
// Image load errors are expected for invalid/missing URLs - silently handled
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Use SvgUri for SVG files
|
|
return (
|
|
<View style={[{ width, height }, style]}>
|
|
<SvgUri
|
|
uri={uri}
|
|
width={width}
|
|
height={height}
|
|
onError={() => {
|
|
// SVG load errors trigger fallback to regular Image component
|
|
setUseFallback(true);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|