diff --git a/docs/README.md b/docs/README.md index 1877001..1d5e7d7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -30,156 +30,329 @@ npm i react-native-paper-dropdown ## Basic Example ```javascript +import { useMemo, useState } from 'react'; +import { ScrollView, StyleSheet, View, type ViewStyle } from 'react-native'; import { Appbar, - DarkTheme, - DefaultTheme, - Provider, - Surface, + Divider, + Headline, + MD3DarkTheme, + MD3LightTheme, + PaperProvider, + Paragraph, + TextInput, ThemeProvider, -} from "react-native-paper"; -import React, { useState } from "react"; -import { SafeAreaView, StatusBar, StyleSheet, View } from "react-native"; -import DropDown from "react-native-paper-dropdown"; + TouchableRipple, +} from 'react-native-paper'; +import { + Dropdown, + MultiSelectDropdown, + type DropdownInputProps, + type DropdownItemProps, +} from 'react-native-paper-dropdown'; + +const OPTIONS = [ + { label: 'Male', value: 'male' }, + { label: 'Female', value: 'female' }, + { label: 'Other', value: 'other' }, +]; + +const MULTI_SELECT_OPTIONS = [ + { + label: 'White', + value: 'white', + }, + { + label: 'Red', + value: 'red', + }, + { + label: 'Blue', + value: 'blue', + }, + { + label: 'Green', + value: 'green', + }, + { + label: 'Orange', + value: 'orange', + }, +]; + +const CustomDropdownItem = ({ + width, + option, + value, + onSelect, + toggleMenu, + isLast, +}: DropdownItemProps) => { + const style: ViewStyle = useMemo( + () => ({ + height: 50, + width, + backgroundColor: + value === option.value + ? MD3DarkTheme.colors.primary + : MD3DarkTheme.colors.onPrimary, + justifyContent: 'center', + paddingHorizontal: 16, + }), + [option.value, value, width] + ); + + return ( + <> + { + onSelect?.(option.value); + toggleMenu(); + }} + style={style} + > + + {option.label} + + + {!isLast && } + + ); +}; + +const CustomDropdownInput = ({ + placeholder, + selectedLabel, + rightIcon, +}: DropdownInputProps) => { + return ( + + ); +}; -function App() { +export default function App() { const [nightMode, setNightmode] = useState(false); - const [showDropDown, setShowDropDown] = useState(false); - const [gender, setGender] = useState < string > ""; - const [showMultiSelectDropDown, setShowMultiSelectDropDown] = useState(false); - const [colors, setColors] = useState < string > ""; - const genderList = [ - { - label: "Male", - value: "male", - }, - { - label: "Female", - value: "female", - }, - { - label: "Others", - value: "others", - }, - ]; - const colorList = [ - { - label: "White", - value: "white", - }, - { - label: "Red", - value: "red", - }, - { - label: "Blue", - value: "blue", - }, - { - label: "Green", - value: "green", - }, - { - label: "Orange", - value: "orange", - }, - ]; + const [gender, setGender] = useState(); + const [colors, setColors] = useState([]); + const Theme = nightMode ? MD3DarkTheme : MD3LightTheme; return ( - - - - - - setNightmode(!nightMode)} - /> - - - - setShowDropDown(true)} - onDismiss={() => setShowDropDown(false)} - value={gender} - setValue={setGender} - list={genderList} + + + + + + setNightmode(!nightMode)} /> - - setShowMultiSelectDropDown(true)} - onDismiss={() => setShowMultiSelectDropDown(false)} - value={colors} - setValue={setColors} - list={colorList} - multiSelect - /> - - - - + + + + Single Select + + Default Dropdown + + + Default Dropdown (Outline Mode) + + + Custom Dropdown + + } + menuDownIcon={ + + } + CustomDropdownItem={CustomDropdownItem} + CustomDropdownInput={CustomDropdownInput} + /> + + + + + Multi Select + + Default Dropdown + + + Default Dropdown (Outline Mode) + + + + + + ); } const styles = StyleSheet.create({ - containerStyle: { + container: { flex: 1, }, - spacerStyle: { - marginBottom: 15, + formWrapper: { + margin: 16, }, - safeContainerStyle: { - flex: 1, - margin: 20, - justifyContent: "center", + spacer: { + height: 16, }, }); - -export default App; ``` ## Demo -![Demo](https://github.com/fateh999/react-native-paper-dropdown/blob/master/Demo.gif) +
+ ## Props ```typescript -{ - visible: boolean; - multiSelect?: boolean; - onDismiss: () => void; - showDropDown: () => void; - value: any; - setValue: (_value: any) => void; - label?: string | undefined; - placeholder?: string | undefined; - mode?: "outlined" | "flat" | undefined; - inputProps?: TextInputPropsWithoutTheme; - list: Array<{ - label: string; - value: string | number; - custom?: ReactNode; - }>; - dropDownContainerMaxHeight?: number; - dropDownContainerHeight?: number; - activeColor?: string; - theme?: Theme; - dropDownStyle?: ViewStyle; - dropDownItemSelectedTextStyle?: TextStyle; - dropDownItemSelectedStyle?: ViewStyle; - dropDownItemStyle?: ViewStyle; - dropDownItemTextStyle?: TextStyle; -} +import type { ForwardRefExoticComponent } from 'react'; +import type { PressableProps, View, ViewStyle } from 'react-native'; +import type { TextInputLabelProp } from 'react-native-paper/lib/typescript/components/TextInput/types'; +import type { TextInputProps } from 'react-native-paper'; + +export type DropdownInputProps = { + placeholder?: string; + label?: TextInputLabelProp; + rightIcon: JSX.Element; + selectedLabel?: string; + mode?: 'flat' | 'outlined'; + disabled?: boolean; + error?: boolean; +}; + +export type Option = { + label: string; + value: string; +}; + +export type DropdownProps = { + value?: string; + onSelect?: (value: string) => void; + options: Option[]; + menuUpIcon?: JSX.Element; + menuDownIcon?: JSX.Element; + maxMenuHeight?: number; + menuContentStyle?: ViewStyle; + CustomDropdownItem?: (props: DropdownItemProps) => JSX.Element; + CustomDropdownInput?: (props: DropdownInputProps) => JSX.Element; + Touchable?: ForwardRefExoticComponent< + PressableProps & React.RefAttributes + >; + testID?: string; + menuTestID?: string; +} & Pick< + TextInputProps, + 'placeholder' | 'label' | 'mode' | 'disabled' | 'error' +>; + +export type MultiSelectDropdownProps = { + value?: string[]; + onSelect?: (value: string[]) => void; + options: Option[]; + menuUpIcon?: JSX.Element; + menuDownIcon?: JSX.Element; + Touchable?: ForwardRefExoticComponent< + PressableProps & React.RefAttributes + >; + maxMenuHeight?: number; + menuContentStyle?: ViewStyle; + CustomMultiSelectDropdownItem?: ( + props: MultiSelectDropdownItemProps + ) => JSX.Element; + CustomMultiSelectDropdownInput?: (props: DropdownInputProps) => JSX.Element; + testID?: string; + menuTestID?: string; +} & Pick< + TextInputProps, + 'placeholder' | 'label' | 'mode' | 'disabled' | 'error' +>; + +export type DropdownItemProps = { + option: Option; + value?: string; + onSelect?: (value: string) => void; + width: number; + toggleMenu: () => void; + isLast: boolean; + menuItemTestID?: string; +}; + +export type MultiSelectDropdownItemProps = { + option: Option; + value?: string[]; + onSelect?: (value: string[]) => void; + width: number; + isLast: boolean; + menuItemTestID?: string; +}; ``` diff --git a/docs/old-version.md b/docs/old-version.md index 19aeb39..966ef79 100644 --- a/docs/old-version.md +++ b/docs/old-version.md @@ -1,9 +1,4 @@ -# react-native-paper-dropdown - -[![npm version](https://img.shields.io/npm/v/react-native-paper-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-paper-dropdown) -[![npm downloads](https://img.shields.io/npm/dm/react-native-paper-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-paper-dropdown) -[![npm](https://img.shields.io/npm/dt/react-native-paper-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-paper-dropdown) -[![npm](https://img.shields.io/npm/l/react-native-paper-dropdown?style=for-the-badge)](https://github.com/fateh999/react-native-paper-dropdown/blob/master/LICENSE) +# react-native-paper-dropdown v1 Material Design Dropdown Component using React Native Paper @@ -15,7 +10,7 @@ Material Design Dropdown Component using React Native Paper ```bash -yarn add react-native-paper-dropdown +yarn add react-native-paper-dropdown@1.0.7 ``` @@ -23,7 +18,7 @@ or ``` -npm i react-native-paper-dropdown +npm i react-native-paper-dropdown@1.0.7 ```