diff --git a/src/components/brush-mode.jsx b/src/components/brush-mode.jsx new file mode 100644 index 00000000..865c04f4 --- /dev/null +++ b/src/components/brush-mode.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const BrushModeComponent = props => ( + +); + +BrushModeComponent.propTypes = { + onMouseDown: PropTypes.func.isRequired +}; + +export default BrushModeComponent; diff --git a/src/components/eraser-mode.jsx b/src/components/eraser-mode.jsx new file mode 100644 index 00000000..7ec03c44 --- /dev/null +++ b/src/components/eraser-mode.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const EraserModeComponent = props => ( + +); + +EraserModeComponent.propTypes = { + onMouseDown: PropTypes.func.isRequired +}; + +export default EraserModeComponent; diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index b2549393..44c6a90e 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; import Blobbiness from './blob/blob'; import {changeBrushSize} from '../reducers/brush-mode'; +import {changeMode} from '../reducers/modes'; +import BrushModeComponent from '../components/brush-mode.jsx'; class BrushMode extends React.Component { - static get MODE () { - return Modes.BRUSH; - } constructor (props) { super(props); bindAll(this, [ @@ -34,7 +33,7 @@ class BrushMode extends React.Component { } } shouldComponentUpdate () { - return false; // Logic only component + return false; // Static component, for now } activateTool () { // TODO: Instead of clearing selection, consider a kind of "draw inside" @@ -59,7 +58,7 @@ class BrushMode extends React.Component { } render () { return ( -
Brush Mode
+ ); } } @@ -70,16 +69,20 @@ BrushMode.propTypes = { }), canvas: PropTypes.instanceOf(Element).isRequired, changeBrushSize: PropTypes.func.isRequired, + handleMouseDown: PropTypes.func.isRequired, isBrushModeActive: PropTypes.bool.isRequired }; const mapStateToProps = state => ({ brushModeState: state.brushMode, - isBrushModeActive: state.mode === BrushMode.MODE + isBrushModeActive: state.mode === Modes.BRUSH }); const mapDispatchToProps = dispatch => ({ changeBrushSize: brushSize => { dispatch(changeBrushSize(brushSize)); + }, + handleMouseDown: () => { + dispatch(changeMode(Modes.BRUSH)); } }); diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx index 9ca2f6ce..c8ad4a3b 100644 --- a/src/containers/eraser-mode.jsx +++ b/src/containers/eraser-mode.jsx @@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; import Blobbiness from './blob/blob'; import {changeBrushSize} from '../reducers/eraser-mode'; +import EraserModeComponent from '../components/eraser-mode.jsx'; +import {changeMode} from '../reducers/modes'; class EraserMode extends React.Component { - static get MODE () { - return Modes.ERASER; - } constructor (props) { super(props); bindAll(this, [ @@ -34,7 +33,7 @@ class EraserMode extends React.Component { } } shouldComponentUpdate () { - return false; // Logic only component + return false; // Static component, for now } activateTool () { this.props.canvas.addEventListener('mousewheel', this.onScroll); @@ -55,7 +54,7 @@ class EraserMode extends React.Component { } render () { return ( -
Eraser Mode
+ ); } } @@ -66,16 +65,20 @@ EraserMode.propTypes = { eraserModeState: PropTypes.shape({ brushSize: PropTypes.number.isRequired }), + handleMouseDown: PropTypes.func.isRequired, isEraserModeActive: PropTypes.bool.isRequired }; const mapStateToProps = state => ({ eraserModeState: state.eraserMode, - isEraserModeActive: state.mode === EraserMode.MODE + isEraserModeActive: state.mode === Modes.ERASER }); const mapDispatchToProps = dispatch => ({ changeBrushSize: brushSize => { dispatch(changeBrushSize(brushSize)); + }, + handleMouseDown: () => { + dispatch(changeMode(Modes.ERASER)); } }); diff --git a/test/unit/components/brush-mode.test.jsx b/test/unit/components/brush-mode.test.jsx new file mode 100644 index 00000000..954ef837 --- /dev/null +++ b/test/unit/components/brush-mode.test.jsx @@ -0,0 +1,15 @@ +/* eslint-env jest */ +import React from 'react'; // eslint-disable-line no-unused-vars +import {shallow} from 'enzyme'; +import BrushModeComponent from '../../../src/components/brush-mode.jsx'; // eslint-disable-line no-unused-vars + +describe('BrushModeComponent', () => { + test('triggers callback when clicked', () => { + const onClick = jest.fn(); + const componentShallowWrapper = shallow( + + ); + componentShallowWrapper.simulate('click'); + expect(onClick).toHaveBeenCalled(); + }); +}); diff --git a/test/unit/components/eraser-mode.test.jsx b/test/unit/components/eraser-mode.test.jsx new file mode 100644 index 00000000..4772581c --- /dev/null +++ b/test/unit/components/eraser-mode.test.jsx @@ -0,0 +1,15 @@ +/* eslint-env jest */ +import React from 'react'; // eslint-disable-line no-unused-vars +import {shallow} from 'enzyme'; +import EraserModeComponent from '../../../src/components/eraser-mode.jsx'; // eslint-disable-line no-unused-vars + +describe('EraserModeComponent', () => { + test('triggers callback when clicked', () => { + const onClick = jest.fn(); + const componentShallowWrapper = shallow( + + ); + componentShallowWrapper.simulate('click'); + expect(onClick).toHaveBeenCalled(); + }); +});