Countdown #1731
kemeris2000
started this conversation in
Ideas and feature requests
Countdown
#1731
Replies: 2 comments
-
Hi @kemeris2000 we are looking into adding one soon, thanks! In the meantime you can use a custom plugin setup similar to this to achieve a countdown timer ⏱️ You can also check the docs if you need more info on plugins import React from 'react';
import { blockDefaultProps } from '@lowdefy/block-utils';
import { type } from '@lowdefy/helpers';
import { css, keyframes } from '@emotion/react';
const blink = keyframes`
50% { opacity: 20%; }
`;
class Countdown extends React.Component {
constructor(props) {
super(props);
this.state = {
seconds: props.properties.seconds ?? 30,
interval: null,
uptime: props.properties.uptime ?? false,
};
this.fullSeconds = props.properties.seconds ?? 30;
}
componentDidMount() {
this.props.methods.registerMethod('setTimer', (args = {}) => {
if (!type.isNone(args?.seconds)) {
this.setState({ seconds: args.seconds, uptime: args.uptime });
this.fullSeconds = args.seconds;
}
});
this.props.methods.registerMethod('start', (args = {}) => {
if (!type.isNone(args?.seconds)) {
this.setState({ seconds: args.seconds, uptime: args.uptime });
this.fullSeconds = args.seconds;
}
clearInterval(this.state.interval);
const interval = setInterval(() => {
if (this.state.uptime) {
this.setState({ seconds: this.state.seconds + 1 });
} else if (this.state.seconds == 0) {
clearInterval(this.state.interval);
this.props.methods.triggerEvent({ name: 'onTimeout' });
} else {
this.setState({ seconds: this.state.seconds - 1 });
}
}, 1000);
this.setState({ interval });
this.props.methods.triggerEvent({ name: 'onStart' });
});
this.props.methods.registerMethod('stop', () => {
clearInterval(this.state.interval);
this.props.methods.triggerEvent({ name: 'onStop' });
});
this.props.methods.registerMethod('reset', (args = {}) => {
clearInterval(this.state.interval);
if (!type.isNone(args?.seconds)) {
this.fullSeconds = args.seconds;
}
this.setState({ seconds: this.fullSeconds });
this.props.methods.triggerEvent({ name: 'onReset' });
});
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
render() {
const { methods, properties } = this.props;
const { seconds } = this.state;
const timeout = { style: '' };
if (seconds == 0) {
timeout.style = css`
animation: ${blink} 1s linear infinite;
color: #f5222d;
`;
}
const days = seconds / 86400;
const leftoverDays = seconds % 86400;
const hours = leftoverDays / 3600;
const leftoverHours = leftoverDays % 3600;
const mins = leftoverHours / 60;
const leftoverSeconds = leftoverHours % 60;
return (
<div
id={properties.blockId}
className={methods.makeCssClass([properties.style, timeout.style])}
>
{Math.floor(days)} days {Math.floor(hours)} hours {Math.floor(mins)} minutes{' '}
{Math.floor(leftoverSeconds)} seconds
</div>
);
}
}
Countdown.defaultProps = blockDefaultProps;
Countdown.meta = {
category: 'display',
icons: [],
styles: [],
};
export default Countdown; |
Beta Was this translation helpful? Give feedback.
0 replies
-
Thank you Yianni99!, I will try it. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
New countdown display block would be great
Beta Was this translation helpful? Give feedback.
All reactions