From 8c98024df84b69e43ae63ca38bccee90756ccdb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Fri, 17 Jan 2020 08:04:53 +0300 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=86=95Added=20selectedText=20prop.=20?= =?UTF-8?q?=F0=9F=92=84Fixed=20some=20ui=20issues.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/react-native-multi-select.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/lib/react-native-multi-select.js b/lib/react-native-multi-select.js index fce2b2d..822691f 100644 --- a/lib/react-native-multi-select.js +++ b/lib/react-native-multi-select.js @@ -1,22 +1,22 @@ -import React, { Component } from 'react'; import { + FlatList, Text, - View, TextInput, - TouchableWithoutFeedback, TouchableOpacity, - FlatList, + TouchableWithoutFeedback, UIManager, + View, ViewPropTypes } from 'react-native'; +import React, { Component } from 'react'; +import styles, { colorPack } from './styles'; + +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import PropTypes from 'prop-types'; -import reject from 'lodash/reject'; import find from 'lodash/find'; import get from 'lodash/get'; -import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; - -import styles, { colorPack } from './styles'; import nodeTypes from './helpers/nodeTypes'; +import reject from 'lodash/reject'; // set UIManager LayoutAnimationEnabledExperimental if (UIManager.setLayoutAnimationEnabledExperimental) { @@ -34,6 +34,7 @@ const defaultSearchIcon = ( export default class MultiSelect extends Component { static propTypes = { + selectedText: PropTypes.string, single: PropTypes.bool, selectedItems: PropTypes.array, items: PropTypes.array.isRequired, @@ -117,7 +118,8 @@ export default class MultiSelect extends Component { onAddItem: () => {}, onClearSelector: () => {}, onToggleList: () => {}, - removeSelected: false + removeSelected: false, + selectedText: 'selected' }; constructor(props) { @@ -162,7 +164,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} ${selectText})`; }; _findItem = itemKey => { @@ -615,7 +617,7 @@ export default class MultiSelect extends Component { size={20} onPress={this._clearSelectorCallback} color={colorPack.placeholderTextColor} - style={{ marginLeft: 5 }} + style={{ marginLeft: 5, marginRight: 10}} /> )} @@ -705,7 +707,7 @@ export default class MultiSelect extends Component { From 6ce1d58e21d7dc3c26d5817eb2ddb5b9ba43755d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Fri, 17 Jan 2020 08:08:52 +0300 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=94=A5Fixed=20a=20bug.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/react-native-multi-select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/react-native-multi-select.js b/lib/react-native-multi-select.js index 822691f..e740089 100644 --- a/lib/react-native-multi-select.js +++ b/lib/react-native-multi-select.js @@ -155,7 +155,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; } @@ -164,7 +164,7 @@ export default class MultiSelect extends Component { const foundItem = this._findItem(item); return get(foundItem, displayKey) || selectText; } - return `${selectText} (${selectedItems.length} ${selectText})`; + return `${selectText} (${selectedItems.length} ${selectedText})`; }; _findItem = itemKey => { From fcc32e30d3e1b772ace8faf6d06ae09e7bb3716b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Fri, 17 Jan 2020 08:12:14 +0300 Subject: [PATCH 3/4] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 6f33a01..2354274 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ + # react-native-multiple-select [![npm](https://img.shields.io/npm/v/react-native-multiple-select.svg)](https://www.npmjs.com/package/react-native-multiple-select) [![Downloads](https://img.shields.io/npm/dt/react-native-multiple-select.svg)](https://www.npmjs.com/package/react-native-multiple-select) [![Licence](https://img.shields.io/npm/l/react-native-multiple-select.svg)](https://www.npmjs.com/package/react-native-multiple-select) @@ -145,6 +146,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 | +| selectedText | No | (String) Text displayed when choosed one or one more records selected for example "2 records selected" < you are setting "selected" text when enter this prop. | | 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 | From b73c5f549e837403d6315e941cc0127cb5b78fb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Fri, 17 Jan 2020 08:16:16 +0300 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=86=95=20Added=20selectedText=20prop?= =?UTF-8?q?=20in=20index.d.ts=20file.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/index.d.ts b/index.d.ts index c3d9db8..2af018d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -23,6 +23,7 @@ export interface MultiSelectProps { searchInputPlaceholderText?: string; searchInputStyle?: StyleProp; selectText?: string; + selectedText?: string; styleDropdownMenu?: StyleProp; styleDropdownMenuSubsection?: StyleProp; styleInputGroup?: StyleProp;