mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-05 18:15:58 +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