You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

SideBarItem.js 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. // @flow
  2. import React, { Component } from 'react';
  3. import { Linking, Text, TouchableOpacity, View } from 'react-native';
  4. import styles from './styles';
  5. import { Icon } from '../../base/font-icons';
  6. import { translate } from '../../base/i18n';
  7. type Props = {
  8. /**
  9. * The i18n label of the item.
  10. */
  11. i18Label: string,
  12. /**
  13. * The icon of the item.
  14. */
  15. icon: string,
  16. /**
  17. * The function to be invoked when the item is pressed
  18. * if the item is a button.
  19. */
  20. onPress: Function,
  21. /**
  22. * The translate function.
  23. */
  24. t: Function,
  25. /**
  26. * The URL of the link, if this item is a link.
  27. */
  28. url: string
  29. };
  30. /**
  31. * A component rendering an item in the system sidebar.
  32. */
  33. class SideBarItem extends Component<Props> {
  34. /**
  35. * Contructor of the SideBarItem Component.
  36. *
  37. * @inheritdoc
  38. */
  39. constructor(props: Props) {
  40. super(props);
  41. this._onOpenURL = this._onOpenURL.bind(this);
  42. }
  43. /**
  44. * Implements React's {@link Component#render()}, renders the sidebar item.
  45. *
  46. * @inheritdoc
  47. * @returns {ReactElement}
  48. */
  49. render() {
  50. const { onPress, t } = this.props;
  51. const onPressCalculated
  52. = typeof onPress === 'function' ? onPress : this._onOpenURL;
  53. return (
  54. <TouchableOpacity
  55. onPress = { onPressCalculated }
  56. style = { styles.sideBarItem }>
  57. <View style = { styles.sideBarItemButtonContainer }>
  58. <Icon
  59. name = { this.props.icon }
  60. style = { styles.sideBarItemIcon } />
  61. <Text style = { styles.sideBarItemText }>
  62. { t(this.props.i18Label) }
  63. </Text>
  64. </View>
  65. </TouchableOpacity>
  66. );
  67. }
  68. _onOpenURL: () => void;
  69. /**
  70. * Opens the URL if one is provided.
  71. *
  72. * @private
  73. * @returns {void}
  74. */
  75. _onOpenURL() {
  76. const { url } = this.props;
  77. if (typeof url === 'string') {
  78. Linking.openURL(url);
  79. }
  80. }
  81. }
  82. export default translate(SideBarItem);