Closed vydimitrov closed 2 years ago
Merging #189 (63cd3b0) into master (cd9d6c1) will increase coverage by
2.53%
. The diff coverage is100.00%
.
@@ Coverage Diff @@
## master #189 +/- ##
===========================================
+ Coverage 97.46% 100.00% +2.53%
===========================================
Files 9 3 -6
Lines 197 23 -174
Branches 53 10 -43
===========================================
- Hits 192 23 -169
+ Misses 5 0 -5
Flag | Coverage Δ | |
---|---|---|
mobile | 100.00% <100.00%> (+4.76%) |
:arrow_up: |
web | 100.00% <100.00%> (ø) |
Flags with carried forward coverage won't be shown. Click here to find out more.
Impacted Files | Coverage Δ | |
---|---|---|
packages/mobile/src/CountdownCircleTimer.tsx | 100.00% <100.00%> (ø) |
|
packages/web/src/CountdownCircleTimer.tsx | 100.00% <100.00%> (ø) |
|
packages/web/src/index.ts | 100.00% <100.00%> (ø) |
Continue to review full report at Codecov.
Legend - Click here to learn more
Δ = absolute <relative> (impact)
,ø = not affected
,? = missing data
Powered by Codecov. Last update cd9d6c1...63cd3b0. Read the comment docs.
This PR rewrites both packages to TypeScript and adds a bunch of improvements:
Improvements
updateInterval
is added to control how often the timer should be updatedcolorsTime
is added to handle the times when a color should switch to the next color. This was part of thecolors
prop beforeisSmoothColorTransition
indicates if the colors should smoothly transition to the next color or just change the color when the time comesonUpdate
will fire every time the time changesBreaking changes
colors
prop now is either: Single color in any valid color format or URL to a gradient; Array of colors in HEX format. At least 2 colors should be provided.isLinearGradient
andgradientUniqueKey
are now deprecated. The gradient can be set from outside of the component. Please refer to the recipes section.ariaLabel
andrenderAriaTime
are also deprecated. Refer to the recipes section to check how this can be implemented.children
prop now accepts only a render function and it does not take a React component as a childrenReact Native (mobile) changes
AnimatedPath
to animate the SVG path but instead it uses the animation event loop fromuse-elapsed-time
. Thus now both packages - web and mobile share the same core logic to animate the path. Performance comparison shows that the later approach is much more performant.