modify Link so that we can create the TextLink press handler outside
This commit is contained in:
+55
-32
@@ -69,13 +69,13 @@ export const Link = memo(function Link({
|
|||||||
const onPress = React.useCallback(
|
const onPress = React.useCallback(
|
||||||
(e?: Event) => {
|
(e?: Event) => {
|
||||||
if (typeof href === 'string') {
|
if (typeof href === 'string') {
|
||||||
return onPressInner(
|
return onTextLinkPress({
|
||||||
closeModal,
|
closeModal,
|
||||||
navigation,
|
navigation,
|
||||||
sanitizeUrl(href),
|
href: sanitizeUrl(href),
|
||||||
navigationAction,
|
navigationAction,
|
||||||
e,
|
e,
|
||||||
)
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[closeModal, navigation, navigationAction, href],
|
[closeModal, navigation, navigationAction, href],
|
||||||
@@ -179,39 +179,27 @@ export const TextLink = memo(function TextLink({
|
|||||||
|
|
||||||
props.onPress = React.useCallback(
|
props.onPress = React.useCallback(
|
||||||
(e?: Event) => {
|
(e?: Event) => {
|
||||||
const requiresWarning =
|
onTextLinkPress({
|
||||||
warnOnMismatchingLabel &&
|
onPress,
|
||||||
linkRequiresWarning(href, typeof text === 'string' ? text : '')
|
e,
|
||||||
if (requiresWarning) {
|
openModal,
|
||||||
e?.preventDefault?.()
|
|
||||||
openModal({
|
|
||||||
name: 'link-warning',
|
|
||||||
text: typeof text === 'string' ? text : '',
|
|
||||||
href,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (onPress) {
|
|
||||||
e?.preventDefault?.()
|
|
||||||
// @ts-ignore function signature differs by platform -prf
|
|
||||||
return onPress()
|
|
||||||
}
|
|
||||||
return onPressInner(
|
|
||||||
closeModal,
|
closeModal,
|
||||||
navigation,
|
navigation,
|
||||||
sanitizeUrl(href),
|
href,
|
||||||
|
text,
|
||||||
navigationAction,
|
navigationAction,
|
||||||
e,
|
warnOnMismatchingLabel,
|
||||||
)
|
})
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
onPress,
|
onPress,
|
||||||
closeModal,
|
|
||||||
openModal,
|
openModal,
|
||||||
|
closeModal,
|
||||||
navigation,
|
navigation,
|
||||||
href,
|
href,
|
||||||
text,
|
text,
|
||||||
warnOnMismatchingLabel,
|
|
||||||
navigationAction,
|
navigationAction,
|
||||||
|
warnOnMismatchingLabel,
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
const hrefAttrs = useMemo(() => {
|
const hrefAttrs = useMemo(() => {
|
||||||
@@ -301,6 +289,9 @@ export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({
|
|||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Moving all of this logic into a separate function. Becuase we need to be able to use this function from
|
||||||
|
// SelectableText, it's easier to move it outside the component instead of duplicating logic
|
||||||
|
|
||||||
// NOTE
|
// NOTE
|
||||||
// we can't use the onPress given by useLinkProps because it will
|
// we can't use the onPress given by useLinkProps because it will
|
||||||
// match most paths to the HomeTab routes while we actually want to
|
// match most paths to the HomeTab routes while we actually want to
|
||||||
@@ -312,13 +303,45 @@ export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({
|
|||||||
// this method copies from the onPress implementation but adds our
|
// this method copies from the onPress implementation but adds our
|
||||||
// needed customizations
|
// needed customizations
|
||||||
// -prf
|
// -prf
|
||||||
function onPressInner(
|
export const onTextLinkPress = ({
|
||||||
closeModal = () => {},
|
onPress,
|
||||||
navigation: NavigationProp,
|
e,
|
||||||
href: string,
|
openModal,
|
||||||
navigationAction: 'push' | 'replace' | 'navigate' = 'push',
|
closeModal,
|
||||||
e?: Event,
|
navigation,
|
||||||
) {
|
href,
|
||||||
|
text,
|
||||||
|
navigationAction = 'push',
|
||||||
|
warnOnMismatchingLabel,
|
||||||
|
}: {
|
||||||
|
onPress?: (e: GestureResponderEvent) => void
|
||||||
|
e?: Event
|
||||||
|
openModal?: any
|
||||||
|
closeModal: any
|
||||||
|
navigation: NavigationProp
|
||||||
|
href: string
|
||||||
|
text?: any
|
||||||
|
navigationAction?: 'push' | 'replace' | 'navigate'
|
||||||
|
warnOnMismatchingLabel?: boolean
|
||||||
|
}) => {
|
||||||
|
const requiresWarning =
|
||||||
|
warnOnMismatchingLabel &&
|
||||||
|
linkRequiresWarning(href, typeof text === 'string' ? text : '')
|
||||||
|
if (requiresWarning) {
|
||||||
|
e?.preventDefault?.()
|
||||||
|
openModal({
|
||||||
|
name: 'link-warning',
|
||||||
|
text: typeof text === 'string' ? text : '',
|
||||||
|
href,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (onPress) {
|
||||||
|
e?.preventDefault?.()
|
||||||
|
// @ts-ignore function signature differs by platform -prf
|
||||||
|
onPress()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
let shouldHandle = false
|
let shouldHandle = false
|
||||||
const isLeftClick =
|
const isLeftClick =
|
||||||
// @ts-ignore Web only -prf
|
// @ts-ignore Web only -prf
|
||||||
|
|||||||
Reference in New Issue
Block a user