diff --git a/README.md b/README.md
index bb8bfb5..57b68fc 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,7 @@ 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 |
+| selectTextInfo | No | (String) Added text displayed in main component when items are selected |
| 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 |
@@ -150,6 +151,7 @@ The component takes 3 compulsory props - `items`, `uniqueKey` and `onSelectedIte
| textColor | No | (String) Color for selected item name displayed as label for multiselect |
| uniqueKey | Yes | (String) Unique identifier that is part of each item's properties. Used internally as means of identifying each item (Check sample below) |
|selectedItems | No | (Array, control prop) List of selected items keys . JavaScript Array of strings, that can be instantiated with the component |
+|noResultText | No | (String) Text displayed when there is no item to display |
## Note
diff --git a/lib/react-native-multi-select.js b/lib/react-native-multi-select.js
index c28d900..e9990d8 100644
--- a/lib/react-native-multi-select.js
+++ b/lib/react-native-multi-select.js
@@ -41,6 +41,7 @@ export default class MultiSelect extends Component {
searchInputPlaceholderText: PropTypes.string,
searchInputStyle: PropTypes.object,
selectText: PropTypes.string,
+ selectTextInfo: PropTypes.string,
altFontFamily: PropTypes.string,
hideSubmitButton: PropTypes.bool,
autoFocusInput: PropTypes.bool,
@@ -53,7 +54,8 @@ export default class MultiSelect extends Component {
canAddItems: PropTypes.bool,
onAddItem: PropTypes.func,
onChangeInput: PropTypes.func,
- displayKey: PropTypes.string
+ displayKey: PropTypes.string,
+ noResultText: PropTypes.string
};
static defaultProps = {
@@ -76,6 +78,7 @@ export default class MultiSelect extends Component {
searchInputStyle: { color: colorPack.textPrimary },
textColor: colorPack.textPrimary,
selectText: 'Select',
+ selectTextInfo: 'selected',
altFontFamily: '',
hideSubmitButton: false,
autoFocusInput: true,
@@ -87,7 +90,8 @@ export default class MultiSelect extends Component {
onChangeInput: () => {},
displayKey: 'name',
canAddItems: false,
- onAddItem: () => {}
+ onAddItem: () => {},
+ noResultText: 'No item to display.'
};
constructor(props) {
@@ -123,7 +127,13 @@ export default class MultiSelect extends Component {
};
_getSelectLabel = () => {
- const { selectText, single, selectedItems, displayKey } = this.props;
+ const {
+ selectText,
+ selectTextInfo,
+ single,
+ selectedItems,
+ displayKey
+ } = this.props;
if (!selectedItems || selectedItems.length === 0) {
return selectText;
} else if (single) {
@@ -131,7 +141,7 @@ 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} ${selectTextInfo})`;
};
_findItem = itemKey => {
@@ -397,7 +407,8 @@ export default class MultiSelect extends Component {
items,
fontFamily,
uniqueKey,
- selectedItems
+ selectedItems,
+ noResultText
} = this.props;
const { searchTerm } = this.state;
let component = null;
@@ -432,7 +443,7 @@ export default class MultiSelect extends Component {
fontFamily ? { fontFamily } : {}
]}
>
- No item to display.
+ {noResultText}
);
@@ -514,25 +525,24 @@ export default class MultiSelect extends Component {
}}
>
{this._renderItems()}
- {!single &&
- !hideSubmitButton && (
- this._submitSelection()}
+ {!single && !hideSubmitButton && (
+ this._submitSelection()}
+ style={[
+ styles.button,
+ { backgroundColor: submitButtonColor }
+ ]}
+ >
+
-
- {submitButtonText}
-
-
- )}
+ {submitButtonText}
+
+
+ )}
) : (
@@ -561,7 +571,9 @@ export default class MultiSelect extends Component {
},
altFontFamily
? { fontFamily: altFontFamily }
- : fontFamily ? { fontFamily } : {}
+ : fontFamily
+ ? { fontFamily }
+ : {}
]}
numberOfLines={1}
>