@shoutem/ui 4.8.0 → 4.9.0

package/components/InlineDropDownMenu/InlineDropDownMenu.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import { Animated, FlatList } from 'react-native';
 import autoBindReact from 'auto-bind/react';
+import { Animated, ScrollView } from 'react-native';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
@@ -14,7 +14,7 @@ const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 const optionShape = PropTypes.shape({
   title: PropTypes.string.isRequired,
-  key: PropTypes.string.isRequired,
+  key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 });
 
 class InlineDropDownMenu extends PureComponent {
@@ -24,6 +24,10 @@ class InlineDropDownMenu extends PureComponent {
     options: PropTypes.arrayOf(optionShape).isRequired,
     onOptionSelected: PropTypes.func,
     selectedOption: optionShape,
+    headingStyle: PropTypes.object,
+    containerStyle: PropTypes.object,
+    selectedOptionContainerStyle: PropTypes.object,
+    selectedOptionTextStyle: PropTypes.object,
   };
 
   constructor(props) {
@@ -69,6 +73,7 @@ class InlineDropDownMenu extends PureComponent {
 
     return (
       <InlineDropDownMenuItem
+        key={item.key}
         item={item}
         isSelected={isSelected}
         index={index}
@@ -79,18 +84,32 @@ class InlineDropDownMenu extends PureComponent {
   }
 
   render() {
-    const { style, heading, selectedOption, options } = this.props;
+    const {
+      style,
+      heading,
+      selectedOption,
+      options,
+      headingStyle,
+      containerStyle,
+      selectedOptionContainerStyle,
+      selectedOptionTextStyle,
+    } = this.props;
     const { collapsed } = this.state;
 
     return (
       <View>
         <TouchableOpacity
-          style={style.container}
+          style={[style.container, containerStyle]}
           onPress={this.handleToggleMenuPress}
         >
-          <Caption styleName="muted md-gutter-bottom">{heading}</Caption>
-          <View styleName="space-between horizontal v-center">
-            <Text>{selectedOption?.title}</Text>
+          <Caption styleName="muted md-gutter-bottom" style={headingStyle}>
+            {heading}
+          </Caption>
+          <View
+            styleName="space-between horizontal v-center"
+            style={selectedOptionContainerStyle}
+          >
+            <Text style={selectedOptionTextStyle}>{selectedOption?.title}</Text>
             <AnimatedIcon
               name="drop-down"
               styleName="md-gutter-left"
@@ -109,11 +128,14 @@ class InlineDropDownMenu extends PureComponent {
           </View>
         </TouchableOpacity>
         {collapsed && (
-          <FlatList
+          <ScrollView
             data={options}
-            renderItem={this.renderOption}
             contentContainerStyle={style.list}
-          />
+          >
+            {_.map(options, (item, index) =>
+              this.renderOption({ item, index }),
+            )}
+          </ScrollView>
         )}
       </View>
     );

package/components/InlineDropDownMenu/InlineDropDownMenuItem.js

@@ -1,14 +1,13 @@
 import React, { PureComponent } from 'react';
-import { Animated, Dimensions } from 'react-native';
+import { Animated, Dimensions, Pressable } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Text } from '../Text';
-import { TouchableOpacity } from '../TouchableOpacity';
 
 const window = Dimensions.get('window');
-const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 class InlineDropDownMenuItem extends PureComponent {
   static propTypes = {
@@ -54,7 +53,7 @@ class InlineDropDownMenuItem extends PureComponent {
     const textStyle = isSelected ? 'muted' : '';
 
     return (
-      <AnimatedTouchable
+      <AnimatedPressable
         style={[
           style.container,
           {
@@ -72,7 +71,7 @@ class InlineDropDownMenuItem extends PureComponent {
         onPress={this.handlePress}
       >
         <Text styleName={textStyle}>{resolvedText}</Text>
-      </AnimatedTouchable>
+      </AnimatedPressable>
     );
   }
 }

package/components/TextInput.js

@@ -61,9 +61,9 @@ class TextInput extends PureComponent {
             selectionColor={selectionColor}
             underlineColorAndroid={underlineColorAndroid}
             style={{
-              ...otherStyle,
               ...(hasBorder ? withBorder : withoutBorder),
               ...(errorMessage ? errorBorderColor : {}),
+              ...otherStyle,
             }}
           />
         </Wiggle>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",