feat: floating dropdown

omneimneh · omneimneh · commit 97d02f9c5274 · 2021-02-07T00:57:29.000+02:00
diff --git a/example/src/Examples/DropdownExample.tsx b/example/src/Examples/DropdownExample.tsx
@@ -5,12 +5,14 @@ import {
   IconButton,
   useTheme,
   Divider,
+  Switch,
 } from 'react-native-paper';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
 const DropdownExample = () => {
   const theme = useTheme();
   const [selectedValue, setSelectedValue] = useState<number | null>(1);
+  const [mode, setMode] = useState<'modal' | 'floating'>('modal');
 
   return (
     <ScrollView style={{ backgroundColor: theme.colors.background }}>
@@ -104,6 +106,33 @@ const DropdownExample = () => {
           </Dropdown>
         </View>
       </List.Section>
+      <List.Section>
+        <List.Item
+          title="Floating dropdown mode"
+          description="Use floating dropdown instead of modal"
+          right={() => (
+            <Switch
+              value={mode === 'floating'}
+              onValueChange={() =>
+                setMode(mode === 'modal' ? 'floating' : 'modal')
+              }
+            />
+          )}
+        />
+        <View style={styles.dropdown}>
+          <Dropdown mode={mode}>
+            <Dropdown.Option value={1} label="Option 1" />
+            <Dropdown.Option value={2} label="Option 2" />
+            <Dropdown.Option value={3} label="Option 3" />
+            <Dropdown.Option value={4} label="Option 4" />
+            <Dropdown.Option value={5} label="Option 5" />
+            <Dropdown.Option value={6} label="Option 6" />
+            <Dropdown.Option value={7} label="Option 7" />
+            <Dropdown.Option value={8} label="Option 8" />
+            <Dropdown.Option value={9} label="Option 9" />
+          </Dropdown>
+        </View>
+      </List.Section>
       <List.Section title="Empty dropdown">
         <View style={styles.dropdown}>
           <Dropdown />
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
 import Surface from '../Surface';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import IconButton from '../IconButton';
@@ -9,8 +9,16 @@ import DropdownContent from './DropdownContent';
 import HelperText from '../HelperText';
 import * as List from '../List/List';
 import Portal from '../Portal/Portal';
+import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
 
 type Props<T> = {
+  /**
+   * Extra padding to add at the top of header to account for translucent status bar.
+   * This is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`.
+   * If you are using Expo, we assume translucent status bar and set a height for status bar automatically.
+   * Pass `0` or a custom value to disable the default behaviour, and customize the height.
+   */
+  statusBarHeight?: number;
   /**
    * Placeholder label when there is no selected value
    */
@@ -49,6 +57,11 @@ type Props<T> = {
     style: { color: string };
     key: React.Key;
   }) => React.ReactNode;
+  /**
+   * A dropdown can be either be rendered inside a modal or inside a floating menu
+   * The default value is 'floating' if the platform is web and 'modal' otherwise
+   */
+  mode?: 'modal' | 'floating';
 };
 
 type OptionProps<T> = {
@@ -60,19 +73,22 @@ type OptionProps<T> = {
 const DEFAULT_EMPTY_DROPDOWN_LABEL = 'No available options';
 const DEFAULT_PLACEHOLDER_LABEL = 'Select an option';
 const DROPDOWN_NULL_OPTION_KEY = 'DROPDOWN_NULL_OPTION_KEY';
+const DEFAULT_MAX_HEIGHT = 350;
 
 export type DropdownContextProps<T> = {
   closeMenu(): void;
   selectOption(option: OptionProps<T> | null): void;
-  maxHeight?: number;
   required: boolean;
   emptyDropdownLabel: string;
   selectedValue?: T;
   dropdownCoordinates: {
-    top: number;
+    top?: number;
+    bottom?: number;
     left: number;
     width: number;
+    maxHeight?: number;
   };
+  mode: 'modal' | 'floating';
 };
 
 export type DropdownRefAttributes<T> = {
@@ -140,27 +156,40 @@ const Dropdown = React.forwardRef(function <T>(
   {
     children,
     emptyDropdownLabel = DEFAULT_EMPTY_DROPDOWN_LABEL,
-    maxHeight,
+    maxHeight = DEFAULT_MAX_HEIGHT,
     onSelect,
     placeholder = DEFAULT_PLACEHOLDER_LABEL,
     renderNoneOption,
     required = false,
     selectedValue,
+    mode = Platform.select({ web: 'floating', default: 'modal' }),
+    statusBarHeight = APPROX_STATUSBAR_HEIGHT,
   }: Props<T>,
   ref:
     | ((instance: DropdownRefAttributes<T> | null) => void)
     | React.MutableRefObject<DropdownRefAttributes<T> | null>
     | null
 ) {
+  const computedStatusBarHeight = Platform.select({
+    android: statusBarHeight,
+    default: 0,
+  });
   const theme = useTheme();
-  const rootViewRef = React.useRef<View>(null);
+  const anchorRef = React.useRef<View>(null);
+  const menuRef = React.useRef<View>(null);
   const [isMenuOpen, setMenuOpen] = React.useState(false);
-  const [dropdownCoordinates, setCoordinates] = React.useState({
-    top: 0,
+  const [dropdownCoordinates, setMenuPosition] = React.useState<{
+    top?: number;
+    bottom?: number;
+    left: number;
+    width: number;
+    maxHeight?: number;
+  }>({
     left: 0,
     width: 0,
   });
   const [selected, setSelected] = React.useState<OptionProps<T> | null>(null);
+  const windowHeight = Dimensions.get('window').height;
 
   const toggleMenuOpen = () => {
     if (isMenuOpen) {
@@ -173,16 +202,19 @@ const Dropdown = React.forwardRef(function <T>(
   const closeMenu = () => setMenuOpen(false);
 
   const openMenu = () => {
-    if (Platform.OS === 'web') {
-      rootViewRef.current?.measure((_x, _y, width, height, pageX, pageY) =>
-        setCoordinates({
+    if (mode === 'floating') {
+      anchorRef.current?.measureInWindow((x, y, width, height) => {
+        let top = y + height + computedStatusBarHeight;
+        setMenuPosition({
+          left: x,
           width: width,
-          left: pageX,
-          top: pageY + height,
-        })
-      );
+          top: top,
+          bottom: 48,
+          maxHeight: Math.min(maxHeight, windowHeight - top),
+        });
+      });
     }
-    setMenuOpen(true);
+    requestAnimationFrame(() => setMenuOpen(true));
   };
 
   const renderLabel = () => {
@@ -258,7 +290,7 @@ const Dropdown = React.forwardRef(function <T>(
   }));
 
   return (
-    <View ref={rootViewRef}>
+    <View ref={anchorRef} collapsable={false}>
       <TouchableRipple borderless onPress={toggleMenuOpen}>
         <Surface
           style={[
@@ -274,28 +306,28 @@ const Dropdown = React.forwardRef(function <T>(
           <View style={styles.label}>{renderLabel()}</View>
           <IconButton
             style={styles.icon}
-            icon="menu-down"
+            icon={isMenuOpen && mode === 'floating' ? 'menu-up' : 'menu-down'}
             onPress={toggleMenuOpen}
           />
         </Surface>
       </TouchableRipple>
-      {isMenuOpen && (
-        <Portal>
-          <DropdownContext.Provider
-            value={{
-              selectedValue: selected?.value,
-              maxHeight,
-              dropdownCoordinates,
-              emptyDropdownLabel,
-              required,
-              closeMenu,
-              selectOption,
-            }}
-          >
-            <DropdownContent>{renderOptions()}</DropdownContent>
-          </DropdownContext.Provider>
-        </Portal>
-      )}
+      <Portal>
+        <DropdownContext.Provider
+          value={{
+            selectedValue: selected?.value,
+            dropdownCoordinates,
+            emptyDropdownLabel,
+            required,
+            closeMenu,
+            selectOption,
+            mode,
+          }}
+        >
+          <DropdownContent visible={isMenuOpen}>
+            <View ref={menuRef}>{renderOptions()}</View>
+          </DropdownContent>
+        </DropdownContext.Provider>
+      </Portal>
     </View>
   );
 }) as (<T = any>(
@@ -306,7 +338,7 @@ const Dropdown = React.forwardRef(function <T>(
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    borderWidth: 1,
+    borderWidth: 1.2,
     alignItems: 'center',
     elevation: 1,
   },
diff --git a/src/components/Dropdown/DropdownContent.native.tsx b/src/components/Dropdown/DropdownContent.native.tsx
diff --git a/src/components/Dropdown/DropdownContent.tsx b/src/components/Dropdown/DropdownContent.tsx
@@ -1,35 +1,34 @@
-import Surface from '../Surface';
-import {
-  ScrollView,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import React, { useContext } from 'react';
+import React from 'react';
 import { DropdownContext } from './Dropdown';
+import DropdownContentModal from './DropdownContentModal';
+import DropdownContentFloating from './DropdownContentFloating';
 
 type Props = {
   children: React.ReactNode;
+  visible: boolean;
 };
 
-const DEFAULT_MAX_HEIGHT = 350;
-
 const DropdownContent = (props: Props) => {
-  const {
-    closeMenu,
-    dropdownCoordinates,
-    maxHeight = DEFAULT_MAX_HEIGHT,
-  } = useContext(DropdownContext);
+  const context = React.useContext(DropdownContext);
+
+  if (!context) return null;
+
+  const { mode } = context;
 
-  return (
-    <TouchableWithoutFeedback onPress={closeMenu}>
-      <View style={[StyleSheet.absoluteFill]}>
-        <Surface style={[dropdownCoordinates, { maxHeight }]}>
-          <ScrollView>{props.children}</ScrollView>
-        </Surface>
-      </View>
-    </TouchableWithoutFeedback>
-  );
+  switch (mode) {
+    case 'floating':
+      return (
+        <DropdownContentFloating {...props}>
+          {props.children}
+        </DropdownContentFloating>
+      );
+    case 'modal':
+      return (
+        <DropdownContentModal {...props}>{props.children}</DropdownContentModal>
+      );
+    default:
+      throw new Error('Unkown mode ' + mode);
+  }
 };
 
 export default DropdownContent;
diff --git a/src/components/Dropdown/DropdownContentFloating.tsx b/src/components/Dropdown/DropdownContentFloating.tsx
@@ -0,0 +1,49 @@
+import Surface from '../Surface';
+import {
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import React from 'react';
+import { DropdownContext } from './Dropdown';
+import { withTheme } from '../../core/theming';
+
+type Props = {
+  children: React.ReactNode;
+  visible: boolean;
+  theme: ReactNativePaper.Theme;
+};
+
+const DropdownContentFloating = ({ children, visible, theme }: Props) => {
+  const { closeMenu, dropdownCoordinates } = React.useContext(DropdownContext);
+
+  if (!visible) return null;
+
+  return (
+    <TouchableWithoutFeedback onPress={closeMenu}>
+      <View style={[StyleSheet.absoluteFill]}>
+        <Surface
+          style={[
+            dropdownCoordinates,
+            styles.container,
+            {
+              borderBottomRightRadius: theme.roundness,
+              borderBottomLeftRadius: theme.roundness,
+            },
+          ]}
+        >
+          <ScrollView>{children}</ScrollView>
+        </Surface>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    elevation: 8,
+  },
+});
+
+export default withTheme(DropdownContentFloating);
diff --git a/src/components/Dropdown/DropdownContentModal.tsx b/src/components/Dropdown/DropdownContentModal.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { DropdownContext } from './Dropdown';
+import Dialog from '../Dialog/Dialog';
+
+type Props = {
+  children: React.ReactNode;
+  visible: boolean;
+};
+
+const DropdownContentModal = ({ children, visible }: Props) => {
+  const { closeMenu } = React.useContext(DropdownContext);
+
+  return (
+    <Dialog visible={visible} onDismiss={closeMenu}>
+      <ScrollView>{children}</ScrollView>
+    </Dialog>
+  );
+};
+
+export default DropdownContentModal;
