From fea53b768c8611cce196ed0cd9009d998dd46bd6 Mon Sep 17 00:00:00 2001 From: api84 Date: Thu, 28 Jan 2021 23:53:18 +0100 Subject: [PATCH 1/6] Add hours parameter to toggle hours --- lib/stopwatch.js | 7 ++++--- lib/utils.js | 23 +++++++++------------- package-lock.json | 49 ++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 61 insertions(+), 18 deletions(-) diff --git a/lib/stopwatch.js b/lib/stopwatch.js index c59be85..1fc4175 100644 --- a/lib/stopwatch.js +++ b/lib/stopwatch.js @@ -9,6 +9,7 @@ class StopWatch extends Component { start: PropTypes.bool, reset: PropTypes.bool, msecs: PropTypes.bool, + hours: PropTypes.bool, options: PropTypes.object, laps: PropTypes.bool, getTime: PropTypes.func, @@ -106,10 +107,10 @@ class StopWatch extends Component { }); } - formatTime() { - const { getTime, getMsecs, msecs } = this.props; + formatTime() { + const { getTime, getMsecs, msecs, hours } = this.props; const now = this.state.elapsed; - const formatted = formatTimeString(now, msecs); + const formatted = formatTimeString(now, msecs, hours); if (typeof getTime === "function") { getTime(formatted); } diff --git a/lib/utils.js b/lib/utils.js index 60bac43..23433ab 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,4 +1,4 @@ -function formatTimeString(time, showMsecs) { +function formatTimeString(time, showMsecs, showHours) { let msecs = time % 1000; if (msecs < 10) { @@ -11,19 +11,14 @@ function formatTimeString(time, showMsecs) { let minutes = Math.floor(time / 60000); let hours = Math.floor(time / 3600000); seconds = seconds - minutes * 60; - minutes = minutes - hours * 60; - let formatted; - if (showMsecs) { - formatted = `${hours < 10 ? 0 : ""}${hours}:${ - minutes < 10 ? 0 : "" - }${minutes}:${seconds < 10 ? 0 : ""}${seconds}:${msecs}`; - } else { - formatted = `${hours < 10 ? 0 : ""}${hours}:${ - minutes < 10 ? 0 : "" - }${minutes}:${seconds < 10 ? 0 : ""}${seconds}`; - } - - return formatted; + minutes = minutes - hours * 60; + + let formattedHours = showHours ? `${hours < 10 ? 0 : ""}${hours}:` : ''; + let formattedMinutes = `${minutes < 10 ? 0 : ""}${minutes}:`; + let formattedSeconds = `${seconds < 10 ? 0 : ""}${seconds}`; + let formattedMsecs = showMsecs ? `:${msecs}` : ''; + + return `${formattedHours}${formattedMinutes}${formattedSeconds}${formattedMsecs}`; } export { formatTimeString }; diff --git a/package-lock.json b/package-lock.json index 67f2293..700b45c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,55 @@ { "name": "react-native-stopwatch-timer", "version": "0.0.21", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "version": "0.0.21", + "dependencies": { + "prop-types": "^15.7.2" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "node_modules/react-is": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", + "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" + } + }, "dependencies": { "js-tokens": { "version": "4.0.0", From 976eb4f2a4174189bf92e389252641a6e179ffa9 Mon Sep 17 00:00:00 2001 From: api84 Date: Wed, 3 Feb 2021 23:01:34 +0100 Subject: [PATCH 2/6] Change deprecated Lifecycle --- lib/stopwatch.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/stopwatch.js b/lib/stopwatch.js index 1fc4175..91838ec 100644 --- a/lib/stopwatch.js +++ b/lib/stopwatch.js @@ -53,14 +53,14 @@ class StopWatch extends Component { } } - componentWillReceiveProps(newProps) { - if(newProps.start) { - this.start(); + static getDerivedStateFromProps(props, state) { + if(props.start) { + state.start(); } else { - this.stop(); + state.stop(); } - if(newProps.reset) { - this.reset(); + if(props.reset) { + state.reset(); } } From b03ae9b6ef833b7657111646cdaff5a546f5c9c2 Mon Sep 17 00:00:00 2001 From: api84 Date: Thu, 4 Feb 2021 00:00:59 +0100 Subject: [PATCH 3/6] Add UNSAFE componetWillReceiveProps --- lib/stopwatch.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/stopwatch.js b/lib/stopwatch.js index 91838ec..45ce3d4 100644 --- a/lib/stopwatch.js +++ b/lib/stopwatch.js @@ -53,14 +53,14 @@ class StopWatch extends Component { } } - static getDerivedStateFromProps(props, state) { - if(props.start) { - state.start(); + UNSAFE_componentWillReceiveProps(nextProps, nextContext) { + if(nextProps.start) { + this.start(); } else { - state.stop(); + this.stop(); } - if(props.reset) { - state.reset(); + if(nextProps.reset) { + this.reset(); } } From 30603f6813d310543b468b4e07e75bb4c6dbd74b Mon Sep 17 00:00:00 2001 From: api84 Date: Thu, 4 Feb 2021 00:07:26 +0100 Subject: [PATCH 4/6] Add UNSAFE componetWillReceiveProps --- lib/stopwatch.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/stopwatch.js b/lib/stopwatch.js index 45ce3d4..cadbc2c 100644 --- a/lib/stopwatch.js +++ b/lib/stopwatch.js @@ -53,13 +53,13 @@ class StopWatch extends Component { } } - UNSAFE_componentWillReceiveProps(nextProps, nextContext) { - if(nextProps.start) { + UNSAFE_componentWillReceiveProps(newProps, nextContext) { + if(newProps.start) { this.start(); } else { this.stop(); } - if(nextProps.reset) { + if(newProps.reset) { this.reset(); } } From 92fbc00f824953934030c34e9c733f4d9c33ff31 Mon Sep 17 00:00:00 2001 From: api84 Date: Sun, 28 Feb 2021 15:51:47 +0100 Subject: [PATCH 5/6] Add handleGetTimeToParent(); --- .gitignore | 3 ++- .idea/.gitignore | 8 ++++++++ .idea/modules.xml | 8 ++++++++ .idea/react-native-stopwatch-timer.iml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ lib/stopwatch.js | 9 +++++++++ 6 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/react-native-stopwatch-timer.iml create mode 100644 .idea/vcs.xml diff --git a/.gitignore b/.gitignore index 23036dd..02e2e3c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ # node.js # -node_modules/ \ No newline at end of file +node_modules/ +.idea \ No newline at end of file diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..90272d3 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/../../../../../../:\Users\api84\projekty\react-native-stopwatch-timer\.idea/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..300a4a6 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/react-native-stopwatch-timer.iml b/.idea/react-native-stopwatch-timer.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/react-native-stopwatch-timer.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/lib/stopwatch.js b/lib/stopwatch.js index cadbc2c..da6bd6c 100644 --- a/lib/stopwatch.js +++ b/lib/stopwatch.js @@ -13,6 +13,7 @@ class StopWatch extends Component { options: PropTypes.object, laps: PropTypes.bool, getTime: PropTypes.func, + getTimeToParent: PropTypes.func, startTime: PropTypes.number, getMsecs: PropTypes.func, } @@ -31,6 +32,7 @@ class StopWatch extends Component { this.stop = this.stop.bind(this); this.reset = this.reset.bind(this); this.formatTime = this.formatTime.bind(this); + this.handleGetTimeToParent().bind(this); const width = props.msecs ? 220 : 150; this.defaultStyles = { container: { @@ -95,6 +97,8 @@ class StopWatch extends Component { this.interval = null; } this.setState({started: false}); + + this.handleGetTimeToParent(); } reset() { @@ -120,6 +124,11 @@ class StopWatch extends Component { return formatted; } + handleGetTimeToParent() { + if (typeof this.props.getTimeToParent === 'function') { + this.props.getTimeToParent(this.formatTime()); + } + } render() { From 76e0af27ec69aa762887a0fde72d5d0b310a90f5 Mon Sep 17 00:00:00 2001 From: api84 Date: Sun, 28 Feb 2021 15:51:47 +0100 Subject: [PATCH 6/6] Add handleGetTimeToParent(); --- .gitignore | 3 ++- .idea/.gitignore | 8 ++++++++ .idea/modules.xml | 8 ++++++++ .idea/react-native-stopwatch-timer.iml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ lib/stopwatch.js | 9 +++++++++ 6 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/react-native-stopwatch-timer.iml create mode 100644 .idea/vcs.xml diff --git a/.gitignore b/.gitignore index 23036dd..02e2e3c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ # node.js # -node_modules/ \ No newline at end of file +node_modules/ +.idea \ No newline at end of file diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..90272d3 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/../../../../../../:\Users\api84\projekty\react-native-stopwatch-timer\.idea/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..300a4a6 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/react-native-stopwatch-timer.iml b/.idea/react-native-stopwatch-timer.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/react-native-stopwatch-timer.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/lib/stopwatch.js b/lib/stopwatch.js index cadbc2c..c4df961 100644 --- a/lib/stopwatch.js +++ b/lib/stopwatch.js @@ -13,6 +13,7 @@ class StopWatch extends Component { options: PropTypes.object, laps: PropTypes.bool, getTime: PropTypes.func, + getTimeToParent: PropTypes.func, startTime: PropTypes.number, getMsecs: PropTypes.func, } @@ -31,6 +32,7 @@ class StopWatch extends Component { this.stop = this.stop.bind(this); this.reset = this.reset.bind(this); this.formatTime = this.formatTime.bind(this); + this.handleGetTimeToParent = this.handleGetTimeToParent.bind(this); const width = props.msecs ? 220 : 150; this.defaultStyles = { container: { @@ -95,6 +97,8 @@ class StopWatch extends Component { this.interval = null; } this.setState({started: false}); + + this.handleGetTimeToParent(); } reset() { @@ -120,6 +124,11 @@ class StopWatch extends Component { return formatted; } + handleGetTimeToParent() { + if (typeof this.props.getTimeToParent === 'function') { + this.props.getTimeToParent(this.formatTime()); + } + } render() {