Skip to content

Commit 88d4151

Browse files
williamniemiecwilliamniemiec
committed
Init
0 parents  commit 88d4151

File tree

10 files changed

+383
-0
lines changed

10 files changed

+383
-0
lines changed

‎.github/workflows/macos.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: MacOS
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
pull_request:
7+
branches: [ master ]
8+
9+
jobs:
10+
build:
11+
12+
runs-on: macos-latest
13+
14+
steps:
15+
- uses: actions/checkout@v2
16+
- name: Use Node.js
17+
uses: actions/setup-node@v2
18+
- run: npm install

‎.github/workflows/ubuntu.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Ubuntu
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
pull_request:
7+
branches: [ master ]
8+
9+
jobs:
10+
build:
11+
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- uses: actions/checkout@v2
16+
- name: Use Node.js
17+
uses: actions/setup-node@v2
18+
- run: npm install

‎.github/workflows/windows.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Windows
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
pull_request:
7+
branches: [ master ]
8+
9+
jobs:
10+
build:
11+
12+
runs-on: windows-latest
13+
14+
steps:
15+
- uses: actions/checkout@v2
16+
- name: Use Node.js
17+
uses: actions/setup-node@v2
18+
- run: npm install

‎.gitignore

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Microbundle cache
58+
.rpt2_cache/
59+
.rts2_cache_cjs/
60+
.rts2_cache_es/
61+
.rts2_cache_umd/
62+
63+
# Optional REPL history
64+
.node_repl_history
65+
66+
# Output of 'npm pack'
67+
*.tgz
68+
69+
# Yarn Integrity file
70+
.yarn-integrity
71+
72+
# dotenv environment variables file
73+
.env
74+
.env.test
75+
.env.production
76+
77+
# parcel-bundler cache (https://parceljs.org/)
78+
.cache
79+
.parcel-cache
80+
81+
# Next.js build output
82+
.next
83+
out
84+
85+
# Nuxt.js build / generate output
86+
.nuxt
87+
dist
88+
89+
# Gatsby files
90+
.cache/
91+
# Comment in the public line in if your project uses Gatsby and not Next.js
92+
# https://nextjs.org/blog/next-9-1#public-directory-support
93+
# public
94+
95+
# vuepress build output
96+
.vuepress/dist
97+
98+
# Serverless directories
99+
.serverless/
100+
101+
# FuseBox cache
102+
.fusebox/
103+
104+
# DynamoDB Local files
105+
.dynamodb/
106+
107+
# TernJS port file
108+
.tern-port
109+
110+
# Stores VSCode versions used for testing VSCode extensions
111+
.vscode-test
112+
113+
# yarn v2
114+
.yarn/cache
115+
.yarn/unplugged
116+
.yarn/build-state.yml
117+
.yarn/install-state.gz
118+
.pnp.*

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 William Niemiec
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
![](https://github.com/wniemiec-component-react/remaining-time/blob/master/docs/img/logo/logo.jpg)
2+
3+
<h1 align='center'>Remaining Time</h1>
4+
<p align='center'>Displays how many hours, minutes and seconds are left until a certain hour, minute and second.</p>
5+
<p align="center">
6+
<a href="https://github.com/wniemiec-component-react/remaining-time/actions/workflows/windows.yml"><img src="https://github.com/wniemiec-component-react/remaining-time/actions/workflows/windows.yml/badge.svg" alt=""></a>
7+
<a href="https://github.com/wniemiec-component-react/remaining-time/actions/workflows/macos.yml"><img src="https://github.com/wniemiec-component-react/remaining-time/actions/workflows/macos.yml/badge.svg" alt=""></a>
8+
<a href="https://github.com/wniemiec-component-react/remaining-time/actions/workflows/ubuntu.yml"><img src="https://github.com/wniemiec-component-react/remaining-time/actions/workflows/ubuntu.yml/badge.svg" alt=""></a>
9+
<a href="https://react.dev/"><img src="https://img.shields.io/badge/React Native-0.60+-D0008F.svg" alt="React Native compatibility"></a>
10+
<a href="https://www.npmjs.com/package/@wniemiec-component-react/remaining-time"><img src="https://img.shields.io/npm/v/@wniemiec-component-react/remaining-time" alt="Release"></a>
11+
<a href="https://github.com/wniemiec-component-react/remaining-time/blob/master/LICENSE"><img src="https://img.shields.io/github/license/wniemiec-component-react/remaining-time" alt="License"></a>
12+
</p>
13+
<hr />
14+
15+
## ❇ Introduction
16+
React component that displays the time remaining until a certain hour, minute and second.
17+
18+
## 🖼 Gallery
19+
20+
<div style="display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap"
21+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-component-react/remaining-time/master/docs/img/screens/img1.png" alt="image 1" />
22+
</div>
23+
24+
## ❓ How to use
25+
1. Install the component
26+
```
27+
$ npm install --save @wniemiec-component-react/remaining-time
28+
```
29+
30+
2. Import the component
31+
```
32+
import RemainingTime from '@wniemiec-component-react/remaining-time';
33+
```
34+
35+
3. Use it
36+
```
37+
[...]
38+
39+
import React from 'react';
40+
41+
[...]
42+
43+
<RemainingTime
44+
hours={12}
45+
minutes={59}
46+
seconds={0}
47+
/>
48+
49+
[...]
50+
```
51+
52+
## 📖 Documentation
53+
| Property |Type|Description|Default|
54+
|----------------|-------------------------------|-----------------------------|--------|
55+
|hours |`number`|Hour | `23` |
56+
|minutes |`number`|Minute| `59` |
57+
|seconds |`number`|Second | `59` |
58+
|fgColor |`string`|Text color | `"#000000"` |
59+
|style |`object`|Custom style | `null` |
60+
61+
## 🚩 Changelog
62+
Details about each version are documented in the [releases section](https://github.com/wniemiec-component-react/remaining-time/releases).
63+
64+
## 🤝 Contribute!
65+
See the documentation on how you can contribute to the project [here](https://github.com/wniemiec-component-react/remaining-time/blob/master/CONTRIBUTING.md).
66+
67+
## 📁 Files
68+
69+
### /
70+
| Name |Type|Description|
71+
|----------------|-------------------------------|-----------------------------|
72+
|docs |`Directory`|Documentation files|
73+
|src |`Directory`| Source files|

‎docs/img/screens/img1.png

27.9 KB
Loading

‎index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import RemainingTime from './src/RemainingTime';
2+
3+
export default RemainingTime;

‎package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@wniemiec-component-react/remaining-time",
3+
"version": "1.0.0",
4+
"description": "Displays how many hours, minutes and seconds are left until a certain hour, minute and second.",
5+
"main": "index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/wniemiec-components-react/remaining-time.git"
9+
},
10+
"keywords": [
11+
"wniemiec-component-react"
12+
"wniemiec",
13+
"component",
14+
"react",
15+
"remaining-time",
16+
"remaining",
17+
"time"
18+
],
19+
"author": "William Niemiec <[email protected]> (https://www.linkedin.com/in/williamniemiec)",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/wniemiec-components-react/remaining-time/issues"
23+
},
24+
"homepage": "https://github.com/wniemiec-components-react/remaining-time#readme"
25+
}

‎src/RemainingTime/index.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/**
2+
* Copyright (c) William Niemiec.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @format
9+
*/
10+
11+
import React, { useState, useEffect } from 'react';
12+
13+
/**
14+
* Displays how many hours, minutes and seconds are left until a certain hour,
15+
* minute and second.
16+
*
17+
* @param {number} [hours=23] Hour
18+
* @param {number} [minutes=59] Minute
19+
* @param {number} [seconds=59] Second
20+
*/
21+
export default function RemainingTime({ hours=23, minutes=59, seconds=59, fgColor='#FFFFFF', style=null }) {
22+
const [timeLeft, setTimeLeft] = useState(0);
23+
24+
useEffect(() => {
25+
let timerControl = startTimer(setTimeLeft, hours, minutes, seconds);
26+
27+
return stopTimer(timerControl); // Stops counting when destroying the
28+
// component
29+
}, []);
30+
31+
return timeLeft;
32+
}
33+
34+
function startTimer(setTimeLeft, hours, minutes, seconds) {
35+
return setInterval(
36+
() => timer(setTimeLeft, hours, minutes, seconds),
37+
1000
38+
);
39+
}
40+
41+
function timer(setTimeLeft, hours, minutes, seconds) {
42+
const begin = getCurrentTime();
43+
const end = getCurrentTimeUsing(hours, minutes, seconds);
44+
45+
setTimeLeft(getRemainingTime(begin, end));
46+
}
47+
48+
function getCurrentTime() {
49+
return new Date().getTime();
50+
}
51+
52+
function getCurrentTimeUsing(hours, minutes, seconds) {
53+
let end = new Date();
54+
55+
end.setHours(hours);
56+
end.setMinutes(minutes);
57+
end.setSeconds(seconds);
58+
59+
return end.getTime();
60+
}
61+
62+
function getRemainingTime(begin, end) {
63+
const diff = end - begin;
64+
65+
const hours = Math.floor(diff / (1000 * 60 * 60));
66+
const minutes = Math.floor((diff / (1000 * 60)) - (hours * 60));
67+
const seconds = Math.floor((diff / (1000)) - (minutes * 60) - (hours * 60 * 60));
68+
69+
return formatTime(hours, minutes, seconds);
70+
}
71+
72+
function formatTime(hours, minutes, seconds) {
73+
let formatedHours = hours.toString();
74+
let formatedMinutes = minutes.toString();
75+
let formatedSeconds = seconds.toString();
76+
77+
if (hours < 10 && hours > 0)
78+
formatedHours = '0' + formatedHours
79+
if (minutes < 10 && minutes > 0)
80+
formatedMinutes = '0' + formatedMinutes
81+
if (seconds < 10 && seconds > 0)
82+
formatedSeconds = '0' + formatedSeconds
83+
84+
return `${formatedHours}h ${formatedMinutes}min ${formatedSeconds}s`;
85+
}
86+
87+
function stopTimer(timerControl) {
88+
return () => clearInterval(timerControl);
89+
}

0 commit comments

Comments
 (0)