diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx index 43a4b7bc..d8669059 100644 --- a/src/components/paint-editor/paint-editor.jsx +++ b/src/components/paint-editor/paint-editor.jsx @@ -54,7 +54,8 @@ class PaintEditorComponent extends React.Component { @@ -178,8 +179,10 @@ class PaintEditorComponent extends React.Component { PaintEditorComponent.propTypes = { intl: intlShape, + name: PropTypes.string, onRedo: PropTypes.func.isRequired, onUndo: PropTypes.func.isRequired, + onUpdateName: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired, rotationCenterX: PropTypes.number, rotationCenterY: PropTypes.number, diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index 5ce9a4a6..49ce6c8f 100644 --- a/src/containers/paint-editor.jsx +++ b/src/containers/paint-editor.jsx @@ -54,11 +54,13 @@ class PaintEditor extends React.Component { render () { return ( ); @@ -66,9 +68,11 @@ class PaintEditor extends React.Component { } PaintEditor.propTypes = { + name: PropTypes.string, onKeyPress: PropTypes.func.isRequired, onRedo: PropTypes.func.isRequired, onUndo: PropTypes.func.isRequired, + onUpdateName: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired, rotationCenterX: PropTypes.number, rotationCenterY: PropTypes.number, diff --git a/src/playground/playground.jsx b/src/playground/playground.jsx index f59ef2b0..e69efd26 100644 --- a/src/playground/playground.jsx +++ b/src/playground/playground.jsx @@ -1,3 +1,4 @@ +import bindAll from 'lodash.bindall'; import React from 'react'; import ReactDOM from 'react-dom'; import PaintEditor from '..'; @@ -22,19 +23,43 @@ const svgString = '' + '' + ''; -const onUpdateSvg = function (newSvgString, rotationCenterX, rotationCenterY) { - console.log(newSvgString); - console.log(`rotationCenterX: ${rotationCenterX} rotationCenterY: ${rotationCenterY}`); -}; +class Playground extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'handleUpdateName', + 'handleUpdateSvg' + ]); + this.state = { + name: 'meow', + rotationCenterX: 0, + rotationCenterY: 0, + svg: svgString + }; + } + handleUpdateName (name) { + this.setState({name}); + } + handleUpdateSvg (svg, rotationCenterX, rotationCenterY) { + console.log(svg); + console.log(`rotationCenterX: ${rotationCenterX} rotationCenterY: ${rotationCenterY}`); + this.setState({svg, rotationCenterX, rotationCenterY}); + } + render () { + return ( + + ); + } + +} ReactDOM.render(( - + ), appTarget);