mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-10-30 23:47:35 +03:00
Extract LogMonitor
This commit is contained in:
Dan Abramov
parent
730860de0a
commit
274d0cba27
19
README.md
19
README.md
|
|
@ -13,9 +13,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
|
||||||
* If you change the reducer code, each “staged” action will be re-evaluted
|
* If you change the reducer code, each “staged” action will be re-evaluted
|
||||||
* If the reducers throw, you will see during which action this happened, and what the error was
|
* If the reducers throw, you will see during which action this happened, and what the error was
|
||||||
* With `persistState()` store enhancer, you can persist debug sessions across page reloads
|
* With `persistState()` store enhancer, you can persist debug sessions across page reloads
|
||||||
* To monitor a part of the state, you can set a `select` prop on the DevTools component: `<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />`
|
|
||||||
* Toggle visibility with Ctrl+H
|
* Toggle visibility with Ctrl+H
|
||||||
* To hide the devtools on load, set `visibleOnLoad` to false, e.g.: `<DevTools store={store} monitor={LogMonitor} visibleOnLoad={false} />`
|
|
||||||
|
|
||||||
### Installation
|
### Installation
|
||||||
|
|
||||||
|
|
@ -30,10 +28,12 @@ To install, firstly import `devTools` into your root React component:
|
||||||
```js
|
```js
|
||||||
// Redux utility functions
|
// Redux utility functions
|
||||||
import { compose, createStore, applyMiddleware } from 'redux';
|
import { compose, createStore, applyMiddleware } from 'redux';
|
||||||
|
|
||||||
// Redux DevTools store enhancers
|
// Redux DevTools store enhancers
|
||||||
import { devTools, persistState } from 'redux-devtools';
|
import { devTools, persistState } from 'redux-devtools';
|
||||||
// React components for Redux DevTools
|
|
||||||
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
|
// A monitor component for Redux DevTools
|
||||||
|
import LogMonitor from 'redux-devtools-log-monitor';
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, add `devTools` to your store enhancers, and create your store:
|
Then, add `devTools` to your store enhancers, and create your store:
|
||||||
|
|
@ -42,8 +42,10 @@ Then, add `devTools` to your store enhancers, and create your store:
|
||||||
const finalCreateStore = compose(
|
const finalCreateStore = compose(
|
||||||
// Enables your middleware:
|
// Enables your middleware:
|
||||||
applyMiddleware(m1, m2, m3), // any Redux middleware, e.g. redux-thunk
|
applyMiddleware(m1, m2, m3), // any Redux middleware, e.g. redux-thunk
|
||||||
|
|
||||||
// Provides support for DevTools:
|
// Provides support for DevTools:
|
||||||
devTools(),
|
devTools(),
|
||||||
|
|
||||||
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
|
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
|
||||||
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
|
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
|
||||||
)(createStore);
|
)(createStore);
|
||||||
|
|
@ -51,7 +53,7 @@ const finalCreateStore = compose(
|
||||||
const store = finalCreateStore(reducer);
|
const store = finalCreateStore(reducer);
|
||||||
```
|
```
|
||||||
|
|
||||||
Finally, include the `DevTools` in your page. You may pass either `LogMonitor` (the default one) or any of the custom monitors described below. For convenience, you can use `DebugPanel` to dock `DevTools` to some part of the screen, but you can put it also somewhere else in the component tree.
|
Finally, include the `DevTools` in your page. You may pass either `LogMonitor` (the default one) or any of the custom monitors described below.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default class Root extends Component {
|
export default class Root extends Component {
|
||||||
|
|
@ -59,11 +61,10 @@ export default class Root extends Component {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
{() => <CounterApp />}
|
<CounterApp />
|
||||||
</Provider>
|
</Provider>
|
||||||
<DebugPanel top right bottom>
|
|
||||||
<DevTools store={store} monitor={LogMonitor} />
|
<LogMonitor store={store.devToolsStore} />
|
||||||
</DebugPanel>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -53,8 +53,6 @@
|
||||||
"redux": "^2.0.0 || ^3.0.0"
|
"redux": "^2.0.0 || ^3.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react-json-tree": "^0.1.9",
|
|
||||||
"react-mixin": "^1.7.0",
|
|
||||||
"react-redux": "^3.0.0",
|
"react-redux": "^3.0.0",
|
||||||
"redux": "^2.0.0 || ^3.0.0"
|
"redux": "^2.0.0 || ^3.0.0"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
6
src/connectMonitor.js
Normal file
6
src/connectMonitor.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { ActionCreators } from './devTools';
|
||||||
|
|
||||||
|
export default function connectMonitor(Monitor) {
|
||||||
|
return connect(state => state, ActionCreators)(Monitor);
|
||||||
|
}
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import createAll from 'react-redux/lib/components/createAll';
|
|
||||||
import { ActionCreators } from './devTools';
|
|
||||||
|
|
||||||
export default function createDevTools(React) {
|
|
||||||
const { PropTypes, Component } = React;
|
|
||||||
const { connect } = createAll(React);
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => state,
|
|
||||||
ActionCreators
|
|
||||||
)
|
|
||||||
class DevTools extends Component {
|
|
||||||
render() {
|
|
||||||
const { monitor: Monitor } = this.props;
|
|
||||||
return <Monitor {...this.props} />;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return class DevToolsWrapper extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
monitor: PropTypes.func.isRequired,
|
|
||||||
store: PropTypes.shape({
|
|
||||||
devToolsStore: PropTypes.shape({
|
|
||||||
dispatch: PropTypes.func.isRequired
|
|
||||||
}).isRequired
|
|
||||||
}).isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props, context) {
|
|
||||||
if (props.store && !props.store.devToolsStore) {
|
|
||||||
console.error(
|
|
||||||
'Could not find the devTools store inside your store. ' +
|
|
||||||
'Have you applied devTools() store enhancer?'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
super(props, context);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<DevTools {...this.props}
|
|
||||||
store={this.props.store.devToolsStore} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
export { default as devTools } from './devTools';
|
export { default as devTools } from './devTools';
|
||||||
export { default as persistState } from './persistState';
|
export { default as persistState } from './persistState';
|
||||||
|
export { default as connectMonitor } from './connectMonitor';
|
||||||
|
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
import React, { PropTypes, Component } from 'react';
|
|
||||||
|
|
||||||
export function getDefaultStyle(props) {
|
|
||||||
let { left, right, bottom, top } = props;
|
|
||||||
if (typeof left === 'undefined' && typeof right === 'undefined') {
|
|
||||||
right = true;
|
|
||||||
}
|
|
||||||
if (typeof top === 'undefined' && typeof bottom === 'undefined') {
|
|
||||||
bottom = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
position: 'fixed',
|
|
||||||
zIndex: 10000,
|
|
||||||
fontSize: 17,
|
|
||||||
overflow: 'hidden',
|
|
||||||
opacity: 1,
|
|
||||||
color: 'white',
|
|
||||||
left: left ? 0 : undefined,
|
|
||||||
right: right ? 0 : undefined,
|
|
||||||
top: top ? 0 : undefined,
|
|
||||||
bottom: bottom ? 0 : undefined,
|
|
||||||
maxHeight: (bottom && top) ? '100%' : '30%',
|
|
||||||
maxWidth: (left && right) ? '100%' : '30%',
|
|
||||||
wordWrap: 'break-word',
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
boxShadow: '-2px 0 7px 0 rgba(0, 0, 0, 0.5)'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class DebugPanel extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
left: PropTypes.bool,
|
|
||||||
right: PropTypes.bool,
|
|
||||||
bottom: PropTypes.bool,
|
|
||||||
top: PropTypes.bool,
|
|
||||||
getStyle: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
getStyle: getDefaultStyle
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div style={{...this.props.getStyle(this.props), ...this.props.style}}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,190 +0,0 @@
|
||||||
import React, { PropTypes, findDOMNode, Component } from 'react';
|
|
||||||
import LogMonitorEntry from './LogMonitorEntry';
|
|
||||||
import LogMonitorButton from './LogMonitorButton';
|
|
||||||
import * as themes from './themes';
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
container: {
|
|
||||||
fontFamily: 'monaco, Consolas, Lucida Console, monospace',
|
|
||||||
position: 'relative',
|
|
||||||
overflowY: 'hidden',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
minWidth: 300
|
|
||||||
},
|
|
||||||
buttonBar: {
|
|
||||||
textAlign: 'center',
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomStyle: 'solid',
|
|
||||||
borderColor: 'transparent',
|
|
||||||
zIndex: 1,
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row'
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
top: 38,
|
|
||||||
bottom: 0,
|
|
||||||
overflowX: 'hidden',
|
|
||||||
overflowY: 'auto'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class LogMonitor extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
window.addEventListener('keydown', ::this.handleKeyPress);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
computedStates: PropTypes.array.isRequired,
|
|
||||||
currentStateIndex: PropTypes.number.isRequired,
|
|
||||||
monitorState: PropTypes.object.isRequired,
|
|
||||||
stagedActions: PropTypes.array.isRequired,
|
|
||||||
skippedActions: PropTypes.object.isRequired,
|
|
||||||
reset: PropTypes.func.isRequired,
|
|
||||||
commit: PropTypes.func.isRequired,
|
|
||||||
rollback: PropTypes.func.isRequired,
|
|
||||||
sweep: PropTypes.func.isRequired,
|
|
||||||
toggleAction: PropTypes.func.isRequired,
|
|
||||||
jumpToState: PropTypes.func.isRequired,
|
|
||||||
setMonitorState: PropTypes.func.isRequired,
|
|
||||||
select: PropTypes.func.isRequired,
|
|
||||||
visibleOnLoad: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
select: (state) => state,
|
|
||||||
monitorState: { isVisible: true },
|
|
||||||
theme: 'nicinabox',
|
|
||||||
visibleOnLoad: true
|
|
||||||
};
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
const node = findDOMNode(this.refs.elements);
|
|
||||||
if (!node) {
|
|
||||||
this.scrollDown = true;
|
|
||||||
} else if (
|
|
||||||
this.props.stagedActions.length < nextProps.stagedActions.length
|
|
||||||
) {
|
|
||||||
const { scrollTop, offsetHeight, scrollHeight } = node;
|
|
||||||
|
|
||||||
this.scrollDown = Math.abs(
|
|
||||||
scrollHeight - (scrollTop + offsetHeight)
|
|
||||||
) < 20;
|
|
||||||
} else {
|
|
||||||
this.scrollDown = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
const node = findDOMNode(this.refs.elements);
|
|
||||||
if (!node) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.scrollDown) {
|
|
||||||
const { offsetHeight, scrollHeight } = node;
|
|
||||||
node.scrollTop = scrollHeight - offsetHeight;
|
|
||||||
this.scrollDown = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
let visibleOnLoad = this.props.visibleOnLoad;
|
|
||||||
const { monitorState } = this.props;
|
|
||||||
this.props.setMonitorState({
|
|
||||||
...monitorState,
|
|
||||||
isVisible: visibleOnLoad
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleRollback() {
|
|
||||||
this.props.rollback();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSweep() {
|
|
||||||
this.props.sweep();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCommit() {
|
|
||||||
this.props.commit();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleToggleAction(index) {
|
|
||||||
this.props.toggleAction(index);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleReset() {
|
|
||||||
this.props.reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleKeyPress(event) {
|
|
||||||
const { monitorState } = this.props;
|
|
||||||
|
|
||||||
if (event.ctrlKey && event.keyCode === 72) { // Ctrl+H
|
|
||||||
event.preventDefault();
|
|
||||||
this.props.setMonitorState({
|
|
||||||
...monitorState,
|
|
||||||
isVisible: !monitorState.isVisible
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const elements = [];
|
|
||||||
const { monitorState, skippedActions, stagedActions, computedStates, select } = this.props;
|
|
||||||
let theme;
|
|
||||||
if (typeof this.props.theme === 'string') {
|
|
||||||
if (typeof themes[this.props.theme] !== 'undefined') {
|
|
||||||
theme = themes[this.props.theme];
|
|
||||||
} else {
|
|
||||||
console.warn('DevTools theme ' + this.props.theme + ' not found, defaulting to nicinabox');
|
|
||||||
theme = themes.nicinabox;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
theme = this.props.theme;
|
|
||||||
}
|
|
||||||
if (!monitorState.isVisible) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < stagedActions.length; i++) {
|
|
||||||
const action = stagedActions[i];
|
|
||||||
const { state, error } = computedStates[i];
|
|
||||||
let previousState;
|
|
||||||
if (i > 0) {
|
|
||||||
previousState = computedStates[i - 1].state;
|
|
||||||
}
|
|
||||||
elements.push(
|
|
||||||
<LogMonitorEntry key={i}
|
|
||||||
index={i}
|
|
||||||
theme={theme}
|
|
||||||
select={select}
|
|
||||||
action={action}
|
|
||||||
state={state}
|
|
||||||
previousState={previousState}
|
|
||||||
collapsed={skippedActions[i]}
|
|
||||||
error={error}
|
|
||||||
onActionClick={::this.handleToggleAction} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{...styles.container, backgroundColor: theme.base00}}>
|
|
||||||
<div style={{...styles.buttonBar, borderColor: theme.base02}}>
|
|
||||||
<LogMonitorButton theme={theme} onClick={::this.handleReset}>Reset</LogMonitorButton>
|
|
||||||
<LogMonitorButton theme={theme} onClick={::this.handleRollback} enabled={computedStates.length}>Revert</LogMonitorButton>
|
|
||||||
<LogMonitorButton theme={theme} onClick={::this.handleSweep} enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>Sweep</LogMonitorButton>
|
|
||||||
<LogMonitorButton theme={theme} onClick={::this.handleCommit} enabled={computedStates.length > 1}>Commit</LogMonitorButton>
|
|
||||||
</div>
|
|
||||||
<div style={styles.elements} ref="elements">
|
|
||||||
{elements}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import brighten from '../utils/brighten';
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
base: {
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
borderRadius: 3,
|
|
||||||
padding: 4,
|
|
||||||
marginLeft: 3,
|
|
||||||
marginRight: 3,
|
|
||||||
marginTop: 5,
|
|
||||||
marginBottom: 5,
|
|
||||||
flexGrow: 1,
|
|
||||||
display: 'inline-block',
|
|
||||||
fontSize: '0.8em',
|
|
||||||
color: 'white',
|
|
||||||
textDecoration: 'none'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class LogMonitorButton extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
hovered: false,
|
|
||||||
active: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseEnter() {
|
|
||||||
this.setState({ hovered: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseLeave() {
|
|
||||||
this.setState({ hovered: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseDown() {
|
|
||||||
this.setState({ active: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseUp() {
|
|
||||||
this.setState({ active: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick() {
|
|
||||||
if (!this.props.enabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.props.onClick) {
|
|
||||||
this.props.onClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let style = {
|
|
||||||
...styles.base,
|
|
||||||
backgroundColor: this.props.theme.base02
|
|
||||||
};
|
|
||||||
if (this.props.enabled && this.state.hovered) {
|
|
||||||
style = {
|
|
||||||
...style,
|
|
||||||
backgroundColor: brighten(this.props.theme.base02, 0.2)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (!this.props.enabled) {
|
|
||||||
style = {
|
|
||||||
...style,
|
|
||||||
opacity: 0.2,
|
|
||||||
cursor: 'text',
|
|
||||||
backgroundColor: 'transparent'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<a onMouseEnter={::this.handleMouseEnter}
|
|
||||||
onMouseLeave={::this.handleMouseLeave}
|
|
||||||
onMouseDown={::this.handleMouseDown}
|
|
||||||
onMouseUp={::this.handleMouseUp}
|
|
||||||
style={style} onClick={::this.onClick}>
|
|
||||||
{this.props.children}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
import React, { PropTypes, Component } from 'react';
|
|
||||||
import JSONTree from 'react-json-tree';
|
|
||||||
import LogMonitorEntryAction from './LogMonitorEntryAction';
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
entry: {
|
|
||||||
display: 'block',
|
|
||||||
WebkitUserSelect: 'none'
|
|
||||||
},
|
|
||||||
tree: {
|
|
||||||
paddingLeft: 0
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class LogMonitorEntry extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
index: PropTypes.number.isRequired,
|
|
||||||
state: PropTypes.object.isRequired,
|
|
||||||
action: PropTypes.object.isRequired,
|
|
||||||
select: PropTypes.func.isRequired,
|
|
||||||
error: PropTypes.string,
|
|
||||||
onActionClick: PropTypes.func.isRequired,
|
|
||||||
collapsed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
printState(state, error) {
|
|
||||||
let errorText = error;
|
|
||||||
if (!errorText) {
|
|
||||||
try {
|
|
||||||
return <JSONTree
|
|
||||||
theme={this.props.theme}
|
|
||||||
keyName={'state'}
|
|
||||||
data={this.props.select(state)}
|
|
||||||
previousData={this.props.select(this.props.previousState)}
|
|
||||||
style={styles.tree}/>;
|
|
||||||
} catch (err) {
|
|
||||||
errorText = 'Error selecting state.';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
color: this.props.theme.base08,
|
|
||||||
paddingTop: 20,
|
|
||||||
paddingLeft: 30,
|
|
||||||
paddingRight: 30,
|
|
||||||
paddingBottom: 35
|
|
||||||
}}>
|
|
||||||
{errorText}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleActionClick() {
|
|
||||||
const { index, onActionClick } = this.props;
|
|
||||||
if (index > 0) {
|
|
||||||
onActionClick(index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { index, error, action, state, collapsed } = this.props;
|
|
||||||
const styleEntry = {
|
|
||||||
opacity: collapsed ? 0.5 : 1,
|
|
||||||
cursor: (index > 0) ? 'pointer' : 'default'
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div style={{textDecoration: collapsed ? 'line-through' : 'none'}}>
|
|
||||||
<LogMonitorEntryAction
|
|
||||||
theme={this.props.theme}
|
|
||||||
collapsed={collapsed}
|
|
||||||
action={action}
|
|
||||||
onClick={::this.handleActionClick}
|
|
||||||
style={{...styles.entry, ...styleEntry}}/>
|
|
||||||
{!collapsed &&
|
|
||||||
<div>
|
|
||||||
{this.printState(state, error)}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import JSONTree from 'react-json-tree';
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
actionBar: {
|
|
||||||
paddingTop: 8,
|
|
||||||
paddingBottom: 7,
|
|
||||||
paddingLeft: 16
|
|
||||||
},
|
|
||||||
payload: {
|
|
||||||
margin: 0,
|
|
||||||
overflow: 'auto'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class LogMonitorAction extends React.Component {
|
|
||||||
|
|
||||||
renderPayload(payload) {
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
...styles.payload,
|
|
||||||
backgroundColor: this.props.theme.base00
|
|
||||||
}}>
|
|
||||||
{ Object.keys(payload).length > 0 ? <JSONTree theme={this.props.theme} keyName={'action'} data={payload}/> : '' }
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { type, ...payload } = this.props.action;
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
backgroundColor: this.props.theme.base02,
|
|
||||||
color: this.props.theme.base06,
|
|
||||||
...this.props.style
|
|
||||||
}}>
|
|
||||||
<div style={styles.actionBar}
|
|
||||||
onClick={this.props.onClick}>
|
|
||||||
{type}
|
|
||||||
</div>
|
|
||||||
{!this.props.collapsed ? this.renderPayload(payload) : ''}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import createDevTools from '../createDevTools';
|
|
||||||
|
|
||||||
export const DevTools = createDevTools(React);
|
|
||||||
export { default as LogMonitor } from './LogMonitor';
|
|
||||||
export { default as DebugPanel } from './DebugPanel';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
// TODO
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export default {
|
|
||||||
ocean: {
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'apathy',
|
|
||||||
author: 'jannik siebert (https://github.com/janniks)',
|
|
||||||
base00: '#031A16',
|
|
||||||
base01: '#0B342D',
|
|
||||||
base02: '#184E45',
|
|
||||||
base03: '#2B685E',
|
|
||||||
base04: '#5F9C92',
|
|
||||||
base05: '#81B5AC',
|
|
||||||
base06: '#A7CEC8',
|
|
||||||
base07: '#D2E7E4',
|
|
||||||
base08: '#3E9688',
|
|
||||||
base09: '#3E7996',
|
|
||||||
base0A: '#3E4C96',
|
|
||||||
base0B: '#883E96',
|
|
||||||
base0C: '#963E4C',
|
|
||||||
base0D: '#96883E',
|
|
||||||
base0E: '#4C963E',
|
|
||||||
base0F: '#3E965B'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'ashes',
|
|
||||||
author: 'jannik siebert (https://github.com/janniks)',
|
|
||||||
base00: '#1C2023',
|
|
||||||
base01: '#393F45',
|
|
||||||
base02: '#565E65',
|
|
||||||
base03: '#747C84',
|
|
||||||
base04: '#ADB3BA',
|
|
||||||
base05: '#C7CCD1',
|
|
||||||
base06: '#DFE2E5',
|
|
||||||
base07: '#F3F4F5',
|
|
||||||
base08: '#C7AE95',
|
|
||||||
base09: '#C7C795',
|
|
||||||
base0A: '#AEC795',
|
|
||||||
base0B: '#95C7AE',
|
|
||||||
base0C: '#95AEC7',
|
|
||||||
base0D: '#AE95C7',
|
|
||||||
base0E: '#C795AE',
|
|
||||||
base0F: '#C79595'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'atelier dune',
|
|
||||||
author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)',
|
|
||||||
base00: '#20201d',
|
|
||||||
base01: '#292824',
|
|
||||||
base02: '#6e6b5e',
|
|
||||||
base03: '#7d7a68',
|
|
||||||
base04: '#999580',
|
|
||||||
base05: '#a6a28c',
|
|
||||||
base06: '#e8e4cf',
|
|
||||||
base07: '#fefbec',
|
|
||||||
base08: '#d73737',
|
|
||||||
base09: '#b65611',
|
|
||||||
base0A: '#cfb017',
|
|
||||||
base0B: '#60ac39',
|
|
||||||
base0C: '#1fad83',
|
|
||||||
base0D: '#6684e1',
|
|
||||||
base0E: '#b854d4',
|
|
||||||
base0F: '#d43552'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'atelier forest',
|
|
||||||
author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest)',
|
|
||||||
base00: '#1b1918',
|
|
||||||
base01: '#2c2421',
|
|
||||||
base02: '#68615e',
|
|
||||||
base03: '#766e6b',
|
|
||||||
base04: '#9c9491',
|
|
||||||
base05: '#a8a19f',
|
|
||||||
base06: '#e6e2e0',
|
|
||||||
base07: '#f1efee',
|
|
||||||
base08: '#f22c40',
|
|
||||||
base09: '#df5320',
|
|
||||||
base0A: '#d5911a',
|
|
||||||
base0B: '#5ab738',
|
|
||||||
base0C: '#00ad9c',
|
|
||||||
base0D: '#407ee7',
|
|
||||||
base0E: '#6666ea',
|
|
||||||
base0F: '#c33ff3'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'atelier heath',
|
|
||||||
author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath)',
|
|
||||||
base00: '#1b181b',
|
|
||||||
base01: '#292329',
|
|
||||||
base02: '#695d69',
|
|
||||||
base03: '#776977',
|
|
||||||
base04: '#9e8f9e',
|
|
||||||
base05: '#ab9bab',
|
|
||||||
base06: '#d8cad8',
|
|
||||||
base07: '#f7f3f7',
|
|
||||||
base08: '#ca402b',
|
|
||||||
base09: '#a65926',
|
|
||||||
base0A: '#bb8a35',
|
|
||||||
base0B: '#379a37',
|
|
||||||
base0C: '#159393',
|
|
||||||
base0D: '#516aec',
|
|
||||||
base0E: '#7b59c0',
|
|
||||||
base0F: '#cc33cc'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'atelier lakeside',
|
|
||||||
author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/)',
|
|
||||||
base00: '#161b1d',
|
|
||||||
base01: '#1f292e',
|
|
||||||
base02: '#516d7b',
|
|
||||||
base03: '#5a7b8c',
|
|
||||||
base04: '#7195a8',
|
|
||||||
base05: '#7ea2b4',
|
|
||||||
base06: '#c1e4f6',
|
|
||||||
base07: '#ebf8ff',
|
|
||||||
base08: '#d22d72',
|
|
||||||
base09: '#935c25',
|
|
||||||
base0A: '#8a8a0f',
|
|
||||||
base0B: '#568c3b',
|
|
||||||
base0C: '#2d8f6f',
|
|
||||||
base0D: '#257fad',
|
|
||||||
base0E: '#5d5db1',
|
|
||||||
base0F: '#b72dd2'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'atelier seaside',
|
|
||||||
author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/)',
|
|
||||||
base00: '#131513',
|
|
||||||
base01: '#242924',
|
|
||||||
base02: '#5e6e5e',
|
|
||||||
base03: '#687d68',
|
|
||||||
base04: '#809980',
|
|
||||||
base05: '#8ca68c',
|
|
||||||
base06: '#cfe8cf',
|
|
||||||
base07: '#f0fff0',
|
|
||||||
base08: '#e6193c',
|
|
||||||
base09: '#87711d',
|
|
||||||
base0A: '#c3c322',
|
|
||||||
base0B: '#29a329',
|
|
||||||
base0C: '#1999b3',
|
|
||||||
base0D: '#3d62f5',
|
|
||||||
base0E: '#ad2bee',
|
|
||||||
base0F: '#e619c3'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'bespin',
|
|
||||||
author: 'jan t. sott',
|
|
||||||
base00: '#28211c',
|
|
||||||
base01: '#36312e',
|
|
||||||
base02: '#5e5d5c',
|
|
||||||
base03: '#666666',
|
|
||||||
base04: '#797977',
|
|
||||||
base05: '#8a8986',
|
|
||||||
base06: '#9d9b97',
|
|
||||||
base07: '#baae9e',
|
|
||||||
base08: '#cf6a4c',
|
|
||||||
base09: '#cf7d34',
|
|
||||||
base0A: '#f9ee98',
|
|
||||||
base0B: '#54be0d',
|
|
||||||
base0C: '#afc4db',
|
|
||||||
base0D: '#5ea6ea',
|
|
||||||
base0E: '#9b859d',
|
|
||||||
base0F: '#937121'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'brewer',
|
|
||||||
author: 'timothée poisot (http://github.com/tpoisot)',
|
|
||||||
base00: '#0c0d0e',
|
|
||||||
base01: '#2e2f30',
|
|
||||||
base02: '#515253',
|
|
||||||
base03: '#737475',
|
|
||||||
base04: '#959697',
|
|
||||||
base05: '#b7b8b9',
|
|
||||||
base06: '#dadbdc',
|
|
||||||
base07: '#fcfdfe',
|
|
||||||
base08: '#e31a1c',
|
|
||||||
base09: '#e6550d',
|
|
||||||
base0A: '#dca060',
|
|
||||||
base0B: '#31a354',
|
|
||||||
base0C: '#80b1d3',
|
|
||||||
base0D: '#3182bd',
|
|
||||||
base0E: '#756bb1',
|
|
||||||
base0F: '#b15928'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'bright',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#000000',
|
|
||||||
base01: '#303030',
|
|
||||||
base02: '#505050',
|
|
||||||
base03: '#b0b0b0',
|
|
||||||
base04: '#d0d0d0',
|
|
||||||
base05: '#e0e0e0',
|
|
||||||
base06: '#f5f5f5',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#fb0120',
|
|
||||||
base09: '#fc6d24',
|
|
||||||
base0A: '#fda331',
|
|
||||||
base0B: '#a1c659',
|
|
||||||
base0C: '#76c7b7',
|
|
||||||
base0D: '#6fb3d2',
|
|
||||||
base0E: '#d381c3',
|
|
||||||
base0F: '#be643c'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'chalk',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#151515',
|
|
||||||
base01: '#202020',
|
|
||||||
base02: '#303030',
|
|
||||||
base03: '#505050',
|
|
||||||
base04: '#b0b0b0',
|
|
||||||
base05: '#d0d0d0',
|
|
||||||
base06: '#e0e0e0',
|
|
||||||
base07: '#f5f5f5',
|
|
||||||
base08: '#fb9fb1',
|
|
||||||
base09: '#eda987',
|
|
||||||
base0A: '#ddb26f',
|
|
||||||
base0B: '#acc267',
|
|
||||||
base0C: '#12cfc0',
|
|
||||||
base0D: '#6fc2ef',
|
|
||||||
base0E: '#e1a3ee',
|
|
||||||
base0F: '#deaf8f'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'codeschool',
|
|
||||||
author: 'brettof86',
|
|
||||||
base00: '#232c31',
|
|
||||||
base01: '#1c3657',
|
|
||||||
base02: '#2a343a',
|
|
||||||
base03: '#3f4944',
|
|
||||||
base04: '#84898c',
|
|
||||||
base05: '#9ea7a6',
|
|
||||||
base06: '#a7cfa3',
|
|
||||||
base07: '#b5d8f6',
|
|
||||||
base08: '#2a5491',
|
|
||||||
base09: '#43820d',
|
|
||||||
base0A: '#a03b1e',
|
|
||||||
base0B: '#237986',
|
|
||||||
base0C: '#b02f30',
|
|
||||||
base0D: '#484d79',
|
|
||||||
base0E: '#c59820',
|
|
||||||
base0F: '#c98344'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'colors',
|
|
||||||
author: 'mrmrs (http://clrs.cc)',
|
|
||||||
base00: '#111111',
|
|
||||||
base01: '#333333',
|
|
||||||
base02: '#555555',
|
|
||||||
base03: '#777777',
|
|
||||||
base04: '#999999',
|
|
||||||
base05: '#bbbbbb',
|
|
||||||
base06: '#dddddd',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#ff4136',
|
|
||||||
base09: '#ff851b',
|
|
||||||
base0A: '#ffdc00',
|
|
||||||
base0B: '#2ecc40',
|
|
||||||
base0C: '#7fdbff',
|
|
||||||
base0D: '#0074d9',
|
|
||||||
base0E: '#b10dc9',
|
|
||||||
base0F: '#85144b'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'default',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#181818',
|
|
||||||
base01: '#282828',
|
|
||||||
base02: '#383838',
|
|
||||||
base03: '#585858',
|
|
||||||
base04: '#b8b8b8',
|
|
||||||
base05: '#d8d8d8',
|
|
||||||
base06: '#e8e8e8',
|
|
||||||
base07: '#f8f8f8',
|
|
||||||
base08: '#ab4642',
|
|
||||||
base09: '#dc9656',
|
|
||||||
base0A: '#f7ca88',
|
|
||||||
base0B: '#a1b56c',
|
|
||||||
base0C: '#86c1b9',
|
|
||||||
base0D: '#7cafc2',
|
|
||||||
base0E: '#ba8baf',
|
|
||||||
base0F: '#a16946'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'eighties',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#2d2d2d',
|
|
||||||
base01: '#393939',
|
|
||||||
base02: '#515151',
|
|
||||||
base03: '#747369',
|
|
||||||
base04: '#a09f93',
|
|
||||||
base05: '#d3d0c8',
|
|
||||||
base06: '#e8e6df',
|
|
||||||
base07: '#f2f0ec',
|
|
||||||
base08: '#f2777a',
|
|
||||||
base09: '#f99157',
|
|
||||||
base0A: '#ffcc66',
|
|
||||||
base0B: '#99cc99',
|
|
||||||
base0C: '#66cccc',
|
|
||||||
base0D: '#6699cc',
|
|
||||||
base0E: '#cc99cc',
|
|
||||||
base0F: '#d27b53'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'embers',
|
|
||||||
author: 'jannik siebert (https://github.com/janniks)',
|
|
||||||
base00: '#16130F',
|
|
||||||
base01: '#2C2620',
|
|
||||||
base02: '#433B32',
|
|
||||||
base03: '#5A5047',
|
|
||||||
base04: '#8A8075',
|
|
||||||
base05: '#A39A90',
|
|
||||||
base06: '#BEB6AE',
|
|
||||||
base07: '#DBD6D1',
|
|
||||||
base08: '#826D57',
|
|
||||||
base09: '#828257',
|
|
||||||
base0A: '#6D8257',
|
|
||||||
base0B: '#57826D',
|
|
||||||
base0C: '#576D82',
|
|
||||||
base0D: '#6D5782',
|
|
||||||
base0E: '#82576D',
|
|
||||||
base0F: '#825757'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'flat',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#2C3E50',
|
|
||||||
base01: '#34495E',
|
|
||||||
base02: '#7F8C8D',
|
|
||||||
base03: '#95A5A6',
|
|
||||||
base04: '#BDC3C7',
|
|
||||||
base05: '#e0e0e0',
|
|
||||||
base06: '#f5f5f5',
|
|
||||||
base07: '#ECF0F1',
|
|
||||||
base08: '#E74C3C',
|
|
||||||
base09: '#E67E22',
|
|
||||||
base0A: '#F1C40F',
|
|
||||||
base0B: '#2ECC71',
|
|
||||||
base0C: '#1ABC9C',
|
|
||||||
base0D: '#3498DB',
|
|
||||||
base0E: '#9B59B6',
|
|
||||||
base0F: '#be643c'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'google',
|
|
||||||
author: 'seth wright (http://sethawright.com)',
|
|
||||||
base00: '#1d1f21',
|
|
||||||
base01: '#282a2e',
|
|
||||||
base02: '#373b41',
|
|
||||||
base03: '#969896',
|
|
||||||
base04: '#b4b7b4',
|
|
||||||
base05: '#c5c8c6',
|
|
||||||
base06: '#e0e0e0',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#CC342B',
|
|
||||||
base09: '#F96A38',
|
|
||||||
base0A: '#FBA922',
|
|
||||||
base0B: '#198844',
|
|
||||||
base0C: '#3971ED',
|
|
||||||
base0D: '#3971ED',
|
|
||||||
base0E: '#A36AC7',
|
|
||||||
base0F: '#3971ED'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'grayscale',
|
|
||||||
author: 'alexandre gavioli (https://github.com/alexx2/)',
|
|
||||||
base00: '#101010',
|
|
||||||
base01: '#252525',
|
|
||||||
base02: '#464646',
|
|
||||||
base03: '#525252',
|
|
||||||
base04: '#ababab',
|
|
||||||
base05: '#b9b9b9',
|
|
||||||
base06: '#e3e3e3',
|
|
||||||
base07: '#f7f7f7',
|
|
||||||
base08: '#7c7c7c',
|
|
||||||
base09: '#999999',
|
|
||||||
base0A: '#a0a0a0',
|
|
||||||
base0B: '#8e8e8e',
|
|
||||||
base0C: '#868686',
|
|
||||||
base0D: '#686868',
|
|
||||||
base0E: '#747474',
|
|
||||||
base0F: '#5e5e5e'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'green screen',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#001100',
|
|
||||||
base01: '#003300',
|
|
||||||
base02: '#005500',
|
|
||||||
base03: '#007700',
|
|
||||||
base04: '#009900',
|
|
||||||
base05: '#00bb00',
|
|
||||||
base06: '#00dd00',
|
|
||||||
base07: '#00ff00',
|
|
||||||
base08: '#007700',
|
|
||||||
base09: '#009900',
|
|
||||||
base0A: '#007700',
|
|
||||||
base0B: '#00bb00',
|
|
||||||
base0C: '#005500',
|
|
||||||
base0D: '#009900',
|
|
||||||
base0E: '#00bb00',
|
|
||||||
base0F: '#005500'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'harmonic16',
|
|
||||||
author: 'jannik siebert (https://github.com/janniks)',
|
|
||||||
base00: '#0b1c2c',
|
|
||||||
base01: '#223b54',
|
|
||||||
base02: '#405c79',
|
|
||||||
base03: '#627e99',
|
|
||||||
base04: '#aabcce',
|
|
||||||
base05: '#cbd6e2',
|
|
||||||
base06: '#e5ebf1',
|
|
||||||
base07: '#f7f9fb',
|
|
||||||
base08: '#bf8b56',
|
|
||||||
base09: '#bfbf56',
|
|
||||||
base0A: '#8bbf56',
|
|
||||||
base0B: '#56bf8b',
|
|
||||||
base0C: '#568bbf',
|
|
||||||
base0D: '#8b56bf',
|
|
||||||
base0E: '#bf568b',
|
|
||||||
base0F: '#bf5656'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'hopscotch',
|
|
||||||
author: 'jan t. sott',
|
|
||||||
base00: '#322931',
|
|
||||||
base01: '#433b42',
|
|
||||||
base02: '#5c545b',
|
|
||||||
base03: '#797379',
|
|
||||||
base04: '#989498',
|
|
||||||
base05: '#b9b5b8',
|
|
||||||
base06: '#d5d3d5',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#dd464c',
|
|
||||||
base09: '#fd8b19',
|
|
||||||
base0A: '#fdcc59',
|
|
||||||
base0B: '#8fc13e',
|
|
||||||
base0C: '#149b93',
|
|
||||||
base0D: '#1290bf',
|
|
||||||
base0E: '#c85e7c',
|
|
||||||
base0F: '#b33508'
|
|
||||||
};
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
export { default as threezerotwofour } from './threezerotwofour';
|
|
||||||
export { default as apathy } from './apathy';
|
|
||||||
export { default as ashes } from './ashes';
|
|
||||||
export { default as atelierDune } from './atelier-dune';
|
|
||||||
export { default as atelierForest } from './atelier-forest';
|
|
||||||
export { default as atelierHeath } from './atelier-heath';
|
|
||||||
export { default as atelierLakeside } from './atelier-lakeside';
|
|
||||||
export { default as atelierSeaside } from './atelier-seaside';
|
|
||||||
export { default as bespin } from './bespin';
|
|
||||||
export { default as brewer } from './brewer';
|
|
||||||
export { default as bright } from './bright';
|
|
||||||
export { default as chalk } from './chalk';
|
|
||||||
export { default as codeschool } from './codeschool';
|
|
||||||
export { default as colors } from './colors';
|
|
||||||
export { default as default } from './default';
|
|
||||||
export { default as eighties } from './eighties';
|
|
||||||
export { default as embers } from './embers';
|
|
||||||
export { default as flat } from './flat';
|
|
||||||
export { default as google } from './google';
|
|
||||||
export { default as grayscale } from './grayscale';
|
|
||||||
export { default as greenscreen } from './greenscreen';
|
|
||||||
export { default as harmonic } from './harmonic';
|
|
||||||
export { default as hopscotch } from './hopscotch';
|
|
||||||
export { default as isotope } from './isotope';
|
|
||||||
export { default as marrakesh } from './marrakesh';
|
|
||||||
export { default as mocha } from './mocha';
|
|
||||||
export { default as monokai } from './monokai';
|
|
||||||
export { default as ocean } from './ocean';
|
|
||||||
export { default as paraiso } from './paraiso';
|
|
||||||
export { default as pop } from './pop';
|
|
||||||
export { default as railscasts } from './railscasts';
|
|
||||||
export { default as shapeshifter } from './shapeshifter';
|
|
||||||
export { default as solarized } from './solarized';
|
|
||||||
export { default as summerfruit } from './summerfruit';
|
|
||||||
export { default as tomorrow } from './tomorrow';
|
|
||||||
export { default as tube } from './tube';
|
|
||||||
export { default as twilight } from './twilight';
|
|
||||||
export { default as nicinabox } from './nicinabox';
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'isotope',
|
|
||||||
author: 'jan t. sott',
|
|
||||||
base00: '#000000',
|
|
||||||
base01: '#404040',
|
|
||||||
base02: '#606060',
|
|
||||||
base03: '#808080',
|
|
||||||
base04: '#c0c0c0',
|
|
||||||
base05: '#d0d0d0',
|
|
||||||
base06: '#e0e0e0',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#ff0000',
|
|
||||||
base09: '#ff9900',
|
|
||||||
base0A: '#ff0099',
|
|
||||||
base0B: '#33ff00',
|
|
||||||
base0C: '#00ffff',
|
|
||||||
base0D: '#0066ff',
|
|
||||||
base0E: '#cc00ff',
|
|
||||||
base0F: '#3300ff'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'marrakesh',
|
|
||||||
author: 'alexandre gavioli (http://github.com/alexx2/)',
|
|
||||||
base00: '#201602',
|
|
||||||
base01: '#302e00',
|
|
||||||
base02: '#5f5b17',
|
|
||||||
base03: '#6c6823',
|
|
||||||
base04: '#86813b',
|
|
||||||
base05: '#948e48',
|
|
||||||
base06: '#ccc37a',
|
|
||||||
base07: '#faf0a5',
|
|
||||||
base08: '#c35359',
|
|
||||||
base09: '#b36144',
|
|
||||||
base0A: '#a88339',
|
|
||||||
base0B: '#18974e',
|
|
||||||
base0C: '#75a738',
|
|
||||||
base0D: '#477ca1',
|
|
||||||
base0E: '#8868b3',
|
|
||||||
base0F: '#b3588e'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'mocha',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#3B3228',
|
|
||||||
base01: '#534636',
|
|
||||||
base02: '#645240',
|
|
||||||
base03: '#7e705a',
|
|
||||||
base04: '#b8afad',
|
|
||||||
base05: '#d0c8c6',
|
|
||||||
base06: '#e9e1dd',
|
|
||||||
base07: '#f5eeeb',
|
|
||||||
base08: '#cb6077',
|
|
||||||
base09: '#d28b71',
|
|
||||||
base0A: '#f4bc87',
|
|
||||||
base0B: '#beb55b',
|
|
||||||
base0C: '#7bbda4',
|
|
||||||
base0D: '#8ab3b5',
|
|
||||||
base0E: '#a89bb9',
|
|
||||||
base0F: '#bb9584'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'monokai',
|
|
||||||
author: 'wimer hazenberg (http://www.monokai.nl)',
|
|
||||||
base00: '#272822',
|
|
||||||
base01: '#383830',
|
|
||||||
base02: '#49483e',
|
|
||||||
base03: '#75715e',
|
|
||||||
base04: '#a59f85',
|
|
||||||
base05: '#f8f8f2',
|
|
||||||
base06: '#f5f4f1',
|
|
||||||
base07: '#f9f8f5',
|
|
||||||
base08: '#f92672',
|
|
||||||
base09: '#fd971f',
|
|
||||||
base0A: '#f4bf75',
|
|
||||||
base0B: '#a6e22e',
|
|
||||||
base0C: '#a1efe4',
|
|
||||||
base0D: '#66d9ef',
|
|
||||||
base0E: '#ae81ff',
|
|
||||||
base0F: '#cc6633'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'nicinabox',
|
|
||||||
author: 'nicinabox (http://github.com/nicinabox)',
|
|
||||||
base00: '#2A2F3A',
|
|
||||||
base01: '#3C444F',
|
|
||||||
base02: '#4F5A65',
|
|
||||||
base03: '#BEBEBE',
|
|
||||||
base04: '#b0b0b0', // unmodified
|
|
||||||
base05: '#d0d0d0', // unmodified
|
|
||||||
base06: '#FFFFFF',
|
|
||||||
base07: '#f5f5f5', // unmodified
|
|
||||||
base08: '#fb9fb1', // unmodified
|
|
||||||
base09: '#FC6D24',
|
|
||||||
base0A: '#ddb26f', // unmodified
|
|
||||||
base0B: '#A1C659',
|
|
||||||
base0C: '#12cfc0', // unmodified
|
|
||||||
base0D: '#6FB3D2',
|
|
||||||
base0E: '#D381C3',
|
|
||||||
base0F: '#deaf8f' // unmodified
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'ocean',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#2b303b',
|
|
||||||
base01: '#343d46',
|
|
||||||
base02: '#4f5b66',
|
|
||||||
base03: '#65737e',
|
|
||||||
base04: '#a7adba',
|
|
||||||
base05: '#c0c5ce',
|
|
||||||
base06: '#dfe1e8',
|
|
||||||
base07: '#eff1f5',
|
|
||||||
base08: '#bf616a',
|
|
||||||
base09: '#d08770',
|
|
||||||
base0A: '#ebcb8b',
|
|
||||||
base0B: '#a3be8c',
|
|
||||||
base0C: '#96b5b4',
|
|
||||||
base0D: '#8fa1b3',
|
|
||||||
base0E: '#b48ead',
|
|
||||||
base0F: '#ab7967'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'paraiso',
|
|
||||||
author: 'jan t. sott',
|
|
||||||
base00: '#2f1e2e',
|
|
||||||
base01: '#41323f',
|
|
||||||
base02: '#4f424c',
|
|
||||||
base03: '#776e71',
|
|
||||||
base04: '#8d8687',
|
|
||||||
base05: '#a39e9b',
|
|
||||||
base06: '#b9b6b0',
|
|
||||||
base07: '#e7e9db',
|
|
||||||
base08: '#ef6155',
|
|
||||||
base09: '#f99b15',
|
|
||||||
base0A: '#fec418',
|
|
||||||
base0B: '#48b685',
|
|
||||||
base0C: '#5bc4bf',
|
|
||||||
base0D: '#06b6ef',
|
|
||||||
base0E: '#815ba4',
|
|
||||||
base0F: '#e96ba8'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'pop',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#000000',
|
|
||||||
base01: '#202020',
|
|
||||||
base02: '#303030',
|
|
||||||
base03: '#505050',
|
|
||||||
base04: '#b0b0b0',
|
|
||||||
base05: '#d0d0d0',
|
|
||||||
base06: '#e0e0e0',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#eb008a',
|
|
||||||
base09: '#f29333',
|
|
||||||
base0A: '#f8ca12',
|
|
||||||
base0B: '#37b349',
|
|
||||||
base0C: '#00aabb',
|
|
||||||
base0D: '#0e5a94',
|
|
||||||
base0E: '#b31e8d',
|
|
||||||
base0F: '#7a2d00'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'railscasts',
|
|
||||||
author: 'ryan bates (http://railscasts.com)',
|
|
||||||
base00: '#2b2b2b',
|
|
||||||
base01: '#272935',
|
|
||||||
base02: '#3a4055',
|
|
||||||
base03: '#5a647e',
|
|
||||||
base04: '#d4cfc9',
|
|
||||||
base05: '#e6e1dc',
|
|
||||||
base06: '#f4f1ed',
|
|
||||||
base07: '#f9f7f3',
|
|
||||||
base08: '#da4939',
|
|
||||||
base09: '#cc7833',
|
|
||||||
base0A: '#ffc66d',
|
|
||||||
base0B: '#a5c261',
|
|
||||||
base0C: '#519f50',
|
|
||||||
base0D: '#6d9cbe',
|
|
||||||
base0E: '#b6b3eb',
|
|
||||||
base0F: '#bc9458'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'shapeshifter',
|
|
||||||
author: 'tyler benziger (http://tybenz.com)',
|
|
||||||
base00: '#000000',
|
|
||||||
base01: '#040404',
|
|
||||||
base02: '#102015',
|
|
||||||
base03: '#343434',
|
|
||||||
base04: '#555555',
|
|
||||||
base05: '#ababab',
|
|
||||||
base06: '#e0e0e0',
|
|
||||||
base07: '#f9f9f9',
|
|
||||||
base08: '#e92f2f',
|
|
||||||
base09: '#e09448',
|
|
||||||
base0A: '#dddd13',
|
|
||||||
base0B: '#0ed839',
|
|
||||||
base0C: '#23edda',
|
|
||||||
base0D: '#3b48e3',
|
|
||||||
base0E: '#f996e2',
|
|
||||||
base0F: '#69542d'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'solarized',
|
|
||||||
author: 'ethan schoonover (http://ethanschoonover.com/solarized)',
|
|
||||||
base00: '#002b36',
|
|
||||||
base01: '#073642',
|
|
||||||
base02: '#586e75',
|
|
||||||
base03: '#657b83',
|
|
||||||
base04: '#839496',
|
|
||||||
base05: '#93a1a1',
|
|
||||||
base06: '#eee8d5',
|
|
||||||
base07: '#fdf6e3',
|
|
||||||
base08: '#dc322f',
|
|
||||||
base09: '#cb4b16',
|
|
||||||
base0A: '#b58900',
|
|
||||||
base0B: '#859900',
|
|
||||||
base0C: '#2aa198',
|
|
||||||
base0D: '#268bd2',
|
|
||||||
base0E: '#6c71c4',
|
|
||||||
base0F: '#d33682'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'summerfruit',
|
|
||||||
author: 'christopher corley (http://cscorley.github.io/)',
|
|
||||||
base00: '#151515',
|
|
||||||
base01: '#202020',
|
|
||||||
base02: '#303030',
|
|
||||||
base03: '#505050',
|
|
||||||
base04: '#B0B0B0',
|
|
||||||
base05: '#D0D0D0',
|
|
||||||
base06: '#E0E0E0',
|
|
||||||
base07: '#FFFFFF',
|
|
||||||
base08: '#FF0086',
|
|
||||||
base09: '#FD8900',
|
|
||||||
base0A: '#ABA800',
|
|
||||||
base0B: '#00C918',
|
|
||||||
base0C: '#1faaaa',
|
|
||||||
base0D: '#3777E6',
|
|
||||||
base0E: '#AD00A1',
|
|
||||||
base0F: '#cc6633'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'threezerotwofour',
|
|
||||||
author: 'jan t. sott (http://github.com/idleberg)',
|
|
||||||
base00: '#090300',
|
|
||||||
base01: '#3a3432',
|
|
||||||
base02: '#4a4543',
|
|
||||||
base03: '#5c5855',
|
|
||||||
base04: '#807d7c',
|
|
||||||
base05: '#a5a2a2',
|
|
||||||
base06: '#d6d5d4',
|
|
||||||
base07: '#f7f7f7',
|
|
||||||
base08: '#db2d20',
|
|
||||||
base09: '#e8bbd0',
|
|
||||||
base0A: '#fded02',
|
|
||||||
base0B: '#01a252',
|
|
||||||
base0C: '#b5e4f4',
|
|
||||||
base0D: '#01a0e4',
|
|
||||||
base0E: '#a16a94',
|
|
||||||
base0F: '#cdab53'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'tomorrow',
|
|
||||||
author: 'chris kempson (http://chriskempson.com)',
|
|
||||||
base00: '#1d1f21',
|
|
||||||
base01: '#282a2e',
|
|
||||||
base02: '#373b41',
|
|
||||||
base03: '#969896',
|
|
||||||
base04: '#b4b7b4',
|
|
||||||
base05: '#c5c8c6',
|
|
||||||
base06: '#e0e0e0',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#cc6666',
|
|
||||||
base09: '#de935f',
|
|
||||||
base0A: '#f0c674',
|
|
||||||
base0B: '#b5bd68',
|
|
||||||
base0C: '#8abeb7',
|
|
||||||
base0D: '#81a2be',
|
|
||||||
base0E: '#b294bb',
|
|
||||||
base0F: '#a3685a'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'london tube',
|
|
||||||
author: 'jan t. sott',
|
|
||||||
base00: '#231f20',
|
|
||||||
base01: '#1c3f95',
|
|
||||||
base02: '#5a5758',
|
|
||||||
base03: '#737171',
|
|
||||||
base04: '#959ca1',
|
|
||||||
base05: '#d9d8d8',
|
|
||||||
base06: '#e7e7e8',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#ee2e24',
|
|
||||||
base09: '#f386a1',
|
|
||||||
base0A: '#ffd204',
|
|
||||||
base0B: '#00853e',
|
|
||||||
base0C: '#85cebc',
|
|
||||||
base0D: '#009ddc',
|
|
||||||
base0E: '#98005d',
|
|
||||||
base0F: '#b06110'
|
|
||||||
};
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
export default {
|
|
||||||
scheme: 'twilight',
|
|
||||||
author: 'david hart (http://hart-dev.com)',
|
|
||||||
base00: '#1e1e1e',
|
|
||||||
base01: '#323537',
|
|
||||||
base02: '#464b50',
|
|
||||||
base03: '#5f5a60',
|
|
||||||
base04: '#838184',
|
|
||||||
base05: '#a7a7a7',
|
|
||||||
base06: '#c3c3c3',
|
|
||||||
base07: '#ffffff',
|
|
||||||
base08: '#cf6a4c',
|
|
||||||
base09: '#cda869',
|
|
||||||
base0A: '#f9ee98',
|
|
||||||
base0B: '#8f9d6a',
|
|
||||||
base0C: '#afc4db',
|
|
||||||
base0D: '#7587a6',
|
|
||||||
base0E: '#9b859d',
|
|
||||||
base0F: '#9b703f'
|
|
||||||
};
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
export default function(hexColor, lightness) {
|
|
||||||
let hex = String(hexColor).replace(/[^0-9a-f]/gi, '');
|
|
||||||
if (hex.length < 6) {
|
|
||||||
hex = hex.replace(/(.)/g, '$1$1');
|
|
||||||
}
|
|
||||||
let lum = lightness || 0;
|
|
||||||
|
|
||||||
let rgb = '#';
|
|
||||||
let c;
|
|
||||||
for (let i = 0; i < 3; ++i) {
|
|
||||||
c = parseInt(hex.substr(i * 2, 2), 16);
|
|
||||||
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
|
|
||||||
rgb += ('00' + c).substr(c.length);
|
|
||||||
}
|
|
||||||
return rgb;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user