feat: wrap storybook on react-native with KeyboardAvoidingView

storybookjs · Nov 19, 2018 · 1542639 · 1542639
1 parent adbe924
commit 1542639
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 38 deletions.
diff --git 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
@@ -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,11 +199,13 @@ OnDeviceUI.propTypes = {
     kind: PropTypes.string.isRequired,
     storyFn: PropTypes.func.isRequired,
   }),
+  shouldDisableKeyboardAvoidingView: PropTypes.bool,
 };
 
 OnDeviceUI.defaultProps = {
   url: '',
   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
@@ -115,6 +115,7 @@ export default class Preview {
               isUIOpen={params.isUIOpen}
               tabOpen={params.tabOpen}
               initialStory={setInitialStory ? preview._getInitialStory() : null}
+              shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
             />
           );
         }