From 15426399df9c94d7a2c494d448686fd81d0fcca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estev=C3=A3o=20Lucas?= <lucas@work.co>
Date: Sun, 18 Nov 2018 22:35:09 -0500
Subject: [PATCH] feat: wrap storybook on react-native with
 KeyboardAvoidingView

---
 app/react-native/readme.md                    |  9 +-
 .../preview/components/OnDeviceUI/index.js    | 89 ++++++++++++-------
 app/react-native/src/preview/index.js         |  1 +
 3 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/app/react-native/readme.md b/app/react-native/readme.md
index cfc38cc38b43..4cc408d447b0 100644
--- a/app/react-native/readme.md
+++ b/app/react-native/readme.md
@@ -22,16 +22,16 @@ The next thing you need to do is make Storybook UI visible in your app.
 The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
 
 ```js
-export default from "./storybook";
+export default from './storybook';
 ```
 
 This will get you up and running quickly, but then you lose your app!
 There are multiple options here. for example, you can export conditionally:
 
 ```js
-import StorybookUI from "./storybook";
+import StorybookUI from './storybook';
 
-import App from "./app";
+import App from './app';
 
 module.exports = __DEV__ ? StorybookUI : App;
 ```
@@ -125,7 +125,8 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
         -- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }`
     shouldPersistSelection: Boolean (true)
         -- initialize storybook with the last selected story.`
-    )
+    shouldDisableKeyboardAvoidingView: Boolean (false)
+        -- Disable KeyboardAvoidingView wrapping Storybook's view
 }
 ```
 
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index 8d1e82887e66..b8622555a2db 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,6 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { SafeAreaView, Animated, TouchableOpacity } from 'react-native';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  Animated,
+  TouchableOpacity,
+} from 'react-native';
 import Events from '@storybook/core-events';
 
 import StoryListView from '../StoryListView';
@@ -22,6 +29,7 @@ import {
 import style from './style';
 
 const ANIMATION_DURATION = 300;
+const IS_IOS = Platform.OS === 'ios';
 
 export default class OnDeviceUI extends PureComponent {
   constructor(props) {
@@ -95,10 +103,15 @@ export default class OnDeviceUI extends PureComponent {
       // True if swiping between navigator and addons
       slideBetweenAnimation: tabOpen + newTabOpen === PREVIEW,
     });
+
+    // close the keyboard opened from a TextInput from story list or knobs
+    if (newTabOpen === 0) {
+      Keyboard.dismiss();
+    }
   };
 
   render() {
-    const { stories, events, url, isUIHidden } = this.props;
+    const { stories, events, url, isUIHidden, shouldDisableKeyboardAvoidingView } = this.props;
     const {
       tabOpen,
       slideBetweenAnimation,
@@ -121,40 +134,46 @@ export default class OnDeviceUI extends PureComponent {
 
     return (
       <SafeAreaView style={style.flex}>
-        <AbsolutePositionedKeyboardAwareView
-          onLayout={this.onLayout}
-          previewHeight={previewHeight}
-          previewWidth={previewWidth}
+        <KeyboardAvoidingView
+          enabled={!shouldDisableKeyboardAvoidingView}
+          behavior={IS_IOS ? 'padding' : null}
+          style={style.flex}
         >
-          <Animated.View style={previewWrapperStyles}>
-            <Animated.View style={previewStyles}>
-              <TouchableOpacity
-                accessible={false}
-                style={style.flex}
-                disabled={tabOpen === PREVIEW}
-                onPress={this.handleOpenPreview}
-              >
-                <StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
-              </TouchableOpacity>
+          <AbsolutePositionedKeyboardAwareView
+            onLayout={this.onLayout}
+            previewHeight={previewHeight}
+            previewWidth={previewWidth}
+          >
+            <Animated.View style={previewWrapperStyles}>
+              <Animated.View style={previewStyles}>
+                <TouchableOpacity
+                  accessible={false}
+                  style={style.flex}
+                  disabled={tabOpen === PREVIEW}
+                  onPress={this.handleOpenPreview}
+                >
+                  <StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
+                </TouchableOpacity>
+              </Animated.View>
             </Animated.View>
-          </Animated.View>
-          <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-            <StoryListView
-              stories={stories}
-              events={events}
-              selectedKind={selection.kind}
-              selectedStory={selection.story}
-            />
-          </Panel>
-          <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
-            <Addons />
-          </Panel>
-        </AbsolutePositionedKeyboardAwareView>
-        <Navigation
-          tabOpen={tabOpen}
-          onChangeTab={this.handleToggleTab}
-          initialUiVisible={!isUIHidden}
-        />
+            <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
+              <StoryListView
+                stories={stories}
+                events={events}
+                selectedKind={selection.kind}
+                selectedStory={selection.story}
+              />
+            </Panel>
+            <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
+              <Addons />
+            </Panel>
+          </AbsolutePositionedKeyboardAwareView>
+          <Navigation
+            tabOpen={tabOpen}
+            onChangeTab={this.handleToggleTab}
+            initialUiVisible={!isUIHidden}
+          />
+        </KeyboardAvoidingView>
       </SafeAreaView>
     );
   }
@@ -180,6 +199,7 @@ OnDeviceUI.propTypes = {
     kind: PropTypes.string.isRequired,
     storyFn: PropTypes.func.isRequired,
   }),
+  shouldDisableKeyboardAvoidingView: PropTypes.bool,
 };
 
 OnDeviceUI.defaultProps = {
@@ -187,4 +207,5 @@ OnDeviceUI.defaultProps = {
   tabOpen: 0,
   isUIHidden: false,
   initialStory: null,
+  shouldDisableKeyboardAvoidingView: false,
 };
diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js
index e01cb14b4767..f7c0b9e9ac72 100644
--- a/app/react-native/src/preview/index.js
+++ b/app/react-native/src/preview/index.js
@@ -115,6 +115,7 @@ export default class Preview {
               isUIOpen={params.isUIOpen}
               tabOpen={params.tabOpen}
               initialStory={setInitialStory ? preview._getInitialStory() : null}
+              shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
             />
           );
         }