From c7d7a9f3d93cace29b67a23972a07d1e3632963f Mon Sep 17 00:00:00 2001 From: Mustafa Buyukcelebi Date: Fri, 24 May 2019 20:08:34 +0300 Subject: [PATCH] configured html library for a tag --- .../postElements/body/view/postBodyStyles.js | 4 +- .../postElements/body/view/postBodyView.js | 104 +++++++----------- 2 files changed, 42 insertions(+), 66 deletions(-) diff --git a/src/components/postElements/body/view/postBodyStyles.js b/src/components/postElements/body/view/postBodyStyles.js index b6816407c..b0b601ee3 100644 --- a/src/components/postElements/body/view/postBodyStyles.js +++ b/src/components/postElements/body/view/postBodyStyles.js @@ -67,12 +67,12 @@ export default EStyleSheet.create({ }, postImage: { marginTop: 10, - height: 216, + minHeight: 216, width: '100%', }, commentImage: { marginTop: 10, - height: 80, + minHeight: 80, width: '100%', }, }); diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 8ac6d9946..8fe688c7d 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -1,5 +1,7 @@ import React, { PureComponent, Fragment } from 'react'; -import { Dimensions, Linking, Alert, TouchableHighlight, Text } from 'react-native'; +import { + Dimensions, Linking, Alert, TouchableOpacity, Text, +} from 'react-native'; import { withNavigation } from 'react-navigation'; import { injectIntl } from 'react-intl'; import FastImage from 'react-native-fast-image'; @@ -7,9 +9,6 @@ import FastImage from 'react-native-fast-image'; import HTML from 'react-native-html-renderer'; import { getParentsTagsRecursively } from 'react-native-html-renderer/src/HTMLUtils'; -// Utils -import { validateUsername } from '../../../../utils/user'; - // Styles import styles from './postBodyStyles'; @@ -19,29 +18,14 @@ import DEFAULT_IMAGE from '../../../../assets/no_image.png'; // Components const WIDTH = Dimensions.get('window').width; -const CUSTOM_RENDERERS = { - // example - // center: () => ugur, -}; -const DEFAULT_PROPS = { - renderers: CUSTOM_RENDERERS, - debug: true, -}; class PostBody extends PureComponent { - constructor(props) { - super(props); - this.state = {}; - } - // Component Life Cycles // Component Functions - _handleOnLinkPress = (evt, href, hrefatr) => { + _handleOnLinkPress = (href, hrefatr) => { const { handleOnUserPress, handleOnPostPress } = this.props; - console.log('href :', href); - console.log('hrefatr :', hrefatr); if (hrefatr.class === 'markdown-author-link') { if (!handleOnUserPress) { @@ -51,9 +35,9 @@ class PostBody extends PureComponent { } } else if (hrefatr.class === 'markdown-post-link') { if (!handleOnPostPress) { - this._handleOnPostPress(href, hrefatr['data-author']); + this._handleOnPostPress(hrefatr['data-permlink'], hrefatr['data-author']); } else { - handleOnPostPress(href); + handleOnPostPress(hrefatr['data-permlink']); } } else { this._handleBrowserLink(href); @@ -62,37 +46,15 @@ class PostBody extends PureComponent { _handleBrowserLink = async (url) => { if (!url) return; - - let author; - let permlink; const { intl } = this.props; - if ( - url.indexOf('esteem') > -1 - || url.indexOf('steemit') > -1 - || url.indexOf('busy') > -1 - || (url.indexOf('steempeak') > -1 && url.indexOf('files') < 0) - ) { - url = url.substring(url.indexOf('@'), url.length); - const routeParams = url && url.indexOf('/') > -1 ? url.split('/') : [url]; - - [, permlink] = routeParams; - author = routeParams[0].indexOf('@') > -1 ? routeParams[0].replace('@', '') : routeParams[0]; - } - - if (author && permlink) { - this._handleOnPostPress(permlink, author); - } else if (author) { - this._handleOnUserPress(author); - } else { - Linking.canOpenURL(url).then((supported) => { - if (supported) { - Linking.openURL(url); - } else { - Alert.alert(intl.formatMessage({ id: 'alert.failed_to_open' })); - } - }); - } + Linking.canOpenURL(url).then((supported) => { + if (supported) { + Linking.openURL(url); + } else { + Alert.alert(intl.formatMessage({ id: 'alert.failed_to_open' })); + } + }); }; _handleOnPostPress = (permlink, author) => { @@ -141,7 +103,6 @@ class PostBody extends PureComponent { // node.attribs.height = 216; // } } else if (node.name === 'a') { - console.log('node :', node); node.attribs.style = 'text-decoration: underline'; } @@ -185,10 +146,35 @@ class PostBody extends PureComponent { ? { width: WIDTH - 50, height: 80 } : { width: WIDTH, height: 216 }; + const _customRenderer = { + img: (htmlAttribs, children, convertedCSSStyles, passProps) => ( + + ), + a: (htmlAttribs, children, convertedCSSStyles, passProps) => { + if (passProps.parentWrapper === 'Text') { + return ( + this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}> + {children} + + ); + } + return ( + this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}> + {children} + + ); + }, + }; + return ( this._handleOnLinkPress(evt, href, hrefatr)} containerStyle={isComment ? styles.commentContainer : styles.container} @@ -202,17 +188,7 @@ class PostBody extends PureComponent { imagesMaxWidth={isComment ? WIDTH - 50 : WIDTH} alterNode={e => this._alterNode(e, isComment)} alterData={e => this._alterData(e)} - renderers={{ - img: (htmlAttribs, children, convertedCSSStyles, passProps) => ( - - ), - a: (htmlAttribs, children, convertedCSSStyles, passProps) => console.log('htmlAttribs, children, convertedCSSStyles, passProps :', htmlAttribs, children, convertedCSSStyles, passProps), - }} + renderers={_customRenderer} /> );