Customize FlatList, style text input container

toystars · Jan 17, 2019 · 0bfdf49 · 0bfdf49
1 parent 004a8d3
commit 0bfdf49
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 29 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -1,7 +1,8 @@
 [<img alt="enieber" src="https://avatars3.githubusercontent.com/u/7907068?v=4&s=117" width="117">](https://github.com/enieber)[<img alt="arslbbt" src="https://avatars0.githubusercontent.com/u/12788132?v=4&s=117" width="117">](https://github.com/arslbbt)[<img alt="ziyafenn" src="https://avatars0.githubusercontent.com/u/314302?v=4&s=117" width="117">](https://github.com/ziyafenn)[<img alt="SushilShrestha" src="https://avatars2.githubusercontent.com/u/3480695?v=4&s=117" width="117">](https://github.com/SushilShrestha)[<img alt="remeryAGS" src="https://avatars0.githubusercontent.com/u/4663476?v=4&s=117" width="117">](https://github.com/remeryAGS)[<img alt="MartinCamen" src="https://avatars3.githubusercontent.com/u/8720813?v=4&s=117" width="117">](https://github.com/MartinCamen)
 
 [<img alt="mikaello" src="https://avatars3.githubusercontent.com/u/2505178?v=4&s=117" width="117">](https://github.com/mikaello)[<img alt="pwoltman" src="https://avatars3.githubusercontent.com/u/1881769?v=4&s=117" width="117">](https://github.com/pwoltman)[<img alt="easyhrworld" src="https://avatars3.githubusercontent.com/u/22884806?v=4&s=117" width="117">](https://github.com/easyhrworld)[<img alt="creedmangrum" src="https://avatars0.githubusercontent.com/u/16233247?v=4&s=117" width="117">](https://github.com/creedmangrum)[<img alt="donedgardo" src="https://avatars2.githubusercontent.com/u/2483536?v=4&s=117" width="117">](https://github.com/donedgardo)[<img alt="toystars" src="https://avatars0.githubusercontent.com/u/16062709?v=4&s=117" width="117">](https://github.com/toystars)
-[<img alt="augustoalegon" src="https://avatars3.githubusercontent.com/u/14319083?s=117&v=4" width="117"](https://github.com/augustoalegon)
+
+[<img alt="augustoalegon" src="https://avatars3.githubusercontent.com/u/14319083?s=117&v=4" width="117">](https://github.com/augustoalegon)
 
 
 

diff --git a/README.md b/README.md
@@ -122,6 +122,7 @@ The component takes 3 compulsory props - `items`, `uniqueKey` and `onSelectedIte
 | canAddItems | No      | (Boolean) Defaults to "false". This allows a user to add items to the list of items provided. You need to handle adding the new items in the onAddItem function prop. Items may be added with the return key on the native keyboard. |
 | displayKey | No | (String) Defaults to "name". This string will be used to select the key to display the objects in the items array |
 | fixedHeight | No     | (Boolean) Defaults to false. Specifies if select dropdown take height of content or a fixed height with a scrollBar (There is an issue with this behavior when component is nested in a ScrollView in which scroll event will only be dispatched to parent ScrollView and select component won't be scrollable). See [this issue](https://github.com/toystars/react-native-multiple-select/issues/12) for more info. |
+| flatListProps | No | (Object) Properties for the FlatList. Pass any property that is required on the FlatList of the dropdown menu |
 | fontFamily | No     | (String) Custom font family to be used in component (affects all text except `searchInputPlaceholderText` described above) |
 | fontSize | No     | (Number) Font size for selected item name displayed as label for multiselect |
 | hideSubmitButton | No | (Boolean) Defaults to false. Hide submit button from dropdown, and rather use arrow-button in search field |
@@ -142,6 +143,7 @@ The component takes 3 compulsory props - `items`, `uniqueKey` and `onSelectedIte
 | single | No     | (Boolean) Toggles select component between single option and multi option |
 | styleDropdownMenu | No | (Style) Style the view of the dropdown menu |
 | styleDropdownMenuSubsection | No | (Style) Style the inner view of the dropdown menu |
+| styleInputGroup | No | (Style) Style the Container of the Text Input Group |
 | styleMainWrapper | No | (Style) Style the Main Container of the MultiSelector |
 | submitButtonColor | No   | (String) Background color for submit button  |
 | submitButtonText | No   | (String) Text displayed on submit button  |

diff --git a/lib/react-native-multi-select.js b/lib/react-native-multi-select.js
@@ -44,10 +44,10 @@ export default class MultiSelect extends Component {
     selectText: PropTypes.string,
     styleDropdownMenu: ViewPropTypes.style,
     styleDropdownMenuSubsection: ViewPropTypes.style,
+    styleInputGroup: ViewPropTypes.style,
     styleMainWrapper: ViewPropTypes.style,
     altFontFamily: PropTypes.string,
     hideSubmitButton: PropTypes.bool,
-    autoFocusInput: PropTypes.bool,
     submitButtonColor: PropTypes.string,
     submitButtonText: PropTypes.string,
     textColor: PropTypes.string,
@@ -58,7 +58,8 @@ export default class MultiSelect extends Component {
     onAddItem: PropTypes.func,
     onChangeInput: PropTypes.func,
     displayKey: PropTypes.string,
-    textInputProps: PropTypes.object
+    textInputProps: PropTypes.object,
+    flatListProps: PropTypes.object
   };
 
   static defaultProps = {
@@ -83,7 +84,6 @@ export default class MultiSelect extends Component {
     selectText: 'Select',
     altFontFamily: '',
     hideSubmitButton: false,
-    autoFocusInput: true,
     submitButtonColor: '#CCC',
     submitButtonText: 'Submit',
     fontSize: 14,
@@ -402,7 +402,8 @@ export default class MultiSelect extends Component {
       items,
       fontFamily,
       uniqueKey,
-      selectedItems
+      selectedItems,
+      flatListProps
     } = this.props;
     const { searchTerm } = this.state;
     let component = null;
@@ -419,6 +420,7 @@ export default class MultiSelect extends Component {
           extraData={selectedItems}
           keyExtractor={item => item[uniqueKey]}
           renderItem={rowData => this._getRow(rowData.item)}
+          {...flatListProps}
         />
       );
       searchTermMatch = renderItems.filter(item => item.name === searchTerm)
@@ -466,26 +468,32 @@ export default class MultiSelect extends Component {
       styleDropdownMenu,
       styleDropdownMenuSubsection,
       hideSubmitButton,
-      autoFocusInput,
       submitButtonColor,
       submitButtonText,
       fontSize,
       textColor,
       fixedHeight,
       hideTags,
       textInputProps,
-      styleMainWrapper
+      styleMainWrapper,
+      styleInputGroup
     } = this.props;
     const { searchTerm, selector } = this.state;
     return (
       <View
-        style={[{
-          flexDirection: 'column'
-        } && styleMainWrapper && styleMainWrapper]}
+        style={[
+          {
+            flexDirection: 'column'
+          } &&
+            styleMainWrapper &&
+            styleMainWrapper
+        ]}
       >
         {selector ? (
           <View style={styles.selectorView(fixedHeight)}>
-            <View style={styles.inputGroup}>
+            <View
+              style={[styles.inputGroup, styleInputGroup && styleInputGroup]}
+            >
               <Icon
                 name="magnify"
                 size={20}
@@ -522,30 +530,34 @@ export default class MultiSelect extends Component {
               }}
             >
               <View>{this._renderItems()}</View>
-              {!single &&
-                !hideSubmitButton && (
-                  <TouchableOpacity
-                    onPress={() => this._submitSelection()}
+              {!single && !hideSubmitButton && (
+                <TouchableOpacity
+                  onPress={() => this._submitSelection()}
+                  style={[
+                    styles.button,
+                    { backgroundColor: submitButtonColor }
+                  ]}
+                >
+                  <Text
                     style={[
-                      styles.button,
-                      { backgroundColor: submitButtonColor }
+                      styles.buttonText,
+                      fontFamily ? { fontFamily } : {}
                     ]}
                   >
-                    <Text
-                      style={[
-                        styles.buttonText,
-                        fontFamily ? { fontFamily } : {}
-                      ]}
-                    >
-                      {submitButtonText}
-                    </Text>
-                  </TouchableOpacity>
-                )}
+                    {submitButtonText}
+                  </Text>
+                </TouchableOpacity>
+              )}
             </View>
           </View>
         ) : (
           <View>
-            <View style={[styles.dropdownView, styleDropdownMenu && styleDropdownMenu]}>
+            <View
+              style={[
+                styles.dropdownView,
+                styleDropdownMenu && styleDropdownMenu
+              ]}
+            >
               <View
                 style={[
                   styles.subSection,
@@ -570,7 +582,9 @@ export default class MultiSelect extends Component {
                         },
                         altFontFamily
                           ? { fontFamily: altFontFamily }
-                          : fontFamily ? { fontFamily } : {}
+                          : fontFamily
+                          ? { fontFamily }
+                          : {}
                       ]}
                       numberOfLines={1}
                     >