archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2026-01-25 16:03:15 +00:00
Code Issues Projects Releases Wiki Activity

add react types and define proptypes in TS

Browse Source
This commit is contained in:
Kevin Qi 2019-04-20 20:04:55 -07:00
parent d33a8db742
commit e2fa517fdf
3 changed files with 66 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -25,6 +25,7 @@
"prepare": "npm run clean && npm run build"
},
"devDependencies": {
"@types/react": "^16.8.14",
"babel-core": "^6.3.15",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",

82
src/index.tsx
View File

@ -9,8 +9,33 @@ const FULL_RADIUS = 50;
const CENTER_X = 50;
const CENTER_Y = 50;
class CircularProgressbar extends React.Component {
constructor(props) {
type CircularProgressbarProps = {
percentage: number;
className?: string;
text?: string;
classes?: {
root?: string;
trail?: string;
path?: string;
text?: string;
background?: string;
};
styles?: {
root?: object;
trail?: object;
path?: object;
text?: object;
background?: object;
};
strokeWidth?: number;
background?: boolean;
backgroundPadding?: number;
initialAnimation?: boolean;
counterClockwise?: boolean;
};
class CircularProgressbar extends React.Component<CircularProgressbarProps> {
constructor(props: CircularProgressbarProps) {
super(props);
this.state = {
@ -72,7 +97,10 @@ class CircularProgressbar extends React.Component {
getPathStyles() {
const diameter = Math.PI * 2 * this.getPathRadius();
const truncatedPercentage = Math.min(Math.max(this.state.percentage, MIN_PERCENTAGE), MAX_PERCENTAGE);
const truncatedPercentage = Math.min(
Math.max(this.state.percentage, MIN_PERCENTAGE),
MAX_PERCENTAGE,
);
const dashoffset = ((100 - truncatedPercentage) / 100) * diameter;
return {
@ -84,18 +112,11 @@ class CircularProgressbar extends React.Component {
getPathRadius() {
// the radius of the path is defined to be in the middle, so in order for the path to
// fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
return FULL_RADIUS - (this.props.strokeWidth / 2) - this.getBackgroundPadding();
return FULL_RADIUS - this.props.strokeWidth / 2 - this.getBackgroundPadding();
}
render() {
const {
percentage,
className,
classes,
styles,
strokeWidth,
text,
} = this.props;
const { percentage, className, classes, styles, strokeWidth, text } = this.props;
const pathDescription = this.getPathDescription();
return (
@ -104,17 +125,15 @@ class CircularProgressbar extends React.Component {
style={styles.root}
viewBox={`0 0 ${MAX_X} ${MAX_Y}`}
>
{
this.props.background ? (
<circle
className={classes.background}
style={styles.background}
cx={CENTER_X}
cy={CENTER_Y}
r={FULL_RADIUS}
/>
) : null
}
{this.props.background ? (
<circle
className={classes.background}
style={styles.background}
cx={CENTER_X}
cy={CENTER_Y}
r={FULL_RADIUS}
/>
) : null}
<path
className={classes.trail}
@ -132,18 +151,11 @@ class CircularProgressbar extends React.Component {
style={Object.assign({}, styles.path, this.getPathStyles())}
/>
{
text ? (
<text
className={classes.text}
style={styles.text}
x={CENTER_X}
y={CENTER_Y}
>
{text}
</text>
) : null
}
{text ? (
<text className={classes.text} style={styles.text} x={CENTER_X} y={CENTER_Y}>
{text}
</text>
) : null}
</svg>
);
}

18
yarn.lock
View File

@ -2,6 +2,19 @@
# yarn lockfile v1
"@types/prop-types@*":
version "15.7.1"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
"@types/react@^16.8.14":
version "16.8.14"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.14.tgz#b561bfabeb8f60d12e6d4766367e7a9ae927aa18"
integrity sha512-26tFVJ1omGmzIdFTFmnC5zhz1GTaqCjxgUxV4KzWvsybF42P7/j4RBn6UeO3KbHPXqKWZszMXMoI65xIWm954A==
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"
abab@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@ -1374,6 +1387,11 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
dependencies:
cssom "0.3.x"
csstype@^2.2.0:
version "2.6.4"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"