feat(circle,line): enable indeterminate mode (#216)

* feat(circle,line): enable indeterminate mode

* add loading property to enable indeterminate mode

* update code

* fix coverage and generate id

* fix: extra space, type and coverage

* fix lint

Author: SaidMarar

README.md

@@ -136,6 +136,12 @@ export default () => (
       <td>top</td>
       <td>the gap position: can be `top`, `bottom`, `left`, or `right`. </td>
     </tr>
+    <tr>
+      <td>loading</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>If it is true the indeterminate progress will be enabled.</td>
+    </tr>
   </tbody>
 </table>
 

docs/demo/loading.md

@@ -0,0 +1,8 @@
+---
+title: loading
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/loading.tsx"></code>

docs/examples/loading.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Line, Circle } from 'rc-progress';
+
+const Loading = () => {
+  return (
+    <div style={{ margin: 10, width: 200 }}>
+      <Circle loading percent={10} />
+      <Line loading percent={50} />
+    </div>
+  );
+};
+
+export default Loading;

src/Circle/index.tsx

@@ -5,6 +5,7 @@ import type { ProgressProps } from '../interface';
 import useId from '../hooks/useId';
 import PtgCircle from './PtgCircle';
 import { VIEW_BOX_SIZE, getCircleStyle } from './util';
+import getIndeterminateCircle from '../utils/getIndeterminateCircle';
 
 function toArray<T>(value: T | T[]): T[] {
   const mergedValue = value ?? [];
@@ -26,6 +27,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
     className,
     strokeColor,
     percent,
+    loading,
     ...restProps
   } = {
     ...defaultProps,
@@ -51,6 +53,10 @@ const Circle: React.FC<ProgressProps> = (props) => {
   >;
   const isConicGradient = gradient && typeof gradient === 'object';
   const mergedStrokeLinecap = isConicGradient ? 'butt' : strokeLinecap;
+  const { indeterminateStyleProps, indeterminateStyleAnimation } = getIndeterminateCircle({
+    id: mergedId,
+    loading,
+  });
 
   const circleStyle = getCircleStyle(
     perimeter,
@@ -94,7 +100,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
             radius={radius}
             prefixCls={prefixCls}
             gradientId={gradientId}
-            style={circleStyleForStack}
+            style={{ ...circleStyleForStack, ...indeterminateStyleProps }}
             strokeLinecap={mergedStrokeLinecap}
             strokeWidth={strokeWidth}
             gapDegree={gapDegree}
@@ -180,6 +186,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
         />
       )}
       {stepCount ? getStepStokeList() : getStokeList()}
+      {indeterminateStyleAnimation}
     </svg>
   );
 };

src/Line.tsx

@@ -2,9 +2,12 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useTransitionDuration, defaultProps } from './common';
 import type { ProgressProps } from './interface';
+import getIndeterminateLine from './utils/getIndeterminateLine';
+import useId from './hooks/useId';
 
 const Line: React.FC<ProgressProps> = (props) => {
   const {
+    id,
     className,
     percent,
     prefixCls,
@@ -15,12 +18,15 @@ const Line: React.FC<ProgressProps> = (props) => {
     trailColor,
     trailWidth,
     transition,
+    loading,
     ...restProps
   } = {
     ...defaultProps,
     ...props,
   };
 
+  const mergedId = useId(id);
+
   // eslint-disable-next-line no-param-reassign
   delete restProps.gapPosition;
   const percentList = Array.isArray(percent) ? percent : [percent];
@@ -34,6 +40,14 @@ const Line: React.FC<ProgressProps> = (props) => {
          L ${strokeLinecap === 'round' ? right : 100},${center}`;
   const viewBoxString = `0 0 100 ${strokeWidth}`;
   let stackPtg = 0;
+  const { indeterminateStyleProps, indeterminateStyleAnimation } = getIndeterminateLine({
+    id: mergedId,
+    loading,
+    percent: percentList[0],
+    strokeLinecap,
+    strokeWidth,
+  });
+
   return (
     <svg
       className={classNames(`${prefixCls}-line`, className)}
@@ -69,6 +83,7 @@ const Line: React.FC<ProgressProps> = (props) => {
           transition:
             transition ||
             'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
+          ...indeterminateStyleProps,
         };
         const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
         stackPtg += ptg;
@@ -93,6 +108,7 @@ const Line: React.FC<ProgressProps> = (props) => {
           />
         );
       })}
+      {indeterminateStyleAnimation}
     </svg>
   );
 };

src/common.ts

@@ -10,6 +10,7 @@ export const defaultProps: Partial<ProgressProps> = {
   trailColor: '#D9D9D9',
   trailWidth: 1,
   gapPosition: 'bottom',
+  loading: false,
 };
 
 export const useTransitionDuration = (): SVGPathElement[] => {

src/interface.ts

@@ -14,6 +14,7 @@ export interface ProgressProps {
   transition?: string;
   onClick?: React.MouseEventHandler;
   steps?: number | { count: number; gap: number };
+  loading?: boolean;
 }
 
 export type StrokeColorObject = Record<string, string | boolean>;

src/utils/getIndeterminateCircle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface IndeterminateOption {
+  id: string;
+  loading: boolean;
+}
+
+export default ({ id, loading }: IndeterminateOption) => {
+  if (!loading) {
+    return {
+      indeterminateStyleProps: {},
+      indeterminateStyleAnimation: null,
+    };
+  }
+
+  const animationName = `${id}-indeterminate-animate`;
+
+  return {
+    indeterminateStyleProps: {
+      transform: 'rotate(0deg)',
+      animation: `${animationName} 1s linear infinite`,
+    },
+    indeterminateStyleAnimation: (
+      <style>
+        {`@keyframes ${animationName} {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }`}
+      </style>
+    ),
+  };
+};

src/utils/getIndeterminateLine.tsx

@@ -0,0 +1,38 @@
+import type { StrokeLinecapType } from '@/interface';
+import React from 'react';
+
+interface IndeterminateOption {
+  id: string;
+  loading: boolean;
+  percent: number;
+  strokeLinecap: StrokeLinecapType;
+  strokeWidth: number;
+}
+
+export default (options: IndeterminateOption) => {
+  const { id, percent, strokeLinecap, strokeWidth, loading } = options;
+  if (!loading) {
+    return {
+      indeterminateStyleProps: {},
+      indeterminateStyleAnimation: null,
+    };
+  }
+  const animationName = `${id}-indeterminate-animate`;
+  const strokeDashOffset = 100 - (percent + (strokeLinecap === 'round' ? strokeWidth : 0));
+
+  return {
+    indeterminateStyleProps: {
+      strokeDasharray: `${percent} 100`,
+      animation: `${animationName} .6s linear alternate infinite`,
+      strokeDashoffset: 0,
+    },
+    indeterminateStyleAnimation: (
+      <style>
+        {`@keyframes ${animationName} {
+            0% { stroke-dashoffset: 0; }
+            100% { stroke-dashoffset: -${strokeDashOffset};
+          }`}
+      </style>
+    ),
+  };
+};

tests/__snapshots__/index.spec.js.snap

@@ -24,7 +24,7 @@ exports[` 1`] = `
       stroke="#2db7f5"
       stroke-linecap="butt"
       stroke-width="1"
-      style="stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;"
+      style="stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;"
     />
   </svg>
   <br />
@@ -50,7 +50,7 @@ exports[` 1`] = `
       stroke="#2db7f5"
       stroke-linecap="round"
       stroke-width="1"
-      style="stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;"
+      style="stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;"
     />
   </svg>
   <br />
@@ -76,7 +76,7 @@ exports[` 1`] = `
       stroke="#2db7f5"
       stroke-linecap="square"
       stroke-width="1"
-      style="stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;"
+      style="stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;"
     />
   </svg>
 </div>

tests/indeterminate.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Circle, Line } from '../src';
+import { render } from '@testing-library/react';
+
+describe('(Circle | Line).indeterminate', () => {
+  describe('Line', () => {
+    it('should render indeterminate style', () => {
+      const { container, rerender } = render(<Line loading />);
+      const line: HTMLElement = container.querySelector('.rc-progress-line-path');
+
+      expect(line.style.animation).toContain('indeterminate-animate');
+
+      rerender(<Line />);
+
+      expect(line.style.animation).not.toContain('indeterminate-animate');
+    });
+
+    it('should render indeterminate with percent and rerennder without it', () => {
+      const { container, rerender } = render(<Line percent={20} loading />);
+      const line: HTMLElement = container.querySelector('.rc-progress-line-path');
+
+      expect(line.style.animation).toContain('indeterminate-animate');
+      expect(line.style.strokeDasharray).toEqual('20 100');
+
+      rerender(<Line percent={20} />);
+
+      expect(line.style.animation).not.toContain('indeterminate-animate');
+      expect(line.style.strokeDasharray).not.toEqual('20 100');
+    });
+  });
+
+  describe('Circle', () => {
+    it('should render indeterminate style', () => {
+      const { container, rerender } = render(<Circle loading />);
+      const circle: HTMLElement = container.querySelector('.rc-progress-circle-path');
+
+      expect(circle.style.animation).toContain('indeterminate-animate');
+
+      rerender(<Circle />);
+
+      expect(circle.style.animation).not.toContain('indeterminate-animate');
+    });
+
+    it('should rerender indeterminate with percent Circle', () => {
+      const { container, rerender } = render(<Circle percent={20} loading />);
+      const circle: HTMLElement = container.querySelector('.rc-progress-circle-path');
+
+      expect(circle.style.animation).toContain('indeterminate-animate');
+      expect(circle.style.transform).toEqual('rotate(0deg)');
+
+      rerender(<Circle percent={20} />);
+
+      expect(circle.style.animation).not.toContain('indeterminate-animate');
+      expect(circle.style.transform).not.toEqual('rotate(0deg)');
+    });
+  });
+});