Refactor #4602 - For Ripple

components/lib/ripple/Ripple.js

@@ -1,15 +1,17 @@
 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(() => {
         const inkRef = React.useRef(null);
         const targetRef = React.useRef(null);
         const context = React.useContext(PrimeReactContext);
 
+        useStyle(RippleBase.css.styles, { name: 'ripple' });
+
         const getTarget = () => {
             return inkRef.current && inkRef.current.parentElement;
         };

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)
 };

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;
 }
 
 /**

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')
     );

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);

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: {

styles/primereact.css

@@ -1,2 +1 @@
 @import "../components/lib/iconbase/IconBase.css";
-@import "../components/lib/ripple/Ripple.css";