diff --git a/App/Components/SimpleList.js b/App/Components/SimpleList.js index 2b2b5b3c..c5f3d7ab 100644 --- a/App/Components/SimpleList.js +++ b/App/Components/SimpleList.js @@ -16,6 +16,7 @@ var SimpleList = React.createClass({ if (this.props.navigator) passAlong.navigator = this.props.navigator; if (this.props.nextIcon) passAlong.nextIcon = this.props.nextIcon; if (this.props.noTap) passAlong.noTap = this.props.noTap; + if (this.props.parseTitle) passAlong.parseTitle = this.props.parseTitle; if (this.props.getItemProps) { // swtich it out diff --git a/App/Components/SimpleListItem.js b/App/Components/SimpleListItem.js index 83c3d4d2..574b468c 100644 --- a/App/Components/SimpleListItem.js +++ b/App/Components/SimpleListItem.js @@ -5,6 +5,8 @@ var { TouchableHighlight } = React; +var ParsedText = require('react-native-parsed-text'); + var cssVar = require('../Lib/cssVar'); var Text = require('../Components/Text'); @@ -17,6 +19,16 @@ var SimpleListItem = React.createClass({ renderTitle: function() { if (!this.props.title) return null; + if (this.props.parseTitle) { + return ( + + {this.props.title} + + ) + } return ( diff --git a/App/Mixins/ListHelper.js b/App/Mixins/ListHelper.js index 96a331b6..b07ccb6b 100644 --- a/App/Mixins/ListHelper.js +++ b/App/Mixins/ListHelper.js @@ -14,6 +14,8 @@ var { ListView } = React; +var cssVar = require('../Lib/cssVar'); + var CurrentUserStore = require('../Stores/CurrentUserStore'); var NavigationListener = require('../Mixins/NavigationListener'); var NavBarHelper = require('../Mixins/NavBarHelper'); @@ -23,6 +25,8 @@ var Text = require('../Components/Text'); var SegmentedControl = require('../Components/SegmentedControl'); var SimpleList = require('../Components/SimpleList'); +var AppActions = require('../Actions/AppActions'); + var ListHelper = { mixins: [NavigationListener, NavBarHelper], @@ -70,6 +74,18 @@ var ListHelper = { return this.username; }, + getParseTitle: function() { + if (this.props.listProps.parse === true) { + return [ + {type: 'url', style: styles.url, onPress: (url) => AppActions.launchExternalURL(url) }, + {pattern: /@(\w+)/, style: styles.mention, onPress: (mention) => AppActions.launchRelativeItem(this.props.currentRoute, {replacePath: `follows/${mention.substring(1).toLowerCase()}/posts`}) }, + {pattern: /#(\w+)/, style: styles.hashtag}, + ] + } + + return null; + }, + renderItems: function() { return ( ); @@ -130,6 +147,20 @@ var ListHelper = { var styles = StyleSheet.create({ flex: { flex: 1 + }, + + hashtag: { + color: cssVar('blue50'), + fontStyle: 'italic', + }, + + mention: { + color: cssVar('blue50'), + }, + + url: { + color: cssVar('blue50'), + textDecorationLine: 'underline', } }); diff --git a/App/Screens/PostList.js b/App/Screens/PostList.js index 6520a230..15f5137c 100644 --- a/App/Screens/PostList.js +++ b/App/Screens/PostList.js @@ -12,7 +12,8 @@ var PostList = React.createClass({ return { store: PostListStore, listProps: { - noTap: true + noTap: true, + parse: true, }, segment: { items: [ diff --git a/package.json b/package.json index c5e5509d..1195207e 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "react-native": "^0.12.0", "react-native-keyboardevents": "^0.4.5", "react-native-keychain": "^0.2.5", + "react-native-parsed-text": "0.0.4", "react-native-refreshable-listview": "^1.3.0", "react-timer-mixin": "^0.13.3", "superagent": "^1.4.0"