add rendered components for brush and eraser

This commit is contained in:
DD Liu 2017-08-17 18:13:24 -04:00
parent 6ede893585
commit ff77bb6a3d
4 changed files with 40 additions and 10 deletions

View file

@ -0,0 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
const BrushModeComponent = props => (
<button onClick={props.onMouseDown}>Brush</button>
);
BrushModeComponent.propTypes = {
onMouseDown: PropTypes.func.isRequired
};
export default BrushModeComponent;

View file

@ -0,0 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
const EraserModeComponent = props => (
<button onClick={props.onMouseDown}>Eraser</button>
);
EraserModeComponent.propTypes = {
onMouseDown: PropTypes.func.isRequired
};
export default EraserModeComponent;

View file

@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall';
import Modes from '../modes/modes'; import Modes from '../modes/modes';
import Blobbiness from './blob/blob'; import Blobbiness from './blob/blob';
import {changeBrushSize} from '../reducers/brush-mode'; import {changeBrushSize} from '../reducers/brush-mode';
import {changeMode} from '../reducers/modes';
import BrushModeComponent from '../components/brush-mode.jsx';
class BrushMode extends React.Component { class BrushMode extends React.Component {
static get MODE () {
return Modes.BRUSH;
}
constructor (props) { constructor (props) {
super(props); super(props);
bindAll(this, [ bindAll(this, [
@ -59,7 +58,7 @@ class BrushMode extends React.Component {
} }
render () { render () {
return ( return (
<div>Brush Mode</div> <BrushModeComponent onMouseDown={this.props.handleMouseDown} />
); );
} }
} }
@ -70,16 +69,20 @@ BrushMode.propTypes = {
}), }),
canvas: PropTypes.instanceOf(Element).isRequired, canvas: PropTypes.instanceOf(Element).isRequired,
changeBrushSize: PropTypes.func.isRequired, changeBrushSize: PropTypes.func.isRequired,
handleMouseDown: PropTypes.func.isRequired,
isBrushModeActive: PropTypes.bool.isRequired isBrushModeActive: PropTypes.bool.isRequired
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
brushModeState: state.brushMode, brushModeState: state.brushMode,
isBrushModeActive: state.mode === BrushMode.MODE isBrushModeActive: state.mode === Modes.BRUSH
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
changeBrushSize: brushSize => { changeBrushSize: brushSize => {
dispatch(changeBrushSize(brushSize)); dispatch(changeBrushSize(brushSize));
},
handleMouseDown: () => {
dispatch(changeMode(Modes.BRUSH));
} }
}); });

View file

@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall';
import Modes from '../modes/modes'; import Modes from '../modes/modes';
import Blobbiness from './blob/blob'; import Blobbiness from './blob/blob';
import {changeBrushSize} from '../reducers/eraser-mode'; import {changeBrushSize} from '../reducers/eraser-mode';
import EraserModeComponent from '../components/eraser-mode.jsx';
import {changeMode} from '../reducers/modes';
class EraserMode extends React.Component { class EraserMode extends React.Component {
static get MODE () {
return Modes.ERASER;
}
constructor (props) { constructor (props) {
super(props); super(props);
bindAll(this, [ bindAll(this, [
@ -55,7 +54,7 @@ class EraserMode extends React.Component {
} }
render () { render () {
return ( return (
<div>Eraser Mode</div> <EraserModeComponent onMouseDown={this.props.handleMouseDown} />
); );
} }
} }
@ -66,16 +65,20 @@ EraserMode.propTypes = {
eraserModeState: PropTypes.shape({ eraserModeState: PropTypes.shape({
brushSize: PropTypes.number.isRequired brushSize: PropTypes.number.isRequired
}), }),
handleMouseDown: PropTypes.func.isRequired,
isEraserModeActive: PropTypes.bool.isRequired isEraserModeActive: PropTypes.bool.isRequired
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
eraserModeState: state.eraserMode, eraserModeState: state.eraserMode,
isEraserModeActive: state.mode === EraserMode.MODE isEraserModeActive: state.mode === Modes.ERASER
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
changeBrushSize: brushSize => { changeBrushSize: brushSize => {
dispatch(changeBrushSize(brushSize)); dispatch(changeBrushSize(brushSize));
},
handleMouseDown: () => {
dispatch(changeMode(Modes.ERASER));
} }
}); });