Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Customize all texts #90

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Customize all texts #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66a342d
'No item to display' and '(x selected)' messages customizable
dlphn Jan 14, 2019
024280a
Update README.md
dlphn Jan 14, 2019
627187b
Fix default selectTextInfo
dlphn Jan 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -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 |
Expand All @@ -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

Expand Down
58 changes: 35 additions & 23 deletions lib/react-native-multi-select.js
View file
Open in desktop
Expand Up @@ -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,
Expand All @@ -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 = {
Expand All @@ -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,
Expand All @@ -87,7 +90,8 @@ export default class MultiSelect extends Component {
onChangeInput: () => {},
displayKey: 'name',
canAddItems: false,
onAddItem: () => {}
onAddItem: () => {},
noResultText: 'No item to display.'
};

constructor(props) {
Expand Down Expand Up @@ -123,15 +127,21 @@ 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) {
const item = selectedItems[0];
const foundItem = this._findItem(item);
return get(foundItem, displayKey) || selectText;
}
return `${selectText} (${selectedItems.length} selected)`;
return `${selectText} (${selectedItems.length} ${selectTextInfo})`;
};

_findItem = itemKey => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -432,7 +443,7 @@ export default class MultiSelect extends Component {
fontFamily ? { fontFamily } : {}
]}
>
No item to display.
{noResultText}
</Text>
</View>
);
Expand Down Expand Up @@ -514,25 +525,24 @@ 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>
) : (
Expand Down Expand Up @@ -561,7 +571,9 @@ export default class MultiSelect extends Component {
},
altFontFamily
? { fontFamily: altFontFamily }
: fontFamily ? { fontFamily } : {}
: fontFamily
? { fontFamily }
: {}
]}
numberOfLines={1}
>
Expand Down