scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add props for name/onUpdateName

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/paint-editor/paint-editor.jsx
View file

@ -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,

4
src/containers/paint-editor.jsx
View file

@ -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,

45
src/playground/playground.jsx
View file

@ -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) {
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 (
<PaintEditor
{...this.state}
onUpdateName={this.handleUpdateName}
onUpdateSvg={this.handleUpdateSvg}
/>
);
}
}
ReactDOM.render((
<Provider store={store}>
<IntlProvider>
<PaintEditor
rotationCenterX={0}
rotationCenterY={0}
svg={svgString}
onUpdateSvg={onUpdateSvg}
/>
<Playground />
</IntlProvider>
</Provider>
), appTarget);