mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-28 20:43:56 +03:00
removed TextArea component and replaced with prompts
This commit is contained in:
parent
38158191ce
commit
1f0ed7a18a
|
@ -3,8 +3,7 @@ const ActionTypes = {
|
|||
RESET: 'RESET',
|
||||
ROLLBACK: 'ROLLBACK',
|
||||
COMMIT: 'COMMIT',
|
||||
EXPORT: 'EXPORT',
|
||||
IMPORT: 'IMPORT',
|
||||
IMPORT_STATE: 'IMPORT_STATE',
|
||||
SWEEP: 'SWEEP',
|
||||
TOGGLE_ACTION: 'TOGGLE_ACTION',
|
||||
JUMP_TO_STATE: 'JUMP_TO_STATE',
|
||||
|
@ -88,8 +87,7 @@ function liftReducer(reducer, initialState) {
|
|||
skippedActions: {},
|
||||
currentStateIndex: 0,
|
||||
monitorState: {
|
||||
isVisible: true,
|
||||
exportMode: false
|
||||
isVisible: true
|
||||
},
|
||||
timestamps: [Date.now()]
|
||||
};
|
||||
|
@ -124,24 +122,15 @@ function liftReducer(reducer, initialState) {
|
|||
currentStateIndex = 0;
|
||||
timestamps = [liftedAction.timestamp];
|
||||
break;
|
||||
case ActionTypes.EXPORT:
|
||||
monitorState = Object.assign(
|
||||
{},
|
||||
case ActionTypes.IMPORT_STATE:
|
||||
({
|
||||
stagedActions,
|
||||
skippedActions,
|
||||
computedStates,
|
||||
currentStateIndex,
|
||||
monitorState,
|
||||
{ exportMode: !monitorState.exportMode }
|
||||
);
|
||||
break;
|
||||
case ActionTypes.IMPORT:
|
||||
(
|
||||
{
|
||||
stagedActions,
|
||||
skippedActions,
|
||||
computedStates,
|
||||
currentStateIndex,
|
||||
monitorState,
|
||||
timestamps
|
||||
} = liftedAction.newState
|
||||
);
|
||||
timestamps
|
||||
} = liftedAction.nextLiftedState);
|
||||
break;
|
||||
case ActionTypes.ROLLBACK:
|
||||
stagedActions = [INIT_ACTION];
|
||||
|
@ -280,11 +269,8 @@ export const ActionCreators = {
|
|||
commit() {
|
||||
return { type: ActionTypes.COMMIT, timestamp: Date.now() };
|
||||
},
|
||||
export() {
|
||||
return { type: ActionTypes.EXPORT };
|
||||
},
|
||||
import(newState) {
|
||||
return { type: ActionTypes.IMPORT, newState };
|
||||
importState(nextLiftedState) {
|
||||
return { type: ActionTypes.IMPORT_STATE, nextLiftedState };
|
||||
},
|
||||
sweep() {
|
||||
return { type: ActionTypes.SWEEP };
|
||||
|
|
|
@ -1,12 +1,9 @@
|
|||
/* eslint-disable no-alert */
|
||||
import React, { PropTypes, findDOMNode, Component } from 'react';
|
||||
import LogMonitorEntry from './LogMonitorEntry';
|
||||
import LogMonitorButton from './LogMonitorButton';
|
||||
import LogMonitorTextarea from './LogMonitorTextarea';
|
||||
import * as themes from './themes';
|
||||
|
||||
const EXPORT_CONTAINER_HEIGHT = 150;
|
||||
const ELEMENTS_CONTAINER_TOP = 38;
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
fontFamily: 'monaco, Consolas, Lucida Console, monospace',
|
||||
|
@ -29,7 +26,7 @@ const styles = {
|
|||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: ELEMENTS_CONTAINER_TOP,
|
||||
top: 38,
|
||||
bottom: 0,
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto'
|
||||
|
@ -123,11 +120,18 @@ export default class LogMonitor extends Component {
|
|||
}
|
||||
|
||||
handleExport() {
|
||||
this.props.export();
|
||||
window.prompt('Current state\'s schema', JSON.stringify(this.props.store.getState()));
|
||||
}
|
||||
|
||||
handleImport(newState) {
|
||||
this.props.import(newState);
|
||||
handleImport() {
|
||||
try {
|
||||
let nextLiftedState = window.prompt('Please paste a valid action log');
|
||||
if (nextLiftedState) {
|
||||
this.props.importState(JSON.parse(nextLiftedState));
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('There was an error parsing the new state. Please enter a valid schema.');
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleAction(index) {
|
||||
|
@ -196,13 +200,14 @@ export default class LogMonitor extends Component {
|
|||
<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>
|
||||
<LogMonitorButton theme={theme} onClick={::this.handleImport} enabled={true}>Import</LogMonitorButton>
|
||||
<LogMonitorButton theme={theme} onClick={::this.handleExport} enabled={computedStates.length}>Export</LogMonitorButton>
|
||||
</div>
|
||||
<LogMonitorTextarea theme={theme} handleImport={::this.handleImport} currentState={this.props.store.getState()} />
|
||||
<div style={{...styles.elements, top: monitorState.exportMode ? EXPORT_CONTAINER_HEIGHT : ELEMENTS_CONTAINER_TOP }} ref="elements">
|
||||
<div style={styles.elements} ref="elements">
|
||||
{elements}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
/* eslint-enable no-alert */
|
||||
|
|
|
@ -1,42 +0,0 @@
|
|||
import React, { PropTypes, findDOMNode, Component } from 'react';
|
||||
|
||||
const EXPORT_CONTAINER_HEIGHT = 150;
|
||||
const ELEMENTS_CONTAINER_TOP = 38;
|
||||
|
||||
var styles = {
|
||||
exportContainer: {
|
||||
width: '100%',
|
||||
height: EXPORT_CONTAINER_HEIGHT
|
||||
},
|
||||
exportArea: {
|
||||
position: 'relative',
|
||||
resize: 'none',
|
||||
width: '100%',
|
||||
height: 112,
|
||||
backgroundColor: '#4F5A66',
|
||||
color: 'white'
|
||||
}
|
||||
};
|
||||
|
||||
export default class LogMonitorTextarea extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
parseInput(event) {
|
||||
try {
|
||||
this.props.handleImport(JSON.parse(event.target.value))
|
||||
} catch(err) {
|
||||
console.warn('There was an error parsing the new state. Please enter a valid schema.');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let { handleImport, currentState, theme } = this.props;
|
||||
return currentState.monitorState.exportMode ? (
|
||||
<div style={{...styles.exportContainer, backgroundColor: theme.base00}}>
|
||||
<textarea style={styles.exportArea} value={JSON.stringify(currentState)} onChange={::this.parseInput} />
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user