feat: add props mode

hoaphantn7604 · Mar 25, 2023 · 556b6a5 · 556b6a5
1 parent 2ceec7f
commit 556b6a5
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@ yarn add react-native-element-dropdown
 ### Dropdown Props
 | Props              | Params                                          | isRequire | Description                                                         |
 | ------------------ | ----------------------------------------------- | --------- | ------------------------------------------------------------------- |
+| mode               | 'default' or 'modal'                            | No        | Mode 'modal' is show the dropdown in the middle of the screen.      |
 | data               | Array                                           | Yes       | Data is a plain array                                               |
 | labelField         | String                                          | Yes       | Extract the label from the data item                                |
 | valueField         | String                                          | Yes       | Extract the primary key from the data item                          |

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -87,6 +87,7 @@ const DropdownComponent: <T>(
       onConfirmSelectItem,
       accessibilityLabel,
       itemAccessibilityLabelField,
+      mode = 'default',
     } = props;
 
     const ref = useRef<View>(null);
@@ -107,11 +108,10 @@ const DropdownComponent: <T>(
     }, []);
     const styleHorizontal: ViewStyle = useMemo(() => {
       return {
-        marginBottom: 20,
-        width: W / 2,
+        width: orientation === 'LANDSCAPE' ? W / 2 : '100%',
         alignSelf: 'center',
       };
-    }, [W]);
+    }, [W, orientation]);
 
     useImperativeHandle(currentRef, () => {
       return { open: eventOpen, close: eventClose };
@@ -161,7 +161,9 @@ const DropdownComponent: <T>(
     const _measure = useCallback(() => {
       if (ref && ref?.current) {
         ref.current.measureInWindow((pageX, pageY, width, height) => {
-          const isFull = orientation === 'LANDSCAPE' && !isTablet;
+          const isFull = isTablet
+            ? false
+            : mode === 'modal' || orientation === 'LANDSCAPE';
           const top = isFull ? 20 : height + pageY + 2;
           const bottom = H - top + height;
           const left = I18nManager.isRTL ? W - width - pageX : pageX;
@@ -176,7 +178,7 @@ const DropdownComponent: <T>(
           });
         });
       }
-    }, [H, W, orientation]);
+    }, [H, W, orientation, mode]);
 
     const onKeyboardDidShow = useCallback(
       (e: KeyboardEvent) => {
@@ -607,13 +609,14 @@ const DropdownComponent: <T>(
                             justifyContent: 'flex-end',
                             paddingBottom: extendHeight,
                           },
+                      isFull && styles.fullScreen,
                     ])}
                   >
                     <View
                       style={StyleSheet.flatten([
                         styles.container,
-                        containerStyle,
                         isFull ? styleHorizontal : styleVertical,
+                        containerStyle,
                       ])}
                     >
                       {_renderList(isTopPosition)}

diff --git a/src/components/Dropdown/model.ts b/src/components/Dropdown/model.ts
@@ -53,6 +53,7 @@ export interface DropdownProps<T> {
   accessibilityLabel?: string;
   itemAccessibilityLabelField?: string;
   inverted?: boolean;
+  mode?: 'default' | 'modal';
   onChange: (item: T) => void;
   renderLeftIcon?: (visible?: boolean) => JSX.Element | null | undefined;
   renderRightIcon?: (visible?: boolean) => JSX.Element | null | undefined;

diff --git a/src/components/Dropdown/styles.ts b/src/components/Dropdown/styles.ts
@@ -61,4 +61,8 @@ export const styles = StyleSheet.create({
     margin: 6,
     height: 45,
   },
+  fullScreen: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
diff --git a/src/components/MultiSelect/index.tsx b/src/components/MultiSelect/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import _ from 'lodash';
 import React, {
   JSXElementConstructor,
@@ -91,6 +92,7 @@ const MultiSelectComponent: <T>(
       accessibilityLabel,
       itemAccessibilityLabelField,
       visibleSelectedItem = true,
+      mode = 'default',
     } = props;
 
     const ref = useRef<View>(null);
@@ -110,8 +112,11 @@ const MultiSelectComponent: <T>(
       };
     }, []);
     const styleHorizontal: ViewStyle = useMemo(() => {
-      return { marginBottom: 20, width: W / 2, alignSelf: 'center' };
-    }, [W]);
+      return {
+        width: orientation === 'LANDSCAPE' ? W / 2 : '100%',
+        alignSelf: 'center',
+      };
+    }, [W, orientation]);
 
     useImperativeHandle(currentRef, () => {
       return { open: eventOpen, close: eventClose };
@@ -164,7 +169,9 @@ const MultiSelectComponent: <T>(
     const _measure = useCallback(() => {
       if (ref && ref?.current) {
         ref.current.measureInWindow((pageX, pageY, width, height) => {
-          const isFull = orientation === 'LANDSCAPE' && !isTablet;
+          const isFull = isTablet
+            ? false
+            : mode === 'modal' || orientation === 'LANDSCAPE';
           const top = isFull ? 20 : height + pageY + 2;
           const bottom = H - top + height;
           const left = I18nManager.isRTL ? W - width - pageX : pageX;
@@ -179,7 +186,7 @@ const MultiSelectComponent: <T>(
           });
         });
       }
-    }, [H, W, orientation]);
+    }, [H, W, orientation, mode]);
 
     const onKeyboardDidShow = useCallback(
       (e: KeyboardEvent) => {
@@ -597,13 +604,14 @@ const MultiSelectComponent: <T>(
                             justifyContent: 'flex-end',
                             paddingBottom: extendHeight,
                           },
+                      isFull && styles.fullScreen,
                     ])}
                   >
                     <View
                       style={StyleSheet.flatten([
                         styles.container,
-                        containerStyle,
                         isFull ? styleHorizontal : styleVertical,
+                        containerStyle,
                       ])}
                     >
                       {_renderList(isTopPosition)}

diff --git a/src/components/MultiSelect/model.ts b/src/components/MultiSelect/model.ts
@@ -56,6 +56,7 @@ export interface MultiSelectProps<T> {
   accessibilityLabel?: string;
   itemAccessibilityLabelField?: string;
   inverted?: boolean;
+  mode?: 'default' | 'modal';
   onChange: (value: string[]) => void;
   renderLeftIcon?: (visible?: boolean) => JSX.Element | null | undefined;
   renderRightIcon?: (visible?: boolean) => JSX.Element | null | undefined;

diff --git a/src/components/MultiSelect/styles.ts b/src/components/MultiSelect/styles.ts
@@ -96,4 +96,8 @@ export const styles = StyleSheet.create({
     color: 'gray',
     writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
+  fullScreen: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import React, { useEffect, useState } from 'react';
 import {
   Image,

diff --git a/src/useDeviceOrientation.ts b/src/useDeviceOrientation.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import { useEffect, useState } from 'react';
 import { Dimensions, ScaledSize } from 'react-native';