chore: fix ssr render (#127)

Author: zombieJ

src/Circle.tsx

@@ -2,21 +2,21 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useTransitionDuration, defaultProps } from './common';
 import type { ProgressProps, GapPositionType } from './interface';
-
-let gradientSeed = 0;
+import useId from './hooks/useId';
 
 function stripPercentToNumber(percent: string) {
   return +percent.replace('%', '');
 }
 
-function toArray(symArray: any) {
-  return Array.isArray(symArray) ? symArray : [symArray];
+function toArray<T>(value: T | T[]): T[] {
+  const mergedValue = value ?? [];
+  return Array.isArray(mergedValue) ? mergedValue : [mergedValue];
 }
 
 function getPathStyles(
   offset: number,
   percent: number,
-  strokeColor: string,
+  strokeColor: string | Record<string, string>,
   strokeWidth: number,
   gapDegree = 0,
   gapPosition: GapPositionType,
@@ -65,6 +65,7 @@ function getPathStyles(
 }
 
 const Circle: React.FC<ProgressProps> = ({
+  id,
   prefixCls,
   strokeWidth,
   trailWidth,
@@ -78,10 +79,10 @@ const Circle: React.FC<ProgressProps> = ({
   percent,
   ...restProps
 }) => {
-  const gradientId = React.useMemo(() => {
-    gradientSeed += 1;
-    return gradientSeed;
-  }, []);
+  const mergedId = useId(id);
+
+  const gradientId = `${mergedId}-gradient`;
+
   const { pathString, pathStyle } = getPathStyles(
     0,
     100,
@@ -92,20 +93,15 @@ const Circle: React.FC<ProgressProps> = ({
   );
   const percentList = toArray(percent);
   const strokeColorList = toArray(strokeColor);
-  const gradient = strokeColorList.find(
-    (color) => Object.prototype.toString.call(color) === '[object Object]',
-  );
+  const gradient = strokeColorList.find((color) => color && typeof color === 'object');
 
   const [paths] = useTransitionDuration(percentList);
 
   const getStokeList = () => {
     let stackPtg = 0;
     return percentList.map((ptg, index) => {
       const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
-      const stroke =
-        Object.prototype.toString.call(color) === '[object Object]'
-          ? `url(#${prefixCls}-gradient-${gradientId})`
-          : '';
+      const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : '';
       const pathStyles = getPathStyles(stackPtg, ptg, color, strokeWidth, gapDegree, gapPosition);
       stackPtg += ptg;
       return (
@@ -130,17 +126,12 @@ const Circle: React.FC<ProgressProps> = ({
       className={classNames(`${prefixCls}-circle`, className)}
       viewBox="0 0 100 100"
       style={style}
+      id={id}
       {...restProps}
     >
       {gradient && (
         <defs>
-          <linearGradient
-            id={`${prefixCls}-gradient-${gradientId}`}
-            x1="100%"
-            y1="0%"
-            x2="0%"
-            y2="0%"
-          >
+          <linearGradient id={gradientId} x1="100%" y1="0%" x2="0%" y2="0%">
             {Object.keys(gradient)
               .sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b))
               .map((key, index) => (

src/hooks/useId.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+
+let uuid = 0;
+
+/** Is client side and not jsdom */
+export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom();
+
+/** Get unique id for accessibility usage */
+function getUUID(): number | string {
+  let retId: string | number;
+
+  // Test never reach
+  /* istanbul ignore if */
+  if (isBrowserClient) {
+    retId = uuid;
+    uuid += 1;
+  } else {
+    retId = 'TEST_OR_SSR';
+  }
+
+  return retId;
+}
+
+export default (id?: string) => {
+  // Inner id for accessibility usage. Only work in client side
+  const [innerId, setInnerId] = React.useState<string>();
+  React.useEffect(() => {
+    setInnerId(`rc_progress_${getUUID()}`);
+  }, []);
+  return id || innerId;
+};

src/interface.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 export interface ProgressProps {
+  id?: string;
   strokeWidth?: number;
   trailWidth?: number;
   className?: string;
@@ -15,7 +14,7 @@ export interface ProgressProps {
   transition?: string;
 }
 
-export type StrokeColorType = string | string[] | object;
+export type StrokeColorType = string | string[] | Record<string, string>;
 
 export type GapPositionType = 'top' | 'right' | 'bottom' | 'left';
 

tests/__snapshots__/index.spec.js.snap

@@ -142,6 +142,103 @@ Array [
 ]
 `;
 
+exports[`Progress Circle should gradient works and circles have different gradient IDs 1`] = `
+<div>
+  <svg
+    class="rc-progress-circle"
+    viewBox="0 0 100 100"
+  >
+    <defs>
+      <linearGradient
+        id="rc_progress_TEST_OR_SSR-gradient"
+        x1="100%"
+        x2="0%"
+        y1="0%"
+        y2="0%"
+      >
+        <stop
+          offset="0%"
+          stop-color="#108ee9"
+        />
+        <stop
+          offset="100%"
+          stop-color="#87d068"
+        />
+      </linearGradient>
+    </defs>
+    <path
+      class="rc-progress-circle-trail"
+      d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+      fill-opacity="0"
+      stroke="#D9D9D9"
+      stroke-linecap="round"
+      stroke-width="1"
+      style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"
+    />
+    <path
+      class="rc-progress-circle-path"
+      d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+      fill-opacity="0"
+      opacity="1"
+      stroke="url(#rc_progress_TEST_OR_SSR-gradient)"
+      stroke-linecap="round"
+      stroke-width="6"
+      style="stroke-dasharray: 265.77873849369655px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: 0s, 0s;"
+    />
+  </svg>
+  <svg
+    class="rc-progress-circle"
+    viewBox="0 0 100 100"
+  >
+    <defs>
+      <linearGradient
+        id="rc_progress_TEST_OR_SSR-gradient"
+        x1="100%"
+        x2="0%"
+        y1="0%"
+        y2="0%"
+      >
+        <stop
+          offset="0%"
+          stop-color="#108ee9"
+        />
+        <stop
+          offset="100%"
+          stop-color="#87d068"
+        />
+      </linearGradient>
+    </defs>
+    <path
+      class="rc-progress-circle-trail"
+      d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+      fill-opacity="0"
+      stroke="#D9D9D9"
+      stroke-linecap="round"
+      stroke-width="1"
+      style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"
+    />
+    <path
+      class="rc-progress-circle-path"
+      d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94"
+      fill-opacity="0"
+      opacity="1"
+      stroke="url(#rc_progress_TEST_OR_SSR-gradient)"
+      stroke-linecap="round"
+      stroke-width="6"
+      style="stroke-dasharray: 265.77873849369655px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: 0s, 0s;"
+    />
+  </svg>
+</div>
+`;
+
 exports[`Progress Circle should show right gapPosition 1`] = `
 Array [
   <Circle

tests/index.spec.js

@@ -59,8 +59,8 @@ describe('Progress', () => {
     });
 
     it('should gradient works and circles have different gradient IDs', () => {
-      const c = mount(
-        <>
+      const wrapper = mount(
+        <div>
           <Circle
             percent={90}
             strokeWidth="6"
@@ -79,16 +79,10 @@ describe('Progress', () => {
               '100%': '#87d068',
             }}
           />
-        </>,
+        </div>,
       );
 
-      const gradientDefs = c.find('defs');
-      const idFirst = gradientDefs.at(0).props().children.props.id;
-      const idSecond = gradientDefs.at(1).props().children.props.id;
-      const idRE = /^rc-progress-gradient-\d{1,}$/;
-      expect(idFirst).toMatch(idRE);
-      expect(idSecond).toMatch(idRE);
-      expect(idFirst === idSecond).toBeFalsy();
+      expect(wrapper.render()).toMatchSnapshot();
     });
 
     it('should show right gapPosition', () => {