refactor: update AnimateOnScroll datasets

Author: tanerengiiin

packages/@primereact/headless/src/animateonscroll/useAnimateOnScroll.ts

@@ -46,7 +46,8 @@ export const useAnimateOnScroll = withHeadless({
                     }
 
                     unobserveReset(el);
-                    el.removeAttribute('data-pd-animateonscroll-state');
+                    el.removeAttribute('data-enter');
+                    el.removeAttribute('data-leave');
                     animationState.current = undefined;
                 }
             }
@@ -76,7 +77,7 @@ export const useAnimateOnScroll = withHeadless({
                 }
 
                 addClass(el, enterClassName ?? '');
-                el.setAttribute('data-pd-animateonscroll-state', 'enter');
+                el.setAttribute('data-enter', '');
                 animationState.current = 'enter';
 
                 bindAnimationEvents();
@@ -104,7 +105,7 @@ export const useAnimateOnScroll = withHeadless({
                 addClass(el, leaveClassName ?? '');
                 bindAnimationEvents();
                 animationState.current = 'leave';
-                el.setAttribute('data-pd-animateonscroll-state', 'leave');
+                el.setAttribute('data-leave', '');
             } else {
                 el.style.opacity = '0';
             }
@@ -140,7 +141,8 @@ export const useAnimateOnScroll = withHeadless({
                             el.style.opacity = '';
                         }
 
-                        el.removeAttribute('data-pd-animateonscroll-state');
+                        el.removeAttribute('data-enter');
+                        el.removeAttribute('data-leave');
                         animationState.current = undefined;
                     }
                 };
@@ -171,15 +173,14 @@ export const useAnimateOnScroll = withHeadless({
 
         useMountEffect(() => {
             if (elementRef.current) {
-                elementRef.current.setAttribute('data-pd-animateonscroll', 'true');
                 setTimeout(() => elementRef.current && observe(elementRef.current), 0);
             }
         });
 
         useUnmountEffect(() => {
             if (elementRef.current) {
-                elementRef.current.removeAttribute('data-pd-animateonscroll');
-                elementRef.current.removeAttribute('data-pd-animateonscroll-state');
+                elementRef.current.removeAttribute('data-enter');
+                elementRef.current.removeAttribute('data-leave');
                 unobserve(elementRef.current);
                 unobserveReset(elementRef.current);
                 unbindAnimationEvents();

packages/primereact/src/animateonscroll/AnimateOnScroll.tsx

@@ -15,9 +15,14 @@ export const AnimateOnScroll = withComponent({
         return animateonscroll;
     },
     render(instance) {
-        const { props, ptmi } = instance;
+        const { props, cx, ptmi } = instance;
 
-        const rootProps = mergeProps({}, ptmi('root'));
+        const rootProps = mergeProps(
+            {
+                className: cx('root')
+            },
+            ptmi('root')
+        );
 
         return (
             <AnimateOnScrollProvider value={instance}>