maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Canvas] Remove unused static props; indicate internal props there too (#34752)

Browse source 
* Chore: remove unused static props and explicitly initialize them via the constructor; _
This commit is contained in:
Robert Monfera 2019-04-11 23:08:57 +02:00 committed by GitHub
parent f234661825
commit 915f63f218
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
x-pack/plugins/canvas/public/components/arg_form/arg_template_form.js
View file

@ -28,8 +28,6 @@ class ArgTemplateFormComponent extends React.Component {
errorTemplate: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
};
static domNode = null;
componentWillUpdate(prevProps) {
//see if error state changed
if (this.props.error !== prevProps.error) {
@ -38,23 +36,25 @@ class ArgTemplateFormComponent extends React.Component {
}
componentDidUpdate() {
if (this.props.error) {
return this.renderErrorTemplate();
return this._renderErrorTemplate();
}
this.renderTemplate(this.domNode);
this._renderTemplate(this._domNode);
}
componentWillUnmount() {
this.props.handlers.destroy();
}
renderTemplate = domNode => {
_domNode = null;
_renderTemplate = domNode => {
const { template, argumentProps, handlers } = this.props;
if (template) {
return template(domNode, argumentProps, handlers);
}
};
renderErrorTemplate = () => {
_renderErrorTemplate = () => {
const { errorTemplate, argumentProps } = this.props;
return React.createElement(errorTemplate, argumentProps);
};
@ -63,7 +63,7 @@ class ArgTemplateFormComponent extends React.Component {
const { template, error } = this.props;
if (error) {
return this.renderErrorTemplate();
return this._renderErrorTemplate();
}
if (!template) {
@ -73,8 +73,8 @@ class ArgTemplateFormComponent extends React.Component {
return (
<RenderToDom
render={domNode => {
this.domNode = domNode;
this.renderTemplate(domNode);
this._domNode = domNode;
this._renderTemplate(domNode);
}}
/>
);

55
x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js
View file

@ -14,51 +14,48 @@ export class DomPreview extends React.Component {
height: PropTypes.number.isRequired,
};
constructor(props) {
super(props);
this.container = null;
this.content = null;
this.observer = null;
this.original = null;
this.updateTimeout = null;
}
componentDidMount() {
this.update();
}
componentWillUnmount() {
clearTimeout(this.updateTimeout);
this.observer && this.observer.disconnect(); // observer not guaranteed to exist
clearTimeout(this._updateTimeout);
this._observer && this._observer.disconnect(); // observer not guaranteed to exist
}
_container = null;
_content = null;
_observer = null;
_original = null;
_updateTimeout = null;
update = () => {
if (!this.content || !this.container) {
if (!this._content || !this._container) {
return;
}
const currentOriginal = document.querySelector(`#${this.props.elementId}`);
const originalChanged = currentOriginal !== this.original;
const originalChanged = currentOriginal !== this._original;
if (originalChanged) {
this.observer && this.observer.disconnect();
this.original = currentOriginal;
this._observer && this._observer.disconnect();
this._original = currentOriginal;
if (currentOriginal) {
const slowUpdate = debounce(this.update, 100);
this.observer = new MutationObserver(slowUpdate);
this._observer = new MutationObserver(slowUpdate);
// configuration of the observer
const config = { attributes: true, childList: true, subtree: true };
// pass in the target node, as well as the observer options
this.observer.observe(this.original, config);
this._observer.observe(this._original, config);
} else {
clearTimeout(this.updateTimeout); // to avoid the assumption that we fully control when `update` is called
this.updateTimeout = setTimeout(this.update, 30);
clearTimeout(this._updateTimeout); // to avoid the assumption that we fully control when `update` is called
this._updateTimeout = setTimeout(this.update, 30);
return;
}
}
const thumb = this.original.cloneNode(true);
const thumb = this._original.cloneNode(true);
const originalStyle = window.getComputedStyle(this.original, null);
const originalStyle = window.getComputedStyle(this._original, null);
const originalWidth = parseInt(originalStyle.getPropertyValue('width'), 10);
const originalHeight = parseInt(originalStyle.getPropertyValue('height'), 10);
@ -66,16 +63,16 @@ export class DomPreview extends React.Component {
const scale = thumbHeight / originalHeight;
const thumbWidth = originalWidth * scale;
if (this.content.hasChildNodes()) {
this.content.removeChild(this.content.firstChild);
if (this._content.hasChildNodes()) {
this._content.removeChild(this._content.firstChild);
}
this.content.appendChild(thumb);
this._content.appendChild(thumb);
this.content.style.cssText = `transform: scale(${scale}); transform-origin: top left;`;
this.container.style.cssText = `width: ${thumbWidth}px; height: ${thumbHeight}px;`;
this._content.style.cssText = `transform: scale(${scale}); transform-origin: top left;`;
this._container.style.cssText = `width: ${thumbWidth}px; height: ${thumbHeight}px;`;
// Copy canvas data
const originalCanvas = this.original.querySelectorAll('canvas');
const originalCanvas = this._original.querySelectorAll('canvas');
const thumbCanvas = thumb.querySelectorAll('canvas');
// Cloned canvas elements are blank and need to be explicitly redrawn
@ -90,13 +87,13 @@ export class DomPreview extends React.Component {
return (
<div
ref={container => {
this.container = container;
this._container = container;
}}
className="dom-preview"
>
<div
ref={content => {
this.content = content;
this._content = content;
}}
/>
</div>

28
x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js
View file

@ -34,8 +34,6 @@ export class RenderWithFn extends React.Component {
reuseNode: false,
};
static domNode = null;
componentDidMount() {
this.firstRender = true;
this.renderTarget = null;
@ -45,20 +43,20 @@ export class RenderWithFn extends React.Component {
const newRenderFunction = renderFn !== this.props.renderFn;
if (newRenderFunction) {
this.resetRenderTarget(this.domNode);
this._resetRenderTarget(this._domNode);
}
}
shouldComponentUpdate(prevProps) {
return !isEqual(this.props.size, prevProps.size) || this.shouldFullRerender(prevProps);
return !isEqual(this.props.size, prevProps.size) || this._shouldFullRerender(prevProps);
}
componentDidUpdate(prevProps) {
const { handlers, size } = this.props;
// Config changes
if (this.shouldFullRerender(prevProps)) {
if (this._shouldFullRerender(prevProps)) {
// This should be the only place you call renderFn besides the first time
this.callRenderFn();
this._callRenderFn();
}
// Size changes
@ -71,11 +69,13 @@ export class RenderWithFn extends React.Component {
this.props.handlers.destroy();
}
callRenderFn = () => {
_domNode = null;
_callRenderFn = () => {
const { handlers, config, renderFn, reuseNode, name: functionName } = this.props;
// TODO: We should wait until handlers.done() is called before replacing the element content?
if (!reuseNode || !this.renderTarget) {
this.resetRenderTarget(this.domNode);
this._resetRenderTarget(this._domNode);
}
// else if (!firstRender) handlers.destroy();
@ -91,7 +91,7 @@ export class RenderWithFn extends React.Component {
}
};
resetRenderTarget = domNode => {
_resetRenderTarget = domNode => {
const { handlers } = this.props;
if (!domNode) {
@ -108,18 +108,18 @@ export class RenderWithFn extends React.Component {
}
this.firstRender = true;
this.renderTarget = this.createRenderTarget();
this.renderTarget = this._createRenderTarget();
domNode.appendChild(this.renderTarget);
};
createRenderTarget = () => {
_createRenderTarget = () => {
const div = document.createElement('div');
div.style.width = '100%';
div.style.height = '100%';
return div;
};
shouldFullRerender = prevProps => {
_shouldFullRerender = prevProps => {
// TODO: What a shitty hack. None of these props should update when you move the element.
// This should be fixed at a higher level.
return (
@ -142,8 +142,8 @@ export class RenderWithFn extends React.Component {
<RenderToDom
style={{ height: '100%', width: '100%' }}
render={domNode => {
this.domNode = domNode;
this.callRenderFn();
this._domNode = domNode;
this._callRenderFn();
}}
/>
</div>