react-native-sectioned-multi-select - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

CHANGELOG.md

 
 # Changelog
+## 0.6.4 - 2019-01-17
+### Added
+- added ability to show an icon before the item text #87. Use prop `iconKey`, then add the key to your item as either a string (to show a material icons `Icon` component by `name`), object (to show an image e.g {uri: 'imageUrl' }, or a number (that is returned from require('./localimage.png') )). use style key `itemIconStyle` to style the Icon / Image
+- added `autoFocus` prop (bool) #86, to autofocus the search input when the modal is opened.
+
 ## 0.6.3 - 2018-11-27
@@ -4,0 +9,0 @@ ### Added

exampleapp/App.js

@@ -17,2 +17,3 @@ import React, { Component } from 'react'
 import Icon from 'react-native-vector-icons/MaterialIcons'
+const img = require('./z.jpg');
 
@@ -25,6 +26,8 @@ // Sorry for the mess
     id: 0,
+    icon: { uri: 'https://banner2.kisspng.com/20180514/wqq/kisspng-leaf-plant-green-clip-art-5af9b5b7402440.7747356215263144232627.jpg'},
+    
     children: [
       {
         title: 'Apple',
-        id: 10,
+        id: 10,        
       },
@@ -89,2 +92,3 @@ {
     id: 1,
+    icon: "cake",
     children: [
@@ -112,2 +116,4 @@ {
     id: 2,
+    icon: img,
+
     children: [
@@ -138,2 +144,4 @@ {
 ]
+console.log(items);
+
 // const items2 =
@@ -510,2 +518,4 @@ //   [{
           displayKey="title"
+          iconKey="icon"
+          autoFocus
           // showCancelButton
@@ -512,0 +522,0 @@ headerComponent={

exampleapp/package.json

@@ -12,3 +12,3 @@ {
 		"react-native": "0.50.3",
-		"react-native-sectioned-multi-select": "git://github.com/renrizzolo/react-native-sectioned-multi-select.git#master",
+		"react-native-sectioned-multi-select": "^0.6.3",
 		"react-native-vector-icons": "^4.4.2"
@@ -15,0 +15,0 @@ },

lib/components/index.js

 export { default as RowItem } from './RowItem';
-export { default as RowSubItem } from './RowSubItem';
+export { default as RowSubItem } from './RowSubItem'; 
+export { default as ItemIcon } from './ItemIcon';

lib/components/RowItem.js

@@ -11,6 +11,7 @@ import React, { Component } from 'react'
   FlatList,
-  StyleSheet
+  StyleSheet,
 } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 import RowSubItem from './RowSubItem'
+import ItemIcon from './ItemIcon'
 
@@ -167,2 +168,3 @@ class RowItem extends Component {
       selectedItems,
+      iconKey
     } = this.props
@@ -192,2 +194,3 @@ const hasDropDown = item[subKey] && item[subKey].length > 0 && showDropDowns
           >
+            {iconKey && item[iconKey] && <ItemIcon iconKey={iconKey} icon={item[iconKey]} style={mergedStyles.itemIconStyle} />}
             <Text
@@ -204,3 +207,3 @@ numberOfLines={itemNumberOfLines}
             >
-              {item[displayKey]}
+             {item[displayKey]}
             </Text>
@@ -207,0 +210,0 @@ {

lib/components/RowSubItem.js

@@ -7,4 +7,6 @@ import React, { Component } from 'react'
   Text,
+  Image,
 } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
+import ItemIcon from './ItemIcon';
 
@@ -59,2 +61,3 @@ class RowSubItem extends Component {
       displayKey,
+      iconKey
     } = this.props
@@ -64,3 +67,3 @@
     const itemSelected = this._itemSelected()
-
+    
     return (
@@ -86,2 +89,3 @@ <View
         >
+          {iconKey && subItem[iconKey] && <ItemIcon iconKey={iconKey} icon={subItem[iconKey]} style={mergedStyles.itemIconStyle}/> }
           <Text
@@ -91,8 +95,8 @@ numberOfLines={itemNumberOfLines}
               [{
-                flex: 1, 
+                flex: 1,
                 color: subItem.disabled ? mergedColors.disabled : mergedColors.subText,
-              }, 
-                subItemFontFamily, 
-                mergedStyles.subItemText, 
-                (itemSelected || highlightChild) && mergedStyles.selectedSubItemText,
+              },
+                subItemFontFamily,
+              mergedStyles.subItemText,
+              (itemSelected || highlightChild) && mergedStyles.selectedSubItemText,
               ]
@@ -104,19 +108,19 @@ }
           {
-          itemSelected || highlightChild ?
-            <View>
-              { selectedIconComponent ?
-                selectedIconComponent
-                :
-                <Icon
-                  name="check"
-                  style={{
-                    fontSize: 16,
-                    color: highlightChild ? mergedColors.disabled : mergedColors.success,
-                    paddingLeft: 10,
-                  }}
-                />
-              }
-            </View>
-          :
-          null
+            itemSelected || highlightChild ?
+              <View>
+                { selectedIconComponent ?
+                  selectedIconComponent
+                  :
+                  <Icon
+                    name="check"
+                    style={{
+                      fontSize: 16,
+                      color: highlightChild ? mergedColors.disabled : mergedColors.success,
+                      paddingLeft: 10,
+                    }}
+                  />
+                }
+              </View>
+              :
+              null
           }
@@ -123,0 +127,0 @@ </TouchableOpacity>

lib/sectioned-multi-select.js

@@ -210,2 +210,4 @@ import React, { PureComponent } from 'react'
     chipsPosition: PropTypes.oneOf(['top', 'bottom']),
+    autoFocus: PropTypes.bool,
+    iconKey: PropTypes.string,
   }
@@ -253,2 +255,3 @@
     chipsPosition: 'bottom',
+    autoFocus: false,
   }
@@ -896,2 +899,3 @@
       chipsPosition,
+      autoFocus,
     } = this.props
@@ -946,2 +950,3 @@
                     placeholder={searchPlaceholderText}
+                    autoFocus={autoFocus}
                     selectTextOnFocus
@@ -1063,3 +1068,3 @@ placeholderTextColor={colors.searchPlaceholderTextColor}
               style={[{
-                flex: 1,
+                flexWrap: 'wrap',
                 flexDirection: 'row',
@@ -1066,0 +1071,0 @@ alignItems: 'center',

package.json

 {
   "name": "react-native-sectioned-multi-select",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "a multi (or single) select component with support for sub categories, search, chips.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -35,2 +35,4 @@ # react-native-sectioned-multi-select
 
+const icon = require('./icon.png');
+
 const items = [
@@ -40,2 +42,3 @@ {
     id: 0,
+    icon: icon, // local required file
     children: [{
@@ -64,2 +67,3 @@ name: "Apple",
     id: 1,
+    icon: { uri: "https://cdn4.iconfinder.com/data/icons/free-crystal-icons/512/Gemstone.png" } // web uri
     children: [{
@@ -82,2 +86,3 @@ name: "Quartz",
     id: 2,
+    icon: "filter_vintage" // material icons icon name
     children: [{
@@ -118,2 +123,3 @@ name: "Mother In Law\'s Tongue",
           subKey='children'
+          iconKey='icon'
           selectText='Choose some things...'
@@ -163,12 +169,13 @@ showDropDowns={true}
 | ------------- 				|-------------	| -----			|-----	|
-|items              |           | array    |the items |
+|items                  |               | array     |the items |
 |uniqueKey              | 'id'          | string    |the unique key for your items |
-|subKey           | 'sub'         | string    |the array of sub items within items |
-|displayKey           | 'name'         | string    |the key for the display name / title of the item |
+|subKey                 | 'sub'         | string    |the array of sub items within items |
+|displayKey             | 'name'        | string    |the key for the display name / title of the item |
+|iconKey                |               | string    |the key for the display icon / bitmap of the item |
 |selectedItems					| []						| array 		|the selected items |
-|onSelectedItemsChange	| 	| function	|function that runs when an item is toggled|
-|onSelectedItemObjectsChange  |   | function  |function that returns the selected items as their original objects instead of an array of ids |
-|onCancel  |   | function  |function that runs when the cancel button is pressed |
-|onConfirm  |   | function  |function that runs when the confirm button is pressed |
-|onToggleSelector  |   | function  |callback function that runs when the selector is toggled. receives a boolean for the open/close state of the modal |
+|onSelectedItemsChange	| 	            | function	|function that runs when an item is toggled|
+|onSelectedItemObjectsChange  |         | function  |function that returns the selected items as their original objects instead of an array of ids |
+|onCancel               |               | function  |function that runs when the cancel button is pressed |
+|onConfirm              |               | function  |function that runs when the confirm button is pressed |
+|onToggleSelector       |               | function  |callback function that runs when the selector is toggled. receives a boolean for the open/close state of the modal |
 
@@ -186,2 +193,3 @@ ### Options
 |hideSelect             | false         | bool      |hide the select component |
+|hideConfirm            | false         | bool      |hide the confirm buttom |
 |showCancelButton       | false         | bool      |Show a cancel button next to the confirm button. Dismisses modal and removes all selected items. |
@@ -211,2 +219,5 @@ | alwaysShowSelectText  | false         | bool      | Don't show number of items selected or the single selected item on the select label (unless `single` is true).
 |filterItems    | null | function | Use a custom filtering function for the search: receives searchText, items, props. Should return an array of item objects.| 
+|headerComponent         | undefined | object   |optional component to display above the search bar |
+|footerComponent         | undefined | object   |optional component to display below the confirm button |
+|stickyFooterComponent         | undefined | object   |optional component to display below the confirm button, but outside of the scroll view |
 |noResultsComponent         | Sorry, no results | object   |the component to display when the search results are empty |
@@ -282,1 +293,2 @@ |loadingComponent    | `ActivityIndicator` | object  |the component to display when `loading` is set to true |
   `cancelButton`  
+  `itemIconStyle`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3082024

increased by2.09%

Number of package files

28

increased by7.69%

Lines of code

2097

increased by2.69%

Number of lines in readme file

285

increased by4.01%

No dependency changes