morten/react-native-debug-console
1
0
Fork 0
mirror of https://github.com/morten-olsen/react-native-debug-console.git synced 2026-02-08 00:36:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rewritten to hooks

Browse Source
This commit is contained in:
Morten Olsen
2019-07-05 13:38:02 +02:00
parent a17faa9482
commit 41b4d3b115
12 changed files with 278 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/App.js
View File

@@ -18,7 +18,7 @@ import {
} from 'react-native-debug-console';
network.attach();
log.attach(true);
log.attach();
context.hello = () => 'earth';
console.log('fooo');

139
lib/src/components/DevTool/Console/Input.js
View File

@@ -1,12 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import {
StyleSheet,
View,
Text,
TextInput,
} from 'react-native';
import styled from 'styled-components/native';
import State from '../../data/State';
import { context } from '../../../console';
import log from '../../../log';
import Icon from '../../base/Icon';
@@ -36,77 +34,68 @@ const styles = StyleSheet.create({
const Input = ({
logs,
}) => (
<State>
{({
text = '',
history = [],
historyOffset,
}, setState) => (
<View style={styles.container}>
<Button
onPress={() => {
let currentOffset = typeof historyOffset === 'undefined' ? -1 : historyOffset;
currentOffset += 1;
const index = history.length - 1 - currentOffset;
if (history[index]) {
setState({
text: history[index],
historyOffset: 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]) {
setState({
text: history[index],
historyOffset: currentOffset,
});
}
}}
>
<Icon name="right" />
</Button>
<TextInput
multiline
placeholder="{your code here}"
autoCapitalize="none"
autoCorrect={false}
style={styles.input}
value={text}
onChangeText={text => setState({ text })}
/>
<Button
onPress={() => {
const newHistory = [...history, text];
const contextKeys = Object.keys(context);
const contextValues = Object.values(context);
const fn = new Function(...contextKeys, text);
try {
fn(...contextValues);
setState({
text: '',
history: newHistory,
historyOffset: undefined,
});
} catch (err) {
log.error([err]);
}
}}
>
<Icon name="play" />
</Button>
</View>
)}
</State>
);
}) => {
const [text, setText] = useState('');
const [history, setHistory] = useState([]);
const [historyOffset, setHistoryOffset] = useState();
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)}
/>
<Button
onPress={() => {
const newHistory = [...history, text];
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) {
log.error([err]);
}
}}
>
<Icon name="play" />
</Button>
</View>
);
};
export default Input;

69
lib/src/components/DevTool/Console/index.js
View File

@@ -1,11 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import log from '../../../log';
import Log from '../../data/Log';
import State from '../../data/State';
import useLog from '../../data/log';
import Toolbar, {
Button,
Selector,
@@ -33,42 +32,32 @@ const initFilters = [
const Console = ({
includeStackTrace,
}) => (
<Log>
{({ logs }) => (
<State
initState={{
filters: initFilters,
}}
>
{({ filters }, setState) => (
<View style={styles.container}>
<Toolbar>
<Selector
name="Filter"
icon="filter"
options={filters}
multiSelect
onSelect={(selected) => {
setState({
filters: selected,
});
}}
/>
<Seperator />
<Button
name="Clear"
icon="trash"
onPress={() => log.clear()}
/>
</Toolbar>
<Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
<Input />
</View>
)}
</State>
)}
</Log>
);
}) => {
const logs = useLog();
const [filters, setFilters] = useState(initFilters);
return (
<View style={styles.container}>
<Toolbar>
<Selector
name="Filter"
icon="filter"
options={filters}
multiSelect
onSelect={(selected) => {
setFilters([...selected]);
}}
/>
<Seperator />
<Button
name="Clear"
icon="trash"
onPress={() => log.clear()}
/>
</Toolbar>
<Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
<Input />
</View>
);
};
export default Console;

59
lib/src/components/DevTool/Requests/index.js
View File

@@ -1,11 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import network from '../../../network';
import State from '../../data/State';
import Network from '../../data/Network';
import useRequests from '../../data/requests';
import Toolbar, {
Button,
Seperator,
@@ -27,36 +26,28 @@ const styles = StyleSheet.create({
},
});
let i = 0;
const Console = () => (
<State>
{({
active,
}, setState) => (
<Network>
{({ requests }) => {
const selected = active >= 0 ? requests[active] : undefined;
return (
<View style={styles.container}>
<Toolbar>
<Seperator />
<Button
name="Clear"
icon="trash"
onPress={() => network.clear()}
/>
</Toolbar>
<List
selected={selected ? selected.id : undefined}
requests={requests}
onSelect={(i) => setState({ active: i })}
/>
{selected && <Details {...selected} />}
</View>
);
}}
</Network>
)}
</State>
);
const Console = () => {
const requests = useRequests();
const [active, setActive] = useState();
const selected = active >= 0 ? requests[active] : undefined;
return (
<View style={styles.container}>
<Toolbar>
<Seperator />
<Button
name="Clear"
icon="trash"
onPress={() => network.clear()}
/>
</Toolbar>
<List
selected={selected ? selected.id : undefined}
requests={requests}
onSelect={(i) => setActive(i)}
/>
{selected && <Details {...selected} />}
</View>
);
}
export default Console;

86
lib/src/components/DevTool/Storage/index.js
View File

@@ -1,7 +1,6 @@
import React from 'react';
import React, { useState } from 'react';
import styled from 'styled-components/native';
import Storage from '../../data/Storage';
import State from '../../data/State';
import useStorage from '../../data/storage';
import Toolbar, {
Button,
Seperator,
@@ -15,44 +14,47 @@ const Wrapper = styled.View`
const StorageView = ({
provider,
}) => (
<State>
{({ selected }, setState) => (
<Storage provider={provider}>
{(data, update, removeItem, clear) => (
<Wrapper>
<Toolbar>
<Seperator />
<Button
name="Refresh"
icon="reload"
onPress={update}
/>
<Button
name="Clear"
icon="trash"
onPress={clear}
/>
<Button
name="Delete"
icon="remove"
disabled={!selected}
onPress={() => removeItem(selected)}
/>
</Toolbar>
<Keys
selected={selected}
onSelect={(key) => setState({ selected: key })}
keys={Object.keys(data)}
/>
{selected && data[selected] && (
<Value value={data[selected]} />
)}
</Wrapper>
)}
</Storage>
)}
</State>
);
}) => {
const [selected, setSelected] = useState();
const {
data,
update,
removeItem,
clear,
} = useStorage(provider);
return (
<Wrapper>
<Toolbar>
<Seperator />
<Button
name="Refresh"
icon="reload"
onPress={update}
/>
<Button
name="Clear"
icon="trash"
onPress={clear}
/>
<Button
name="Delete"
icon="remove"
disabled={!selected}
onPress={() => removeItem(selected)}
/>
</Toolbar>
<Keys
selected={selected}
onSelect={(key) => {
setSelected(key);
}}
keys={Object.keys(data)}
/>
{selected && data[selected] && (
<Value value={data[selected]} />
)}
</Wrapper>
);
};
export default StorageView;

89
lib/src/components/DevTool/Tab.js
View File

@@ -1,13 +1,11 @@
import React, { Fragment } from 'react';
import React, { Fragment, useState } from 'react';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';
import {
Text,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import State from '../data/State';
import Icon from '../base/Icon';
const styles = StyleSheet.create({
@@ -67,52 +65,45 @@ const Console = ({
tabs,
onClose,
onDownload,
}) => (
<View style={styles.container}>
<State
initState={{
active: 0,
}}
>
{({ active }, setState) => (
<Fragment>
<Header>
<TabScroll horizontal>
<TabWrapper>
{tabs.map(({ name }, i) => (
<Tab
key={name}
style={active === i ? styles.tabActive : styles.tabInactive}
onPress={() => {
setState({ active: i });
}}
>
<Text>{name}</Text>
</Tab>
))}
</TabWrapper>
</TabScroll>
{onDownload && (
<Button
onPress={onDownload}
>
<Icon name="download" />
</Button>
)}
{onClose && (
<Button
onPress={onClose}
>
<Icon name="close" />
</Button>
)}
</Header>
{tabs[active] && tabs[active].view}
</Fragment>
)}
</State>
</View>
);
}) => {
const [active, setActive] = useState(0);
return (
<View style={styles.container}>
<Header>
<TabScroll horizontal>
<TabWrapper>
{tabs.map(({ name }, i) => (
<Tab
key={name}
style={active === i ? styles.tabActive : styles.tabInactive}
onPress={() => {
setActive(i);
}}
>
<Text>{name}</Text>
</Tab>
))}
</TabWrapper>
</TabScroll>
{onDownload && (
<Button
onPress={onDownload}
>
<Icon name="download" />
</Button>
)}
{onClose && (
<Button
onPress={onClose}
>
<Icon name="close" />
</Button>
)}
</Header>
{tabs[active] && tabs[active].view}
</View>
);
};
Console.propTypes = {
tabs: PropTypes.arrayOf(PropTypes.shape({

20
lib/src/components/base/Toolbar/Selector.js
View File

@@ -1,9 +1,8 @@
import React, { Fragment } from 'react';
import React, { Fragment, useState } from 'react';
import {
SafeAreaView,
TouchableOpacity,
} from 'react-native';
import State from '../../data/State';
import Button from './Button';
import Row from '../Row';
import Icon from '../Icon';
@@ -17,14 +16,14 @@ const Selector = ({
onSelect,
options = [],
...others
}) => (
<State>
{({ open }, setState) => (
}) => {
const [open, setOpen] = useState(false);
return (
<Fragment>
<Button
{...others}
onPress={() => {
setState({ open: true })
setOpen(true);
}}
/>
<Modal
@@ -32,7 +31,7 @@ const Selector = ({
transparent={false}
visible={!!open}
onRequestClose={() => {
setState({ open: false })
setOpen(false);
}}
>
<SafeAreaView
@@ -43,7 +42,7 @@ const Selector = ({
name="Close"
icon="close"
onPress={() => {
setState({ open: false })
setOpen(false);
}}
/>
{options.map((option) => (
@@ -69,8 +68,7 @@ const Selector = ({
</SafeAreaView>
</Modal>
</Fragment>
)}
</State>
);
);
};
export default Selector;

49
lib/src/components/data/Log.js
View File

@@ -1,38 +1,19 @@
import { Component } from 'react';
import { useEffect, useState } from 'react';
import log from '../../log';
class Log extends Component {
constructor() {
super();
this.state = {
logs: [],
};
this.setLogs = this.setLogs.bind(this);
}
const useLog = () => {
const [logs, setLogs] = useState([]);
useEffect(() => {
const update = (newLogs) => {
setLogs([...newLogs]);
}
log.listen(update);
componentDidMount() {
log.listen(this.setLogs);
}
return () => {
log.unlisten(update);
}
}, []);
return logs;
};
componentWillUnmount() {
log.unlisten(this.setLogs);
}
setLogs(logs) {
this.setState({
logs,
});
}
render() {
const {
children,
} = this.props;
const component = children(
this.state,
);
return component;
}
}
export default Log;
export default useLog;

38
lib/src/components/data/Network.js
View File

@@ -1,38 +0,0 @@
import { Component } from 'react';
import network from '../../network';
class Network extends Component {
constructor() {
super();
this.state = {
requests: [],
};
this.setRequests = this.setRequests.bind(this);
}
componentDidMount() {
network.listen(this.setRequests);
}
componentWillUnmount() {
network.unlisten(this.setRequests);
}
setRequests(requests) {
this.setState({
requests,
});
}
render() {
const {
children,
} = this.props;
const component = children(
this.state,
);
return component;
}
}
export default Network;

20
lib/src/components/data/State.js
View File

@@ -1,20 +0,0 @@
import React, { Component } from 'react';
class State extends Component {
constructor(props, ...others) {
super(props, ...others);
this.state = props.initState || {};
this.setState = this.setState.bind(this);
}
render() {
const { children } = this.props;
const component = children(
this.state,
this.setState,
);
return component;
}
}
export default State;

81
lib/src/components/data/Storage.js
View File

@@ -1,57 +1,40 @@
import { Component } from 'react';
import { useState, useEffect } from 'react';
class Storage extends Component {
constructor() {
super();
this.state = {
data: {},
};
this.update = this.update.bind(this);
this.removeItem = this.removeItem.bind(this);
this.clear = this.clear.bind(this);
}
const useStorage = (provider) => {
const [data, setData] = useState({});
componentDidMount() {
this.update();
}
async removeItem(name) {
await this.props.provider.removeItem(name);
await this.update();
}
async clear() {
await this.props.provider.clear();
await this.update();
}
async update() {
try {
const keys = await this.props.provider.getAllKeys();
const values = await Promise.all(keys.map(key => this.props.provider.getItem(key)));
const data = {};
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const value = values[i];
data[key] = value;
}
this.setState({
data,
});
} catch (err) {
console.error(err);
const update = async () => {
const keys = await provider.getAllKeys();
const values = await Promise.all(keys.map(key => provider.getItem(key)));
const data = {};
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const value = values[i];
data[key] = value;
}
setData(data);
};
const removeItem = async (name) => {
await provider.removeItem(name);
await update();
}
render() {
const {
children,
} = this.props;
const {
data,
} = this.state;
return children(data, this.update, this.removeItem, this.clear);
const clear = async () => {
await provider.clear();
await update();
}
useEffect(() => {
update().catch(err => console.error(err));
}, []);
return {
data,
update,
removeItem,
clear,
}
}
export default Storage;
export default useStorage;

19
lib/src/components/data/requests.js Normal file
View File

@@ -0,0 +1,19 @@
import { useState, useEffect } from 'react';
import network from '../../network';
const useRequests = () => {
const [requests, setRequests] = useState([]);
useEffect(() => {
const update = (newRequests) => {
setRequests(newRequests);
};
network.listen(update);
return () => {
network.unlisten(update);
};
}, []);
return requests;
};
export default useRequests;