react-native-multi-selectbox - npm Package Compare versions

Comparing version 1.4.3 to 1.4.5

index.js

@@ -17,3 +17,3 @@ import React, { useState, memo, useMemo } from 'react'
 }
-const renderItemStyle = { flexGrow: 1 }
+const renderItemStyle = { flexShrink: 1 }
 function SelectBox({
@@ -68,3 +68,7 @@ labelStyle,
             </TouchableOpacity>
-            <Toggle checked={selectedValues.indexOf(item) > -1} onTouch={onPressMultiItem()} />
+            <Toggle
+              iconColor={toggleIconColor}
+              checked={selectedValues.indexOf(item) > -1}
+              onTouch={onPressMultiItem()}
+            />
           </>
@@ -138,2 +142,5 @@ ) : (
     selectedValues,
+    arrowIconColor = Colors.primary,
+    searchIconColor = Colors.primary,
+    toggleIconColor = Colors.primary,
   } = props
@@ -217,6 +224,5 @@ const filteredSuggestions = useMemo(
           <TouchableOpacity onPress={onPressShowOptions()} hitSlop={hitSlop}>
-            {selectIcon ? selectIcon : <Icon name={showOptions ? 'upArrow' : 'downArrow'} fill={Colors.primary} />}
+            {selectIcon ? selectIcon : <Icon name={showOptions ? 'upArrow' : 'downArrow'} fill={arrowIconColor} />}
           </TouchableOpacity>
         </View>
-
         {/* Options wrapper */}
@@ -284,3 +290,3 @@ {showOptions && (
             />
-            <Icon name="searchBoxIcon" fill={Colors.primary} />
+            <Icon name="searchBoxIcon" fill={searchIconColor} />
           </View>
@@ -287,0 +293,0 @@ )}

package.json

 {
   "name": "react-native-multi-selectbox",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Platform independent (Android / iOS) Selextbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user-interface & user-experience on both platforms..",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -25,3 +25,3 @@ # react-native-multi-selectbox
 import { Text, View } from 'react-native'
-import SelectBox from 'react-native-multi-selectbox'
+import SelectBox from './lib'
 import { xorBy } from 'lodash'
@@ -34,47 +34,47 @@
     item: 'Juventus',
-    id: 'JUVE'
+    id: 'JUVE',
   },
   {
     item: 'Real Madrid',
-    id: 'RM'
+    id: 'RM',
   },
   {
     item: 'Barcelona',
-    id: 'BR'
+    id: 'BR',
   },
   {
     item: 'PSG',
-    id: 'PSG'
+    id: 'PSG',
   },
   {
     item: 'FC Bayern Munich',
-    id: 'FBM'
+    id: 'FBM',
   },
   {
     item: 'Manchester United FC',
-    id: 'MUN'
+    id: 'MUN',
   },
   {
     item: 'Manchester City FC',
-    id: 'MCI'
+    id: 'MCI',
   },
   {
     item: 'Everton FC',
-    id: 'EVE'
+    id: 'EVE',
   },
   {
     item: 'Tottenham Hotspur FC',
-    id: 'TOT'
+    id: 'TOT',
   },
   {
     item: 'Chelsea FC',
-    id: 'CHE'
+    id: 'CHE',
   },
   {
     item: 'Liverpool FC',
-    id: 'LIV'
+    id: 'LIV',
   },
   {
     item: 'Arsenal FC',
-    id: 'ARS'
+    id: 'ARS',
   },
@@ -84,9 +84,9 @@
     item: 'Leicester City FC',
-    id: 'LEI'
-  }
+    id: 'LEI',
+  },
 ]
 
 function App() {
-  const [selectedLocations, setSelectedLocations] = useState({})
-  const [selectedValues, setSelectedValues] = useState([])
+  const [selectedTeam, setSelectedTeam] = useState({})
+  const [selectedTeams, setSelectedTeams] = useState([])
   return (
@@ -101,3 +101,3 @@ <View style={{ margin: 30 }}>
         options={K_OPTIONS}
-        value={selectedLocations}
+        value={selectedTeam}
         onChange={onChange()}
@@ -111,3 +111,3 @@ hideInputFilter={false}
         options={K_OPTIONS}
-        selectedValues={selectedValues}
+        selectedValues={selectedTeams}
         onMultiSelect={onMultiChange()}
@@ -121,7 +121,7 @@ onTapClose={onMultiChange()}
   function onMultiChange() {
-    return item => setSelectedValues(xorBy(selectedValues, [item], 'id'))
+    return (item) => setSelectedTeams(xorBy(selectedTeams, [item], 'id'))
   }
 
   function onChange() {
-    return val => setSelectedLocations(val)
+    return (val) => setSelectedTeam(val)
   }
@@ -132,2 +132,3 @@ }
 
+
 ```
@@ -157,2 +158,5 @@
 | selectedItemStyle         | style object |                                                                                                                                                        Default style |
+| arrowIconColor         | color string |                                                                                                                                                        Default primary color |
+| searchIconColor         | color string |                                                                                                                                                        Default primary color |
+| toggleIconColor         | color string |                                                                                                                                                        Default primary color |
 | options                   |    array     | `[{ item: 'Juventus', id: 'JUVE'},{ item: 'Real Madrid', id: 'RM'},{ item: 'Barcelona', id: 'BR'},{ item: 'PSG', id: 'PSG'},{ item: 'FC Bayern Munich', id: 'FBM'}]` |
@@ -159,0 +163,0 @@

src/components/Toggle.js

@@ -6,6 +6,6 @@ import React, { memo } from 'react'
 
-function Toggle({ onTouch, checked, ...props }) {
+function Toggle({ onTouch, checked, iconColor = Colors.primary, ...props }) {
   return (
     <TouchableOpacity onPress={onTouch} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} {...props}>
-      <Icon name={checked ? 'deleteCircle' : 'addCircle'} fill={Colors.primary} />
+      <Icon name={checked ? 'deleteCircle' : 'addCircle'} fill={iconColor} />
     </TouchableOpacity>
@@ -12,0 +12,0 @@ )

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

22940

increased by3.82%

Lines of code

484

increased by1.47%

Number of lines in readme file

167

increased by2.45%

No dependency changes