web: components: fixed AvatarEditor

This commit is contained in:
NikolayRechkin 2019-11-25 14:07:50 +03:00
parent 0a4af8e8b0
commit f82fd85561
3 changed files with 18 additions and 2 deletions

View File

@ -25,6 +25,8 @@ class AvatarEditor extends React.Component {
this.onLoadFileError = this.onLoadFileError.bind(this);
this.onLoadFile = this.onLoadFile.bind(this);
this.onPositionChange = this.onPositionChange.bind(this);
this.onSizeChange = this.onSizeChange.bind(this);
this.onDeleteImage = this.onDeleteImage.bind(this);
}
@ -40,6 +42,9 @@ class AvatarEditor extends React.Component {
})
if (typeof this.props.onDeleteImage === 'function') this.props.onDeleteImage();
}
onSizeChange(data){
this.setState(data);
}
onPositionChange(data) {
this.setState(data);
}
@ -83,6 +88,7 @@ class AvatarEditor extends React.Component {
<AvatarEditorBody
onImageChange={this.onImageChange}
onPositionChange={this.onPositionChange}
onSizeChange={this.onSizeChange}
onLoadFileError={this.onLoadFileError}
onLoadFile={this.onLoadFile}
deleteImage={this.onDeleteImage}

View File

@ -190,6 +190,10 @@ class AvatarEditorBody extends React.Component {
this.setState({
scale: scale < 1 ? 1 : scale > 5 ? 5 : scale
});
this.props.onSizeChange({
width: this.setEditorRef.current.getImage().width,
height: this.setEditorRef.current.getImage().height
});
}
}
onTouchEnd(evt) {
@ -217,6 +221,10 @@ class AvatarEditorBody extends React.Component {
this.setState({
scale: scale < 1 ? 1 : scale > 5 ? 5 : scale
});
this.props.onSizeChange({
width: this.setEditorRef.current.getImage().width,
height: this.setEditorRef.current.getImage().height
});
}
handleScale = e => {
@ -319,6 +327,7 @@ class AvatarEditorBody extends React.Component {
AvatarEditorBody.propTypes = {
onImageChange: PropTypes.func,
onPositionChange: PropTypes.func,
onSizeChange: PropTypes.func,
onLoadFileError: PropTypes.func,
onLoadFile: PropTypes.func,
deleteImage: PropTypes.func,

View File

@ -50,8 +50,9 @@ export default function createStyledIcon(Component, displayName, fillPath="*", s
)
}
render() {
const { isfill, isStroke, color, stroke, fillPath, strokePath, ...props } = this.props;
var svg = ReactDOMServer.renderToString(<Component {...this.props}></Component>);
var svg = ReactDOMServer.renderToString(<Component {...props}></Component>);
const matchResult = svg.match(/\s*mask id="(\w*)"\s/);
if(matchResult != null){
@ -62,7 +63,7 @@ export default function createStyledIcon(Component, displayName, fillPath="*", s
return reactComponent;
}
}
return (<Component {...this.props}></Component>);
return (<Component {...props}></Component>);
}
}