add title attr to text text links

This commit is contained in:
Eric Bailey
2023-08-21 10:40:12 -05:00
parent 257c15ec1f
commit c028cd184e
3 changed files with 26 additions and 16 deletions
+10
View File
@@ -135,6 +135,7 @@ export const TextLink = observer(function TextLink({
numberOfLines, numberOfLines,
lineHeight, lineHeight,
dataSet, dataSet,
title,
}: { }: {
testID?: string testID?: string
type?: TypographyVariant type?: TypographyVariant
@@ -144,10 +145,12 @@ export const TextLink = observer(function TextLink({
numberOfLines?: number numberOfLines?: number
lineHeight?: number lineHeight?: number
dataSet?: any dataSet?: any
title?: string
} & TextProps) { } & TextProps) {
const {...props} = useLinkProps({to: sanitizeUrl(href)}) const {...props} = useLinkProps({to: sanitizeUrl(href)})
const store = useStores() const store = useStores()
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const anchorRef = React.useRef(null)
props.onPress = React.useCallback( props.onPress = React.useCallback(
(e?: Event) => { (e?: Event) => {
@@ -166,8 +169,14 @@ export const TextLink = observer(function TextLink({
return {} return {}
}, [href]) }, [href])
React.useEffect(() => {
// @ts-expect-error web only, shows date on hover -esb
anchorRef.current?.setNativeProps?.({title})
}, [title])
return ( return (
<Text <Text
ref={anchorRef}
testID={testID} testID={testID}
type={type} type={type}
style={style} style={style}
@@ -197,6 +206,7 @@ interface DesktopWebTextLinkProps extends TextProps {
accessible?: boolean accessible?: boolean
accessibilityLabel?: string accessibilityLabel?: string
accessibilityHint?: string accessibilityHint?: string
title?: string
} }
export const DesktopWebTextLink = observer(function DesktopWebTextLink({ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
testID, testID,
+1
View File
@@ -79,6 +79,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
lineHeight={1.2} lineHeight={1.2}
text={timeElapsed} text={timeElapsed}
accessibilityLabel={niceDate(opts.timestamp)} accessibilityLabel={niceDate(opts.timestamp)}
title={niceDate(opts.timestamp)}
accessibilityHint="" accessibilityHint=""
href={opts.postHref} href={opts.postHref}
/> />
+8 -9
View File
@@ -8,19 +8,18 @@ export type CustomTextProps = TextProps & {
lineHeight?: number lineHeight?: number
} }
export function Text({ export const Text = React.forwardRef<any, CustomTextProps>(
type = 'md', ({type = 'md', children, lineHeight, style, ...props}, ref) => {
children,
lineHeight,
style,
...props
}: React.PropsWithChildren<CustomTextProps>) {
const theme = useTheme() const theme = useTheme()
const typography = theme.typography[type] const typography = theme.typography[type]
const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
return ( return (
<RNText style={[s.black, typography, lineHeightStyle, style]} {...props}> <RNText
ref={ref}
style={[s.black, typography, lineHeightStyle, style]}
{...props}>
{children} {children}
</RNText> </RNText>
) )
} },
)