From 9e0831e984e54bdfb037664c11f4cca19014aada Mon Sep 17 00:00:00 2001 From: Chris Duarte Date: Fri, 27 Oct 2017 11:15:14 -0700 Subject: [PATCH] Allow profile button configuration (#947) * Allow profile button configuration * Renamed config to experimental and moved to separate function --- .../vector_icon.js} | 18 +++++-- app/screens/settings/settings_item/index.js | 4 +- app/screens/user_profile/user_profile.js | 47 ++++++++++++++++++- app/screens/user_profile/user_profile_row.js | 11 +++-- docs/base_configs.md | 21 +++++++++ 5 files changed, 89 insertions(+), 12 deletions(-) rename app/{screens/settings/settings_item/setting_item_icon.js => components/vector_icon.js} (75%) create mode 100644 docs/base_configs.md diff --git a/app/screens/settings/settings_item/setting_item_icon.js b/app/components/vector_icon.js similarity index 75% rename from app/screens/settings/settings_item/setting_item_icon.js rename to app/components/vector_icon.js index 1492d2ea4..c646f1637 100644 --- a/app/screens/settings/settings_item/setting_item_icon.js +++ b/app/components/vector_icon.js @@ -3,13 +3,14 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {Text} from 'react-native'; import IonIcon from 'react-native-vector-icons/Ionicons'; import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; import FoundationIcon from 'react-native-vector-icons/Foundation'; -export default function settingsItemIcon(props) { - const {name, type, style} = props; +export default function vectorIcon(props) { + const {name, type, style, size} = props; switch (type) { case 'fontawesome': @@ -17,6 +18,7 @@ export default function settingsItemIcon(props) { ); case 'foundation': @@ -24,6 +26,7 @@ export default function settingsItemIcon(props) { ); case 'ion': @@ -31,6 +34,7 @@ export default function settingsItemIcon(props) { ); case 'material': @@ -38,6 +42,7 @@ export default function settingsItemIcon(props) { ); } @@ -45,8 +50,13 @@ export default function settingsItemIcon(props) { return null; } -settingsItemIcon.propTypes = { +vectorIcon.propTypes = { name: PropTypes.string, type: PropTypes.string, - style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) + size: PropTypes.number, + style: Text.propTypes.style +}; + +vectorIcon.defaultProps = { + size: 14 }; diff --git a/app/screens/settings/settings_item/index.js b/app/screens/settings/settings_item/index.js index a58d821b4..5be331156 100644 --- a/app/screens/settings/settings_item/index.js +++ b/app/screens/settings/settings_item/index.js @@ -7,8 +7,8 @@ import {TouchableOpacity, View} from 'react-native'; import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import FormattedText from 'app/components/formatted_text'; +import VectorIcon from 'app/components/vector_icon.js'; -import SettingItemIcon from './setting_item_icon'; import getStyleSheet from './style'; export default class SettingsItem extends PureComponent { @@ -58,7 +58,7 @@ export default class SettingsItem extends PureComponent { let icon; if (iconType && iconName) { icon = ( - { + const username = this.props.user.username; + const email = this.props.user.email; + + return () => { + var hydrated = link.replace(/{email}/, email); + hydrated = hydrated.replace(/{username}/, username); + Linking.openURL(hydrated); + }; + }; + + renderAdditionalOptions = () => { + if (!Config.ExperimentalProfileLinks) { + return null; + } + + const profileLinks = Config.ExperimentalProfileLinks; + + const additionalOptions = profileLinks.map((l) => { + var action; + if (l.type === 'link') { + action = this.handleLinkPress(l.url); + } + + return ( + + ); + }); + + return additionalOptions; + } + render() { const {config, theme, user} = this.props; const style = createStyleSheet(theme); @@ -134,10 +175,12 @@ class UserProfile extends PureComponent { action={this.sendMessage} defaultMessage='Send Message' icon='paper-plane-o' + iconType='fontawesome' textId='mobile.routes.user_profile.send_message' theme={theme} /> } + {this.renderAdditionalOptions()} ); diff --git a/app/screens/user_profile/user_profile_row.js b/app/screens/user_profile/user_profile_row.js index b54e88c80..30ce4fa9f 100644 --- a/app/screens/user_profile/user_profile_row.js +++ b/app/screens/user_profile/user_profile_row.js @@ -9,10 +9,10 @@ import { TouchableHighlight, View } from 'react-native'; -import Icon from 'react-native-vector-icons/FontAwesome'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import FormattedText from 'app/components/formatted_text'; +import VectorIcon from 'app/components/vector_icon.js'; const createStyleSheet = makeStyleSheetFromTheme((theme) => { return { @@ -61,7 +61,7 @@ function createTouchableComponent(children, action) { } function userProfileRow(props) { - const {action, defaultMessage, detail, icon, textId, togglable, theme, shouldRender = true} = props; + const {action, defaultMessage, detail, icon, textId, togglable, theme, iconType, shouldRender = true} = props; if (!shouldRender) { return null; @@ -72,9 +72,10 @@ function userProfileRow(props) { const RowComponent = ( - : - } @@ -114,6 +116,7 @@ userProfileRow.propTypes = { PropTypes.bool ]), icon: PropTypes.string.isRequired, + iconType: PropTypes.oneOf(['fontawesome', 'foundation', 'ion', 'material']), iconColor: PropTypes.string, textId: PropTypes.string.isRequired, togglable: PropTypes.bool, diff --git a/docs/base_configs.md b/docs/base_configs.md new file mode 100644 index 000000000..54e6f7d76 --- /dev/null +++ b/docs/base_configs.md @@ -0,0 +1,21 @@ +# Base Configs +The application has a configuration JSON file to control a number of application concerns. This config holds small feature flags, generally for use in white-labeling the App. + +## Options + +**Profile Links** +The `ProfileLinks` array allows custom buttons to be set in a user's profile. Currently, only one type is supported: `link`. It supports i18n defaultMessage and textId. As well as any icon from `fontawesome`, `ion`, `foundation`, `material`. Finally, the `url` must be specified. You can put in any valid URL and can have `{email}` or `{username}` replaced with currently displayed profile. + +Example: +``` +"ProfileLinks": [ + { + "type": "link", + "defaultMessage": "Whober", + "textId": "user_profile.custom_link.whober", + "icon": "ios-person-outline", + "iconType": "ion", + "url": "https://www.custompage.com/{email}/view" + } +] +``` \ No newline at end of file