Add props for name/onUpdateName

This commit is contained in:
Ray Schamp 2017-10-19 14:27:55 -04:00
parent 6e9a2ef178
commit 303b4caced
3 changed files with 43 additions and 11 deletions

View file

@ -54,7 +54,8 @@ class PaintEditorComponent extends React.Component {
<Label text={this.props.intl.formatMessage(messages.costume)}> <Label text={this.props.intl.formatMessage(messages.costume)}>
<BufferedInput <BufferedInput
type="text" type="text"
value="meow" value={this.props.name}
onSubmit={this.props.onUpdateName}
/> />
</Label> </Label>
</div> </div>
@ -178,8 +179,10 @@ class PaintEditorComponent extends React.Component {
PaintEditorComponent.propTypes = { PaintEditorComponent.propTypes = {
intl: intlShape, intl: intlShape,
name: PropTypes.string,
onRedo: PropTypes.func.isRequired, onRedo: PropTypes.func.isRequired,
onUndo: PropTypes.func.isRequired, onUndo: PropTypes.func.isRequired,
onUpdateName: PropTypes.func.isRequired,
onUpdateSvg: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired,
rotationCenterX: PropTypes.number, rotationCenterX: PropTypes.number,
rotationCenterY: PropTypes.number, rotationCenterY: PropTypes.number,

View file

@ -54,11 +54,13 @@ class PaintEditor extends React.Component {
render () { render () {
return ( return (
<PaintEditorComponent <PaintEditorComponent
name={this.props.name}
rotationCenterX={this.props.rotationCenterX} rotationCenterX={this.props.rotationCenterX}
rotationCenterY={this.props.rotationCenterY} rotationCenterY={this.props.rotationCenterY}
svg={this.props.svg} svg={this.props.svg}
onRedo={this.handleRedo} onRedo={this.handleRedo}
onUndo={this.handleUndo} onUndo={this.handleUndo}
onUpdateName={this.props.onUpdateName}
onUpdateSvg={this.handleUpdateSvg} onUpdateSvg={this.handleUpdateSvg}
/> />
); );
@ -66,9 +68,11 @@ class PaintEditor extends React.Component {
} }
PaintEditor.propTypes = { PaintEditor.propTypes = {
name: PropTypes.string,
onKeyPress: PropTypes.func.isRequired, onKeyPress: PropTypes.func.isRequired,
onRedo: PropTypes.func.isRequired, onRedo: PropTypes.func.isRequired,
onUndo: PropTypes.func.isRequired, onUndo: PropTypes.func.isRequired,
onUpdateName: PropTypes.func.isRequired,
onUpdateSvg: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired,
rotationCenterX: PropTypes.number, rotationCenterX: PropTypes.number,
rotationCenterY: PropTypes.number, rotationCenterY: PropTypes.number,

View file

@ -1,3 +1,4 @@
import bindAll from 'lodash.bindall';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import PaintEditor from '..'; 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="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 "/>' + '<polyline points="30.185,405.995 22.689,413.491 15.192,405.995 "/>' +
'</svg>'; '</svg>';
const onUpdateSvg = function (newSvgString, rotationCenterX, rotationCenterY) { class Playground extends React.Component {
console.log(newSvgString); constructor (props) {
console.log(`rotationCenterX: ${rotationCenterX} rotationCenterY: ${rotationCenterY}`); 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(( ReactDOM.render((
<Provider store={store}> <Provider store={store}>
<IntlProvider> <IntlProvider>
<PaintEditor <Playground />
rotationCenterX={0}
rotationCenterY={0}
svg={svgString}
onUpdateSvg={onUpdateSvg}
/>
</IntlProvider> </IntlProvider>
</Provider> </Provider>
), appTarget); ), appTarget);