Merge pull request #3 from itenl/dev-1.2.0

Dev 1.2.0

Author: itenl

README.md

@@ -15,7 +15,7 @@
 - [x] 可视化 Response
 - [x] Log 等级分类
 - [x] 关键字过滤 Log / Network
-- [ ] Command 历史记录 (ing...)
+- [x] Command 历史记录
 - [ ] 导出所有 Log / Network (ing...)
 
 ## Install

index.js

@@ -6,6 +6,8 @@ import Network, { traceNetwork } from './src/network';
 import Log, { traceLog } from './src/log';
 import Info from './src/info';
 import HocComp from './src/hoc';
+import Storage from './src/storage';
+import { replaceReg } from './src/tool';
 
 const { width, height } = Dimensions.get('window');
 
@@ -46,7 +48,10 @@ class VDebug extends PureComponent {
       pan: new Animated.ValueXY(),
       scale: new Animated.Value(1),
       panelHeight: new Animated.Value(0),
-      panels: this.addPanels()
+      panels: this.addPanels(),
+      history: [],
+      historyFilter: [],
+      showHistory: false
     };
     this.panResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
@@ -83,6 +88,14 @@ class VDebug extends PureComponent {
 
   componentDidMount() {
     this.state.pan.setValue({ x: 0, y: 0 });
+    Storage.support() &&
+      Storage.get('react-native-vdebug@history').then(res => {
+        if (res) {
+          this.setState({
+            history: res
+          });
+        }
+      });
   }
 
   getRef(index) {
@@ -153,11 +166,15 @@ class VDebug extends PureComponent {
   execCommand() {
     if (!this.state.commandValue) return;
     this.evalInContext(this.state.commandValue, commandContext);
+    this.syncHistory();
     Keyboard.dismiss();
   }
 
   clearCommand() {
     this.textInput.clear();
+    this.setState({
+      historyFilter: []
+    });
   }
 
   scrollToPage(index, animated = true) {
@@ -206,25 +223,91 @@ class VDebug extends PureComponent {
     );
   }
 
+  syncHistory() {
+    if (!Storage.support()) return;
+    const res = this.state.history.filter(f => {
+      return f == this.state.commandValue;
+    });
+    if (res && res.length) return;
+    this.state.history.splice(0, 0, this.state.commandValue);
+    this.state.historyFilter.splice(0, 0, this.state.commandValue);
+    this.setState(
+      {
+        history: this.state.history,
+        historyFilter: this.state.historyFilter
+      },
+      () => {
+        Storage.save('react-native-vdebug@history', this.state.history);
+        this.forceUpdate();
+      }
+    );
+  }
+
+  onChange(text) {
+    const state = { commandValue: text };
+    if (text) {
+      const res = this.state.history.filter(f => f.toLowerCase().match(replaceReg(text)));
+      if (res && res.length) state.historyFilter = res;
+    } else {
+      state.historyFilter = [];
+    }
+    this.setState(state);
+  }
+
   renderCommandBar() {
     return (
-      <KeyboardAvoidingView keyboardVerticalOffset={Platform.OS == 'android' ? 0 : 300} contentContainerStyle={{ flex: 1, flexDirection: 'row' }} behavior={'position'} style={styles.commandBar}>
-        <TextInput
-          ref={ref => {
-            this.textInput = ref;
-          }}
-          style={styles.commandBarInput}
-          placeholderTextColor={'#000000a1'}
-          placeholder="Command..."
-          onChangeText={text => this.setState({ commandValue: text })}
-          value={this.state.commandValue}
-        />
-        <TouchableOpacity style={styles.commandBarBtn} onPress={this.clearCommand.bind(this)}>
-          <Text>X</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.commandBarBtn} onPress={this.execCommand.bind(this)}>
-          <Text>OK</Text>
-        </TouchableOpacity>
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={Platform.OS == 'android' ? 0 : 300}
+        contentContainerStyle={{ flex: 1 }}
+        behavior={'position'}
+        style={{
+          height: this.state.historyFilter.length ? 120 : 40,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: '#d9d9d9'
+        }}
+      >
+        <View style={[styles.historyContainer, { height: this.state.historyFilter.length ? 80 : 0 }]}>
+          <ScrollView>
+            {this.state.historyFilter.map(text => {
+              return (
+                <TouchableOpacity
+                  style={{ borderBottomWidth: 1, borderBottomColor: '#eeeeeea1' }}
+                  onPress={() => {
+                    if (text && text.toString) {
+                      this.setState({
+                        commandValue: text.toString()
+                      });
+                    }
+                  }}
+                >
+                  <Text style={{ lineHeight: 25 }}>{text}</Text>
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        </View>
+        <View style={styles.commandBar}>
+          <TextInput
+            ref={ref => {
+              this.textInput = ref;
+            }}
+            style={styles.commandBarInput}
+            placeholderTextColor={'#000000a1'}
+            placeholder="Command..."
+            onChangeText={this.onChange.bind(this)}
+            value={this.state.commandValue}
+            onFocus={() => {
+              this.setState({ showHistory: true });
+            }}
+            onSubmitEditing={this.execCommand.bind(this)}
+          />
+          <TouchableOpacity style={styles.commandBarBtn} onPress={this.clearCommand.bind(this)}>
+            <Text>X</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.commandBarBtn} onPress={this.execCommand.bind(this)}>
+            <Text>OK</Text>
+          </TouchableOpacity>
+        </View>
       </KeyboardAvoidingView>
     );
   }
@@ -342,12 +425,12 @@ const styles = StyleSheet.create({
   },
   panelBottom: {
     width,
-    flex: 0.1,
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: '#d9d9d9',
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#eee'
+    backgroundColor: '#eee',
+    height: 40
   },
   panelBottomBtn: {
     flex: 1,
@@ -386,10 +469,11 @@ const styles = StyleSheet.create({
     color: '#fff'
   },
   commandBar: {
-    height: 40,
     flexDirection: 'row',
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#d9d9d9'
+    borderColor: '#d9d9d9',
+    flexDirection: 'row',
+    height: 40
   },
   commandBarInput: {
     flex: 1,
@@ -402,6 +486,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#eee'
+  },
+  historyContainer: {
+    borderTopWidth: 1,
+    borderTopColor: '#d9d9d9',
+    backgroundColor: '#ffffff',
+    paddingHorizontal: 10
   }
 });
 

package.json

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

src/storage.js

@@ -0,0 +1,42 @@
+import React, { AsyncStorage } from 'react-native';
+
+const storage = {
+  support: function () {
+    try {
+      if (AsyncStorage && AsyncStorage.getItem && AsyncStorage.setItem) return true;
+      return false;
+    } catch (error) {
+      return false;
+    }
+  },
+  get: async function (key) {
+    try {
+      const value = await AsyncStorage.getItem(key);
+      if (value !== null) {
+        const jsonValue = JSON.parse(value);
+        return jsonValue;
+      }
+      return null;
+    } catch (error) {
+      return null;
+    }
+  },
+  save: async function (key, value) {
+    try {
+      await AsyncStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.log(error);
+    }
+  },
+  update: function (key, value) {
+    return StorageUtil.get(key).then(item => {
+      value = typeof value === 'string' ? value : Object.assign({}, item, value);
+      return AsyncStorage.setItem(key, JSON.stringify(value));
+    });
+  },
+  delete: async key => {
+    await AsyncStorage.removeItem(key);
+  }
+};
+
+export default storage;

src/tool.js

@@ -42,7 +42,15 @@ function debounce(delay, atBegin, callback) {
   return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
 }
 
+function replaceReg(str) {
+  const regStr = /\\|\$|\(|\)|\*|\+|\.|\[|\]|\?|\^|\{|\}|\|/gi;
+  return str.replace(regStr, function (input) {
+    return `\\${input}`;
+  });
+}
+
 module.exports = {
   throttle,
-  debounce
+  debounce,
+  replaceReg
 };