Add props for name/onUpdateName

src/components/paint-editor/paint-editor.jsx

@@ -54,7 +54,8 @@ class PaintEditorComponent extends React.Component {
                         <Label text={this.props.intl.formatMessage(messages.costume)}>
                             <BufferedInput
                                 type="text"
-                                value="meow"
+                                value={this.props.name}
+                                onSubmit={this.props.onUpdateName}
                             />
                         </Label>
                     </div>
@@ -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,

src/containers/paint-editor.jsx

@@ -54,11 +54,13 @@ class PaintEditor extends React.Component {
     render () {
         return (
             <PaintEditorComponent
+                name={this.props.name}
                 rotationCenterX={this.props.rotationCenterX}
                 rotationCenterY={this.props.rotationCenterY}
                 svg={this.props.svg}
                 onRedo={this.handleRedo}
                 onUndo={this.handleUndo}
+                onUpdateName={this.props.onUpdateName}
                 onUpdateSvg={this.handleUpdateSvg}
             />
         );
@@ -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,

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 =
         '<polyline points="10.689,399.492 3.193,391.997 10.689,384.5 "/>' +
         '<polyline points="30.185,405.995 22.689,413.491 15.192,405.995 "/>' +
     '</svg>';
-const onUpdateSvg = function (newSvgString, rotationCenterX, rotationCenterY) {
+class Playground extends React.Component {
-    console.log(newSvgString);
+    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 (
+            <PaintEditor
+                {...this.state}
+                onUpdateName={this.handleUpdateName}
+                onUpdateSvg={this.handleUpdateSvg}
+            />
+        );
+    }
+
+}
 ReactDOM.render((
     <Provider store={store}>
         <IntlProvider>
-            <PaintEditor
+            <Playground />
-                rotationCenterX={0}
-                rotationCenterY={0}
-                svg={svgString}
-                onUpdateSvg={onUpdateSvg}
-            />
         </IntlProvider>
     </Provider>
 ), appTarget);