diff --git a/src/index.tsx b/src/index.tsx index 0af6a0b..cc218aa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,32 +9,45 @@ const FULL_RADIUS = 50; const CENTER_X = 50; const CENTER_Y = 50; -type CircularProgressbarProps = { +type CircularProgressbarProps = typeof CircularProgressbar.defaultProps & { 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 { +type CircularProgressbarState = { + percentage: number; +}; + +class CircularProgressbar extends React.Component< + CircularProgressbarProps, + CircularProgressbarState +> { + initialTimeout: number | undefined = undefined; + requestAnimationFrame: number | undefined = undefined; + + static defaultProps = { + strokeWidth: 8, + className: null, + text: null, + classes: { + root: 'CircularProgressbar', + trail: 'CircularProgressbar-trail', + path: 'CircularProgressbar-path', + text: 'CircularProgressbar-text', + background: 'CircularProgressbar-background', + }, + styles: { + root: {}, + trail: {}, + path: {}, + text: {}, + background: {}, + }, + background: false, + backgroundPadding: 0, + initialAnimation: false, + counterClockwise: false, + }; + constructor(props: CircularProgressbarProps) { super(props); @@ -55,7 +68,7 @@ class CircularProgressbar extends React.Component { } } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: CircularProgressbarProps) { this.setState({ percentage: nextProps.percentage, }); @@ -63,7 +76,9 @@ class CircularProgressbar extends React.Component { componentWillUnmount() { clearTimeout(this.initialTimeout); - window.cancelAnimationFrame(this.requestAnimationFrame); + if (this.requestAnimationFrame) { + window.cancelAnimationFrame(this.requestAnimationFrame); + } } getBackgroundPadding() { @@ -161,41 +176,4 @@ class CircularProgressbar extends React.Component { } } -CircularProgressbar.propTypes = { - percentage: PropTypes.number.isRequired, - className: PropTypes.string, - text: PropTypes.string, - classes: PropTypes.objectOf(PropTypes.string), - styles: PropTypes.objectOf(PropTypes.object), - strokeWidth: PropTypes.number, - background: PropTypes.bool, - backgroundPadding: PropTypes.number, - initialAnimation: PropTypes.bool, - counterClockwise: PropTypes.bool, -}; - -CircularProgressbar.defaultProps = { - strokeWidth: 8, - className: '', - text: null, - classes: { - root: 'CircularProgressbar', - trail: 'CircularProgressbar-trail', - path: 'CircularProgressbar-path', - text: 'CircularProgressbar-text', - background: 'CircularProgressbar-background', - }, - styles: { - root: {}, - trail: {}, - path: {}, - text: {}, - background: {}, - }, - background: false, - backgroundPadding: null, - initialAnimation: false, - counterClockwise: false, -}; - export default CircularProgressbar; diff --git a/tsconfig.json b/tsconfig.json index 0477507..81ef6f1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,7 @@ "declarationDir": "dist", "esModuleInterop": true, "jsx": "react", + "lib": ["es2015", "dom"], "module": "commonjs", "noImplicitAny": true, "outDir": "./dist",