Implement consistent Link component

This commit is contained in:
Paul Frazee 2022-09-02 11:52:33 -05:00
parent 6835caa760
commit 2f0939a1c2
9 changed files with 177 additions and 143 deletions

View file

@ -0,0 +1,28 @@
import React from 'react'
import {observer} from 'mobx-react-lite'
import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native'
import {useStores} from '../../../state'
import {LinkActionsModel} from '../../../state/models/shell'
export const Link = observer(function Link({
style,
href,
title,
children,
}: {
style?: StyleProp<ViewStyle>
href: string
title?: string
children?: React.ReactNode
}) {
const store = useStores()
const onPress = () => store.nav.navigate(href)
const onLongPress = () => {
store.shell.openModal(new LinkActionsModel(href, title || href))
}
return (
<TouchableOpacity style={style} onPress={onPress} onLongPress={onLongPress}>
{children ? children : <Text>{title || 'link'}</Text>}
</TouchableOpacity>
)
})