mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-06 18:45:31 +02:00
missing file addition :P
This commit is contained in:
parent
aa62ab244f
commit
fb4fc6b37e
38
src/components/PreviewDimension.jsx
Normal file
38
src/components/PreviewDimension.jsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { h } from 'preact';
|
||||||
|
import { PureComponent } from 'preact-compat';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This component udpates not through props or state, but by some parent
|
||||||
|
* component calling a method of this component directly. This is because
|
||||||
|
* using the state/prop way causes a huge unnnecessary rendering as this
|
||||||
|
* component gets updated on drag event.
|
||||||
|
*/
|
||||||
|
const HIDE_AFTER_MILLISECONDS = 1000;
|
||||||
|
export class PreviewDimension extends PureComponent {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = { w: 0, h: 0, isVisible: false };
|
||||||
|
}
|
||||||
|
update(dimensions) {
|
||||||
|
this.setState({ isVisible: true, ...dimensions });
|
||||||
|
if (this.hideTimer) {
|
||||||
|
clearTimeout(this.hideTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Automatically hide this commponent after sometime and also show
|
||||||
|
* when its updated (code above).
|
||||||
|
*/
|
||||||
|
this.hideTimer = setTimeout(() => {
|
||||||
|
// this.setState({ isVisible: false });
|
||||||
|
}, HIDE_AFTER_MILLISECONDS);
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
if (!this.state.isVisible) return null;
|
||||||
|
return (
|
||||||
|
<div class="preview-dimension">
|
||||||
|
{this.state.w}px ⨯ {this.state.h}px
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user