refactor: removed none from keyboard behavior and set interactive as …

…default
gorhom · Jul 13, 2021 · 26d3b71 · 26d3b71
1 parent af26a82
commit 26d3b71
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/example/src/screens/advanced/KeyboardHandlingExample.tsx b/example/src/screens/advanced/KeyboardHandlingExample.tsx
@@ -10,7 +10,7 @@ import ContactList from '../../components/contactList';
 const KeyboardHandlingExample = () => {
   // state
   const [keyboardBehavior, setKeyboardBehavior] =
-    useState<'none' | 'extend' | 'fillParent' | 'interactive'>('none');
+    useState<'extend' | 'fillParent' | 'interactive'>('interactive');
   const [keyboardBlurBehavior, setKeyboardBlurBehavior] =
     useState<'none' | 'restore'>('none');
 
@@ -24,14 +24,12 @@ const KeyboardHandlingExample = () => {
   const handleToggleKeyboardBehavior = useCallback(() => {
     setKeyboardBehavior(state => {
       switch (state) {
-        case 'none':
+        case 'interactive':
           return 'extend';
         case 'extend':
           return 'fillParent';
         case 'fillParent':
           return 'interactive';
-        case 'interactive':
-          return 'none';
       }
     });
   }, []);

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -390,8 +390,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedSheetHeight.value - animatedHandleHeight.value;
 
       if (
-        (keyboardBehavior === KEYBOARD_BEHAVIOR.none ||
-          keyboardBehavior === KEYBOARD_BEHAVIOR.extend) &&
+        keyboardBehavior === KEYBOARD_BEHAVIOR.extend &&
         animatedKeyboardState.value === KEYBOARD_STATE.SHOWN
       ) {
         contentHeight = contentHeight - keyboardHeightInContainer;
@@ -1585,8 +1584,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
            * if platform is android and the input mode is resize, then exit the method
            */
           (Platform.OS === 'android' &&
-            (keyboardBehavior === KEYBOARD_BEHAVIOR.interactive ||
-              keyboardBehavior === KEYBOARD_BEHAVIOR.none) &&
+            keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
             android_keyboardInputMode === KEYBOARD_INPUT_MODE.adjustResize)
         ) {
           return;
@@ -1663,14 +1661,22 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         _contentGestureState,
         _handleGestureState,
       }) => {
+        /**
+         * we make sure all gestures are not active.
+         */
+        const hasNoActiveGesture =
+          (_contentGestureState === State.END ||
+            _contentGestureState === State.UNDETERMINED ||
+            _contentGestureState === State.CANCELLED) &&
+          (_handleGestureState === State.END ||
+            _handleGestureState === State.UNDETERMINED ||
+            _handleGestureState === State.CANCELLED);
+
         if (
           _animatedIndex % 1 === 0 &&
           _animatedIndex !== animatedCurrentIndex.value &&
           _animationState === ANIMATION_STATE.STOPPED &&
-          (_contentGestureState === State.END ||
-            _contentGestureState === State.UNDETERMINED) &&
-          (_handleGestureState === State.END ||
-            _handleGestureState === State.UNDETERMINED)
+          hasNoActiveGesture
         ) {
           runOnJS(print)({
             component: BottomSheet.name,

diff --git a/src/components/bottomSheet/constants.ts b/src/components/bottomSheet/constants.ts
@@ -20,7 +20,7 @@ const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
 const DEFAULT_ANIMATE_ON_MOUNT = false;
 
 // keyboard
-const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.none;
+const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
 const DEFAULT_KEYBOARD_BLUR_BEHAVIOR = KEYBOARD_BLUR_BEHAVIOR.none;
 const DEFAULT_KEYBOARD_INPUT_MODE = KEYBOARD_INPUT_MODE.adjustPan;
 

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -139,12 +139,11 @@ export interface BottomSheetProps
   /**
    * Defines the keyboard appearance behavior.
    * @enum
-   * - `none`: do nothing.
+   * - `interactive`: offset the sheet by the size of the keyboard.
    * - `extend`: extend the sheet to its maximum snap point.
    * - `fillParent`: extend the sheet to fill parent.
-   * - `interactive`: offset the sheet by the size of the keyboard.
-   * @type `none` | `extend` | `fillParent` | `interactive`
-   * @default none
+   * @type `interactive` | `extend` | `fillParent`
+   * @default interactive
    */
   keyboardBehavior?: keyof typeof KEYBOARD_BEHAVIOR;
   /**

diff --git a/src/constants.ts b/src/constants.ts
@@ -71,10 +71,9 @@ const MODAL_STACK_BEHAVIOR = {
 };
 
 const KEYBOARD_BEHAVIOR = {
-  none: 'none',
+  interactive: 'interactive',
   extend: 'extend',
   fillParent: 'fillParent',
-  interactive: 'interactive',
 } as const;
 
 const KEYBOARD_BLUR_BEHAVIOR = {