From 9ff77120481fe0edf3917545b9320ea28234ec20 Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Sun, 1 Jan 2023 16:41:04 +0100 Subject: [PATCH 1/6] feat(circle,line): enable indeterminate mode --- README.md | 4 ++-- docs/demo/indeterminate.md | 3 +++ docs/examples/indeterminate.tsx | 13 ++++++++++ src/Circle.tsx | 18 +++++++------- src/Line.tsx | 12 ++++++++-- src/common.ts | 7 +++++- src/utils/getIndeterminateCircle.tsx | 32 +++++++++++++++++++++++++ src/utils/getIndeterminateLine.tsx | 36 ++++++++++++++++++++++++++++ tests/index.spec.js | 22 +++++++++++++++++ 9 files changed, 134 insertions(+), 13 deletions(-) create mode 100644 docs/demo/indeterminate.md create mode 100644 docs/examples/indeterminate.tsx create mode 100644 src/utils/getIndeterminateCircle.tsx create mode 100644 src/utils/getIndeterminateLine.tsx diff --git a/README.md b/README.md index 93b63ba..8b7c356 100644 --- a/README.md +++ b/README.md @@ -121,8 +121,8 @@ export default () => ( percent Number | Number[] - 0 - the percent of the progress + null + the percent of the progress, if it is not defined the indeterminate mode will be enabled gapDegree diff --git a/docs/demo/indeterminate.md b/docs/demo/indeterminate.md new file mode 100644 index 0000000..888c912 --- /dev/null +++ b/docs/demo/indeterminate.md @@ -0,0 +1,3 @@ +## indeterminate + + diff --git a/docs/examples/indeterminate.tsx b/docs/examples/indeterminate.tsx new file mode 100644 index 0000000..e0f2cf9 --- /dev/null +++ b/docs/examples/indeterminate.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { Line, Circle } from 'rc-progress'; + +const Indeterminate = () => { + return ( +
+ + +
+ ); +}; + +export default Indeterminate; diff --git a/src/Circle.tsx b/src/Circle.tsx index a4742d1..2ff2a4e 100644 --- a/src/Circle.tsx +++ b/src/Circle.tsx @@ -1,18 +1,14 @@ import * as React from 'react'; import classNames from 'classnames'; -import { defaultProps, useTransitionDuration } from './common'; +import { defaultProps, useTransitionDuration, toArray } from './common'; import type { ProgressProps } from './interface'; import useId from './hooks/useId'; +import getIndeterminateCircle from './utils/getIndeterminateCircle'; function stripPercentToNumber(percent: string) { return +percent.replace('%', ''); } -function toArray(value: T | T[]): T[] { - const mergedValue = value ?? []; - return Array.isArray(mergedValue) ? mergedValue : [mergedValue]; -} - const VIEW_BOX_SIZE = 100; const getCircleStyle = ( @@ -86,6 +82,11 @@ const Circle: React.FC = ({ const perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360); const { count: stepCount, space: stepSpace } = typeof steps === 'object' ? steps : { count: steps, space: 2 }; + const { + indeterminateStylePops, + indeterminateStyleTag, + percent: _percent, + } = getIndeterminateCircle({ percent }); const circleStyle = getCircleStyle( perimeter, @@ -99,7 +100,7 @@ const Circle: React.FC = ({ strokeLinecap, strokeWidth, ); - const percentList = toArray(percent); + const percentList = toArray(_percent); const strokeColorList = toArray(strokeColor); const gradient = strokeColorList.find((color) => color && typeof color === 'object'); @@ -135,7 +136,7 @@ const Circle: React.FC = ({ strokeLinecap={strokeLinecap} strokeWidth={strokeWidth} opacity={ptg === 0 ? 0 : 1} - style={circleStyleForStack} + style={{ ...circleStyleForStack, ...indeterminateStylePops }} ref={(elem) => { // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs // React will call the ref callback with the DOM element when the component mounts, @@ -229,6 +230,7 @@ const Circle: React.FC = ({ /> )} {stepCount ? getStepStokeList() : getStokeList()} + {indeterminateStyleTag} ); }; diff --git a/src/Line.tsx b/src/Line.tsx index 169fa62..9c6054a 100644 --- a/src/Line.tsx +++ b/src/Line.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import classNames from 'classnames'; -import { useTransitionDuration, defaultProps } from './common'; +import { useTransitionDuration, defaultProps, toArray } from './common'; import type { ProgressProps } from './interface'; +import getIndeterminateLine from './utils/getIndeterminateLine'; const Line: React.FC = ({ className, @@ -18,7 +19,12 @@ const Line: React.FC = ({ }) => { // eslint-disable-next-line no-param-reassign delete restProps.gapPosition; - const percentList = Array.isArray(percent) ? percent : [percent]; + const { + indeterminateStylePops, + indeterminateStyleTag, + percent: _percent, + } = getIndeterminateLine({ percent, strokeLinecap, strokeWidth }); + const percentList = toArray(_percent); const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor]; const paths = useTransitionDuration(); @@ -64,6 +70,7 @@ const Line: React.FC = ({ transition: transition || 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear', + ...indeterminateStylePops, }; const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1]; stackPtg += ptg; @@ -88,6 +95,7 @@ const Line: React.FC = ({ /> ); })} + {indeterminateStyleTag} ); }; diff --git a/src/common.ts b/src/common.ts index 68ab787..b1f859c 100644 --- a/src/common.ts +++ b/src/common.ts @@ -3,7 +3,7 @@ import type { ProgressProps } from './interface'; export const defaultProps: Partial = { className: '', - percent: 0, + percent: null, prefixCls: 'rc-progress', strokeColor: '#2db7f5', strokeLinecap: 'round', @@ -43,3 +43,8 @@ export const useTransitionDuration = (): SVGPathElement[] => { return pathsRef.current; }; + +export const toArray = (value: T | T[]): T[] => { + const mergedValue = value ?? []; + return Array.isArray(mergedValue) ? mergedValue : [mergedValue]; +}; diff --git a/src/utils/getIndeterminateCircle.tsx b/src/utils/getIndeterminateCircle.tsx new file mode 100644 index 0000000..6cd55e1 --- /dev/null +++ b/src/utils/getIndeterminateCircle.tsx @@ -0,0 +1,32 @@ +interface IndeterminateOption { + percent: number | number[]; +} + +export default (options: IndeterminateOption) => { + if (options.percent !== null) { + return { + ...options, + indeterminateStylePops: {}, + indeterminateStyleTag: null, + }; + } + + const animationName = 'circle-indeterminate-animate'; + const percent = 40; + + return { + percent, + indeterminateStylePops: { + transform: 'rotate(0deg)', + animation: `${animationName} 1s linear infinite`, + }, + indeterminateStyleTag: ( + + ), + }; +}; diff --git a/src/utils/getIndeterminateLine.tsx b/src/utils/getIndeterminateLine.tsx new file mode 100644 index 0000000..6913028 --- /dev/null +++ b/src/utils/getIndeterminateLine.tsx @@ -0,0 +1,36 @@ +interface IndeterminateOption { + percent: number | number[]; + strokeLinecap: string; + strokeWidth: number; +} + +export default (options: IndeterminateOption) => { + if (options.percent !== null) { + return { + percent: options.percent, + indeterminateStylePops: {}, + indeterminateStyleTag: null, + }; + } + const animationName = 'line-indeterminate-animate'; + const percent = 40; + const strokeDashOffset = + 100 - (percent + (options.strokeLinecap === 'round' ? options.strokeWidth : 0)); + + return { + percent, + indeterminateStylePops: { + strokeDasharray: `${percent} 100`, + animation: `${animationName} .6s linear alternate infinite`, + strokeDashoffset: 0, + }, + indeterminateStyleTag: ( + + ), + }; +}; diff --git a/tests/index.spec.js b/tests/index.spec.js index bb701be..2e5ecac 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -243,4 +243,26 @@ describe('Progress', () => { expect(circle.find(Circle).props().percent).toEqual([20, 20, 20, 20]); circle.unmount(); }); + + it('should support indeterminate mode', () => { + const Indeterminate = () => { + return ( + <> + + + + ); + }; + + const wrapper = mount(); + expect(wrapper.find(Circle).find('style')).toBeDefined(); + expect( + wrapper.find(Circle).find('.rc-progress-circle-path').at(0).getDOMNode().style.animation, + ).toContain('circle-indeterminate-animate'); + expect(wrapper.find(Line).find('style')).toBeDefined(); + expect( + wrapper.find(Line).find('.rc-progress-line-path').at(0).getDOMNode().style.animation, + ).toContain('line-indeterminate-animate'); + wrapper.unmount(); + }); }); From c22e2afb9cf6ea50a1681099f701c3a77e348d72 Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Sun, 1 Jan 2023 21:56:36 +0100 Subject: [PATCH 2/6] add loading property to enable indeterminate mode --- README.md | 10 +++++-- docs/demo/indeterminate.md | 3 --- docs/demo/loading.md | 3 +++ .../{indeterminate.tsx => loading.tsx} | 8 +++--- src/Circle.tsx | 9 +++---- src/Line.tsx | 15 ++++++----- src/common.ts | 3 ++- src/interface.ts | 1 + src/utils/getIndeterminateCircle.tsx | 7 ++--- src/utils/getIndeterminateLine.tsx | 12 ++++----- tests/index.spec.js | 26 ++++++++++--------- 11 files changed, 51 insertions(+), 46 deletions(-) delete mode 100644 docs/demo/indeterminate.md create mode 100644 docs/demo/loading.md rename docs/examples/{indeterminate.tsx => loading.tsx} (55%) diff --git a/README.md b/README.md index 8b7c356..da62b38 100644 --- a/README.md +++ b/README.md @@ -121,8 +121,8 @@ export default () => ( percent Number | Number[] - null - the percent of the progress, if it is not defined the indeterminate mode will be enabled + 0 + the percent of the progress gapDegree @@ -136,6 +136,12 @@ export default () => ( top the gap position, value: top, bottom, left, right. + + loading + Boolean + false + If it is true the indeterminate progress will be enabled. + diff --git a/docs/demo/indeterminate.md b/docs/demo/indeterminate.md deleted file mode 100644 index 888c912..0000000 --- a/docs/demo/indeterminate.md +++ /dev/null @@ -1,3 +0,0 @@ -## indeterminate - - diff --git a/docs/demo/loading.md b/docs/demo/loading.md new file mode 100644 index 0000000..0e77048 --- /dev/null +++ b/docs/demo/loading.md @@ -0,0 +1,3 @@ +## loading + + diff --git a/docs/examples/indeterminate.tsx b/docs/examples/loading.tsx similarity index 55% rename from docs/examples/indeterminate.tsx rename to docs/examples/loading.tsx index e0f2cf9..b4948d0 100644 --- a/docs/examples/indeterminate.tsx +++ b/docs/examples/loading.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { Line, Circle } from 'rc-progress'; -const Indeterminate = () => { +const Loading = () => { return (
- - + +
); }; -export default Indeterminate; +export default Loading; diff --git a/src/Circle.tsx b/src/Circle.tsx index 2ff2a4e..5325614 100644 --- a/src/Circle.tsx +++ b/src/Circle.tsx @@ -72,6 +72,7 @@ const Circle: React.FC = ({ className, strokeColor, percent, + loading, ...restProps }) => { const mergedId = useId(id); @@ -82,11 +83,6 @@ const Circle: React.FC = ({ const perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360); const { count: stepCount, space: stepSpace } = typeof steps === 'object' ? steps : { count: steps, space: 2 }; - const { - indeterminateStylePops, - indeterminateStyleTag, - percent: _percent, - } = getIndeterminateCircle({ percent }); const circleStyle = getCircleStyle( perimeter, @@ -100,9 +96,10 @@ const Circle: React.FC = ({ strokeLinecap, strokeWidth, ); - const percentList = toArray(_percent); + const percentList = toArray(percent); const strokeColorList = toArray(strokeColor); const gradient = strokeColorList.find((color) => color && typeof color === 'object'); + const { indeterminateStylePops, indeterminateStyleTag } = getIndeterminateCircle({ loading }); const paths = useTransitionDuration(); diff --git a/src/Line.tsx b/src/Line.tsx index 9c6054a..33dd7cd 100644 --- a/src/Line.tsx +++ b/src/Line.tsx @@ -15,16 +15,12 @@ const Line: React.FC = ({ trailColor, trailWidth, transition, + loading, ...restProps }) => { // eslint-disable-next-line no-param-reassign delete restProps.gapPosition; - const { - indeterminateStylePops, - indeterminateStyleTag, - percent: _percent, - } = getIndeterminateLine({ percent, strokeLinecap, strokeWidth }); - const percentList = toArray(_percent); + const percentList = toArray(percent); const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor]; const paths = useTransitionDuration(); @@ -35,6 +31,13 @@ const Line: React.FC = ({ L ${strokeLinecap === 'round' ? right : 100},${center}`; const viewBoxString = `0 0 100 ${strokeWidth}`; let stackPtg = 0; + const { indeterminateStylePops, indeterminateStyleTag } = getIndeterminateLine({ + loading, + percent: percentList[0], + strokeLinecap, + strokeWidth, + }); + return ( = { className: '', - percent: null, + percent: 0, prefixCls: 'rc-progress', strokeColor: '#2db7f5', strokeLinecap: 'round', @@ -12,6 +12,7 @@ export const defaultProps: Partial = { trailColor: '#D9D9D9', trailWidth: 1, gapPosition: 'bottom', + loading: false, }; export const useTransitionDuration = (): SVGPathElement[] => { diff --git a/src/interface.ts b/src/interface.ts index 3a46bd7..bd72a6c 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -14,6 +14,7 @@ export interface ProgressProps { transition?: string; onClick?: React.MouseEventHandler; steps?: number | { count: number; space: number }; + loading?: boolean; } export type BaseStrokeColorType = string | Record; diff --git a/src/utils/getIndeterminateCircle.tsx b/src/utils/getIndeterminateCircle.tsx index 6cd55e1..8ea175a 100644 --- a/src/utils/getIndeterminateCircle.tsx +++ b/src/utils/getIndeterminateCircle.tsx @@ -1,21 +1,18 @@ interface IndeterminateOption { - percent: number | number[]; + loading: boolean; } export default (options: IndeterminateOption) => { - if (options.percent !== null) { + if (!options.loading) { return { - ...options, indeterminateStylePops: {}, indeterminateStyleTag: null, }; } const animationName = 'circle-indeterminate-animate'; - const percent = 40; return { - percent, indeterminateStylePops: { transform: 'rotate(0deg)', animation: `${animationName} 1s linear infinite`, diff --git a/src/utils/getIndeterminateLine.tsx b/src/utils/getIndeterminateLine.tsx index 6913028..529fa7c 100644 --- a/src/utils/getIndeterminateLine.tsx +++ b/src/utils/getIndeterminateLine.tsx @@ -1,24 +1,22 @@ interface IndeterminateOption { - percent: number | number[]; + loading: boolean; + percent: number; strokeLinecap: string; strokeWidth: number; } export default (options: IndeterminateOption) => { - if (options.percent !== null) { + const { percent, strokeLinecap, strokeWidth, loading } = options; + if (!loading) { return { - percent: options.percent, indeterminateStylePops: {}, indeterminateStyleTag: null, }; } const animationName = 'line-indeterminate-animate'; - const percent = 40; - const strokeDashOffset = - 100 - (percent + (options.strokeLinecap === 'round' ? options.strokeWidth : 0)); + const strokeDashOffset = 100 - (percent + (strokeLinecap === 'round' ? strokeWidth : 0)); return { - percent, indeterminateStylePops: { strokeDasharray: `${percent} 100`, animation: `${animationName} .6s linear alternate infinite`, diff --git a/tests/index.spec.js b/tests/index.spec.js index 2e5ecac..c67b629 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -245,24 +245,26 @@ describe('Progress', () => { }); it('should support indeterminate mode', () => { - const Indeterminate = () => { + const Loading = () => { return ( <> - - + + ); }; - const wrapper = mount(); - expect(wrapper.find(Circle).find('style')).toBeDefined(); - expect( - wrapper.find(Circle).find('.rc-progress-circle-path').at(0).getDOMNode().style.animation, - ).toContain('circle-indeterminate-animate'); - expect(wrapper.find(Line).find('style')).toBeDefined(); - expect( - wrapper.find(Line).find('.rc-progress-line-path').at(0).getDOMNode().style.animation, - ).toContain('line-indeterminate-animate'); + const wrapper = mount(); + const circle = wrapper.find(Circle); + const line = wrapper.find(Line); + expect(circle.find('style')).toBeDefined(); + expect(circle.find('.rc-progress-circle-path').at(0).getDOMNode().style.animation).toContain( + 'circle-indeterminate-animate', + ); + expect(line.find('style')).toBeDefined(); + expect(line.find('.rc-progress-line-path').at(0).getDOMNode().style.animation).toContain( + 'line-indeterminate-animate', + ); wrapper.unmount(); }); }); From 502b57bd763654a1c986766756cc2514b9bbe591 Mon Sep 17 00:00:00 2001 From: SaidMarar Date: Fri, 5 Jan 2024 00:39:25 +0100 Subject: [PATCH 3/6] update code --- src/Circle/index.tsx | 8 +++++--- src/Line.tsx | 8 ++++---- src/utils/getIndeterminateCircle.tsx | 8 ++++---- src/utils/getIndeterminateLine.tsx | 8 ++++---- 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx index a1afcae..1b838d4 100644 --- a/src/Circle/index.tsx +++ b/src/Circle/index.tsx @@ -53,7 +53,9 @@ const Circle: React.FC = (props) => { >; const isConicGradient = gradient && typeof gradient === 'object'; const mergedStrokeLinecap = isConicGradient ? 'butt' : strokeLinecap; - const { indeterminateStylePops, indeterminateStyleTag } = getIndeterminateCircle({ loading }); + const { indeterminateStyleProps, indeterminateStyleAnimation } = getIndeterminateCircle({ + loading, + }); const circleStyle = getCircleStyle( perimeter, @@ -97,7 +99,7 @@ const Circle: React.FC = (props) => { radius={radius} prefixCls={prefixCls} gradientId={gradientId} - style={{ ...circleStyleForStack, ...indeterminateStylePops }} + style={{ ...circleStyleForStack, ...indeterminateStyleProps }} strokeLinecap={mergedStrokeLinecap} strokeWidth={strokeWidth} gapDegree={gapDegree} @@ -183,7 +185,7 @@ const Circle: React.FC = (props) => { /> )} {stepCount ? getStepStokeList() : getStokeList()} - {indeterminateStyleTag} + {indeterminateStyleAnimation} ); }; diff --git a/src/Line.tsx b/src/Line.tsx index 61d0eaf..7f2d9bc 100644 --- a/src/Line.tsx +++ b/src/Line.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; -import { useTransitionDuration, defaultProps, toArray } from './common'; +import { useTransitionDuration, defaultProps } from './common'; import type { ProgressProps } from './interface'; import getIndeterminateLine from './utils/getIndeterminateLine'; @@ -36,7 +36,7 @@ const Line: React.FC = (props) => { L ${strokeLinecap === 'round' ? right : 100},${center}`; const viewBoxString = `0 0 100 ${strokeWidth}`; let stackPtg = 0; - const { indeterminateStylePops, indeterminateStyleTag } = getIndeterminateLine({ + const { indeterminateStyleProps, indeterminateStyleAnimation } = getIndeterminateLine({ loading, percent: percentList[0], strokeLinecap, @@ -78,7 +78,7 @@ const Line: React.FC = (props) => { transition: transition || 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear', - ...indeterminateStylePops, + ...indeterminateStyleProps, }; const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1]; stackPtg += ptg; @@ -103,7 +103,7 @@ const Line: React.FC = (props) => { /> ); })} - {indeterminateStyleTag} + {indeterminateStyleAnimation} ); }; diff --git a/src/utils/getIndeterminateCircle.tsx b/src/utils/getIndeterminateCircle.tsx index 4765f5e..e34cb7d 100644 --- a/src/utils/getIndeterminateCircle.tsx +++ b/src/utils/getIndeterminateCircle.tsx @@ -7,19 +7,19 @@ interface IndeterminateOption { export default (options: IndeterminateOption) => { if (!options.loading) { return { - indeterminateStylePops: {}, - indeterminateStyleTag: null, + indeterminateStyleProps: {}, + indeterminateStyleAnimation: null, }; } const animationName = 'circle-indeterminate-animate'; return { - indeterminateStylePops: { + indeterminateStyleProps: { transform: 'rotate(0deg)', animation: `${animationName} 1s linear infinite`, }, - indeterminateStyleTag: ( + indeterminateStyleAnimation: ( diff --git a/src/utils/getIndeterminateLine.tsx b/src/utils/getIndeterminateLine.tsx index f6a4c24..cb5be60 100644 --- a/src/utils/getIndeterminateLine.tsx +++ b/src/utils/getIndeterminateLine.tsx @@ -1,10 +1,11 @@ +import type { StrokeLinecapType } from '@/interface'; import React from 'react'; interface IndeterminateOption { id: string; loading: boolean; percent: number; - strokeLinecap: string; + strokeLinecap: StrokeLinecapType; strokeWidth: number; } diff --git a/tests/indeterminate.spec.tsx b/tests/indeterminate.spec.tsx new file mode 100644 index 0000000..bff018a --- /dev/null +++ b/tests/indeterminate.spec.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Circle, Line } from '../src'; +import { render, waitFor } from '@testing-library/react'; + +describe('(Circle | Line).indeterminate', () => { + describe('Line', () => { + it('should render indeterminate style', () => { + const { container, rerender } = render(); + const line: HTMLElement = container.querySelector('.rc-progress-line-path'); + + expect(line.style.animation).toContain('indeterminate-animate'); + + rerender(); + + expect(line.style.animation).not.toContain('indeterminate-animate'); + }); + + it('should render indeterminate with percent and rerennder without it', () => { + const { container, rerender } = render(); + const line: HTMLElement = container.querySelector('.rc-progress-line-path'); + + expect(line.style.animation).toContain('indeterminate-animate'); + expect(line.style.strokeDasharray).toEqual('20 100'); + + rerender(); + + 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(); + const circle: HTMLElement = container.querySelector('.rc-progress-circle-path'); + + expect(circle.style.animation).toContain('indeterminate-animate'); + + rerender(); + + expect(circle.style.animation).not.toContain('indeterminate-animate'); + }); + + it('should rerender indeterminate with percent Circle', () => { + const { container, rerender } = render(); + const circle: HTMLElement = container.querySelector('.rc-progress-circle-path'); + + expect(circle.style.animation).toContain('indeterminate-animate'); + expect(circle.style.transform).toEqual('rotate(0deg)'); + + rerender(); + + expect(circle.style.animation).not.toContain('indeterminate-animate'); + expect(circle.style.transform).not.toEqual('rotate(0deg)'); + }); + }); +}); diff --git a/tests/index.spec.js b/tests/index.spec.js index 4ed86da..bb701be 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -243,28 +243,4 @@ describe('Progress', () => { expect(circle.find(Circle).props().percent).toEqual([20, 20, 20, 20]); circle.unmount(); }); - - it('should support indeterminate mode', () => { - const Loading = () => { - return ( - <> - - - - ); - }; - - const wrapper = mount(); - const circle = wrapper.find(Circle); - const line = wrapper.find(Line); - expect(circle.find('style')).toBeDefined(); - expect(circle.find('.rc-progress-circle-path').at(0).getDOMNode().style.animation).toContain( - 'indeterminate-animate', - ); - expect(line.find('style')).toBeDefined(); - expect(line.find('.rc-progress-line-path').at(0).getDOMNode().style.animation).toContain( - 'indeterminate-animate', - ); - wrapper.unmount(); - }); }); From ef86c3121bbec45cba04a74d3971ad43a2c43925 Mon Sep 17 00:00:00 2001 From: Said MARAR Date: Tue, 11 Feb 2025 02:31:19 +0100 Subject: [PATCH 6/6] fix lint --- src/utils/getIndeterminateCircle.tsx | 4 ++-- tests/indeterminate.spec.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/getIndeterminateCircle.tsx b/src/utils/getIndeterminateCircle.tsx index d8b504f..704bec0 100644 --- a/src/utils/getIndeterminateCircle.tsx +++ b/src/utils/getIndeterminateCircle.tsx @@ -23,8 +23,8 @@ export default ({ id, loading }: IndeterminateOption) => { indeterminateStyleAnimation: ( ), diff --git a/tests/indeterminate.spec.tsx b/tests/indeterminate.spec.tsx index bff018a..380a098 100644 --- a/tests/indeterminate.spec.tsx +++ b/tests/indeterminate.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Circle, Line } from '../src'; -import { render, waitFor } from '@testing-library/react'; +import { render } from '@testing-library/react'; describe('(Circle | Line).indeterminate', () => { describe('Line', () => {