Skip to content

Commit f817c60

Browse files
pughpughpughpugh
committed
Merge branch 'master' into fix_missing_minutes_component
2 parents a09d842 + 50a8bfa commit f817c60

File tree

9 files changed

+156
-77
lines changed

9 files changed

+156
-77
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
# Changelog
22

3+
## 2.0.0
4+
* Fix deprecation warnings in React 15.6.0
5+
6+
## 1.1.0 - Dec 30, 2016
7+
* Move to semantic versioning
8+
* Reduce the ammount of canvas drawing
9+
* Allow colour to be updated without resetting the timer
10+
* Allow timer to be paused
11+
312
## 1.0.9 - Aug 31, 2016
413
* Fix invalid react proptype for showMilliseconds. Thanks @sabazusi.
514

‎README.md‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,20 @@ npm install react-countdown-clock
2626

2727
## Props
2828

29-
| prop | type | default | description |
30-
|------------------|----------------|---------|------------------------------------------------|
31-
| seconds | integer | 60 | Seconds to countdown |
32-
| color | string | #000 | Colour of counter |
33-
| alpha | float | 1.0 | Alpha transparency of counter |
34-
| size | integer | 300 | Width & height of canvas element |
35-
| weight | integer | | Weight of circle, in pixels |
36-
| fontSize | integer/string | auto | px size of font. `auto` for dynamic sizing. |
37-
| font | string | Arial | Font of counter |
38-
| timeFormat | string | seconds | Counter style; `seconds` or `hms` |
39-
| showMilliseconds | boolean | true | Show milliseconds for last 10 seconds |
40-
| onComplete | func | | Callback when time completes |
29+
| prop | type | default | description |
30+
|------------------|----------------|---------|-----------------------------------------------------------|
31+
| seconds | integer | 60 | Seconds to countdown |
32+
| color | string | #000 | Colour of counter |
33+
| alpha | float | 1.0 | Alpha transparency of counter |
34+
| size | integer | 300 | Width & height of canvas element |
35+
| weight | integer | | Weight of circle, in pixels |
36+
| fontSize | integer/string | auto | px size of font. `auto` for dynamic sizing. |
37+
| font | string | Arial | Font of counter |
38+
| timeFormat | string | seconds | Counter style; `seconds` or `hms` |
39+
| showMilliseconds | boolean | true | Show milliseconds for last 10 seconds |
40+
| onComplete | func | | Callback when time completes |
41+
| paused | boolean | false | Pause countdown of the timer |
42+
| pausedText | string | | Text to display when paused, defaults to the current time |
4143

4244
## Bugs & Contributions
4345

‎build/react-countdown-clock.js‎

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/react-countdown-clock.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎coffee/react-countdown-clock.coffee‎

Lines changed: 92 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
React = require 'react'
2+
PropTypes = require 'prop-types'
3+
CreateReactClass = require 'create-react-class'
24

3-
module.exports = React.createClass
5+
ReactCountdownClock = CreateReactClass
46
_seconds: 0
57
_radius: null
68
_fraction: null
@@ -10,31 +12,19 @@ module.exports = React.createClass
1012

1113
displayName: 'ReactCountdownClock'
1214

13-
propTypes:
14-
seconds: React.PropTypes.number
15-
size: React.PropTypes.number
16-
weight: React.PropTypes.number
17-
color: React.PropTypes.string
18-
fontSize: React.PropTypes.string
19-
font: React.PropTypes.string
20-
alpha: React.PropTypes.number
21-
timeFormat: React.PropTypes.string
22-
onComplete: React.PropTypes.func
23-
showMilliseconds: React.PropTypes.bool
24-
25-
getDefaultProps: ->
26-
seconds: 60
27-
size: 300
28-
color: '#000'
29-
alpha: 1
30-
timeFormat: 'hms'
31-
fontSize: 'auto'
32-
font: 'Arial'
33-
showMilliseconds: true
34-
35-
componentWillReceiveProps: (props) ->
36-
@_seconds = props.seconds
37-
@_setupTimer()
15+
componentDidUpdate: (props) ->
16+
if props.seconds != @props.seconds
17+
@_seconds = props.seconds
18+
@_setupTimer()
19+
20+
if props.color != @props.color
21+
@_clearBackground()
22+
@_drawBackground()
23+
@_updateCanvas()
24+
25+
if props.paused != @props.paused
26+
@_startTimer() if !@props.paused
27+
@_pauseTimer() if @props.paused
3828

3929
componentDidMount: ->
4030
@_seconds = @props.seconds
@@ -45,9 +35,10 @@ module.exports = React.createClass
4535

4636
_setupTimer: ->
4737
@_setScale()
48-
@_setupCanvas()
38+
@_setupCanvases()
39+
@_drawBackground()
4940
@_drawTimer()
50-
@_startTimer()
41+
@_startTimer() unless @props.paused
5142

5243
_updateCanvas: ->
5344
@_clearTimer()
@@ -70,20 +61,32 @@ module.exports = React.createClass
7061
tick = @_seconds * tickScale
7162
if tick > 1000 then 1000 else tick
7263

73-
_setupCanvas: ->
74-
@_canvas = @refs.canvas
75-
@_context = @_canvas.getContext '2d'
76-
@_context.textAlign = 'center'
77-
@_context.textBaseline = 'middle'
64+
_setupCanvases: ->
65+
@_background = @refs.background.getContext '2d'
66+
@_timer = @refs.timer.getContext '2d'
67+
@_timer.textAlign = 'center'
68+
@_timer.textBaseline = 'middle'
69+
if @props.onClick?
70+
@refs.component.addEventListener 'click', @props.onClick
7871

7972
_startTimer: ->
8073
# Give it a moment to collect it's thoughts for smoother render
8174
@_timeoutIds.push(setTimeout ( => @_tick() ), 200)
8275

83-
_cancelTimer: ->
76+
_pauseTimer: ->
77+
@_stopTimer()
78+
@_updateCanvas()
79+
80+
_stopTimer: ->
8481
for timeout in @_timeoutIds
8582
clearTimeout timeout
8683

84+
_cancelTimer: ->
85+
@_stopTimer()
86+
87+
if @props.onClick?
88+
@refs.component.removeEventListener 'click', @props.onClick
89+
8790
_tick: ->
8891
start = Date.now()
8992
@_timeoutIds.push(setTimeout ( =>
@@ -103,16 +106,20 @@ module.exports = React.createClass
103106
if @props.onComplete
104107
@props.onComplete()
105108

109+
_clearBackground: ->
110+
@_background.clearRect 0, 0, @refs.timer.width, @refs.timer.height
111+
106112
_clearTimer: ->
107-
@_context.clearRect 0, 0, @_canvas.width, @_canvas.height
108-
@_drawBackground()
113+
@_timer.clearRect 0, 0, @refs.timer.width, @refs.timer.height
109114

110115
_drawBackground: ->
111-
@_context.beginPath()
112-
@_context.globalAlpha = @props.alpha / 3
113-
@_context.arc @_radius, @_radius, @_radius, 0, Math.PI * 2, false
114-
@_context.arc @_radius, @_radius, @_innerRadius, Math.PI * 2, 0, true
115-
@_context.fill()
116+
@_background.beginPath()
117+
@_background.globalAlpha = @props.alpha / 3
118+
@_background.fillStyle = @props.color
119+
@_background.arc @_radius, @_radius, @_radius, 0, Math.PI * 2, false
120+
@_background.arc @_radius, @_radius, @_innerRadius, Math.PI * 2, 0, true
121+
@_background.closePath()
122+
@_background.fill()
116123

117124
_formattedTime: ->
118125
decimals = (@_seconds <= 9.9 && @props.showMilliseconds) ? 1 : 0
@@ -153,14 +160,49 @@ module.exports = React.createClass
153160
_drawTimer: ->
154161
percent = @_fraction * @_seconds + 1.5
155162
formattedTime = @_formattedTime()
156-
@_context.globalAlpha = @props.alpha
157-
@_context.fillStyle = @props.color
158-
@_context.font = "bold #{@_fontSize(formattedTime)} #{@props.font}"
159-
@_context.fillText formattedTime, @_radius, @_radius
160-
@_context.beginPath()
161-
@_context.arc @_radius, @_radius, @_radius, Math.PI * 1.5, Math.PI * percent, false
162-
@_context.arc @_radius, @_radius, @_innerRadius, Math.PI * percent, Math.PI * 1.5, true
163-
@_context.fill()
163+
text = if (@props.paused && @props.pausedText?) then @props.pausedText else formattedTime
164+
165+
# Timer
166+
@_timer.globalAlpha = @props.alpha
167+
@_timer.fillStyle = @props.color
168+
@_timer.font = "bold #{@_fontSize(formattedTime)} #{@props.font}"
169+
@_timer.fillText text, @_radius, @_radius
170+
@_timer.beginPath()
171+
@_timer.arc @_radius, @_radius, @_radius, Math.PI * 1.5, Math.PI * percent, false
172+
@_timer.arc @_radius, @_radius, @_innerRadius, Math.PI * percent, Math.PI * 1.5, true
173+
@_timer.closePath()
174+
@_timer.fill()
164175

165176
render: ->
166-
<canvas ref='canvas' className="react-countdown-clock" width={@props.size} height={@props.size}></canvas>
177+
<div ref='component' className="react-countdown-clock">
178+
<canvas ref='background' style={ position: 'absolute' } width={@props.size} height={@props.size}></canvas>
179+
<canvas ref='timer' style={ position: 'absolute' } width={@props.size} height={@props.size}></canvas>
180+
</div>
181+
182+
ReactCountdownClock.propTypes =
183+
seconds: PropTypes.number
184+
size: PropTypes.number
185+
weight: PropTypes.number
186+
color: PropTypes.string
187+
fontSize: PropTypes.string
188+
font: PropTypes.string
189+
alpha: PropTypes.number
190+
timeFormat: PropTypes.string
191+
onComplete: PropTypes.func
192+
onClick: PropTypes.func
193+
showMilliseconds: PropTypes.bool
194+
paused: PropTypes.bool
195+
pausedText: PropTypes.string
196+
197+
ReactCountdownClock.defaultProps =
198+
seconds: 60
199+
size: 300
200+
color: '#000'
201+
alpha: 1
202+
timeFormat: 'hms'
203+
fontSize: 'auto'
204+
font: 'Arial'
205+
showMilliseconds: true
206+
paused: false
207+
208+
module.exports = ReactCountdownClock

‎index.html‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@
1919
</head>
2020
<body>
2121
<div id="parappa"></div>
22-
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
23-
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
22+
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
23+
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
24+
<script src="https://unpkg.com/create-react-class/create-react-class.js"></script>
2425
<script src="./build/react-countdown-clock.js"></script>
2526
<script>
2627
var MAX = 120;
@@ -34,12 +35,14 @@
3435
return '#' + ( Math.random() * 0xFFFFFF << 0 ).toString(16);
3536
}
3637

37-
var Demo = React.createClass({
38+
var Demo = createReactClass({
3839
displayName: 'Demo',
3940
getState: function(){
4041
return {
4142
seconds: randomAmountOfSeconds(),
42-
color: randomColor()
43+
color: randomColor(),
44+
paused: false,
45+
fontSize: 'auto'
4346
}
4447
},
4548
getInitialState: function(){
@@ -48,13 +51,25 @@
4851
handleOnComplete: function(){
4952
this.setState(this.getState());
5053
},
54+
handleOnClick: function(){
55+
wasPaused = this.state.paused
56+
this.setState({
57+
// color: randomColor(),
58+
paused: (wasPaused) ? false : true,
59+
fontSize: (wasPaused) ? 'auto' : '45px',
60+
});
61+
},
5162
render: function(){
5263
return (
5364
React.createElement(ReactCountdownClock, {
5465
seconds: this.state.seconds,
5566
color: this.state.color,
67+
paused: this.state.paused,
68+
pausedText: "▐▐ ",
5669
alpha: 0.9,
57-
onComplete: this.handleOnComplete
70+
onComplete: this.handleOnComplete,
71+
onClick: this.handleOnClick,
72+
fontSize: this.state.fontSize
5873
})
5974
)
6075
}

‎package.json‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-countdown-clock",
3-
"version": "1.0.9",
3+
"version": "2.0.0",
44
"description": "HTML5 canvas countdown clock React component",
55
"main": "build/react-countdown-clock.js",
66
"scripts": {
@@ -24,13 +24,17 @@
2424
},
2525
"homepage": "https://github.com/pughpugh/react-countdown-clock",
2626
"devDependencies": {
27-
"cjsx-loader": "^2.1.0",
27+
"cjsx-loader": "^3.0.0",
2828
"coffee-loader": "^0.7.2",
2929
"coffee-script": "^1.8.0",
30-
"webpack": "^1.13.1",
31-
"react": "15.*"
30+
"webpack": "^3.3.0",
31+
"react": "^15.6.0"
3232
},
3333
"peerDependencies": {
34-
"react": "15.*"
34+
"react": "^15.6.0"
35+
},
36+
"dependencies": {
37+
"create-react-class": "^15.5.2",
38+
"prop-types": "^15.5.8"
3539
}
3640
}

‎screenshot.png‎

131 KB
Loading

‎webpack.config.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
var path = require('path');
2+
13
module.exports = {
24
cache: true,
35
context: __dirname + '/coffee',
46
entry: './react-countdown-clock.coffee',
57
output: {
6-
path: './build',
7-
publicPath: '/build/',
8+
path: path.join(__dirname, 'build'),
9+
publicPath: path.join(__dirname, 'build'),
810
filename: 'react-countdown-clock.js',
911
library: 'ReactCountdownClock',
1012
libraryTarget: 'umd'
@@ -22,7 +24,7 @@ module.exports = {
2224
loaders: [
2325
{
2426
test: /\.coffee$/,
25-
loader: 'coffee!cjsx'
27+
loader: 'coffee-loader!cjsx-loader'
2628
}
2729
]
2830
}

0 commit comments

Comments
 (0)