Merge pull request #6106 from gucal/master

Fix #6105 - StyleClass: deprecate enterClassName/leaveClassName use e…
primefaces · Mar 11, 2024 · 0a8cc7a · 0a8cc7a
2 parents a2572a7 + 4b3dd27
commit 0a8cc7a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
 import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { DomHandler, ObjectUtils } from '../utils/Utils';
 import { StyleClassBase } from './StyleClassBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const StyleClass = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -86,17 +86,27 @@ export const StyleClass = React.forwardRef((inProps, ref) => {
 
                 DomHandler.addClass(targetRef.current, props.enterActiveClassName);
 
+                // enterClassName will be deprecated, use enterFromClassName
                 if (props.enterClassName) {
                     DomHandler.removeClass(targetRef.current, props.enterClassName);
                 }
 
+                if (props.enterFromClassName) {
+                    DomHandler.removeClass(targetRef.current, props.enterFromClassName);
+                }
+
                 bindTargetEnterListener({ target: targetRef.current });
             }
         } else {
+            // enterClassName will be deprecated, use enterFromClassName
             if (props.enterClassName) {
                 DomHandler.removeClass(targetRef.current, props.enterClassName);
             }
 
+            if (props.enterFromClassName) {
+                DomHandler.removeClass(targetRef.current, props.enterFromClassName);
+            }
+
             if (props.enterToClassName) {
                 DomHandler.addClass(targetRef.current, props.enterToClassName);
             }
@@ -111,17 +121,27 @@ export const StyleClass = React.forwardRef((inProps, ref) => {
                 animating.current = true;
                 DomHandler.addClass(targetRef.current, props.leaveActiveClassName);
 
+                // leaveClassName will be deprecated, use leaveFromClassName
                 if (props.leaveClassName) {
                     DomHandler.removeClass(targetRef.current, props.leaveClassName);
                 }
 
+                if (props.leaveFromClassName) {
+                    DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
+                }
+
                 bindTargetLeaveListener({ target: targetRef.current });
             }
         } else {
+            // leaveClassName will be deprecated, use leaveFromClassName
             if (props.leaveClassName) {
                 DomHandler.removeClass(targetRef.current, props.leaveClassName);
             }
 
+            if (props.leaveFromClassName) {
+                DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
+            }
+
             if (props.leaveToClassName) {
                 DomHandler.addClass(targetRef.current, props.leaveToClassName);
             }

diff --git a/components/lib/styleclass/StyleClassBase.js b/components/lib/styleclass/StyleClassBase.js
@@ -6,9 +6,11 @@ export const StyleClassBase = {
         nodeRef: null,
         selector: null,
         enterClassName: null,
+        enterFromClassName: null,
         enterActiveClassName: null,
         enterToClassName: null,
         leaveClassName: null,
+        leaveFromClassName: null,
         leaveActiveClassName: null,
         leaveToClassName: null,
         hideOnOutsideClick: false,

diff --git a/components/lib/styleclass/styleclass.d.ts b/components/lib/styleclass/styleclass.d.ts
@@ -24,8 +24,13 @@ export interface StyleClassProps {
     selector?: '@next' | '@prev' | '@parent' | '@grandparent' | string | undefined;
     /**
      * Style class to add when item begins to get displayed.
+     * @deprecated since 10.5.2 Use 'enterFromClassName' option instead.
      */
     enterClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterFromClassName?: string | undefined;
     /**
      * Style class to add during enter animation.
      */
@@ -36,8 +41,13 @@ export interface StyleClassProps {
     enterToClassName?: string | undefined;
     /**
      * Style class to add when item begins to get hidden.
+     * @deprecated since 10.5.2 Use 'leaveFromClassName' option instead.
      */
     leaveClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get hidden.
+     */
+    leaveFromClassName?: string | undefined;
     /**
      * Style class to add during leave animation.
      */