fix: migrate from react-transition-group to react-transition-state

apps/common/mobile/lib/component/CSSTransition.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTransitionState } from 'react-transition-state';
+
+export const CSSTransition = ({
+  in: inProp = false,
+  timeout = 300,
+  children,
+  mountOnEnter = false,
+  unmountOnExit = false,
+  onEntered,
+}) => {
+  const [{ status, isMounted }, toggle] = useTransitionState({
+    timeout,
+    mountOnEnter,
+    unmountOnExit,
+    preEnter: true,
+    initialEntered: inProp
+  });
+
+  React.useEffect(() => {
+    toggle(inProp);
+  }, [inProp, toggle]);
+
+  const getClassNames = (status) => {
+    switch (status) {
+      case 'preEnter':
+        return `fade-enter`;
+      case 'entering':
+        return `fade-enter fade-enter-active`;
+      case 'entered':
+        return `fade-enter-done`;
+      case 'exiting':
+        return `fade-exit fade-exit-active`;
+      case 'exited':
+        return `fade-exit-done`;
+      default:
+        return '';
+    }
+  };
+
+  React.useEffect(() => {
+    switch (status) {
+      case 'entered':
+        onEntered?.();
+        break;
+      default:
+        break;
+    }
+  }, [status, onEntered]);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return React.cloneElement(children, {
+    className: `${children.props.className || ''} ${getClassNames(status)}`.trim()
+  });
+};

apps/common/mobile/resources/less/css-transition.less

@@ -0,0 +1,17 @@
+.fade-enter {
+    opacity: 0;
+}
+
+.fade-enter-active {
+    opacity: 1;
+    transition: opacity 300ms ease-in;
+}
+
+.fade-exit {
+    opacity: 1;
+}
+
+.fade-exit-active {
+    opacity: 0;
+    transition: opacity 300ms ease-in;
+}

apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx

@@ -1,27 +1,27 @@
 import React from 'react';
-import { CSSTransition } from "react-transition-group";
+import { CSSTransition } from '../../../../../common/mobile/lib/component/CSSTransition'
 
 const Snackbar = ({ isShowSnackbar, message, closeCallback }) => {
-    return (
-        <CSSTransition
-            in={isShowSnackbar}
-            timeout={1500}
-            classNames="snackbar"
-            mountOnEnter
-            unmountOnExit
-            onEntered={(node, isAppearing) => {
-                if(!isAppearing) {
-                    closeCallback();
-                }
-            }}
-        >
-            <div className="snackbar">
-                <div className="snackbar__content">
-                    <p className="snackbar__text">{message}</p>
-                </div>
-            </div>
-        </CSSTransition>
-    );
+  return (
+    <CSSTransition
+      in={isShowSnackbar}
+      timeout={1500}
+      classNames="snackbar"
+      mountOnEnter
+      unmountOnExit
+      onEntered={(node, isAppearing) => {
+        if(!isAppearing) {
+          closeCallback();
+        }
+      }}
+    >
+      <div className="snackbar">
+        <div className="snackbar__content">
+          <p className="snackbar__text">{message}</p>
+        </div>
+      </div>
+    </CSSTransition>
+  );
 }
 
 export default Snackbar;

apps/documenteditor/mobile/src/less/app.less

@@ -37,6 +37,7 @@
 @import '../../../../common/mobile/resources/less/contextmenu.less';
 @import '../../../../common/mobile/resources/less/comments.less';
 @import '../../../../common/mobile/resources/less/draw.less';
+@import '../../../../common/mobile/resources/less/css-transition.less';
 @import './app-material.less';
 @import './app-ios.less';
 @import './icons-ios.less';

apps/documenteditor/mobile/src/page/main.jsx

@@ -1,5 +1,5 @@
 import React, { createContext, useEffect, useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../../../../common/mobile/lib/component/CSSTransition'
 import { f7, Icon, Page, View, Navbar, Subnavbar } from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import { useTranslation } from 'react-i18next';

vendor/framework7-react/package.json

@@ -43,7 +43,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^15.4.0",
-    "react-transition-group": "^4.4.5",
+    "react-transition-state": "^2.3.0",
     "swiper": "^11.2.4",
     "template7": "^1.4.2",
     "url": "^0.11.4"
@@ -60,7 +60,7 @@
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@babel/runtime": "^7.24.0",
-    "@fullhuman/postcss-purgecss": "^6.0.0",
+    "@fullhuman/postcss-purgecss": "^7.0.2",
     "babel-loader": "^9.1.3",
     "chalk": "^5.3.0",
     "clean-webpack-plugin": "^4.0.0",

vendor/framework7-react/postcss.config.js

@@ -1,16 +1,17 @@
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss'
+
 const config = (ctx) => ({
   plugins: {
     'postcss-preset-env': {},
-    ...(ctx.env === 'production' ? {
-      '@fullhuman/postcss-purgecss': {
+    ...(ctx.env === 'production' ?
+      purgeCSSPlugin({
         content: [
           './src/**/*.html',
           './src/**/*.jsx',
           './src/**/*.js',
         ],
         defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
-      }
-    } : {})
+    }) : {})
   },
 });