packages/lib/src/components/DevTool/Console/Input.js
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;