add props for selected and "item no display"

README.md

@@ -69,7 +69,7 @@ const items = [{
 class MultiSelectExample extends Component {
 
   state = {
-    selectedItems : [];
+    selectedItems : []
   };
 
 
@@ -132,11 +132,12 @@ The component takes 3 compulsory props - `items`, `uniqueKey` and `onSelectedIte
 | hideDropdown | No | (Boolean) Defaults false. Hide dropdown menu with a cancel, and use arrow-back |
 | hideSubmitButton | No | (Boolean) Defaults to false. Hide submit button from dropdown, and rather use arrow-button in search field |
 | hideTags | No | (Boolean) Defaults to false. Hide tokenized selected items, in case selected items are to be shown somewhere else in view (check below for more info) |
-| iconSearch | No | (Element, Object, boolean, Function) Element or functional component to change the Search Icon |
+| searchIcon | No | (Element, Object, boolean, Function) Element or functional component to change the Search Icon |
 | itemFontFamily | No   | (String) Font family for each non-selected item in multi-select drop-down |
 | itemFontSize | No   | (Number) Font size used for each item in the multi-select drop-down |
 | itemTextColor | No   | (String) Text color for each non-selected item in multi-select drop-down |
 | items      | Yes | (Array, control prop) List of items to display in the multi-select component. JavaScript Array of objects. Each object must contain a name and unique identifier (Check sample above) |
+|noItemsText| No| (String) Text that replace default "no items to display"|
 | onAddItem | No   | (Function) JavaScript function passed in as an argument. The function is called everytime a new item is added, and receives the entire list of items. Here you should ensure that the new items are added to your provided list of `items` in addition to any other consequences of new items being added. |
 | onChangeInput | No    | (Function) JavaScript function passed in as an argument. The function is called everytime `TextInput` is changed with the value. |
 | onClearSelector | No | (Function) JavaScript function passeed in as an argument. The function is called everytime `back button` is pressed |
@@ -145,12 +146,14 @@ The component takes 3 compulsory props - `items`, `uniqueKey` and `onSelectedIte
 | searchInputPlaceholderText | No      | (String) Placeholder text displayed in multi-select filter input |
 | searchInputStyle | No   | (Object) Style object for multi-select input element  |
 | selectText | No     | (String) Text displayed in main component |
+| selectedText | No | (String) Text displayed when an item is selected can be replaced by any string|
 | selectedItemFontFamily | No   | (String) Font family for each selected item in multi-select drop-down |
 | selectedItemIconColor | No     | (String) Color for `selected` check icon for each selected item in multi-select drop-down |
 | selectedItemTextColor | No   | (String) Text color for each selected item in multi-select drop-down |
 | 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 |
+| styleIndicator | No | (Style) Style the Icon for indicator |
 | styleInputGroup | No | (Style) Style the Container of the Text Input Group |
 | styleItemsContainer | No | (Style) Style the Container of the items that are displayed in a list |
 | styleListContainer | No | (Style) Style the Container of main list. See [this issue] (https://github.com/toystars/react-native-multiple-select/issues/12)|
@@ -159,9 +162,11 @@ The component takes 3 compulsory props - `items`, `uniqueKey` and `onSelectedIte
 | styleSelectorContainer | No | (Style) Style the Container of the Selector when user clicks on the dropdown|
 | styleTextDropdown | No | (Text Style) Style text of the Dropdown |
 | styleTextDropdownSelected | No | (Text Style) Style text of the Dropdown selected |
+| styleTextTag | No | (Text Style) Style text of the tag |
 | submitButtonColor | No   | (String) Background color for submit button  |
 | submitButtonText | No   | (String) Text displayed on submit button  |
 | tagBorderColor | No      | (String) Border color for each selected item  |
+| tagContainerStyle | No | (Style) Style the container of the tag view |
 | tagRemoveIconColor | No      | (String) Color to be used for the remove icon in selected items list |
 | tagTextColor | No  | (String) Text color for selected items list |
 | textColor | No     | (String) Color for selected item name displayed as label for multiselect  |

index.d.ts

@@ -25,6 +25,7 @@ export interface MultiSelectProps {
     selectText?: string;
     styleDropdownMenu?: StyleProp<ViewStyle>;
     styleDropdownMenuSubsection?: StyleProp<ViewStyle>;
+    styleIndicator?: StyleProp<ViewStyle>;
     styleInputGroup?: StyleProp<ViewStyle>;
     styleItemsContainer?: StyleProp<ViewStyle>;
     styleListContainer?: StyleProp<ViewStyle>;
@@ -43,12 +44,15 @@ export interface MultiSelectProps {
     fixedHeight?: boolean;
     hideTags?: boolean,
     canAddItems?: boolean;
+    onToggleList?: () => void;
     onAddItem?: (newItems: any[]) => void;
     onChangeInput?: (text: string) => void;
     displayKey?: string;
     textInputProps?: TextInputProps;
     flatListProps?: FlatListProps<any>;
     filterMethod?: string;
+    noItemsText?: string;
+    selectedText?: string;
 }
 
 export default class MultiSelect extends React.Component<MultiSelectProps> {

lib/react-native-multi-select.js

@@ -6,9 +6,9 @@ import {
   TouchableWithoutFeedback,
   TouchableOpacity,
   FlatList,
-  UIManager,
-  ViewPropTypes
+  UIManager
 } from 'react-native';
+import {ViewPropTypes, TextPropTypes} from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import reject from 'lodash/reject';
 import find from 'lodash/find';
@@ -40,6 +40,7 @@ export default class MultiSelect extends Component {
     uniqueKey: PropTypes.string,
     tagBorderColor: PropTypes.string,
     tagTextColor: PropTypes.string,
+    tagContainerStyle: ViewPropTypes.style,
     fontFamily: PropTypes.string,
     tagRemoveIconColor: PropTypes.string,
     onSelectedItemsChange: PropTypes.func.isRequired,
@@ -61,8 +62,10 @@ export default class MultiSelect extends Component {
     styleMainWrapper: ViewPropTypes.style,
     styleRowList: ViewPropTypes.style,
     styleSelectorContainer: ViewPropTypes.style,
-    styleTextDropdown: Text.propTypes.style,
-    styleTextDropdownSelected: Text.propTypes.style,
+    styleTextDropdown: TextPropTypes.style,
+    styleTextDropdownSelected: TextPropTypes.style,
+    styleTextTag: TextPropTypes.style,
+    styleIndicator: ViewPropTypes.style,
     altFontFamily: PropTypes.string,
     hideSubmitButton: PropTypes.bool,
     hideDropdown: PropTypes.bool,
@@ -81,7 +84,9 @@ export default class MultiSelect extends Component {
     filterMethod: PropTypes.string,
     onClearSelector: PropTypes.func,
     onToggleList: PropTypes.func,
-    removeSelected: PropTypes.bool
+    removeSelected: PropTypes.bool,
+    noItemsText: PropTypes.string,
+    selectedText: PropTypes.string
   };
 
   static defaultProps = {
@@ -117,7 +122,9 @@ export default class MultiSelect extends Component {
     onAddItem: () => {},
     onClearSelector: () => {},
     onToggleList: () => {},
-    removeSelected: false
+    removeSelected: false,
+    noItemsText: 'No items to display.',
+    selectedText: 'selected'
   };
 
   constructor(props) {
@@ -153,7 +160,7 @@ export default class MultiSelect extends Component {
   };
 
   _getSelectLabel = () => {
-    const { selectText, single, selectedItems, displayKey } = this.props;
+    const { selectText, single, selectedItems, displayKey, selectedText } = this.props;
     if (!selectedItems || selectedItems.length === 0) {
       return selectText;
     }
@@ -162,25 +169,27 @@ export default class MultiSelect extends Component {
       const foundItem = this._findItem(item);
       return get(foundItem, displayKey) || selectText;
     }
-    return `${selectText} (${selectedItems.length} selected)`;
+    return `${selectText} (${selectedItems.length} ${selectedText})`;
   };
 
   _findItem = itemKey => {
     const { items, uniqueKey } = this.props;
     return find(items, singleItem => singleItem[uniqueKey] === itemKey) || {};
   };
 
-  _displaySelectedItems = optionalSelctedItems => {
+  _displaySelectedItems = optionalSelectedItems => {
     const {
       fontFamily,
+      tagContainerStyle,
       tagRemoveIconColor,
       tagBorderColor,
       uniqueKey,
       tagTextColor,
       selectedItems,
-      displayKey
+      displayKey,
+      styleTextTag
     } = this.props;
-    const actualSelectedItems = optionalSelctedItems || selectedItems;
+    const actualSelectedItems = optionalSelectedItems || selectedItems;
     return actualSelectedItems.map(singleSelectedItem => {
       const item = this._findItem(singleSelectedItem);
       if (!item[displayKey]) return null;
@@ -193,7 +202,8 @@ export default class MultiSelect extends Component {
               justifyContent: 'center',
               height: 40,
               borderColor: tagBorderColor
-            }
+            },
+            tagContainerStyle || {}
           ]}
           key={item[uniqueKey]}
         >
@@ -204,6 +214,7 @@ export default class MultiSelect extends Component {
                 color: tagTextColor,
                 fontSize: 15
               },
+              styleTextTag && styleTextTag,
               fontFamily ? { fontFamily } : {}
             ]}
             numberOfLines={1}
@@ -476,7 +487,8 @@ export default class MultiSelect extends Component {
       selectedItems,
       flatListProps,
       styleListContainer,
-      removeSelected
+      removeSelected,
+      noItemsText
     } = this.props;
     const { searchTerm } = this.state;
     let component = null;
@@ -497,7 +509,7 @@ export default class MultiSelect extends Component {
         <FlatList
           data={renderItems}
           extraData={selectedItems}
-          keyExtractor={item => item[uniqueKey]}
+          keyExtractor={(item, index) => index.toString()}
           listKey={item => item[uniqueKey]}
           renderItem={rowData => this._getRow(rowData.item)}
           {...flatListProps}
@@ -520,7 +532,7 @@ export default class MultiSelect extends Component {
               fontFamily ? { fontFamily } : {}
             ]}
           >
-            No item to display.
+            {noItemsText}
           </Text>
         </View>
       );
@@ -563,7 +575,8 @@ export default class MultiSelect extends Component {
       styleSelectorContainer,
       styleTextDropdown,
       styleTextDropdownSelected,
-      searchIcon
+      searchIcon,
+      styleIndicator,
     } = this.props;
     const { searchTerm, selector } = this.state;
     return (
@@ -604,7 +617,8 @@ export default class MultiSelect extends Component {
                     name="menu-down"
                     style={[
                       styles.indicator,
-                      { paddingLeft: 15, paddingRight: 15 }
+                      { paddingLeft: 15, paddingRight: 15 },
+                      styleIndicator && styleIndicator,
                     ]}
                   />
                 </TouchableOpacity>
@@ -705,7 +719,10 @@ export default class MultiSelect extends Component {
                     </Text>
                     <Icon
                       name={hideSubmitButton ? 'menu-right' : 'menu-down'}
-                      style={styles.indicator}
+                      style={[
+                        styles.indicator,
+                        styleIndicator && styleIndicator,
+                      ]}
                     />
                   </View>
                 </TouchableWithoutFeedback>

package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-native-multiple-select",
-  "version": "0.5.5",
+  "version": "0.5.12",
   "description": "Simple multi-select component for react-native",
   "main": "index.js",
   "scripts": {
     "precommit": "lint-staged",
     "test": "jest",
-    "lint": "eslint lib/"
+    "lint": "eslint lib/",
+    "publish": "npm publish --access public"
   },
   "jest": {
     "preset": "jest-react-native"
@@ -55,6 +56,7 @@
     "remote-redux-devtools": "^0.5.16"
   },
   "peerDependencies": {
+    "deprecated-react-native-prop-types": ">2.0.0",
     "lodash": ">4.17.00",
     "react": ">16.6.0",
     "react-native": ">0.57.0",