From 991e885e1ff326cd3c90d80b9a7d2b1f06401545 Mon Sep 17 00:00:00 2001 From: amirnawaz Date: Fri, 18 Nov 2022 12:08:42 +0500 Subject: [PATCH] Update index.js forked by count down timer and change listener --- index.js | 214 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 119 insertions(+), 95 deletions(-) diff --git a/index.js b/index.js index b546b82..f2abcba 100644 --- a/index.js +++ b/index.js @@ -1,26 +1,26 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React from "react"; +import PropTypes from "prop-types"; import { StyleSheet, View, Text, TouchableOpacity, - AppState -} from 'react-native'; -import _ from 'lodash'; -import {sprintf} from 'sprintf-js'; + AppState, +} from "react-native"; +import _ from "lodash"; +import { sprintf } from "sprintf-js"; -const DEFAULT_DIGIT_STYLE = {backgroundColor: '#FAB913'}; -const DEFAULT_DIGIT_TXT_STYLE = {color: '#000'}; -const DEFAULT_TIME_LABEL_STYLE = {color: '#000'}; -const DEFAULT_SEPARATOR_STYLE = {color: '#000'}; -const DEFAULT_TIME_TO_SHOW = ['D', 'H', 'M', 'S']; +const DEFAULT_DIGIT_STYLE = { backgroundColor: "#FAB913" }; +const DEFAULT_DIGIT_TXT_STYLE = { color: "#000" }; +const DEFAULT_TIME_LABEL_STYLE = { color: "#000" }; +const DEFAULT_SEPARATOR_STYLE = { color: "#000" }; +const DEFAULT_TIME_TO_SHOW = ["D", "H", "M", "S"]; const DEFAULT_TIME_LABELS = { - d: 'Days', - h: 'Hours', - m: 'Minutes', - s: 'Seconds', + d: "Days", + h: "Hours", + m: "Minutes", + s: "Seconds", }; class CountDown extends React.Component { @@ -51,19 +51,27 @@ class CountDown extends React.Component { } componentDidMount() { - AppState.addEventListener('change', this._handleAppStateChange); + // AppState.addEventListener('change', this._handleAppStateChange); + this.appStateSubscription = AppState.addEventListener( + "change", + this._handleAppStateChange + ); } componentWillUnmount() { clearInterval(this.timer); - AppState.removeEventListener('change', this._handleAppStateChange); + // AppState.removeEventListener('change', this._handleAppStateChange); + this.appStateSubscription.remove(); } componentDidUpdate(prevProps, prevState) { - if (this.props.until !== prevProps.until || this.props.id !== prevProps.id) { + if ( + this.props.until !== prevProps.until || + this.props.id !== prevProps.id + ) { this.setState({ lastUntil: prevState.until, - until: Math.max(prevProps.until, 0) + until: Math.max(prevProps.until, 0), }); } } @@ -76,22 +84,26 @@ class CountDown extends React.Component { // } // } - _handleAppStateChange = currentAppState => { - const {until, wentBackgroundAt} = this.state; - if (currentAppState === 'active' && wentBackgroundAt && this.props.running) { + _handleAppStateChange = (currentAppState) => { + const { until, wentBackgroundAt } = this.state; + if ( + currentAppState === "active" && + wentBackgroundAt && + this.props.running + ) { const diff = (Date.now() - wentBackgroundAt) / 1000.0; this.setState({ lastUntil: until, - until: Math.max(0, until - diff) + until: Math.max(0, until - diff), }); } - if (currentAppState === 'background') { - this.setState({wentBackgroundAt: Date.now()}); + if (currentAppState === "background") { + this.setState({ wentBackgroundAt: Date.now() }); } - } + }; getTimeLeft = () => { - const {until} = this.state; + const { until } = this.state; return { seconds: until % 60, minutes: parseInt(until / 60, 10) % 60, @@ -108,7 +120,10 @@ class CountDown extends React.Component { if (this.state.lastUntil === this.state.until || !this.props.running) { return; } - if (this.state.until === 1 || (this.state.until === 0 && this.state.lastUntil !== 1)) { + if ( + this.state.until === 1 || + (this.state.until === 0 && this.state.lastUntil !== 1) + ) { if (this.props.onFinish) { this.props.onFinish(); } @@ -118,46 +133,42 @@ class CountDown extends React.Component { } if (this.state.until === 0) { - this.setState({lastUntil: 0, until: 0}); + this.setState({ lastUntil: 0, until: 0 }); } else { if (this.props.onChange) { this.props.onChange(this.state.until); } this.setState({ lastUntil: this.state.until, - until: Math.max(0, this.state.until - 1) + until: Math.max(0, this.state.until - 1), }); } }; renderDigit = (d) => { - const {digitStyle, digitTxtStyle, size} = this.props; + const { digitStyle, digitTxtStyle, size } = this.props; return ( - - + + {d} ); }; - renderLabel = label => { - const {timeLabelStyle, size} = this.props; + renderLabel = (label) => { + const { timeLabelStyle, size } = this.props; if (label) { return ( - + {label} ); @@ -167,58 +178,71 @@ class CountDown extends React.Component { renderDoubleDigits = (label, digits) => { return ( - - {this.renderDigit(digits)} - + {this.renderDigit(digits)} {this.renderLabel(label)} ); }; renderSeparator = () => { - const {separatorStyle, size} = this.props; + const { separatorStyle, size } = this.props; return ( - - - {':'} + + + {":"} ); }; renderCountDown = () => { - const {timeToShow, timeLabels, showSeparator} = this.props; - const {until} = this.state; - const {days, hours, minutes, seconds} = this.getTimeLeft(); - const newTime = sprintf('%02d:%02d:%02d:%02d', days, hours, minutes, seconds).split(':'); + const { timeToShow, timeLabels, showSeparator } = this.props; + const { until } = this.state; + const { days, hours, minutes, seconds } = this.getTimeLeft(); + const newTime = sprintf( + "%02d:%02d:%02d:%02d", + days, + hours, + minutes, + seconds + ).split(":"); const Component = this.props.onPress ? TouchableOpacity : View; return ( - - {timeToShow.includes('D') ? this.renderDoubleDigits(timeLabels.d, newTime[0]) : null} - {showSeparator && timeToShow.includes('D') && timeToShow.includes('H') ? this.renderSeparator() : null} - {timeToShow.includes('H') ? this.renderDoubleDigits(timeLabels.h, newTime[1]) : null} - {showSeparator && timeToShow.includes('H') && timeToShow.includes('M') ? this.renderSeparator() : null} - {timeToShow.includes('M') ? this.renderDoubleDigits(timeLabels.m, newTime[2]) : null} - {showSeparator && timeToShow.includes('M') && timeToShow.includes('S') ? this.renderSeparator() : null} - {timeToShow.includes('S') ? this.renderDoubleDigits(timeLabels.s, newTime[3]) : null} + + {timeToShow.includes("D") + ? this.renderDoubleDigits(timeLabels.d, newTime[0]) + : null} + {showSeparator && timeToShow.includes("D") && timeToShow.includes("H") + ? this.renderSeparator() + : null} + {timeToShow.includes("H") + ? this.renderDoubleDigits(timeLabels.h, newTime[1]) + : null} + {showSeparator && timeToShow.includes("H") && timeToShow.includes("M") + ? this.renderSeparator() + : null} + {timeToShow.includes("M") + ? this.renderDoubleDigits(timeLabels.m, newTime[2]) + : null} + {showSeparator && timeToShow.includes("M") && timeToShow.includes("S") + ? this.renderSeparator() + : null} + {timeToShow.includes("S") + ? this.renderDoubleDigits(timeLabels.s, newTime[3]) + : null} ); }; render() { - return ( - - {this.renderCountDown()} - - ); + return {this.renderCountDown()}; } } @@ -237,37 +261,37 @@ CountDown.defaultProps = { const styles = StyleSheet.create({ timeCont: { - flexDirection: 'row', - justifyContent: 'center', + flexDirection: "row", + justifyContent: "center", }, timeTxt: { - color: 'white', + color: "white", marginVertical: 2, - backgroundColor: 'transparent', + backgroundColor: "transparent", }, timeInnerCont: { - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', + flexDirection: "row", + justifyContent: "center", + alignItems: "center", }, digitCont: { borderRadius: 5, marginHorizontal: 2, - alignItems: 'center', - justifyContent: 'center', + alignItems: "center", + justifyContent: "center", }, doubleDigitCont: { - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", }, digitTxt: { - color: 'white', - fontWeight: 'bold', - fontVariant: ['tabular-nums'] + color: "white", + fontWeight: "bold", + fontVariant: ["tabular-nums"], }, separatorTxt: { - backgroundColor: 'transparent', - fontWeight: 'bold', + backgroundColor: "transparent", + fontWeight: "bold", }, });