From 6c28e82db32863f1c92f4f4633e33c0ad737db44 Mon Sep 17 00:00:00 2001 From: Atishay Jain Date: Sat, 3 Sep 2022 13:16:43 +0530 Subject: [PATCH 1/6] WIP: Fix initial canvas and ring overflow issue --- src/loader/RevolvingDot.tsx | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/loader/RevolvingDot.tsx b/src/loader/RevolvingDot.tsx index 1ea64508..b4661a2c 100644 --- a/src/loader/RevolvingDot.tsx +++ b/src/loader/RevolvingDot.tsx @@ -26,8 +26,8 @@ const RevolvingDot: FunctionComponent = ({ > = ({ fill="none" stroke={color} strokeWidth="4" - cx="50" - cy="50" - r={Number(`${radius}`) + 38} + // cx={`calc(${width} / 2)`} + // cy={`calc(${height} / 2)`} + cx={`calc(${radius} * 1.28)`} + cy={`calc(${radius} * 1.28)`} + // r={Number(`${radius}`) + 38} + r={radius} style={{ opacity: 0.5 }} /> - = ({ from="0 50 48" to="360 50 52" repeatCount="indefinite" - /> - + /> + */} ) From 7d32213949560df53f240d4d529f2ea5b6466e23 Mon Sep 17 00:00:00 2001 From: Atishay Jain Date: Sat, 3 Sep 2022 22:03:56 +0530 Subject: [PATCH 2/6] Fix: Revolving dot scaling issue --- src/loader/RevolvingDot.tsx | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/loader/RevolvingDot.tsx b/src/loader/RevolvingDot.tsx index b4661a2c..b362016c 100644 --- a/src/loader/RevolvingDot.tsx +++ b/src/loader/RevolvingDot.tsx @@ -5,12 +5,14 @@ import { BaseProps, DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type' interface RevolvingDotProps extends BaseProps { radius?: string | number secondaryColor?: string + strokeWidth?: string | number } const RevolvingDot: FunctionComponent = ({ height = 100, width = 100, radius = 6, + strokeWidth = 4, color = DEFAULT_COLOR, ariaLabel = 'revolving-dot-loading', wrapperStyle, @@ -36,7 +38,7 @@ const RevolvingDot: FunctionComponent = ({ = ({ r={radius} style={{ opacity: 0.5 }} /> - {/* - */} + /> + ) From c71c60210599a2afcac12ba8aba04b4df2e9c130 Mon Sep 17 00:00:00 2001 From: Atishay Jain Date: Sat, 3 Sep 2022 22:13:26 +0530 Subject: [PATCH 3/6] Chore: Remove unused code --- src/loader/RevolvingDot.tsx | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/src/loader/RevolvingDot.tsx b/src/loader/RevolvingDot.tsx index b362016c..fa916f12 100644 --- a/src/loader/RevolvingDot.tsx +++ b/src/loader/RevolvingDot.tsx @@ -9,11 +9,10 @@ interface RevolvingDotProps extends BaseProps { } const RevolvingDot: FunctionComponent = ({ - height = 100, - width = 100, radius = 6, strokeWidth = 4, color = DEFAULT_COLOR, + secondaryColor, ariaLabel = 'revolving-dot-loading', wrapperStyle, wrapperClass, @@ -37,13 +36,10 @@ const RevolvingDot: FunctionComponent = ({ > @@ -51,15 +47,6 @@ const RevolvingDot: FunctionComponent = ({ fill={color} stroke={color} strokeWidth="3" - // cx="8" - // cy="54" - //============================== - //============================= - // cx={`calc(${width} / 2)`} - // cy={`calc(${radius} * 2)`} - - // cy={`calc(${radius} / 3)`} - // r={`calc(${radius} / 3.5)`} cx={`calc(${radius} * 1.28)`} cy={`calc(${radius} / 3.5)`} r={`calc(${radius} / 5)`} @@ -69,8 +56,6 @@ const RevolvingDot: FunctionComponent = ({ attributeName="transform" dur="2s" type="rotate" - // from="0 50 48" - // to="360 50 52" from="0" to="360" repeatCount="indefinite" From 612f086e8aba0e878249ae0b18021cd0599b9582 Mon Sep 17 00:00:00 2001 From: Atishay Jain Date: Sat, 3 Sep 2022 23:02:35 +0530 Subject: [PATCH 4/6] Test: change test cases --- test/loader/RevolvingDot.spec.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/test/loader/RevolvingDot.spec.tsx b/test/loader/RevolvingDot.spec.tsx index f6202b24..7fc3c24b 100644 --- a/test/loader/RevolvingDot.spec.tsx +++ b/test/loader/RevolvingDot.spec.tsx @@ -18,16 +18,17 @@ describe('RevolvingDot Loader', () => { const svg = screen.getByTestId(svgTestId) expect(svg).toBeDefined() - expect(svg).toHaveAttribute('width', '100') - expect(svg).toHaveAttribute('height', '100') + expect(svg).toHaveAttribute('width', `calc(6 * 2.5)`) + expect(svg).toHaveAttribute('height', `calc(6 * 2.5)`) svg.querySelectorAll('circle').forEach((circle, index) => { if (index === 0) { expect(circle).toHaveAttribute('stroke', DEFAULT_COLOR) + expect(circle).toHaveAttribute('r', '6') } else if (index === 1) { expect(circle).toHaveAttribute('stroke', DEFAULT_COLOR) expect(circle).toHaveAttribute('fill', DEFAULT_COLOR) - expect(circle).toHaveAttribute('r', '6') + expect(circle).toHaveAttribute('r', `calc(6 / 5)`) } }) }) From ea3f70ba6e62487c95f8dcd578829543efa1f912 Mon Sep 17 00:00:00 2001 From: Atishay Jain Date: Wed, 7 Sep 2022 21:24:27 +0530 Subject: [PATCH 5/6] Refactor: Change adius and strokeWidth type, also increase default loader size --- src/loader/RevolvingDot.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/loader/RevolvingDot.tsx b/src/loader/RevolvingDot.tsx index fa916f12..6854c82a 100644 --- a/src/loader/RevolvingDot.tsx +++ b/src/loader/RevolvingDot.tsx @@ -3,14 +3,14 @@ import { getDefaultStyle } from '../helpers' import { BaseProps, DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type' interface RevolvingDotProps extends BaseProps { - radius?: string | number + radius?: number secondaryColor?: string - strokeWidth?: string | number + strokeWidth?: number } const RevolvingDot: FunctionComponent = ({ - radius = 6, - strokeWidth = 4, + radius = 45, + strokeWidth = 5, color = DEFAULT_COLOR, secondaryColor, ariaLabel = 'revolving-dot-loading', From 13988f1308b3758577ba0ea9b486cf9f2544e22e Mon Sep 17 00:00:00 2001 From: Atishay Jain Date: Wed, 7 Sep 2022 21:25:08 +0530 Subject: [PATCH 6/6] Test: Update test for new default configuration --- test/loader/RevolvingDot.spec.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/loader/RevolvingDot.spec.tsx b/test/loader/RevolvingDot.spec.tsx index 7fc3c24b..b4359ef8 100644 --- a/test/loader/RevolvingDot.spec.tsx +++ b/test/loader/RevolvingDot.spec.tsx @@ -18,17 +18,17 @@ describe('RevolvingDot Loader', () => { const svg = screen.getByTestId(svgTestId) expect(svg).toBeDefined() - expect(svg).toHaveAttribute('width', `calc(6 * 2.5)`) - expect(svg).toHaveAttribute('height', `calc(6 * 2.5)`) + expect(svg).toHaveAttribute('width', `calc(45 * 2.5)`) + expect(svg).toHaveAttribute('height', `calc(45 * 2.5)`) svg.querySelectorAll('circle').forEach((circle, index) => { if (index === 0) { expect(circle).toHaveAttribute('stroke', DEFAULT_COLOR) - expect(circle).toHaveAttribute('r', '6') + expect(circle).toHaveAttribute('r', '45') } else if (index === 1) { expect(circle).toHaveAttribute('stroke', DEFAULT_COLOR) expect(circle).toHaveAttribute('fill', DEFAULT_COLOR) - expect(circle).toHaveAttribute('r', `calc(6 / 5)`) + expect(circle).toHaveAttribute('r', `calc(45 / 5)`) } }) })