-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added design system menu Fixed splash screen for dark mode
- Loading branch information
Showing
6 changed files
with
146 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { useCallback, useMemo } from "react"; | ||
| import { | ||
| MenuView, | ||
| NativeActionEvent, | ||
| MenuAction as RNMenuAction, | ||
| } from "@react-native-menu/menu"; | ||
| import { Platform, StyleProp, ViewStyle } from "react-native"; | ||
| import { Pressable } from "../Pressable"; | ||
| import { useAppTheme } from "@/theme/useAppTheme"; | ||
| import { Haptics } from "@/utils/haptics"; | ||
| import { getInlinedItem } from "./Menu.utils"; | ||
|
|
||
| export type IMenuAction = Omit<RNMenuAction, "titleColor" | "imageColor"> & { | ||
| color?: string; | ||
| }; | ||
|
|
||
| type MenuProps = { | ||
| actions: IMenuAction[]; | ||
| children: React.ReactNode; | ||
| style?: StyleProp<ViewStyle>; | ||
| onPress?: (actionId: string) => void; | ||
| }; | ||
|
|
||
| export const Menu = ({ children, actions, style, onPress }: MenuProps) => { | ||
| const { theme } = useAppTheme(); | ||
|
|
||
| const themedActions: RNMenuAction[] = useMemo(() => { | ||
| return actions.map((action) => { | ||
| const themedAction = { | ||
| ...action, | ||
| // AR: Right now Android will only show a background color of white, so don't set a titleColor which is android specific anyways | ||
| // This may be only an android 13 issue though, will either need to fix the library or wait for a fix | ||
| titleColor: action.color ?? theme.colors.global.primary, | ||
| imageColor: | ||
| action.color ?? | ||
| (Platform.OS === "android" ? theme.colors.global.primary : undefined), | ||
| displayInline: action.displayInline, | ||
| }; | ||
| return action.displayInline ? getInlinedItem(themedAction) : themedAction; | ||
| }); | ||
| }, [actions, theme.colors.global.primary]); | ||
|
|
||
| const handlePress = useCallback( | ||
| ({ nativeEvent }: NativeActionEvent) => { | ||
| Haptics.selectionAsync(); | ||
| onPress?.(nativeEvent.event); | ||
| }, | ||
| [onPress] | ||
| ); | ||
|
|
||
| return ( | ||
| <MenuView | ||
| onPressAction={handlePress} | ||
| actions={themedActions} | ||
| style={style} | ||
| shouldOpenOnLongPress={false} | ||
| > | ||
| <Pressable style={$pressable}>{children}</Pressable> | ||
| </MenuView> | ||
| ); | ||
| }; | ||
|
|
||
| const $pressable: ViewStyle = { | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { Platform } from "react-native"; | ||
| import { MenuAction as RNMenuAction } from "@react-native-menu/menu"; | ||
|
|
||
| /** | ||
| * Android will always make a sub menu item, so instead this will just return the item | ||
| * iOS seems to work fine with the item, so this will just return the item | ||
| * @param item RN Menu Action | ||
| * @returns RN Menu Action | ||
| */ | ||
| export const getInlinedItem = (item: RNMenuAction): RNMenuAction => { | ||
| if (Platform.OS === "ios") { | ||
| return { | ||
| title: "", | ||
| displayInline: true, | ||
| subactions: [item], | ||
| }; | ||
| } | ||
| return item; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters