Merge pull request #2 from itenl/dev-1.1.1

Dev 1.1.1

Author: itenl

README.md

@@ -27,11 +27,23 @@
 ```JavaScript
 npm install 'react-native-vdebug'
 
-import VDebug, { setExternalContext } from 'react-native-vdebug';
+import VDebug, { initTrace, setExternalContext } from 'react-native-vdebug';
 
+// Before component Render, perform Proxy Console/Network (Optional)
+initTrace()
+
+// Context object when the command is executed (Optional)
 setExternalContext('your context')
 
-return <VDebug info={{ obj: 'your object' }} />
+return <VDebug 
+  // Expansion panel (Optional)
+  panels={[
+    title:'your title',
+    component: your component
+  ]} 
+  // Info panel (Optional)
+  info={{ obj: 'your object' }} 
+/>
 
 ```
 
@@ -46,8 +58,4 @@ return <VDebug info={{ obj: 'your object' }} />
 
 -------------------
 
-`禁止商业用途 ❤ 研究学习范畴 ❤ 作者保留解释权`
-<br />
-Commercial use is forbidden and The author reserves the right of interpretion
-
 [✶ MIT ✶](./LICENSE)

index.js

@@ -1,9 +1,12 @@
+import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { ScrollView, View, Text, TouchableOpacity, PanResponder, Animated, Dimensions, StyleSheet, TextInput, Keyboard, NativeModules, Platform, KeyboardAvoidingView } from 'react-native';
 import event from './src/event';
 import Network, { traceNetwork } from './src/network';
 import Log, { traceLog } from './src/log';
 import Info from './src/info';
+import HocComp from './src/hoc';
+
 const { width, height } = Dimensions.get('window');
 
 let commandContext = global;
@@ -19,29 +22,31 @@ export const initTrace = () => {
 };
 
 class VDebug extends PureComponent {
+  static propTypes = {
+    // Info panel (Optional)
+    info: PropTypes.object,
+    // Expansion panel (Optional)
+    panels: PropTypes.array
+  };
+
+  static defaultProps = {
+    info: {},
+    panels: null
+  };
+
   constructor(props) {
     super(props);
     initTrace();
+    this.containerHeight = (height / 3) * 2;
+    this.refsObj = {};
     this.state = {
       commandValue: '',
       showPanel: false,
       currentPageIndex: 0,
       pan: new Animated.ValueXY(),
       scale: new Animated.Value(1),
-      panels: [
-        {
-          title: 'Log',
-          component: <Log />
-        },
-        {
-          title: 'Network',
-          component: <Network />
-        },
-        {
-          title: 'Info',
-          component: <Info info={this.props.info || {}} />
-        }
-      ]
+      panelHeight: new Animated.Value(0),
+      panels: this.addPanels()
     };
     this.panResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
@@ -54,7 +59,7 @@ class VDebug extends PureComponent {
         Animated.spring(this.state.scale, {
           useNativeDriver: true,
           toValue: 1.3,
-          friction: 3
+          friction: 7
         }).start();
       },
       onPanResponderMove: Animated.event([null, { dx: this.state.pan.x, dy: this.state.pan.y }]),
@@ -64,7 +69,7 @@ class VDebug extends PureComponent {
           Animated.spring(this.state.scale, {
             useNativeDriver: true,
             toValue: 1,
-            friction: 3
+            friction: 7
           }).start(() => {
             this.setState({
               top: nativeEvent.pageY
@@ -80,10 +85,43 @@ class VDebug extends PureComponent {
     this.state.pan.setValue({ x: 0, y: 0 });
   }
 
+  getRef(index) {
+    return ref => {
+      if (!this.refsObj[index]) this.refsObj[index] = ref;
+    };
+  }
+
+  addPanels() {
+    let defaultPanels = [
+      {
+        title: 'Log',
+        component: HocComp(Log, this.getRef(0))
+      },
+      {
+        title: 'Network',
+        component: HocComp(Network, this.getRef(1))
+      },
+      {
+        title: 'Info',
+        component: HocComp(Info, this.getRef(2)),
+        props: { info: this.props.info }
+      }
+    ];
+    if (this.props.panels && this.props.panels.length) {
+      this.props.panels.forEach((item, index) => {
+        // support up to five extended panels
+        if (index >= 3) return;
+        if (item.title && item.component) {
+          item.component = HocComp(item.component, this.getRef(defaultPanels.length));
+          defaultPanels.push(item);
+        }
+      });
+    }
+    return defaultPanels;
+  }
+
   togglePanel() {
-    this.setState(state => ({
-      showPanel: !state.showPanel
-    }));
+    this.state.panelHeight.setValue(this.state.panelHeight._value ? 0 : this.containerHeight);
   }
 
   clearLogs() {
@@ -134,15 +172,30 @@ class VDebug extends PureComponent {
     }
   }
 
+  scrollToTop() {
+    const item = this.refsObj[this.state.currentPageIndex];
+    const instance = item?.getScrollRef && item?.getScrollRef();
+    if (instance) {
+      // FlatList
+      instance.scrollToOffset && instance.scrollToOffset({ animated: true, viewPosition: 0, index: 0 });
+      // ScrollView
+      instance.scrollTo && instance.scrollTo({ x: 0, y: 0, animated: true });
+    }
+  }
+
   renderPanelHeader() {
     return (
       <View style={styles.panelHeader}>
         {this.state.panels.map((item, index) => (
           <TouchableOpacity
             key={index.toString()}
             onPress={() => {
-              this.scrollToPage(index);
-              this.setState({ currentPageIndex: index });
+              if (index != this.state.currentPageIndex) {
+                this.scrollToPage(index);
+                this.setState({ currentPageIndex: index });
+              } else {
+                this.scrollToTop();
+              }
             }}
             style={[styles.panelHeaderItem, index === this.state.currentPageIndex && styles.activeTab]}
           >
@@ -155,7 +208,7 @@ class VDebug extends PureComponent {
 
   renderCommandBar() {
     return (
-      <View style={styles.commandBar}>
+      <KeyboardAvoidingView keyboardVerticalOffset={Platform.OS == 'android' ? 0 : 300} contentContainerStyle={{ flex: 1, flexDirection: 'row' }} behavior={'position'} style={styles.commandBar}>
         <TextInput
           ref={ref => {
             this.textInput = ref;
@@ -172,7 +225,7 @@ class VDebug extends PureComponent {
         <TouchableOpacity style={styles.commandBarBtn} onPress={this.execCommand.bind(this)}>
           <Text>OK</Text>
         </TouchableOpacity>
-      </View>
+      </KeyboardAvoidingView>
     );
   }
 
@@ -204,7 +257,7 @@ class VDebug extends PureComponent {
 
   renderPanel() {
     return (
-      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.panel}>
+      <Animated.View style={[styles.panel, { height: this.state.panelHeight }]}>
         {this.renderPanelHeader()}
         <ScrollView
           onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
@@ -219,18 +272,18 @@ class VDebug extends PureComponent {
           {this.state.panels.map((item, index) => {
             return (
               <View key={index} style={{ width: width }}>
-                {item.component}
+                <item.component {...(item.props ?? {})} />
               </View>
             );
           })}
         </ScrollView>
         {this.renderCommandBar()}
         {this.renderPanelFooter()}
-      </KeyboardAvoidingView>
+      </Animated.View>
     );
   }
 
-  renderHomeBtn() {
+  renderDebugBtn() {
     const { pan, scale } = this.state;
     const [translateX, translateY] = [pan.x, pan.y];
     const btnStyle = { transform: [{ translateX }, { translateY }, { scale }] };
@@ -243,7 +296,12 @@ class VDebug extends PureComponent {
   }
 
   render() {
-    return this.state.showPanel ? this.renderPanel() : this.renderHomeBtn();
+    return (
+      <View style={{ flex: 1 }}>
+        {this.renderPanel()}
+        {this.renderDebugBtn()}
+      </View>
+    );
   }
 }
 
@@ -253,14 +311,12 @@ const styles = StyleSheet.create({
   },
   panel: {
     position: 'absolute',
-    zIndex: 999999999,
-    elevation: 999999999,
+    zIndex: 99998,
+    elevation: 99998,
     backgroundColor: '#fff',
     width,
-    height: (height / 3) * 2,
     bottom: 0,
-    right: 0,
-    flexDirection: 'column'
+    right: 0
   },
   panelHeader: {
     width,
@@ -318,13 +374,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     position: 'absolute',
-    zIndex: 999999999,
+    zIndex: 99999,
     bottom: height / 2,
     right: 0,
     shadowColor: 'rgb(18,34,74)',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.08,
-    elevation: 0.4
+    elevation: 99999
   },
   homeBtnText: {
     color: '#fff'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-vdebug",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React-Native 调试工具",
   "main": "index.js",
   "scripts": {

src/hoc.js

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+
+export default (WrappedComponent, getRef = () => {}) => {
+  return class Hoc extends PureComponent {
+    constructor(props) {
+      super(props);
+    }
+    render() {
+      return (
+        <WrappedComponent
+          ref={comp => {
+            this.comp = comp;
+            getRef && getRef(comp);
+          }}
+          {...this.props}
+        />
+      );
+    }
+  };
+};

src/info.js

@@ -22,6 +22,10 @@ export default class Info extends Component {
     });
   }
 
+  getScrollRef() {
+    return this.scrollView;
+  }
+
   componentDidMount() {
     let info = Object.assign(
       {
@@ -44,8 +48,15 @@ export default class Info extends Component {
 
   render() {
     return (
-      <ScrollView style={{ flex: 1, padding: 5 }}>
-        <Text style={{ color: 'black' }}>{this.state.info}</Text>
+      <ScrollView
+        ref={ref => {
+          this.scrollView = ref;
+        }}
+        style={{ flex: 1, padding: 5 }}
+      >
+        <Text selectable={true} style={{ color: 'black' }}>
+          {this.state.info}
+        </Text>
         <View style={{ marginTop: 1000 }}>
           <Text style={!this.state.enabled && { opacity: 0.05 }}>{`
                                                 .::::.

src/log.js

@@ -77,6 +77,10 @@ class Log extends Component {
     });
   }
 
+  getScrollRef() {
+    return this.flatList;
+  }
+
   componentDidMount() {
     this.mountState = true;
     this.setState({
@@ -103,12 +107,6 @@ class Log extends Component {
     }
   };
 
-  scrollToEnd = () => {
-    this.flatList.scrollToEnd({ animated: true });
-  };
-
-  filterCenter() {}
-
   ListHeaderComponent() {
     return (
       <View>
@@ -195,7 +193,6 @@ class Log extends Component {
           this.flatList = ref;
         }}
         legacyImplementation
-        // onLayout={() => this.flatList.scrollToEnd({ animated: true })}
         // initialNumToRender={20}
         showsVerticalScrollIndicator
         extraData={this.state}