UNPKG

1.48 kBTypeScriptView Raw
1import type { NavigationAction } from '@react-navigation/core';
2import * as React from 'react';
3import { GestureResponderEvent, Platform, Text, TextProps } from 'react-native';
4
5import useLinkProps from './useLinkProps';
6import type { To } from './useLinkTo';
7
8type Props<ParamList extends ReactNavigation.RootParamList> = {
9 to: To<ParamList>;
10 action?: NavigationAction;
11 target?: string;
12 onPress?: (
13 e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
14 ) => void;
15} & (TextProps & { children: React.ReactNode });
16
17/**
18 * Component to render link to another screen using a path.
19 * Uses an anchor tag on the web.
20 *
21 * @param props.to Absolute path to screen (e.g. `/feeds/hot`).
22 * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
23 * @param props.children Child elements to render the content.
24 */
25export default function Link<ParamList extends ReactNavigation.RootParamList>({
26 to,
27 action,
28 ...rest
29}: Props<ParamList>) {
30 const props = useLinkProps<ParamList>({ to, action });
31
32 const onPress = (
33 e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
34 ) => {
35 if ('onPress' in rest) {
36 rest.onPress?.(e);
37 }
38
39 props.onPress(e);
40 };
41
42 return React.createElement(Text, {
43 ...props,
44 ...rest,
45 ...Platform.select({
46 web: { onClick: onPress } as any,
47 default: { onPress },
48 }),
49 });
50}