diff --git a/README.md b/README.md index 6f33a01..a10c7e8 100644 --- a/README.md +++ b/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 | diff --git a/index.d.ts b/index.d.ts index c3d9db8..07da82c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -25,6 +25,7 @@ export interface MultiSelectProps { selectText?: string; styleDropdownMenu?: StyleProp; styleDropdownMenuSubsection?: StyleProp; + styleIndicator?: StyleProp; styleInputGroup?: StyleProp; styleItemsContainer?: StyleProp; styleListContainer?: StyleProp; @@ -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; filterMethod?: string; + noItemsText?: string; + selectedText?: string; } export default class MultiSelect extends React.Component { diff --git a/lib/react-native-multi-select.js b/lib/react-native-multi-select.js index fce2b2d..9b7a0d7 100644 --- a/lib/react-native-multi-select.js +++ b/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,7 +169,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} ${selectedText})`; }; _findItem = itemKey => { @@ -170,17 +177,19 @@ export default class MultiSelect extends Component { 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 { 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} ); @@ -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, ]} /> @@ -705,7 +719,10 @@ export default class MultiSelect extends Component { diff --git a/package.json b/package.json index edada74..0f0b46f 100644 --- a/package.json +++ b/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",