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

Comparing version 1.2.9 to 1.3.0

index.js

@@ -10,3 +10,16 @@ import React, { useState, memo } from 'react'
 
-function SelectBox({ ...props }) {
+function SelectBox({
+  labelStyle,
+  containerStyle,
+  inputFilterContainerStyle,
+  inputFilterStyle,
+  optionsLabelStyle,
+  optionContainerStyle,
+  multiOptionContainerStyle,
+  multiOptionsLabelStyle,
+  multiListEmptyLabelStyle,
+  listEmptyLabelStyle,
+  selectedItemStyle,
+  ...props
+}) {
   const [inputValue, setInputValue] = useState('')
@@ -19,3 +32,5 @@ const [showOptions, setShowOptions] = useState(false)
   function renderLabel(item) {
-    return <Text style={{ fontSize: 17, color: 'rgba(60, 60, 67, 0.6)' }}>{capitalize(item)}</Text>
+    return (
+      <Text style={{ fontSize: 17, color: 'rgba(60, 60, 67, 0.6)', ...optionsLabelStyle }}>{capitalize(item)}</Text>
+    )
   }
@@ -35,3 +50,4 @@ function renderItem({ item }) {
           paddingRight: 10,
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
+          ...optionContainerStyle
         }}>
@@ -93,5 +109,6 @@ {isMulti ? (
           backgroundColor: Colors.primary,
-          flexGrow: 1
+          flexGrow: 1,
+          ...multiOptionContainerStyle
         }}>
-        <Text style={{ fontSize: 10, color: '#fff' }}>{capitalize(label.item)}</Text>
+        <Text style={{ fontSize: 10, color: '#fff', ...multiOptionsLabelStyle }}>{capitalize(label.item)}</Text>
         <TouchableOpacity
@@ -118,3 +135,5 @@ style={{ marginLeft: 15 }}
         onPress={() => setShowOptions(!showOptions)}>
-        <Text style={{ fontSize: 17, color: 'rgba(60, 60, 67, 0.3)' }}>{inputPlaceholder || 'SelectGroup(s)'}</Text>
+        <Text style={{ fontSize: 17, color: 'rgba(60, 60, 67, 0.3)', ...multiListEmptyLabelStyle }}>
+          {inputPlaceholder || 'SelectGroup(s)'}
+        </Text>
       </TouchableOpacity>
@@ -136,3 +155,4 @@ )
               fontSize: 17,
-              color: 'rgba(60, 60, 67, 0.6)'
+              color: 'rgba(60, 60, 67, 0.6)',
+              ...listEmptyLabelStyle
             }}>
@@ -151,3 +171,3 @@ No results found
         }}>
-        <Text style={{ fontSize: 12, color: 'rgba(60, 60, 67, 0.6)', paddingBottom: 4 }}>{label}</Text>
+        <Text style={{ fontSize: 12, color: 'rgba(60, 60, 67, 0.6)', paddingBottom: 4, ...labelStyle }}>{label}</Text>
         <View
@@ -161,3 +181,4 @@ style={{
             paddingRight: 20,
-            paddingBottom: 8
+            paddingBottom: 8,
+            ...containerStyle
           }}>
@@ -176,3 +197,8 @@ <View style={{ paddingRight: 20, flexGrow: 1 }}>
               <TouchableOpacity hitSlop={hitSlop} onPress={() => setShowOptions(!showOptions)}>
-                <Text style={{ fontSize: 17, color: isEmpty(value.item) ? 'rgba(60, 60, 67, 0.3)' : '#000' }}>
+                <Text
+                  style={{
+                    fontSize: 17,
+                    color: isEmpty(value.item) ? 'rgba(60, 60, 67, 0.3)' : '#000',
+                    ...selectedItemStyle
+                  }}>
                   {capitalize(value.item) || label}
@@ -213,3 +239,4 @@ </Text>
                       paddingRight: 18,
-                      justifyContent: 'space-between'
+                      justifyContent: 'space-between',
+                      ...inputFilterContainerStyle
                     }}>
@@ -225,3 +252,4 @@ <TextInput
                         fontSize: 12,
-                        flexGrow: 1
+                        flexGrow: 1,
+                        ...inputFilterStyle
                       }}
@@ -228,0 +256,0 @@ />

package.json

 {
   "name": "react-native-multi-selectbox",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "React Native customized multi select for iOS/Android",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -98,2 +98,13 @@ # react-native-multi-selectbox
 | selectIcon | component      |    <Icon name={'downArrow'} /> |
+| labelStyle | style object | Default style |
+| containerStyle | style object | Default style |
+| inputFilterContainerStyle | style object | Default style |
+| inputFilterStyle | style object | Default style |
+| optionsLabelStyle | style object | Default style |
+| optionContainerStyle | style object | Default style |
+| multiOptionContainerStyle | style object | Default style |
+| multiOptionsLabelStyle | style object | Default style |
+| multiListEmptyLabelStyle | style object | Default style |
+| listEmptyLabelStyle | style object | Default style |
+| selectedItemStyle | style object | Default style |
 | options | array      |  ``` [{ item: 'Afghanistan', id: 'AF' },{ item: 'land Islands', id: 'AX' },{ item: 'Albania', id: 'AL' },{ item: 'Algeria', id: 'DZ' },{ item: 'American Samoa', id: 'AS' },{ item: 'AndorrA', id: 'AD' },{ item: 'Angola', id: 'AO' },{ item: 'Anguilla', id: 'AI' },{ item: 'Antarctica', id: 'AQ' },{ item: 'Antigua and Barbuda', id: 'AG' },{ item: 'Argentina', id: 'AR' },{ item: 'Armenia', id: 'AM' },{ item: 'Aruba', id: 'AW' },{ item: 'Australia', id: 'AU' },{ item: 'Austria', id: 'AT' },{ item: 'Azerbaijan', id: 'AZ' },{ item: 'Bahamas', id: 'BS' },{ item: 'Bahrain', id: 'BH' },{ item: 'Bangladesh', id: 'BD' },{ item: 'Barbados', id: 'BB' }] ```|
@@ -100,0 +111,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

17961

increased by8.1%

Lines of code

394

increased by7.65%

Number of lines in readme file

122

increased by9.91%

No dependency changes