V2 (#1)

packages/lib/src/components/DevTool/Modal.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import {
+  SafeAreaView,
+  KeyboardAvoidingView,
+} from 'react-native';
+import events from '../../events';
+import DevTool from './index';
+import Modal from '../base/Modal';
+
+
+class Events extends Component {
+  constructor() {
+    super();
+    this.state = {
+      visible: false,
+    };
+    this.listen = this.listen.bind(this);
+  }
+
+  componentDidMount() {
+    events.listen(this.listen);
+  }
+
+  componentWillUnmount() {
+    events.unlisten(this.listen);
+  }
+
+  listen(type, data) {
+    if (type === 'SHOW_DEVTOOLS') {
+      return this.setState({
+        visible: true,
+      });
+    }
+
+    if (type === 'HIDE_DEVTOOLS') {
+      return this.setState({
+        visible: false,
+      });
+    }
+  }
+
+  render() {
+    const {
+      ...others
+    } = this.props;
+
+    return (
+      <Modal
+        animationType="slide"
+        transparent={false}
+        visible={this.state.visible}
+        onRequestClose={() => {
+        }}
+      >
+        <SafeAreaView
+          forceInset={{ top: 'always', vertical: 'always', bottom: 'always' }}
+          style={{flex: 1}}
+        >
+          <KeyboardAvoidingView
+            style={{flex: 1}}
+            behavior="padding"
+            enabled
+          >
+            <DevTool
+              {...others}
+              onClose={() => {
+                events.publish('HIDE_DEVTOOLS');
+              }}
+            />
+          </KeyboardAvoidingView>
+        </SafeAreaView>
+      </Modal>
+    )
+  }
+}
+
+export default Events;