mirror of
https://github.com/bartgryszko/react-native-circular-progress.git
synced 2026-01-18 16:13:10 +00:00
Merge pull request #132 from JulianKingman/master
Convert to react-native-svg
This commit is contained in:
Jacob Lauritzen
GitHub
commit
1919ab1faa
66
package-lock.json
generated
66
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-native-circular-progress",
|
||||
"version": "0.0.8",
|
||||
"version": "0.2.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -8,6 +8,70 @@
|
||||
"version": "0.10.1",
|
||||
"resolved": "https://registry.npmjs.org/art/-/art-0.10.1.tgz",
|
||||
"integrity": "sha1-OFQYg+OZIlxeGT/yRujxV897IUY="
|
||||
},
|
||||
"color": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz",
|
||||
"integrity": "sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==",
|
||||
"requires": {
|
||||
"color-convert": "^1.9.1",
|
||||
"color-string": "^1.5.2"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
|
||||
"integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
|
||||
"requires": {
|
||||
"color-name": "1.1.1"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
|
||||
"integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok="
|
||||
},
|
||||
"color-string": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.2.tgz",
|
||||
"integrity": "sha1-JuRYFLw8mny9Z1FkikFDRRSnc6k=",
|
||||
"requires": {
|
||||
"color-name": "^1.0.0",
|
||||
"simple-swizzle": "^0.2.2"
|
||||
}
|
||||
},
|
||||
"is-arrayish": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
|
||||
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.10",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
|
||||
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
|
||||
},
|
||||
"pegjs": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.10.0.tgz",
|
||||
"integrity": "sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0="
|
||||
},
|
||||
"react-native-svg": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.3.1.tgz",
|
||||
"integrity": "sha512-0kmfUwKUBWnPuJpy+bdGIYKkXHg/M/X57ji8b3d3ZFB2rRTWMRkwI1D+AJ6FQRX109+FJn6L6hsIokDj1lckzA==",
|
||||
"requires": {
|
||||
"color": "^2.0.1",
|
||||
"lodash": "^4.16.6",
|
||||
"pegjs": "^0.10.0"
|
||||
}
|
||||
},
|
||||
"simple-swizzle": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
|
||||
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
|
||||
"requires": {
|
||||
"is-arrayish": "^0.3.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,8 @@
|
||||
"homepage": "https://github.com/bgryszko/react-native-circular-progress",
|
||||
"dependencies": {
|
||||
"art": "^0.10.1",
|
||||
"prop-types": "^15.6.0"
|
||||
"prop-types": "^15.6.0",
|
||||
"react-native-svg": "^6.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 15 || ~16.0.0-0",
|
||||
|
||||
@ -1,35 +1,38 @@
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { View, ViewPropTypes, Platform, ART, AppState } from 'react-native';
|
||||
const { Surface, Shape, Path, Group } = ART;
|
||||
import { View, ViewPropTypes } from 'react-native';
|
||||
import { Svg, Path, G } from 'react-native-svg';
|
||||
|
||||
export default class CircularProgress extends React.Component {
|
||||
|
||||
state = {
|
||||
// We need to track this to mitigate a bug with RN ART on Android.
|
||||
// After being unlocked the <Surface> is not rendered.
|
||||
// To mitigate this we change the key-prop to forcefully update the <Surface>
|
||||
// It's horrible.
|
||||
// See https://github.com/facebook/react-native/issues/17565
|
||||
appState: AppState.currentState,
|
||||
// eliminate unecessary re-renders
|
||||
shouldComponentUpdate(nextProps, nextState, nextContext) {
|
||||
if (this.props === nextProps) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
circlePath(cx, cy, r, startDegree, endDegree) {
|
||||
let p = Path();
|
||||
p.path.push(0, cx + r, cy);
|
||||
p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, (endDegree * .9999) * Math.PI / 180, 1);
|
||||
return p;
|
||||
polarToCartesian(centerX, centerY, radius, angleInDegrees) {
|
||||
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
|
||||
return {
|
||||
x: centerX + (radius * Math.cos(angleInRadians)),
|
||||
y: centerY + (radius * Math.sin(angleInRadians))
|
||||
};
|
||||
}
|
||||
|
||||
circlePath(x, y, radius, startAngle, endAngle){
|
||||
var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
|
||||
var end = this.polarToCartesian(x, y, radius, startAngle);
|
||||
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
|
||||
var d = [
|
||||
"M", start.x, start.y,
|
||||
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
|
||||
].join(" ");
|
||||
return d;
|
||||
}
|
||||
|
||||
clampFill = fill => Math.min(100, Math.max(0, fill));
|
||||
|
||||
componentDidMount = () => AppState.addEventListener('change', this.handleAppStateChange);
|
||||
|
||||
componentWillUnmount = () => AppState.removeEventListener('change', this.handleAppStateChange);
|
||||
|
||||
handleAppStateChange = appState => this.setState({ appState });
|
||||
|
||||
render() {
|
||||
const {
|
||||
size,
|
||||
@ -62,29 +65,30 @@ export default class CircularProgress extends React.Component {
|
||||
|
||||
return (
|
||||
<View style={style}>
|
||||
<Surface
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
key={this.state.appState}
|
||||
style={{ backgroundColor: 'transparent' }}
|
||||
>
|
||||
<Group rotation={rotation - 90} originX={size/2} originY={size/2}>
|
||||
<G rotation={rotation} originX={size/2} originY={size/2}>
|
||||
{ backgroundColor && (
|
||||
<Shape
|
||||
<Path
|
||||
d={backgroundPath}
|
||||
stroke={backgroundColor}
|
||||
strokeWidth={backgroundWidth || width}
|
||||
strokeCap={lineCap}
|
||||
fill="transparent"
|
||||
/>
|
||||
)}
|
||||
<Shape
|
||||
<Path
|
||||
d={circlePath}
|
||||
stroke={tintColor}
|
||||
strokeWidth={width}
|
||||
strokeCap={lineCap}
|
||||
fill="transparent"
|
||||
/>
|
||||
</Group>
|
||||
</Surface>
|
||||
</G>
|
||||
</Svg>
|
||||
{renderChild && (
|
||||
<View style={childContainerStyle}>
|
||||
{renderChild(fill)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user