ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-30 00:52:42 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

configured html library for a tag

Browse Source
This commit is contained in:
Mustafa Buyukcelebi 2019-05-24 20:08:34 +03:00
parent 9067d74d4a
commit c7d7a9f3d9
2 changed files with 42 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/postElements/body/view/postBodyStyles.js
View File

@ -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%',
},
});

104
src/components/postElements/body/view/postBodyView.js
View File

@ -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: () => <Text style={{ backgroundColor: 'blue', textAlign: 'center'}}>ugur</Text>,
};
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) => (
<FastImage
key={passProps.key}
defaultSource={DEFAULT_IMAGE}
source={{ uri: htmlAttribs.src, priority: FastImage.priority.normal }}
style={isComment ? styles.commentImage : styles.postImage}
resizeMode={FastImage.resizeMode.contain}
/>
),
a: (htmlAttribs, children, convertedCSSStyles, passProps) => {
if (passProps.parentWrapper === 'Text') {
return (
<Text key={passProps.key} {...htmlAttribs} onPress={() => this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}>
{children}
</Text>
);
}
return (
<TouchableOpacity key={passProps.key} {...htmlAttribs} onPress={() => this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}>
{children}
</TouchableOpacity>
);
},
};
return (
<Fragment>
<HTML
{...DEFAULT_PROPS}
html={body}
onLinkPress={(evt, href, hrefatr) => 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) => (
<FastImage
key={passProps.key}
defaultSource={DEFAULT_IMAGE}
source={{ uri: htmlAttribs.src, priority: FastImage.priority.high }}
style={isComment ? styles.commentImage : styles.postImage}
/>
),
a: (htmlAttribs, children, convertedCSSStyles, passProps) => console.log('htmlAttribs, children, convertedCSSStyles, passProps :', htmlAttribs, children, convertedCSSStyles, passProps),
}}
renderers={_customRenderer}
/>
</Fragment>
);