From 66a342d076cdeb00646c627d289371c4adc6a6a3 Mon Sep 17 00:00:00 2001 From: Delphine Shi Date: Mon, 14 Jan 2019 15:49:36 +0100 Subject: [PATCH 1/3] 'No item to display' and '(x selected)' messages customizable --- lib/react-native-multi-select.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/lib/react-native-multi-select.js b/lib/react-native-multi-select.js index c28d900..aef325a 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', + selectText: '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,7 @@ 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 +135,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 +401,8 @@ export default class MultiSelect extends Component { items, fontFamily, uniqueKey, - selectedItems + selectedItems, + noResultText, } = this.props; const { searchTerm } = this.state; let component = null; @@ -432,7 +437,7 @@ export default class MultiSelect extends Component { fontFamily ? { fontFamily } : {} ]} > - No item to display. + {noResultText} ); From 024280a124beadda29cf23465eccb59141c79193 Mon Sep 17 00:00:00 2001 From: Delphine Shi Date: Mon, 14 Jan 2019 16:04:27 +0100 Subject: [PATCH 2/3] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) 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 From 627187b4b0f7c500a3560f18334e34dc50f5c638 Mon Sep 17 00:00:00 2001 From: Delphine Shi Date: Mon, 14 Jan 2019 20:50:26 +0100 Subject: [PATCH 3/3] Fix default selectTextInfo --- lib/react-native-multi-select.js | 49 ++++++++++++++++++-------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/lib/react-native-multi-select.js b/lib/react-native-multi-select.js index aef325a..e9990d8 100644 --- a/lib/react-native-multi-select.js +++ b/lib/react-native-multi-select.js @@ -55,7 +55,7 @@ export default class MultiSelect extends Component { onAddItem: PropTypes.func, onChangeInput: PropTypes.func, displayKey: PropTypes.string, - noResultText: PropTypes.string, + noResultText: PropTypes.string }; static defaultProps = { @@ -78,7 +78,7 @@ export default class MultiSelect extends Component { searchInputStyle: { color: colorPack.textPrimary }, textColor: colorPack.textPrimary, selectText: 'Select', - selectText: 'selected', + selectTextInfo: 'selected', altFontFamily: '', hideSubmitButton: false, autoFocusInput: true, @@ -127,7 +127,13 @@ export default class MultiSelect extends Component { }; _getSelectLabel = () => { - const { selectText, selectTextInfo, single, selectedItems, displayKey } = this.props; + const { + selectText, + selectTextInfo, + single, + selectedItems, + displayKey + } = this.props; if (!selectedItems || selectedItems.length === 0) { return selectText; } else if (single) { @@ -402,7 +408,7 @@ export default class MultiSelect extends Component { fontFamily, uniqueKey, selectedItems, - noResultText, + noResultText } = this.props; const { searchTerm } = this.state; let component = null; @@ -519,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} + + + )} ) : ( @@ -566,7 +571,9 @@ export default class MultiSelect extends Component { }, altFontFamily ? { fontFamily: altFontFamily } - : fontFamily ? { fontFamily } : {} + : fontFamily + ? { fontFamily } + : {} ]} numberOfLines={1} >