import React , { ReactElement } from 'react' ; import PropTypes from 'prop-types' ; import HtmlView from 'react-native-htmlview' ; import { Text , View , Linking , TouchableWithoutFeedback } from 'react-native' ; export interface LinkFieldValue { [ attributeName ] : unknown ; href ? : string ; text ? : string ; } export interface LinkField { value : LinkFieldValue ; editableFirstPart ? : string ; editableLastPart ? : string ; } export type LinkProps = { /** The link field data. */ field : LinkField | LinkFieldValue ; default editable ? : boolean ; /**
     * Displays a link text ('description' in Sitecore) even when children exist
     * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered.
     */ showLinkTextWithChildrenPresent ? : boolean ; style ? : { [ attr ] : unknown ; } ; textStyle ? : { [ attr ] : unknown ; } ; } ; export const Link = ( { field , editable , children , showLinkTextWithChildrenPresent , style , textStyle , ... otherProps } ) => { const dynamicField = field ; if ( ! field || ( ! dynamicField . editableFirstPart && ! dynamicField . value && ! ( dynamicField as LinkFieldValue ) . href ) ) { return null ; } const resultTags = [ ] ; const { editableFirstPart , editableLastPart } = dynamicField as LinkField ; if ( editable && editableFirstPart ) { const markup = editableFirstPart + editableLastPart ; resultTags . push ( < HtmlView value = { markup } / > ) ; if ( ! children ) { return resultTags [ 0 ] ; } } const link = ( ( dynamicField as LinkFieldValue ) . href ? field : ( dynamicField as LinkField ) . value ) as LinkFieldValue ; if ( ! link ) { return null ; } const linkText = showLinkTextWithChildrenPresent || ! children ? link . text || link . href : null ; resultTags . push ( < TouchableWithoutFeedback onPress = { ( ) => link . href && Linking . openURL ( link . href ) } key = "link" { ... otherProps } > < View style = { style } > { linkText && < Text style = { textStyle } > { linkText } < /Text>} { children } < /View> < /TouchableWithoutFeedback>); return < View > { resultTags } < /View>; } ; Link . propTypes = { field : PropTypes . oneOfType ( [ PropTypes . shape ( { href : PropTypes . string } ) , PropTypes . shape ( { value : PropTypes . object , editableFirstPart : PropTypes . string , editableLastPart : PropTypes . string } ) , ] ) . isRequired , editable : PropTypes . bool } ; Link . defaultProps = { editable : true } ; Link . displayName = 'Link' ;