From e6441e933e3d43e2c41ac623bbe56430205404aa Mon Sep 17 00:00:00 2001
From: yellworyan <877520264@qq.com>
Date: Mon, 27 Jan 2025 07:11:43 +0800
Subject: [PATCH 1/2] feat: Progress bar with customizable colors

---
 assets/index.less              |  5 +++--
 docs/examples/showProgress.tsx | 10 +++++++++
 src/Notice.tsx                 | 16 +++++++++++++-
 src/hooks/useNotification.tsx  |  1 +
 src/interface.ts               |  1 +
 tests/index.test.tsx           | 40 ++++++++++++++++++++++++++++++++++
 6 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 5fbbf71..0e27ca0 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -104,6 +104,7 @@
       inline-size: 100%;
       block-size: 2px;
       border: 0;
+      --progress-color: #31afff;
 
       &,
       &::-webkit-progress-bar {
@@ -111,11 +112,11 @@
       }
 
       &::-moz-progress-bar {
-        background-color: #31afff;
+        background: var(--progress-color);
       }
 
       &::-webkit-progress-value {
-        background-color: #31afff;
+        background: var(--progress-color);
       }
     }
   }
diff --git a/docs/examples/showProgress.tsx b/docs/examples/showProgress.tsx
index 4d0ebbc..a0c27a2 100644
--- a/docs/examples/showProgress.tsx
+++ b/docs/examples/showProgress.tsx
@@ -28,6 +28,16 @@ export default () => {
       >
         Not Pause On Hover
       </button>
+      <button
+        onClick={() => {
+          notice.open({
+            content: `${new Date().toISOString()}`,
+            progressBarColor: 'yellow',
+          });
+        }}
+      >
+        Show Progress Bar with custom color
+      </button>
       {contextHolder}
     </>
   );
diff --git a/src/Notice.tsx b/src/Notice.tsx
index 38a9b9c..04cb558 100644
--- a/src/Notice.tsx
+++ b/src/Notice.tsx
@@ -23,6 +23,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     duration = 4.5,
     showProgress,
     pauseOnHover = true,
+    progressBarColor,
 
     eventKey,
     content,
@@ -40,6 +41,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
   const [spentTime, setSpentTime] = React.useState(0);
   const mergedHovering = forcedHovering || hovering;
   const mergedShowProgress = duration > 0 && showProgress;
+  const mergedProgressBarColor = mergedShowProgress && progressBarColor;
+  const progressRef = React.useRef<HTMLProgressElement>(null);
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -101,6 +104,12 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, spentTime, mergedHovering, mergedShowProgress, times]);
 
+  React.useEffect(() => {
+    if (mergedProgressBarColor) {
+      progressRef.current!.style.setProperty('--progress-color', mergedProgressBarColor);
+    }
+  }, [mergedProgressBarColor]);
+
   // ======================== Closable ========================
   const closableObj = React.useMemo(() => {
     if (typeof closable === 'object' && closable !== null) {
@@ -161,7 +170,12 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
       {/* Progress Bar */}
       {mergedShowProgress && (
-        <progress className={`${noticePrefixCls}-progress`} max="100" value={validPercent}>
+        <progress
+          ref={progressRef}
+          className={`${noticePrefixCls}-progress`}
+          max="100"
+          value={validPercent}
+        >
           {validPercent + '%'}
         </progress>
       )}
diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx
index 783b72b..e36db3c 100644
--- a/src/hooks/useNotification.tsx
+++ b/src/hooks/useNotification.tsx
@@ -18,6 +18,7 @@ export interface NotificationConfig {
   maxCount?: number;
   duration?: number;
   showProgress?: boolean;
+  progressBarColor?: string;
   pauseOnHover?: boolean;
   /** @private. Config for notification holder style. Safe to remove if refactor */
   className?: (placement: Placement) => string;
diff --git a/src/interface.ts b/src/interface.ts
index 52ccbe0..5ce47b4 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -8,6 +8,7 @@ export interface NoticeConfig {
   content?: React.ReactNode;
   duration?: number | null;
   showProgress?: boolean;
+  progressBarColor?: string;
   pauseOnHover?: boolean;
   closeIcon?: React.ReactNode;
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 4217e31..0f05618 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -849,4 +849,44 @@ describe('Notification.Basic', () => {
       expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();
     });
   });
+
+  describe('custom progress bar color', () => {
+    it('should display progress bar with custom color', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        showProgress: true,
+        progressBarColor: 'red',
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({
+        '--progress-color': 'red',
+      });
+    });
+
+    it('should display progress bar with line-gradient color', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        showProgress: true,
+        progressBarColor:
+          'linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%)',
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({
+        '--progress-color':
+          'linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%)',
+      });
+    });
+  });
 });

From fd5064cfa981ee4c9d80667f01c08eea9388ead9 Mon Sep 17 00:00:00 2001
From: yellworyan <877520264@qq.com>
Date: Sun, 23 Feb 2025 16:47:33 +0800
Subject: [PATCH 2/2] chore: Optimize some code

---
 src/Notice.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/Notice.tsx b/src/Notice.tsx
index 04cb558..7b86bb1 100644
--- a/src/Notice.tsx
+++ b/src/Notice.tsx
@@ -42,7 +42,6 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
   const mergedHovering = forcedHovering || hovering;
   const mergedShowProgress = duration > 0 && showProgress;
   const mergedProgressBarColor = mergedShowProgress && progressBarColor;
-  const progressRef = React.useRef<HTMLProgressElement>(null);
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -104,12 +103,6 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, spentTime, mergedHovering, mergedShowProgress, times]);
 
-  React.useEffect(() => {
-    if (mergedProgressBarColor) {
-      progressRef.current!.style.setProperty('--progress-color', mergedProgressBarColor);
-    }
-  }, [mergedProgressBarColor]);
-
   // ======================== Closable ========================
   const closableObj = React.useMemo(() => {
     if (typeof closable === 'object' && closable !== null) {
@@ -171,9 +164,9 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       {/* Progress Bar */}
       {mergedShowProgress && (
         <progress
-          ref={progressRef}
           className={`${noticePrefixCls}-progress`}
           max="100"
+          style={{ '--progress-color': mergedProgressBarColor } as React.CSSProperties}
           value={validPercent}
         >
           {validPercent + '%'}