removed TextArea component and replaced with prompts

This commit is contained in:
pabloalonso 2015-09-27 13:39:27 -04:00
parent 38158191ce
commit 1f0ed7a18a
3 changed files with 27 additions and 78 deletions

View File

@ -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 };

View File

@ -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 */

View File

@ -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;
}
}