Merge pull request #517 from shoutem/release/4.0.1

Release/4.0.1

components/DropDownMenu/DropDownMenu.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
 
@@ -17,9 +18,22 @@ class DropDownMenu extends PureComponent {
   * @see DropDownModal.propTypes
   */
   static propTypes = {
+     /**
+     * Icon displayed on dropdown menu button 
+     */
+    iconName: PropTypes.string,
+    /**
+     * Whether the text should be displayed next to dropdown icon or not
+     */
+    showSelectedOption: PropTypes.bool,
     ...dropDownMenuPropTypes,
   };
 
+  static defaultProps = {
+    iconName: "drop-down",
+    showSelectedOption: true,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -51,14 +65,14 @@ class DropDownMenu extends PureComponent {
   }
 
   renderSelectedOption() {
-    const { style, titleProperty } = this.props;
+    const { iconName, showSelectedOption, style, titleProperty } = this.props;
 
     const selectedOption = this.getSelectedOption();
     return selectedOption ? (
       <View style={style.horizontalContainer}>
         <Button onPress={this.collapse} style={style.selectedOption}>
-          <Text>{selectedOption[titleProperty]}</Text>
-          <Icon name="drop-down" />
+          {showSelectedOption && <Text>{selectedOption[titleProperty]}</Text>}
+          <Icon name={iconName} />
         </Button>
       </View>
     ) : null;

components/DropDownMenu/DropDownModal.js

@@ -245,13 +245,15 @@ class DropDownModal extends PureComponent {
       style,
       titleProperty,
       renderOption,
+      selectedOption,
     } = this.props;
 
     const optionItem = renderOption(option, titleProperty);
+    const selectedItem = selectedOption.id === option.id || false
     const onPress = () => this.selectOption(option);
 
     return (
-      <TouchableOpacity onPress={onPress} style={style.modalItem} onLayout={this.onOptionLayout}>
+      <TouchableOpacity onPress={onPress} style={selectedItem ? style.selectedModalItem : style.modalItem} onLayout={this.onOptionLayout}>
         {optionItem}
       </TouchableOpacity>
     );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Styleable set of components for React Native applications",
   "dependencies": {
     "@shoutem/animation": "~0.12.4",

theme.js

@@ -2006,6 +2006,18 @@ export default (variables = defaultThemeVariables) => ({
         ...variables.subtitle,
       },
     },
+    selectedModalItem: {
+      'shoutem.ui.Text': {
+        textAlign: 'center',
+        flex: 1,
+        width: window.width,
+        paddingHorizontal: 20,
+        paddingVertical: 23,
+        alignSelf: 'stretch',
+        ...variables.subtitle,
+        fontWeight: '500'
+      },
+    },
 
     visibleOptions: 8,
   },