revert: remove fix position

hoaphantn7604 · Feb 6, 2023 · 8044333 · 8044333
1 parent 6d6b491
commit 8044333
Showing 1 changed file with 57 additions and 81 deletions.
diff --git a/src/components/MultiSelect/index.tsx b/src/components/MultiSelect/index.tsx
@@ -486,81 +486,72 @@ const MultiSelectComponent: <T>(
       testID,
     ]);
 
-    const _renderListTop = useCallback(() => {
-      return (
-        <TouchableWithoutFeedback>
-          <View style={styles.flexShrink}>
+    const _renderList = useCallback(
+      (isTopPosition: boolean) => {
+        const _renderListHelper = () => {
+          return (
             <FlatList
               testID={testID + ' flatlist'}
               accessibilityLabel={accessibilityLabel + ' flatlist'}
               {...flatListProps}
               keyboardShouldPersistTaps="handled"
               data={listData}
-              inverted
+              inverted={isTopPosition}
               renderItem={_renderItem}
               keyExtractor={(item, _index) => item[valueField].toString()}
               showsVerticalScrollIndicator={showsVerticalScrollIndicator}
             />
-            {renderSearch()}
-          </View>
-        </TouchableWithoutFeedback>
-      );
-    }, [
-      _renderItem,
-      accessibilityLabel,
-      flatListProps,
-      listData,
-      renderSearch,
-      showsVerticalScrollIndicator,
-      testID,
-      valueField,
-    ]);
+          );
+        };
 
-    const _renderListBottom = useCallback(() => {
-      return (
-        <TouchableWithoutFeedback>
-          <View style={styles.flexShrink}>
-            {renderSearch()}
-            <FlatList
-              testID={testID + ' flatlist'}
-              accessibilityLabel={testID + ' flatlist'}
-              {...flatListProps}
-              keyboardShouldPersistTaps="handled"
-              data={listData}
-              renderItem={_renderItem}
-              keyExtractor={(item, _index) => item[valueField].toString()}
-              showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-            />
-          </View>
-        </TouchableWithoutFeedback>
-      );
-    }, [
-      _renderItem,
-      flatListProps,
-      listData,
-      renderSearch,
-      showsVerticalScrollIndicator,
-      testID,
-      valueField,
-    ]);
+        return (
+          <TouchableWithoutFeedback>
+            <View style={styles.flexShrink}>
+              {isTopPosition && _renderListHelper()}
+              {renderSearch()}
+              {!isTopPosition && _renderListHelper()}
+            </View>
+          </TouchableWithoutFeedback>
+        );
+      },
+      [
+        _renderItem,
+        accessibilityLabel,
+        flatListProps,
+        listData,
+        renderSearch,
+        showsVerticalScrollIndicator,
+        testID,
+        valueField,
+      ]
+    );
 
     const _renderModal = useCallback(() => {
+      const getBottomThreshold = () => {
+        if (isIOS) {
+          return keyboardHeight + maxHeight * 0.5;
+        } else if (search) {
+          return 310;
+        } else {
+          return 300;
+        }
+      };
+
       if (visible && position) {
         const { isFull, w, top, bottom, left, height } = position;
         if (w && top && bottom) {
           const styleVertical: ViewStyle = { left: left, maxHeight: maxHeight };
           const isTopPosition =
             dropdownPosition === 'auto'
-              ? bottom < (isIOS ? 200 : search ? 310 : 300)
-              : dropdownPosition === 'top'
-              ? true
-              : false;
+              ? bottom < getBottomThreshold()
+              : dropdownPosition === 'top';
           let topHeight = isTopPosition ? top - height : top;
 
           let keyboardStyle: ViewStyle = {};
+
           if (keyboardAvoiding) {
             if (renderInputSearch) {
-              if (keyboardHeight > 0 && bottom < keyboardHeight + height) {
+              if (keyboardHeight > 0 && bottom < getBottomThreshold()) {
                 if (isTopPosition) {
                   topHeight = H - keyboardHeight;
                 } else {
@@ -572,7 +563,7 @@ const MultiSelectComponent: <T>(
               if (
                 focus &&
                 keyboardHeight > 0 &&
-                bottom < keyboardHeight + height
+                bottom < getBottomThreshold()
               ) {
                 if (isTopPosition) {
                   topHeight = H - keyboardHeight;
@@ -605,37 +596,23 @@ const MultiSelectComponent: <T>(
                     style={StyleSheet.flatten([
                       styles.wrapTop,
                       {
-                        height: topHeight,
+                        height: isTopPosition
+                          ? topHeight
+                          : topHeight + maxHeight,
                         width: w,
                       },
                     ])}
                   >
-                    {isTopPosition && (
-                      <View
-                        style={StyleSheet.flatten([
-                          { width: w },
-                          styles.container,
-                          containerStyle,
-                          isFull ? styleHorizontal : styleVertical,
-                        ])}
-                      >
-                        {_renderListTop()}
-                      </View>
-                    )}
-                  </View>
-                  <View style={styles.flex1}>
-                    {!isTopPosition && (
-                      <View
-                        style={StyleSheet.flatten([
-                          { width: w },
-                          styles.container,
-                          containerStyle,
-                          isFull ? styleHorizontal : styleVertical,
-                        ])}
-                      >
-                        {_renderListBottom()}
-                      </View>
-                    )}
+                    <View
+                      style={StyleSheet.flatten([
+                        { width: w },
+                        styles.container,
+                        containerStyle,
+                        isFull ? styleHorizontal : styleVertical,
+                      ])}
+                    >
+                      {_renderList(isTopPosition)}
+                    </View>
                   </View>
                 </View>
               </TouchableWithoutFeedback>
@@ -658,8 +635,7 @@ const MultiSelectComponent: <T>(
       backgroundColor,
       containerStyle,
       styleHorizontal,
-      _renderListTop,
-      _renderListBottom,
+      _renderList,
       renderInputSearch,
       keyboardHeight,
       H,