V2 (#1)

packages/lib/src/components/DevTool/Console/Input.js

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  Platform,
+} from 'react-native';
+import styled from 'styled-components/native';
+import { createContext } from '../../../console';
+import Icon from '../../base/Icon';
+
+const Button = styled.TouchableOpacity`
+  padding: 12px 8px;
+`;
+
+const styles = StyleSheet.create({
+  container: {
+    borderColor: '#ccc',
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  input: {
+    flex: 1,
+    fontFamily: 'Menlo-Regular',
+    borderColor: '#ccc',
+    borderRadius: 5,
+    margin: 10,
+    padding: 5,
+  },
+});
+
+const Input = ({
+  provider,
+  context: baseContext,
+}) => {
+  const [text, setText] = useState('');
+  const [history, setHistory] = useState([]);
+  const [historyOffset, setHistoryOffset] = useState(); 
+
+  const send = () => {
+    const newHistory = [...history, text];
+    const context = createContext({
+      logProvider: provider,
+    }, baseContext);
+    const contextKeys = Object.keys(context);
+    const contextValues = Object.values(context);
+    const fn = new Function(...contextKeys, text);
+    try {
+      fn(...contextValues);
+      setText('');
+      setHistoryOffset(undefined);
+      setHistory(newHistory);
+    } catch (err) {
+      provider.error([err]);
+    }
+  };
+  return (
+    <View style={styles.container}>
+      <Button
+        onPress={() => {
+          let currentOffset = typeof historyOffset === 'undefined' ? -1 : historyOffset;
+          currentOffset += 1;
+          const index = history.length - 1 - currentOffset;
+          if (history[index]) {
+            setText(history[index]);
+            setHistoryOffset(currentOffset);
+          }
+        }}
+      >
+        <Icon name="left" />
+      </Button>
+      <Button
+        title=">"
+        onPress={() => {
+          let currentOffset = typeof historyOffset === 'undefined' ? -1 : historyOffset;
+          currentOffset -= 1;
+          const index = history.length - 1 - currentOffset;
+          if (history[index]) {
+            setText(history[index]);
+            setHistoryOffset(currentOffset);
+          }
+        }}
+      >
+        <Icon name="right" />
+      </Button>
+      <TextInput
+        multiline
+        placeholder="{your code here}"
+        autoCapitalize="none"
+        autoCorrect={false}
+        style={styles.input}
+        value={text}
+        onChangeText={text => setText(text)}
+        onKeyPress={(evt) => {
+          global.proxyConsole.log(Platform.OS === 'web' && evt.key === 'Enter' && evt.shiftKey);
+          if (Platform.OS === 'web' && evt.key === 'Enter' && !evt.shiftKey) {
+            send();
+            return false;
+          }
+        }}
+      />
+      <Button
+        onPress={() => send()}
+      >
+        <Icon name="play" />
+      </Button>
+    </View>
+  );
+};
+
+export default Input;