fateh999 / react-native-paper-dropdown

Dropdown using react native paper TextInput and Menu
MIT License
135 stars 74 forks source link

Add testID prop #78

Closed ivukusic closed 3 months ago

ivukusic commented 2 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-paper-dropdown@1.0.7 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper-dropdown/dist/DropDown.d.ts b/node_modules/react-native-paper-dropdown/dist/DropDown.d.ts
index 1354c24..c09159e 100644
--- a/node_modules/react-native-paper-dropdown/dist/DropDown.d.ts
+++ b/node_modules/react-native-paper-dropdown/dist/DropDown.d.ts
@@ -29,6 +29,7 @@ export interface DropDownPropsInterface {
     dropDownItemStyle?: ViewStyle;
     dropDownItemTextStyle?: TextStyle;
     accessibilityLabel?: string;
+    testID?: string;
 }
 declare type TextInputPropsWithoutTheme = Without<TextInputProps, "theme">;
 declare const DropDown: React.ForwardRefExoticComponent<DropDownPropsInterface & React.RefAttributes<TouchableWithoutFeedback>>;
diff --git a/node_modules/react-native-paper-dropdown/dist/DropDown.js b/node_modules/react-native-paper-dropdown/dist/DropDown.js
index 19bca20..6527adc 100644
--- a/node_modules/react-native-paper-dropdown/dist/DropDown.js
+++ b/node_modules/react-native-paper-dropdown/dist/DropDown.js
@@ -3,7 +3,7 @@ import { Checkbox, Divider, Menu, TextInput, TouchableRipple, useTheme, } from "
 import React, { forwardRef, useEffect, useState, useCallback, Fragment, } from "react";
 const DropDown = forwardRef((props, ref) => {
     const activeTheme = useTheme();
-    const { multiSelect = false, visible, onDismiss, showDropDown, value, setValue, activeColor, mode, label, placeholder, inputProps, list, dropDownContainerMaxHeight, dropDownContainerHeight, theme, dropDownStyle, dropDownItemStyle, dropDownItemSelectedStyle, dropDownItemTextStyle, dropDownItemSelectedTextStyle, accessibilityLabel, } = props;
+    const { multiSelect = false, visible, onDismiss, showDropDown, value, setValue, activeColor, mode, label, placeholder, inputProps, list, dropDownContainerMaxHeight, dropDownContainerHeight, theme, dropDownStyle, dropDownItemStyle, dropDownItemSelectedStyle, dropDownItemTextStyle, dropDownItemSelectedTextStyle, accessibilityLabel, testID } = props;
     const [displayValue, setDisplayValue] = useState("");
     const [inputLayout, setInputLayout] = useState({
         height: 0,
@@ -52,7 +52,7 @@ const DropDown = forwardRef((props, ref) => {
             setValue(currentValue);
         }
     }, [value]);
-    return (<Menu visible={visible} onDismiss={onDismiss} theme={theme} anchor={<TouchableRipple ref={ref} onPress={showDropDown} onLayout={onLayout} accessibilityLabel={accessibilityLabel}>
+    return (<Menu visible={visible} onDismiss={onDismiss} theme={theme} anchor={<TouchableRipple ref={ref} onPress={showDropDown} onLayout={onLayout} accessibilityLabel={accessibilityLabel} testID={testID}>
             <View pointerEvents={"none"}>
               <TextInput value={displayValue} mode={mode} label={label} placeholder={placeholder} pointerEvents={"none"} theme={theme} right={<TextInput.Icon name={visible ? "menu-up" : "menu-down"}/>} {...inputProps}/>
             </View>
@@ -72,7 +72,7 @@ const DropDown = forwardRef((props, ref) => {
                 }),
         }}>
           {list.map((_item, _index) => (<Fragment key={_item.value}>
-              <TouchableRipple style={{
+              <TouchableRipple  style={{
                 flexDirection: "row",
                 alignItems: "center",
             }} onPress={() => {
@@ -80,9 +80,10 @@ const DropDown = forwardRef((props, ref) => {
                 if (onDismiss) {
                     onDismiss();
                 }
+                
             }}>
                 <Fragment>
-                  <Menu.Item titleStyle={{
+                  <Menu.Item testID={testID + "Item"} titleStyle={{
                 color: isActive(_item.value)
                     ? activeColor || (theme || activeTheme).colors.primary
                     : (theme || activeTheme).colors.text,

This issue body was partially generated by patch-package.

fateh999 commented 3 months ago

Should be fixed in latest release v2.0.3, did a full refactor of library so docs are in WIP, meanwhile you can check the example folder for demo code.

jahirfiquitiva commented 2 months ago

@fateh999 Would you mind allowing adding testID for the menu items? and the input? thanks!