react-native-dropdown-picker - npm Package Compare versions

Comparing version 3.1.12-beta.4 to 3.1.12-beta.5

index.d.ts

@@ -40,5 +40,6 @@ import { ScrollView } from 'react-native-gesture-handler';
     searchableError?: () => JSX.Element;
-    selectedLabelLength: number,
-    labelLength: number,
-    scrollViewProps: React.Props<ScrollViewProps>,
+    selectedLabelLength?: number,
+    labelLength?: number,
+    scrollViewProps?: React.Props<ScrollViewProps>,
+    controller?: (instance: object) => void,
     onOpen?: () => void;
@@ -45,0 +46,0 @@ onClose?: () => void;

package.json

 {
   "name": "react-native-dropdown-picker",
-  "version": "3.1.12-beta.4",
+  "version": "3.1.12-beta.5",
   "description": "A single or multiple, searchable item picker (dropdown) component for react native which supports both Android & iOS.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -10,2 +10,6 @@
 
+## Dependencies
+Our package only requires `react-native-vector-icons` to be installed.  
+https://github.com/oblador/react-native-vector-icons
+
 ## Changelog
@@ -23,2 +27,7 @@ + Added multiple items feature.
 + Added types file.
++ Added `selectedLabelLength` property.
++ Added `labelLength` property.
++ Added `scrollViewProps` property.
++ Added `controller` property.
++ Some bug-fixes.
 
@@ -147,2 +156,52 @@ ## Getting Started
 
+### Controller
+The `controller` property gives you full access to the DropDownPicker methods and properties.  
+#### Usage
+```javascript
+constructor(props) {
+    ...
+    this.controller;
+    ...
+}
+
+<DropDownPicker
+    ...
+    controller={(instance) => this.controller = instance}
+    ...
+/>
+```
+1. Reset the state.
+
+    You may want to reset the state of your picker.  
+    ```javascript
+    this.controller.reset();
+    ````
+2. Select an item manually.
+
+    You may want to select an item manually.  
+    ```javascript
+    // Single
+    this.controller.select({
+        label: 'UK',
+        value: 'uk',
+        icon: () => {},
+    });
+
+    // Multiple
+    this.controller.select([
+        {
+            label: 'UK',
+            value: 'uk',
+            icon: () => {},
+        }
+    ]);
+    ```
+3. Open, close or toggle.
+
+    ```javascript
+    this.controller.open();
+    this.controller.close();
+    this.controller.toggle();
+    ```
+
 ### Styling the component
@@ -228,3 +287,3 @@ You have 12 options to style the component.
 
-    Assigns a new color to the placeholder text
+    Assigns a new color to the placeholder text.
     ```javacript
@@ -337,7 +396,7 @@ searchablePlaceholderTextColor="silver"
     Demo: https://snack.expo.io/@hossein-zare/823437
-4. DropDownPicker wrapped by `<View style={{backgroundColor: '...'}}>`
+4. DropDownPicker wrapped by `<View style={{backgroundColor: ..., border[...]: ..., elevation: ...}}>`  
+    These props will make your dropdown untouchable.  
+    Remove all the `backgroundColor`, `border[...]`, `elevation`, ... style properties from the parent element.  
+    https://github.com/hossein-zare/react-native-dropdown-picker/issues/40#issuecomment-651744446
 
-   Remove the `backgroundColor` from the parent element.  
-   https://github.com/hossein-zare/react-native-dropdown-picker/issues/40#issuecomment-651744446
-
 5. Multiple Pickers
@@ -390,6 +449,10 @@ ```javascript
 |`searchablePlaceholderTextColor`|TextInput placeholder text color.|`string`|`gray`|No
-|`searchableStyle`|Additional styles for the `TextInput`.|`object`|`{}`|No
+|`searchableStyle`|Additional styles for the `TextInput`|`object`|`{}`|No
 |`searchableError`|Shows a jsx element when nothing found.|`func`|`() => <Text>Not Found</Text>`|No
+|`selectedLabelLength`|Specify length for the selected label.|`number`|`1000`|No
+|`labelLength`|Specify length for the labels.|`number`|`1000`|No
+|`scrollViewProps`|Add props to the `ScrollView`|`object`|`{}`|No
+|`controller`|Gives you access to the methods and properties.|`func`|`(instance) => {}`|No
 |`onOpen`|Fires when you open the picker.|`func`|`() => {}`|No
 |`onClose`|Fires when you close the picker.|`func`|`() => {}`|No
 |`onChangeItem`|Callback which returns `item` and `index`. The `item` is the selected object or an array of the selected values.|`func`|`(item, index) => {}`|No

src/index.js

@@ -10,3 +10,2 @@ import React from 'react';
     TextInput,
-    FlatList,
     ViewPropTypes
@@ -125,2 +124,11 @@ } from 'react-native';
 
+    componentDidMount() {
+        this.props.controller(this);
+    }
+
+    reset() {
+        const item = this.props.multiple ? [] : this.null();
+        this.props.onChangeItem(item, -1);
+    }
+
     null() {
@@ -141,5 +149,5 @@ return {
             if (isVisible) {
-        		this.props.onOpen();
+        		this.open(false);
         	} else {
-        		this.props.onClose();
+        		this.close(false);
         	}
@@ -149,3 +157,15 @@ });
 
-    select(item, index) {
+    open(setState = true) {
+        this.setState({
+            ...(setState && {isVisible: true})
+        }, () => this.props.onOpen());
+    }
+
+    close(setState = true) {
+        this.setState({
+            ...(setState && {isVisible: false})
+        }, () => this.props.onClose());
+    }
+
+    select(item) {
         const { multiple } = this.state.props;
@@ -166,2 +186,4 @@ if (! multiple) {
 
+            const index = this.state.props.items.findIndex(i => i.value === item.value);
+
             // onChangeItem callback
@@ -218,3 +240,3 @@ this.props.onChangeItem(item, index);
 
-    getLabel(item) {
+    getLabel(item, selected = false) {
         if (typeof item !== 'object')
@@ -224,3 +246,3 @@ return item;
         const len = item.label.length;
-        const label = item.label.substr(0, this.props.labelLength);
+        const label = item.label.substr(0, selected ? this.props.selectedLabelLength : this.props.labelLength);
         const len2 = label.length;
@@ -235,3 +257,3 @@
         const isPlaceholderActive = this.state.choice.label === null;
-        const label = isPlaceholderActive ? (placeholder) : this.getLabel(this.state.choice?.label);
+        const label = isPlaceholderActive ? (placeholder) : this.getLabel(this.state.choice?.label, true);
         const placeholderStyle = isPlaceholderActive && this.props.placeholderStyle;
@@ -321,3 +343,3 @@ const opacity = disabled ? 0.5 : 1;
                                 key={index}
-                                onPress={() => this.select(item, index)}
+                                onPress={() => this.select(item)}
                                 style={[styles.dropDownItem, this.props.itemStyle, (
@@ -409,2 +431,3 @@ this.state.choice.value === item.value && this.props.activeItemStyle
     scrollViewProps: {},
+    controller: () => {},
     onOpen: () => {},
@@ -451,2 +474,3 @@ onClose: () => {},
     scrollViewProps: PropTypes.object,
+    controller: PropTypes.func,
     onOpen: PropTypes.func,
@@ -453,0 +477,0 @@ onClose: PropTypes.func,

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

71525

increased by3.61%

Lines of code

538

increased by3.86%

Number of lines in readme file

453

increased by16.15%

No dependency changes