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

Comparing version 5.2.0 to 5.2.2-beta.0

index.d.ts

@@ -26,2 +26,4 @@ declare module "react-native-dropdown-picker" {
       testID?: string;
+      containerStyle?: ViewStyle;
+      labelStyle?: TextStyle;
     };
@@ -88,2 +90,3 @@
       disabled: boolean;
+      props: ViewProps;
       custom: boolean;
@@ -107,2 +110,3 @@ isSelected: boolean;
       onPress: () => void;
+      setPosition: (value: ValueType, y: number) => void;
       theme: ThemeNameType;
@@ -127,3 +131,3 @@ THEME: ThemeType;
     export type ThemeNameType = "DEFAULT" | "LIGHT" | "DARK";
-    export type ThemeType = object; //TODO: give this a specific type; maybe something like StyleSheet.Styles? or an object of all the fields in each type definition in the source files
+    export type ThemeType = object;
   
@@ -197,2 +201,3 @@ export type DropDownPickerProps = {
       stickyHeader?: boolean;
+      autoScroll?: boolean;
       ArrowUpIconComponent?: (props: {style: StyleProp<ViewStyle>}) => JSX.Element;
@@ -207,2 +212,3 @@ ArrowDownIconComponent?: (props: {style: StyleProp<ViewStyle>}) => JSX.Element;
       props?: ViewProps;
+      itemProps?: ViewProps;
       modalProps?: ModalProps;
@@ -261,4 +267,2 @@ flatListProps?: FlatListProps<ItemType>;
     export default DropDownPicker;
-  }
-    
-  //TODO: remove uses of the ambiguous "any" and "object" types
+  }

index.js

@@ -1,2 +0,2 @@
-import { MODE, LIST_MODE, DROPDOWN_DIRECTION, LANGUAGE, TRANSLATIONS, HELPERS } from './src/constants';
+import { MODE, LIST_MODE, DROPDOWN_DIRECTION, LANGUAGE, TRANSLATIONS } from './src/constants';
 import THEMES from './src/themes';
@@ -43,4 +43,2 @@ import Picker from './src/components/Picker';
 
-Picker.HELPERS = HELPERS;
-
 export default Picker;

package.json

 {
   "name": "react-native-dropdown-picker",
-  "version": "5.2.0",
+  "version": "5.2.2-beta.0",
   "description": "A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.",
@@ -5,0 +5,0 @@ "keywords": [

src/components/Picker.js

@@ -117,2 +117,3 @@ import React, {
     stickyHeader = false,
+    autoScroll = false,
     ArrowUpIconComponent = null,
@@ -127,2 +128,3 @@ ArrowDownIconComponent = null,
     props = {},
+    itemProps = {},
     modalProps = {},
@@ -158,5 +160,10 @@ flatListProps = {},
     const [direction, setDirection] = useState(GET_DROPDOWN_DIRECTION(dropDownDirection));
+
     const badgeFlatListRef = useRef();
     const pickerRef = useRef(null);
-    const initialization = useRef(false);
+    const initializationRef = useRef(false);
+    const itemPositionsRef = useRef({});
+    const flatListRef = useRef();
+    const scrollViewRef = useRef();
+    const valueRef = useRef(null);
 
@@ -253,6 +260,6 @@ const THEME = useMemo(() => THEMES[theme].default, [theme]);
 
-        if (initialization.current) {
+        if (initializationRef.current) {
             onChangeValue(value);
         } else {
-            initialization.current = true;
+            initializationRef.current = true;
         }
@@ -262,2 +269,42 @@ }, [value, items]);
     /**
+     * Keep a ref of the value.
+     */
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+
+    /**
+     * Automatically scroll to the first selected item.
+     */
+    useEffect(() => {
+        if (open && autoScroll) {
+            scroll();
+        }
+    }, [open]);
+
+    /**
+     * Scroll the the first selected item.
+     */
+    const scroll = useCallback(() => {
+        setTimeout(() => {
+            if ((scrollViewRef.current || flatListRef.current)) {
+                const isArray = Array.isArray(valueRef.current);
+
+                if (valueRef.current === null || (isArray && valueRef.current.length === 0))
+                    return;
+
+                const value = isArray ? valueRef.current[0] : valueRef.current;
+
+                if (itemPositionsRef.current.hasOwnProperty(value)) {
+                    (scrollViewRef.current ?? flatListRef.current).scrollTo({
+                        x: 0,
+                        y: itemPositionsRef.current[value],
+                        animated: true,
+                    });
+                }
+            }
+        }, 200);
+    }, []);
+
+    /**
      * dropDownDirection changed.
@@ -1273,2 +1320,3 @@ */
                 custom={item.custom ?? false}
+                props={itemProps}
                 isSelected={isSelected}
@@ -1291,2 +1339,3 @@ IconComponent={IconComponent}
                 onPress={onPressItem}
+                setPosition={setItemPosition}
                 theme={theme}
@@ -1317,2 +1366,3 @@ THEME={THEME}
         multiple,
+        itemProps,
         categorySelectable,
@@ -1325,2 +1375,11 @@ onPressItem,
     /**
+     * Set item position.
+     * @param {string|number|boolean} value
+     * @param {number} y
+     */
+    const setItemPosition = useCallback(autoScroll && ((value, y) => {
+        itemPositionsRef.current[value] = y;
+    }), []);
+
+    /**
      * The item separator.
@@ -1488,2 +1547,3 @@ * @returns {JSX.Element|null}
         <FlatList
+            ref={flatListRef}
             style={styles.flex}
@@ -1517,3 +1577,3 @@ contentContainerStyle={THEME.flatListContentContainer}
         return (
-            <ScrollView nestedScrollEnabled={true} stickyHeaderIndices={stickyHeaderIndices} {...scrollViewProps} >
+            <ScrollView ref={scrollViewRef} nestedScrollEnabled={true} stickyHeaderIndices={stickyHeaderIndices} {...scrollViewProps}>
                 {_items.map((item, index) => { 
@@ -1520,0 +1580,0 @@ return (

src/components/RenderListItem.js

@@ -22,2 +22,3 @@ import React, {
     disabled,
+    props,
     custom,
@@ -41,2 +42,3 @@ isSelected,
     onPress,
+    setPosition,
     THEME
@@ -92,2 +94,3 @@ }) {
         ...[_listParentChildContainerStyle].flat(),
+        ...[item?.containerStyle ?? {}].flat(),
         ...[_selectedItemContainerStyle].flat(),
@@ -138,2 +141,3 @@ ...[_customItemContainerStyle].flat(),
         ...[_listParentChildLabelStyle].flat(),
+        ...[item?.labelStyle ?? {}].flat(),
         ...[_selectedItemLabelStyle].flat(),
@@ -155,4 +159,11 @@ ...[_customItemLabelStyle].flat(),
 
+    /**
+     * onLayout.
+     */
+    const onLayout = useCallback(({nativeEvent: {layout: {y}}}) => {
+        setPosition(value, y);
+    }, [value]);
+
     return (
-        <TouchableOpacity style={_listItemContainerStyle} onPress={__onPress} disabled={selectable === false || disabled} testID={item.testID}>
+        <TouchableOpacity style={_listItemContainerStyle} onPress={__onPress} onLayout={onLayout} {...props} disabled={selectable === false || disabled} testID={item.testID}>
             {IconComponent}
@@ -159,0 +170,0 @@ <Text style={_listItemLabelStyle}>

src/constants/index.js

@@ -129,14 +129,2 @@ import {I18nManager} from 'react-native';
     return chr;
-}
-
-export const HELPERS = {
-    GET_SELECTED_ITEM: (items, value, key = "value") => {
-        return items.find(item => item[key] === value);
-    },
-    GET_SELECTED_ITEMS: (items, values, key = "value") => {
-        if (values === null)
-            return [];
-
-        return items.filter(item => values.includes(item[key]));
-    }
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

151871

increased by1.09%

Lines of code

2611

increased by2.15%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes