From d0fd2e2d86490b36187b6a1b204ed0dacd37cf48 Mon Sep 17 00:00:00 2001 From: Eric Fields Date: Mon, 23 Apr 2018 11:07:30 -0400 Subject: [PATCH 01/22] add animation duration as prop --- README.md | 5 +++-- src/circle.tsx | 8 +++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2db7e0b..46a8225 100644 --- a/README.md +++ b/README.md @@ -40,14 +40,15 @@ import Circle from 'react-circle'; // : { static defaultProps: CircleProps = { progress: 0, animate: true, + animationDuration: '1s', showPercentage: true, showPercentageSymbol: true, progressColor: 'rgb(76, 154, 255)', @@ -53,12 +55,12 @@ export class Circle extends Component { render() { const { text } = this; - const { progress, size, bgColor, progressColor, lineWidth, animate, roundedStroke, responsive } = this.props; + const { progress, size, bgColor, progressColor, lineWidth, animate, animationDuration, roundedStroke, responsive } = this.props; const strokeDashoffset = getOffset(progress); - const transition = animate ? 'stroke-dashoffset 1s ease-out' : null; + const transition = animate ? 'stroke-dashoffset ' + animationDuration + ' ease-out' : null; const strokeLinecap = roundedStroke ? 'round' : 'butt'; const svgSize = responsive ? '100%' : size; - + return ( From 070036e9d9cf9a716801cfaae889ae43fec8e765 Mon Sep 17 00:00:00 2001 From: Hector Leon Zarco Garcia Date: Thu, 26 Apr 2018 17:32:07 +1000 Subject: [PATCH 02/22] Add repository property to package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a743551..c97fab9 100644 --- a/package.json +++ b/package.json @@ -29,5 +29,6 @@ "types": "dist/index.d.ts", "files": [ "dist" - ] + ], + "repository": "https://github.com/zzarcon/react-circle" } From 654338bb6b123bcc52dd7359d7f21bb9bc6502ea Mon Sep 17 00:00:00 2001 From: Hector Leon Zarco Garcia Date: Thu, 26 Apr 2018 17:49:08 +1000 Subject: [PATCH 03/22] Rename ts definitions folder --- custom-typings/atlaskit.d.ts | 1 + tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 custom-typings/atlaskit.d.ts diff --git a/custom-typings/atlaskit.d.ts b/custom-typings/atlaskit.d.ts new file mode 100644 index 0000000..0f1c4ea --- /dev/null +++ b/custom-typings/atlaskit.d.ts @@ -0,0 +1 @@ +declare module '@atlaskit/*'; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 43a5ee6..bc97909 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,6 +16,6 @@ "jsx": "react" }, "files": [ - "./typings/atlaskit.d.ts" + "./custom-typings/atlaskit.d.ts" ] } \ No newline at end of file From 6e5e2c99eb3bd521d4722059499e540b02004ca8 Mon Sep 17 00:00:00 2001 From: Hector Leon Zarco Garcia Date: Thu, 26 Apr 2018 18:01:57 +1000 Subject: [PATCH 04/22] Add keywords to package --- package.json | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index c97fab9..57cb046 100644 --- a/package.json +++ b/package.json @@ -30,5 +30,13 @@ "files": [ "dist" ], - "repository": "https://github.com/zzarcon/react-circle" + "repository": "https://github.com/zzarcon/react-circle", + "keywords": [ + "react", + "circle", + "svg", + "progress", + "react-circle", + "percentage" + ] } From f5e90ab71cfc3aab2569b9fd574e69181ab27905 Mon Sep 17 00:00:00 2001 From: Eric Brookfield Date: Thu, 26 Apr 2018 08:01:53 -0400 Subject: [PATCH 05/22] Update circle.tsx Change formatting to template literals. --- src/circle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/circle.tsx b/src/circle.tsx index 76be207..8ff428d 100644 --- a/src/circle.tsx +++ b/src/circle.tsx @@ -57,7 +57,7 @@ export class Circle extends Component { const { text } = this; const { progress, size, bgColor, progressColor, lineWidth, animate, animationDuration, roundedStroke, responsive } = this.props; const strokeDashoffset = getOffset(progress); - const transition = animate ? 'stroke-dashoffset ' + animationDuration + ' ease-out' : null; + const transition = animate ? `stroke-dashoffset ${animationDuration} ease-out` : null; const strokeLinecap = roundedStroke ? 'round' : 'butt'; const svgSize = responsive ? '100%' : size; From 9306623e459aab83d0b24f1a31b8df65f4384778 Mon Sep 17 00:00:00 2001 From: Eric Brookfield Date: Thu, 26 Apr 2018 08:06:38 -0400 Subject: [PATCH 06/22] Update index.tsx Added animation duration pop test. --- __tests__/index.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/__tests__/index.tsx b/__tests__/index.tsx index 9187c51..6a72b77 100644 --- a/__tests__/index.tsx +++ b/__tests__/index.tsx @@ -61,4 +61,14 @@ describe('ReactCircle', () => { const innerCircle = circle.find('circle').last() expect(innerCircle.prop('style')).toMatchSnapshot(); }) + + it('Should render with 1 second animation duration', () => { + const { circle } = setup(); + expect(circle.find('circle').last().prop('animationDuration')).toBe('1s'); + }) + + it('Should render with .25 second animation duration', () => { + const { circle } = setup({animationDuration:'.25s'); + expect(circle.find('circle').last().prop('animationDuration')).toBe('.25s'); + }) }); From 6073a5cde98ce045779aa83d6b512cd56c28dfd9 Mon Sep 17 00:00:00 2001 From: Hector Leon Zarco Garcia Date: Fri, 27 Apr 2018 23:21:47 +1000 Subject: [PATCH 07/22] v1.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 57cb046..5002c6d 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react": "^16.2.0" }, "name": "react-circle", - "version": "1.0.1", + "version": "1.0.2", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ From 638b1e1105169f24d877d7b9c37ba5c8977be896 Mon Sep 17 00:00:00 2001 From: Eric Fields Date: Mon, 30 Apr 2018 09:58:58 -0400 Subject: [PATCH 08/22] fix the tests for animationDuration --- __tests__/index.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/__tests__/index.tsx b/__tests__/index.tsx index 6a72b77..adc1750 100644 --- a/__tests__/index.tsx +++ b/__tests__/index.tsx @@ -7,11 +7,11 @@ describe('ReactCircle', () => { const initialOptions = { progress: 25 } - + const circle = shallow( ); - + return { circle }; @@ -61,14 +61,16 @@ describe('ReactCircle', () => { const innerCircle = circle.find('circle').last() expect(innerCircle.prop('style')).toMatchSnapshot(); }) - + it('Should render with 1 second animation duration', () => { const { circle } = setup(); - expect(circle.find('circle').last().prop('animationDuration')).toBe('1s'); + const innerCircle = circle.find('circle').last() + expect(innerCircle.prop('style').transition).toMatch(/1s/) }) - + it('Should render with .25 second animation duration', () => { const { circle } = setup({animationDuration:'.25s'); - expect(circle.find('circle').last().prop('animationDuration')).toBe('.25s'); + const innerCircle = circle.find('circle').last() + expect(innerCircle.prop('style').transition).toMatch(/.25s/) }) }); From 19026722c167d1330db778891d1b361176af5380 Mon Sep 17 00:00:00 2001 From: Katie Bayes Date: Mon, 30 Apr 2018 13:33:49 -0400 Subject: [PATCH 09/22] fix #16 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5002c6d..534e1a8 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "ts-react-toolbox": "^0.0.46" }, "engines": { - "node": "^8.4.0" + "node": ">=8.4.0" }, "scripts": { "dev": "ts-react-toolbox dev", From d2664fab3f8fbb4e9ae5c45840188e07e76e41ec Mon Sep 17 00:00:00 2001 From: Hector Leon Zarco Garcia Date: Thu, 3 May 2018 09:38:27 +1000 Subject: [PATCH 10/22] v1.0.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 534e1a8..1a7b370 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react": "^16.2.0" }, "name": "react-circle", - "version": "1.0.2", + "version": "1.0.3", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ From 2302cc02c553d9b12063b50b7cbab5a1707e517d Mon Sep 17 00:00:00 2001 From: "FUJI Goro (gfx)" Date: Wed, 15 Aug 2018 15:26:20 +0900 Subject: [PATCH 11/22] add onAnimationEnd event handler --- example/app.tsx | 15 ++++++++------- src/circle.tsx | 3 ++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/example/app.tsx b/example/app.tsx index b18ceba..2049c77 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -84,14 +84,14 @@ export default class App extends Component<{}, AppState> { { - {!defaultMode ? + {!defaultMode ? { textColor={textColor} lineWidth={lineWidth} textStyle={{ font: 'bold 5rem Helvetica, Arial, sans-serif' }} + onAnimationEnd={() => { console.log('onAnimationEnd'); }} /> : } diff --git a/src/circle.tsx b/src/circle.tsx index 8ff428d..3804397 100644 --- a/src/circle.tsx +++ b/src/circle.tsx @@ -16,6 +16,7 @@ export interface CircleProps { textStyle?: CSSProperties; roundedStroke?: boolean; responsive?: boolean; + onAnimationEnd?(): void; } export interface CircleState { @@ -64,7 +65,7 @@ export class Circle extends Component { return ( - + {text} ); From af25e030932b520a09c44e77a25be822353913c5 Mon Sep 17 00:00:00 2001 From: "FUJI Goro (gfx)" Date: Wed, 15 Aug 2018 17:18:25 +0900 Subject: [PATCH 12/22] destructuring props --- src/circle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/circle.tsx b/src/circle.tsx index 3804397..582f068 100644 --- a/src/circle.tsx +++ b/src/circle.tsx @@ -56,7 +56,7 @@ export class Circle extends Component { render() { const { text } = this; - const { progress, size, bgColor, progressColor, lineWidth, animate, animationDuration, roundedStroke, responsive } = this.props; + const { progress, size, bgColor, progressColor, lineWidth, animate, animationDuration, roundedStroke, responsive, onAnimationEnd } = this.props; const strokeDashoffset = getOffset(progress); const transition = animate ? `stroke-dashoffset ${animationDuration} ease-out` : null; const strokeLinecap = roundedStroke ? 'round' : 'butt'; @@ -65,7 +65,7 @@ export class Circle extends Component { return ( - + {text} ); From 7671c6157d179ab8525e524df125220c22c9ac3d Mon Sep 17 00:00:00 2001 From: "FUJI Goro (gfx)" Date: Wed, 15 Aug 2018 17:29:54 +0900 Subject: [PATCH 13/22] add tests on onAnimationEnd --- __tests__/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/__tests__/index.tsx b/__tests__/index.tsx index adc1750..196d62d 100644 --- a/__tests__/index.tsx +++ b/__tests__/index.tsx @@ -69,8 +69,16 @@ describe('ReactCircle', () => { }) it('Should render with .25 second animation duration', () => { - const { circle } = setup({animationDuration:'.25s'); + const { circle } = setup({animationDuration:'.25s'}); const innerCircle = circle.find('circle').last() expect(innerCircle.prop('style').transition).toMatch(/.25s/) }) + + it('Should call onAnimationEnd event handler', () => { + const onAnimationEnd = jest.fn(); + const { circle } = setup({onAnimationEnd}); + const innerCircle = circle.find('circle').last(); + innerCircle.simulate('transitionend'); + expect(onAnimationEnd).toBeCalled(); + }); }); From b7b5e685b6873bec0e5a492b7bf56c3f40a307e2 Mon Sep 17 00:00:00 2001 From: Hector Leon Zarco Garcia Date: Wed, 15 Aug 2018 22:04:23 +1000 Subject: [PATCH 14/22] 1.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1a7b370..654682a 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react": "^16.2.0" }, "name": "react-circle", - "version": "1.0.3", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ From 104f71e2931b856636fe147b67fb7f5f1139491d Mon Sep 17 00:00:00 2001 From: Hector Leon Zarco Garcia Date: Wed, 15 Aug 2018 22:05:04 +1000 Subject: [PATCH 15/22] 1.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 654682a..89a9b5b 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react": "^16.2.0" }, "name": "react-circle", - "version": "1.1.0", + "version": "1.1.1", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [ From 1ac5535d348dc620cd1f1cadca05530a46b189d0 Mon Sep 17 00:00:00 2001 From: sy Date: Wed, 12 Sep 2018 10:34:22 +0800 Subject: [PATCH 16/22] improve readme The types in readme is not compatible with the code. And illustrating props with default values makes it easier to use. --- README.md | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 46a8225..b32fc24 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,16 @@ # react-circle [![Build Status](https://travis-ci.org/zzarcon/react-circle.svg?branch=master)](https://travis-ci.org/zzarcon/react-circle) + > Renders a svg circle + percentage. It just works # Demo + [https://zzarcon.github.io/react-circle](https://zzarcon.github.io/react-circle/) + # Install 🚀 -``` +```bash $ yarn add react-circle ``` @@ -35,24 +38,23 @@ Optionally, you can pass the following props and customize it as your will ```javascript import Circle from 'react-circle'; -// All avaliable props for customization: -// Details are ordered as: -// : +// All avaliable props for customization(illustrated by default values): +// Details are ordered as: `: ` From 297edaa7380f777a2ab64e410e8c59b0c38c5400 Mon Sep 17 00:00:00 2001 From: sy Date: Wed, 12 Sep 2018 13:13:43 +0800 Subject: [PATCH 17/22] fix text verticle alignment --- src/circle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/circle.tsx b/src/circle.tsx index 582f068..e03a6ff 100644 --- a/src/circle.tsx +++ b/src/circle.tsx @@ -48,7 +48,7 @@ export class Circle extends Component { if (!showPercentage) return; return ( - + {progress}{showPercentageSymbol && %} ); From d0777b6c810e936d5dd0157823fa2be59ef994c9 Mon Sep 17 00:00:00 2001 From: Chris Date: Sat, 6 Oct 2018 16:57:54 +1000 Subject: [PATCH 18/22] Fix typescript error --- src/circle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/circle.tsx b/src/circle.tsx index e03a6ff..e1641f4 100644 --- a/src/circle.tsx +++ b/src/circle.tsx @@ -58,7 +58,7 @@ export class Circle extends Component { const { text } = this; const { progress, size, bgColor, progressColor, lineWidth, animate, animationDuration, roundedStroke, responsive, onAnimationEnd } = this.props; const strokeDashoffset = getOffset(progress); - const transition = animate ? `stroke-dashoffset ${animationDuration} ease-out` : null; + const transition = animate ? `stroke-dashoffset ${animationDuration} ease-out` : undefined; const strokeLinecap = roundedStroke ? 'round' : 'butt'; const svgSize = responsive ? '100%' : size; From 91e512d24f2e6789142a162502bb71a99aa87f74 Mon Sep 17 00:00:00 2001 From: Chris Date: Sat, 6 Oct 2018 22:05:54 +1000 Subject: [PATCH 19/22] Update snapshots to match transition set to undefined --- __tests__/__snapshots__/index.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/__snapshots__/index.tsx.snap b/__tests__/__snapshots__/index.tsx.snap index 3023221..502d68b 100644 --- a/__tests__/__snapshots__/index.tsx.snap +++ b/__tests__/__snapshots__/index.tsx.snap @@ -3,13 +3,13 @@ exports[`ReactCircle Should default render with animation 1`] = ` Object { "strokeDashoffset": 825, - "transition": null, + "transition": undefined, } `; exports[`ReactCircle Should render without animation 1`] = ` Object { "strokeDashoffset": 825, - "transition": null, + "transition": undefined, } `; From 73a7054bcaf983f2f300991ed9328db4d2cd5fe6 Mon Sep 17 00:00:00 2001 From: Karl Taylor Date: Fri, 15 Feb 2019 10:41:08 +0000 Subject: [PATCH 20/22] add Math.min to cap percent at 100% --- src/circle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/circle.tsx b/src/circle.tsx index e03a6ff..60bda31 100644 --- a/src/circle.tsx +++ b/src/circle.tsx @@ -25,7 +25,7 @@ export interface CircleState { const radius = 175; const diameter = Math.round(Math.PI * radius * 2); -const getOffset = (val = 0) => Math.round((100 - val) / 100 * diameter); +const getOffset = (val = 0) => Math.round((100 - Math.min(val, 100)) / 100 * diameter); export class Circle extends Component { static defaultProps: CircleProps = { From c1b7222d56fdad6519da694fe695e0a030ef2716 Mon Sep 17 00:00:00 2001 From: Karl Taylor Date: Fri, 15 Feb 2019 13:57:45 +0000 Subject: [PATCH 21/22] add unit test --- __tests__/index.tsx | 16 +++++++++++++++- package.json | 2 ++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/__tests__/index.tsx b/__tests__/index.tsx index 196d62d..19458dc 100644 --- a/__tests__/index.tsx +++ b/__tests__/index.tsx @@ -1,7 +1,15 @@ +/** + * @jest-environment node + */ + import * as React from 'react'; -import { shallow, render, mount } from 'enzyme'; +import { shallow, configure } from 'enzyme'; import Circle, {CircleProps} from '../src'; +const Adapter = require("enzyme-adapter-react-16"); + +configure({ adapter: new Adapter() }); + describe('ReactCircle', () => { const setup = (props?: Partial) => { const initialOptions = { @@ -81,4 +89,10 @@ describe('ReactCircle', () => { innerCircle.simulate('transitionend'); expect(onAnimationEnd).toBeCalled(); }); + + it('Should render a full circle if progress is above 100%', () => { + const { circle } = setup({ progress: 120 }); + const innerCircle = circle.find('circle').last() + expect(innerCircle.prop('style').strokeDashoffset).toBe(0) + }); }); diff --git a/package.json b/package.json index 89a9b5b..49174ad 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "@atlaskit/button": "^7.0.2", "@atlaskit/checkbox": "^2.0.0", "@atlaskit/field-text": "^4.3.0", + "enzyme": "^3.8.0", + "enzyme-adapter-react-16": "^1.9.1", "styled-components": "^3.2.3", "ts-react-toolbox": "^0.0.46" }, From 72a211ec0bb57cae2468f2b20d386c26ebd008c0 Mon Sep 17 00:00:00 2001 From: FUJI Goro Date: Wed, 10 Jul 2019 10:51:08 +0900 Subject: [PATCH 22/22] add "license" field to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 49174ad..c541ab6 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ }, "name": "react-circle", "version": "1.1.1", + "license": "MIT", "main": "dist/index.js", "types": "dist/index.d.ts", "files": [