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