mirror of
https://github.com/hanzoai/calendar.git
synced 2026-10-30 14:46:43 +00:00
Dhairyashil ShindeandGitHub
60a4d3f2b4
* feat(companion): add DropdownMenu for Android event types list Replace Alert.alert with react-native-reusables DropdownMenu component for Android event type list items, providing a native-feeling menu experience that matches iOS functionality. Changes: - Install react-native-reusables dropdown-menu component and dependencies (lucide-react-native, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge) - Create EventTypeListItem.android.tsx with DropdownMenu implementation - Single ellipsis button triggers dropdown menu - Menu includes: Preview, Copy link, Edit, Duplicate, Delete - Delete action marked as destructive variant - Proper safe area insets handling - Add PortalHost to app/_layout.tsx for portal rendering support - Create lib/utils.ts with cn() helper for className merging - Update global.css with theme CSS variables (popover, border, accent, destructive, etc.) for dropdown menu styling - Update tailwind.config.js with theme colors and tailwindcss-animate plugin - Update metro.config.js with inlineRem: 16 for proper rem unit handling - Remove Android Alert.alert fallback from event types index.tsx - Fix lint issues in generated dropdown-menu.tsx (remove unnecessary fragments) The Android experience now matches iOS with a single menu button that opens a dropdown containing all event type actions, replacing the previous Alert.alert dialog and separate action buttons. Refs: https://reactnativereusables.com/docs/components/dropdown-menu * adjust with of menu * feat(companion): add DropdownMenu for Android booking and availability list items - Add BookingListItem.android.tsx with DropdownMenu for booking actions - Add BookingDetailScreen.android.tsx with DropdownMenu in header - Add AvailabilityListItem.android.tsx with DropdownMenu for schedule actions Actions include: Reschedule, Edit Location, Add Guests, View Recordings, Meeting Session Details, Mark as No-Show, Report Booking, Cancel Event for bookings; Set as Default, Duplicate, Delete for availability schedules. * fix lint issues * feat(android): replace native alerts with AlertDialog and Toast in event types - Install AlertDialog and Alert components from react-native-reusables - Create Android-specific event types screen (index.android.tsx) - Replace native Alert.alert() with AlertDialog for delete confirmation - Add inline validation errors (red border + error text) in create modal - Implement Toast snackbar for success/error notifications (no layout shift) - Auto-dismiss toast after 2.5 seconds - Fix React Compiler compatibility by removing animated refs This provides a more consistent and polished UI experience on Android, matching the design system used in other parts of the app. * feat(android): add AlertDialog for availability delete and booking cancel - Add index.android.tsx for availability with AlertDialog for delete confirmation - Add index.android.tsx for bookings with AlertDialog for cancel (with reason input) - Both screens include Toast snackbar for success/error notifications - Follows the same pattern as event types Android implementation * feat(companion): add DropdownMenu and AlertDialog for Android - Replace native Alert.alert context menus with DropdownMenu component for event types, bookings, and availability lists - Replace FullScreenModal with AlertDialog for create/delete/cancel flows - Add toast notifications for success/error feedback on Android - Set consistent 380px max-width for all AlertDialogs - Fix layout headers showing "index" text on event-types and availability - Create Android-specific More screen with AlertDialog logout confirmation Uses react-native-reusables components for polished Android UI * better code * fix cubics comments * refactor(android): revert delete confirmations to native Alert.alert() - Logout: reverted to native Alert.alert() (simple yes/no) - Event Types Delete: reverted to native Alert.alert() (simple yes/no) - Availability Delete: reverted to native Alert.alert() (simple yes/no) Keep AlertDialog only where user input is needed: - Event Types Create (has TextInput for title) - Availability Create (has TextInput for name) - Bookings Cancel (has TextInput for cancellation reason) * refactor(android): remove redundant index.android.tsx files The main index.tsx files already handle Android via Platform.OS checks. Android-specific behavior for actions is in the list item components: - EventTypeListItem.android.tsx - BookingListItem.android.tsx - AvailabilityListItem.android.tsx This consolidates the code and reduces duplication. * corrected the implementation both native and alert dialog * address cubics comments * fix lint issue and address cubic comments
109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
import { TextClassContext } from "@/components/ui/text";
|
|
import { cn } from "@/lib/utils";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import { Platform, Pressable } from "react-native";
|
|
|
|
const buttonVariants = cva(
|
|
cn(
|
|
"group shrink-0 flex-row items-center justify-center gap-2 rounded-md shadow-none",
|
|
Platform.select({
|
|
web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
})
|
|
),
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: cn(
|
|
"bg-primary active:bg-primary/90 shadow-sm shadow-black/5",
|
|
Platform.select({ web: "hover:bg-primary/90" })
|
|
),
|
|
destructive: cn(
|
|
"bg-destructive active:bg-destructive/90 dark:bg-destructive/60 shadow-sm shadow-black/5",
|
|
Platform.select({
|
|
web: "hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
})
|
|
),
|
|
outline: cn(
|
|
"border-border bg-background active:bg-accent dark:bg-input/30 dark:border-input dark:active:bg-input/50 border shadow-sm shadow-black/5",
|
|
Platform.select({
|
|
web: "hover:bg-accent dark:hover:bg-input/50",
|
|
})
|
|
),
|
|
secondary: cn(
|
|
"bg-secondary active:bg-secondary/80 shadow-sm shadow-black/5",
|
|
Platform.select({ web: "hover:bg-secondary/80" })
|
|
),
|
|
ghost: cn(
|
|
"active:bg-accent dark:active:bg-accent/50",
|
|
Platform.select({ web: "hover:bg-accent dark:hover:bg-accent/50" })
|
|
),
|
|
link: "",
|
|
},
|
|
size: {
|
|
default: cn("h-10 px-4 py-2 sm:h-9", Platform.select({ web: "has-[>svg]:px-3" })),
|
|
sm: cn("h-9 gap-1.5 rounded-md px-3 sm:h-8", Platform.select({ web: "has-[>svg]:px-2.5" })),
|
|
lg: cn("h-11 rounded-md px-6 sm:h-10", Platform.select({ web: "has-[>svg]:px-4" })),
|
|
icon: "h-10 w-10 sm:h-9 sm:w-9",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
}
|
|
);
|
|
|
|
const buttonTextVariants = cva(
|
|
cn(
|
|
"text-foreground text-sm font-medium",
|
|
Platform.select({ web: "pointer-events-none transition-colors" })
|
|
),
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "text-primary-foreground",
|
|
destructive: "text-white",
|
|
outline: cn(
|
|
"group-active:text-accent-foreground",
|
|
Platform.select({ web: "group-hover:text-accent-foreground" })
|
|
),
|
|
secondary: "text-secondary-foreground",
|
|
ghost: "group-active:text-accent-foreground",
|
|
link: cn(
|
|
"text-primary group-active:underline",
|
|
Platform.select({ web: "underline-offset-4 hover:underline group-hover:underline" })
|
|
),
|
|
},
|
|
size: {
|
|
default: "",
|
|
sm: "",
|
|
lg: "",
|
|
icon: "",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
}
|
|
);
|
|
|
|
type ButtonProps = React.ComponentProps<typeof Pressable> &
|
|
React.RefAttributes<typeof Pressable> &
|
|
VariantProps<typeof buttonVariants>;
|
|
|
|
function Button({ className, variant, size, ...props }: ButtonProps) {
|
|
return (
|
|
<TextClassContext.Provider value={buttonTextVariants({ variant, size })}>
|
|
<Pressable
|
|
className={cn(props.disabled && "opacity-50", buttonVariants({ variant, size }), className)}
|
|
role="button"
|
|
{...props}
|
|
/>
|
|
</TextClassContext.Provider>
|
|
);
|
|
}
|
|
|
|
export { Button, buttonTextVariants, buttonVariants };
|
|
export type { ButtonProps };
|