From 521fa2090c804e7f14a08f856df06f007e349fcb Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Tue, 8 Aug 2023 12:30:21 +0300
Subject: [PATCH] Refactor #4602 - For Ripple

---
 components/lib/ripple/Ripple.css              | 27 ---------------
 components/lib/ripple/Ripple.js               |  8 +++--
 components/lib/ripple/RippleBase.js           | 34 +++++++++++++++++++
 components/lib/ripple/ripple.d.ts             |  5 +++
 .../lib/treetable/TreeTableScrollableView.js  |  2 +-
 .../lib/virtualscroller/VirtualScroller.js    |  2 +-
 .../virtualscroller/VirtualScrollerBase.js    |  2 +-
 styles/primereact.css                         |  1 -
 8 files changed, 47 insertions(+), 34 deletions(-)
 delete mode 100644 components/lib/ripple/Ripple.css

diff --git a/components/lib/ripple/Ripple.css b/components/lib/ripple/Ripple.css
deleted file mode 100644
index b45450cda4..0000000000
--- a/components/lib/ripple/Ripple.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.p-ripple {
-    overflow: hidden;
-    position: relative;
-}
-
-.p-ink {
-    display: block;
-    position: absolute;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 100%;
-    transform: scale(0);
-}
-
-.p-ink-active {
-    animation: ripple 0.4s linear;
-}
-
-.p-ripple-disabled .p-ink {
-    display: none !important;
-}
-
-@keyframes ripple {
-    100% {
-        opacity: 0;
-        transform: scale(2.5);
-    }
-}
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
index 59c64e2820..dcd904d106 100644
--- a/components/lib/ripple/Ripple.js
+++ b/components/lib/ripple/Ripple.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useMountEffect, useStyle, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { DomHandler } from '../utils/Utils';
-import { PrimeReactContext } from '../api/Api';
-import PrimeReact from '../api/Api';
+import { RippleBase } from './RippleBase';
 
 export const Ripple = React.memo(
     React.forwardRef(() => {
@@ -10,6 +10,8 @@ export const Ripple = React.memo(
         const targetRef = React.useRef(null);
         const context = React.useContext(PrimeReactContext);
 
+        useStyle(RippleBase.css.styles, { name: 'ripple' });
+
         const getTarget = () => {
             return inkRef.current && inkRef.current.parentElement;
         };
diff --git a/components/lib/ripple/RippleBase.js b/components/lib/ripple/RippleBase.js
index ff08d76cf2..10da749581 100644
--- a/components/lib/ripple/RippleBase.js
+++ b/components/lib/ripple/RippleBase.js
@@ -1,10 +1,44 @@
 import { ObjectUtils } from '../utils/Utils';
 
+const styles = `
+.p-ripple {
+    overflow: hidden;
+    position: relative;
+}
+
+.p-ink {
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 100%;
+    transform: scale(0);
+}
+
+.p-ink-active {
+    animation: ripple 0.4s linear;
+}
+
+.p-ripple-disabled .p-ink {
+    display: none !important;
+}
+
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
+
+`;
+
 export const RippleBase = {
     defaultProps: {
         __TYPE: 'Ripple',
         children: undefined
     },
+    css: {
+        styles
+    },
     getProps: (props) => ObjectUtils.getMergedProps(props, RippleBase.defaultProps),
     getOtherProps: (props) => ObjectUtils.getDiffProps(props, RippleBase.defaultProps)
 };
diff --git a/components/lib/ripple/ripple.d.ts b/components/lib/ripple/ripple.d.ts
index 939c28a6f5..312af1234b 100644
--- a/components/lib/ripple/ripple.d.ts
+++ b/components/lib/ripple/ripple.d.ts
@@ -19,6 +19,11 @@ export interface RippleProps {
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
index fdf03ce63f..d701dfcd94 100644
--- a/components/lib/treetable/TreeTableScrollableView.js
+++ b/components/lib/treetable/TreeTableScrollableView.js
@@ -125,7 +125,7 @@ export const TreeTableScrollableView = React.memo((props) => {
 
     const scrollableHeaderBoxProps = mergeProps(
         {
-            className: cx('scrollableHeaderBox'),
+            className: cx('scrollableHeaderBox')
         },
         ptm('scrollableHeaderBox')
     );
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
index a0dbe5c99d..23895121a1 100644
--- a/components/lib/virtualscroller/VirtualScroller.js
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -35,7 +35,7 @@ export const VirtualScroller = React.memo(
             }
         });
 
-        useStyle(VirtualScrollerBase.css.styles, { name: 'virtualscroller' })
+        useStyle(VirtualScrollerBase.css.styles, { name: 'virtualscroller' });
         const elementRef = React.useRef(null);
         const contentRef = React.useRef(null);
         const spacerRef = React.useRef(null);
diff --git a/components/lib/virtualscroller/VirtualScrollerBase.js b/components/lib/virtualscroller/VirtualScrollerBase.js
index 37b4db9333..b90708ce0d 100644
--- a/components/lib/virtualscroller/VirtualScrollerBase.js
+++ b/components/lib/virtualscroller/VirtualScrollerBase.js
@@ -56,7 +56,7 @@ const styles = `
 .p-virtualscroller-inline .p-virtualscroller-content {
     position: static;
 }
-`; 
+`;
 
 export const VirtualScrollerBase = ComponentBase.extend({
     defaultProps: {
diff --git a/styles/primereact.css b/styles/primereact.css
index ba33b6f843..f66359a6cf 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -1,2 +1 @@
 @import "../components/lib/iconbase/IconBase.css";
-@import "../components/lib/ripple/Ripple.css";