Fix:revolving dot issue #140 (#141)

* WIP: Fix initial canvas and ring overflow issue * Fix: Revolving dot scaling issue * Chore: Remove unused code * Test: change test cases * Refactor: Change adius and strokeWidth type, also increase default loader size * Test: Update test for new default configuration
mhnpd · Sep 8, 2022 · 906a275 · 906a275
1 parent e8a686f
commit 906a275
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/src/loader/RevolvingDot.tsx b/src/loader/RevolvingDot.tsx
@@ -3,15 +3,16 @@ 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?: number
 }
 
 const RevolvingDot: FunctionComponent<RevolvingDotProps> = ({
-  height = 100,
-  width = 100,
-  radius = 6,
+  radius = 45,
+  strokeWidth = 5,
   color = DEFAULT_COLOR,
+  secondaryColor,
   ariaLabel = 'revolving-dot-loading',
   wrapperStyle,
   wrapperClass,
@@ -26,36 +27,37 @@ const RevolvingDot: FunctionComponent<RevolvingDotProps> = ({
   >
     <svg
       version="1.1"
-      width={width}
-      height={height}
+      width={`calc(${radius} * 2.5)`}
+      height={`calc(${radius} * 2.5)`}
       xmlns="http://www.w3.org/2000/svg"
       x="0px"
       y="0px"
       data-testid="revolving-dot-svg"
     >
       <circle
         fill="none"
-        stroke={color}
-        strokeWidth="4"
-        cx="50"
-        cy="50"
-        r={Number(`${radius}`) + 38}
+        stroke={secondaryColor || color}
+        strokeWidth={strokeWidth}
+        cx={`calc(${radius} * 1.28)`}
+        cy={`calc(${radius} * 1.28)`}
+        r={radius}
         style={{ opacity: 0.5 }}
       />
       <circle
         fill={color}
         stroke={color}
         strokeWidth="3"
-        cx="8"
-        cy="54"
-        r={radius}
+        cx={`calc(${radius} * 1.28)`}
+        cy={`calc(${radius} / 3.5)`}
+        r={`calc(${radius} / 5)`}
+        style={{ transformOrigin: '50% 50%' }}
       >
         <animateTransform
           attributeName="transform"
           dur="2s"
           type="rotate"
-          from="0 50 48"
-          to="360 50 52"
+          from="0"
+          to="360"
           repeatCount="indefinite"
         />
       </circle>

diff --git 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(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', '45')
       } 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(45 / 5)`)
       }
     })
   })