Spaces:
Running
Running
File size: 1,544 Bytes
b456468 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import React from 'react';
import TuiImageEditor from 'tui-image-editor';
export default class ImageEditor extends React.Component {
rootEl = React.createRef();
imageEditorInst = null;
componentDidMount() {
this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
...this.props,
});
this.bindEventHandlers(this.props);
}
componentWillUnmount() {
this.unbindEventHandlers();
this.imageEditorInst.destroy();
this.imageEditorInst = null;
}
shouldComponentUpdate(nextProps) {
this.bindEventHandlers(this.props, nextProps);
return false;
}
getInstance() {
return this.imageEditorInst;
}
getRootElement() {
return this.rootEl.current;
}
bindEventHandlers(props, prevProps) {
Object.keys(props)
.filter(this.isEventHandlerKeys)
.forEach((key) => {
const eventName = key[2].toLowerCase() + key.slice(3);
// For <ImageEditor onFocus={condition ? onFocus1 : onFocus2} />
if (prevProps && prevProps[key] !== props[key]) {
this.imageEditorInst.off(eventName);
}
this.imageEditorInst.on(eventName, props[key]);
});
}
unbindEventHandlers() {
Object.keys(this.props)
.filter(this.isEventHandlerKeys)
.forEach((key) => {
const eventName = key[2].toLowerCase() + key.slice(3);
this.imageEditorInst.off(eventName);
});
}
isEventHandlerKeys(key) {
return /on[A-Z][a-zA-Z]+/.test(key);
}
render() {
return <div ref={this.rootEl} />;
}
}
|