Merge pull request #7 from catalinmiron/7-add-react-native-htmlview-package
Add react-native-htmlview package
This commit is contained in:
Catalin Miron
commit
2155ee985a
|
|
@ -14,7 +14,7 @@ var {
|
||||||
|
|
||||||
var Icon = require('FontAwesome'),
|
var Icon = require('FontAwesome'),
|
||||||
getImage = require('./helpers/getImage'),
|
getImage = require('./helpers/getImage'),
|
||||||
HTML = require('./vendor/HTML'),
|
HTML = require('react-native-htmlview'),
|
||||||
screen = require('Dimensions').get('window'),
|
screen = require('Dimensions').get('window'),
|
||||||
ParallaxView = require('react-native-parallax-view'),
|
ParallaxView = require('react-native-parallax-view'),
|
||||||
Modal = require('react-native-modal');
|
Modal = require('react-native-modal');
|
||||||
|
|
@ -76,7 +76,8 @@ var ShotDetails = React.createClass({
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.separator} />
|
<View style={styles.separator} />
|
||||||
<Text>
|
<Text>
|
||||||
<HTML value={this.props.shot.description}/>
|
<HTML value={this.props.shot.description}
|
||||||
|
stylesheet={styles}/>
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
@ -125,6 +126,10 @@ var ShotDetails = React.createClass({
|
||||||
});
|
});
|
||||||
|
|
||||||
var styles = StyleSheet.create({
|
var styles = StyleSheet.create({
|
||||||
|
a: {
|
||||||
|
fontWeight: '300',
|
||||||
|
color: '#ea4c89'
|
||||||
|
},
|
||||||
invisibleView: {
|
invisibleView: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
|
|
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
var React = require('react-native')
|
|
||||||
var {
|
|
||||||
View,
|
|
||||||
Text,
|
|
||||||
LinkingIOS,
|
|
||||||
StyleSheet,
|
|
||||||
} = React
|
|
||||||
|
|
||||||
// you might want to compile these two as standalone umd bundles
|
|
||||||
// using `browserify --standalone` and `derequire`
|
|
||||||
// until this issue is fixed: https://github.com/facebook/react-native/issues/231
|
|
||||||
// and then just require the umd bundle files directly
|
|
||||||
var htmlparser = require('./htmlparser2.js');
|
|
||||||
var entities = require('./entities.js');
|
|
||||||
|
|
||||||
function htmlToElement(rawHtml, done) {
|
|
||||||
var handler = new htmlparser.DomHandler(function (err, dom) {
|
|
||||||
if (err) done(err)
|
|
||||||
done(null, domToElement(dom))
|
|
||||||
})
|
|
||||||
var parser = new htmlparser.Parser(handler)
|
|
||||||
parser.write(rawHtml)
|
|
||||||
parser.done()
|
|
||||||
}
|
|
||||||
|
|
||||||
var PARAGRAPH_BREAK = '\n\n'
|
|
||||||
|
|
||||||
function domToElement(dom, parent) {
|
|
||||||
if (!dom) return null
|
|
||||||
|
|
||||||
return dom.map((node, index, list) => {
|
|
||||||
if (node.type == 'text') {
|
|
||||||
return (
|
|
||||||
<Text key={index} style={parent ? styles[parent.name] : null}>
|
|
||||||
{entities.decodeHTML(node.data)}
|
|
||||||
</Text>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (node.type == 'tag') {
|
|
||||||
var touchHandler = null
|
|
||||||
if (node.name == 'a' && node.attribs && node.attribs.href) {
|
|
||||||
touchHandler = () => LinkingIOS.openURL(entities.decodeHTML(node.attribs.href))
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Text key={index} onPress={touchHandler}>
|
|
||||||
{domToElement(node.children, node)}
|
|
||||||
{node.name == 'p' && index < list.length-1 ? PARAGRAPH_BREAK : null}
|
|
||||||
</Text>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
var boldStyle = {fontWeight: '500'}
|
|
||||||
var italicStyle = {fontStyle: 'italic'}
|
|
||||||
var codeStyle = {fontFamily: 'Menlo'}
|
|
||||||
|
|
||||||
var styles = StyleSheet.create({
|
|
||||||
b: boldStyle,
|
|
||||||
strong: boldStyle,
|
|
||||||
i: italicStyle,
|
|
||||||
em: italicStyle,
|
|
||||||
pre: codeStyle,
|
|
||||||
code: codeStyle,
|
|
||||||
a: {
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#007AFF',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
var HTML = React.createClass({
|
|
||||||
mixins: [React.addons.PureRenderMixin],
|
|
||||||
getInitialState() {
|
|
||||||
return {element: null}
|
|
||||||
},
|
|
||||||
componentWillReceiveProps() {
|
|
||||||
if (this.state.element) return
|
|
||||||
this.startHtmlRender()
|
|
||||||
},
|
|
||||||
componentDidMount() {
|
|
||||||
this.startHtmlRender()
|
|
||||||
},
|
|
||||||
startHtmlRender() {
|
|
||||||
if (!this.props.value) return
|
|
||||||
if (this.renderingHtml) return
|
|
||||||
|
|
||||||
this.renderingHtml = true
|
|
||||||
htmlToElement(this.props.value, (err, element) => {
|
|
||||||
this.renderingHtml = false
|
|
||||||
|
|
||||||
if (err) return console.error(err)
|
|
||||||
|
|
||||||
if (this.isMounted()) this.setState({element})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
if (this.state.element) {
|
|
||||||
return <Text children={this.state.element} />
|
|
||||||
}
|
|
||||||
return <Text />
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
module.exports = HTML
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -8,6 +8,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react-native": "^0.4.2",
|
"react-native": "^0.4.2",
|
||||||
"react-native-blur": "^0.4.2",
|
"react-native-blur": "^0.4.2",
|
||||||
|
"react-native-htmlview": "^0.2.0",
|
||||||
"react-native-modal": "^0.3.7",
|
"react-native-modal": "^0.3.7",
|
||||||
"react-native-parallax-view": "git://github.com/lelandrichardson/react-native-parallax-view",
|
"react-native-parallax-view": "git://github.com/lelandrichardson/react-native-parallax-view",
|
||||||
"react-native-vector-icons": "^0.6.1",
|
"react-native-vector-icons": "^0.6.1",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue