Merge pull request #243 from DakaraProject/refactor/transition2

Change transition library

Author: Neraste

eslint.config.js

@@ -70,7 +70,7 @@ export default [
             ['^\\u0000'],
             ['^@?\\w'],
             [
-              '^(actions|components|eventManagers|middleware|permissions|reducers|serverPropTypes|style|thirdpartyExtensions|utils)',
+              '^(actions|components|contexts|eventManagers|middleware|permissions|reducers|serverPropTypes|style|utils)',
             ],
             ['^'],
             ['^\\.'],

package-lock.json

@@ -42,7 +42,7 @@
     "react-highlight-words": "^0.21.0",
     "react-redux": "^9.2.0",
     "react-router": "^7.12.0",
-    "react-transition-group": "^4.4.5",
+    "react-transitioning": "^1.0.9",
     "redux": "^5.0.1",
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^3.1.0",

package.json

@@ -28,7 +28,7 @@ export const USER_LIST_FAILURE = 'USER_LIST_FAILURE'
  */
 const refreshUsersDelayed = (dispatch, getState) => {
   const page = getState().settings.users.list.data.pagination.current
-  return dispatch(delay(loadUsers({ page }), 3000))
+  return dispatch(delay(loadUsers(page), 3000))
 }
 
 /**

src/actions/users.js

@@ -1,43 +1,65 @@
 import PropTypes from 'prop-types'
 
+import Slide from 'components/transitions/Slide'
+
 export default function ConfirmationBar({
   message = 'Are you sure?',
+  show,
+  setShow,
   onCancel,
   onConfirm,
+  hideOnCancel = true,
+  hideOnConfirm = false,
 }) {
   return (
-    <div className="notified">
-      <div className="notification warning">
-        <div className="message">{message}</div>
-        <div className="controls compact">
-          <button
-            onClick={() => {
-              onConfirm()
-            }}
-            className="control square success"
-          >
-            <span className="icon">
-              <i className="las la-check"></i>
-            </span>
-          </button>
-          <button
-            onClick={() => {
-              onCancel()
-            }}
-            className="control square danger"
-          >
-            <span className="icon">
-              <i className="las la-times"></i>
-            </span>
-          </button>
+    <Slide in={show}>
+      <div className="confirmation-bar notified transition">
+        <div className="notification warning">
+          <div className="message">{message}</div>
+          <div className="controls compact">
+            <button
+              onClick={() => {
+                if (hideOnConfirm) {
+                  setShow(false)
+                }
+                if (typeof onConfirm === 'function') {
+                  onConfirm()
+                }
+              }}
+              className="control square success"
+            >
+              <span className="icon">
+                <i className="las la-check"></i>
+              </span>
+            </button>
+            <button
+              onClick={() => {
+                if (hideOnCancel) {
+                  setShow(false)
+                }
+                if (typeof onCancel === 'function') {
+                  onCancel()
+                }
+              }}
+              className="control square danger"
+            >
+              <span className="icon">
+                <i className="las la-times"></i>
+              </span>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+    </Slide>
   )
 }
 
 ConfirmationBar.propTypes = {
   message: PropTypes.string,
-  onCancel: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
+  show: PropTypes.bool,
+  setShow: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  hideOnCancel: PropTypes.bool,
+  hideOnConfirm: PropTypes.bool,
 }

src/components/generics/ConfirmationBar.jsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { useState } from 'react'
-import { CSSTransition } from 'react-transition-group'
 
+import Collapse from 'components/transitions/Collapse'
 import { isDisplayable } from 'utils'
 
 export function Details({ children }) {
@@ -69,17 +69,11 @@ export function DetailLongText({
         notifiable: isDisplayable(notifications),
       })}
     >
-      <CSSTransition
-        classNames="reveal"
-        in={revealed}
-        timeout={{
-          enter: 300,
-        }}
-      >
-        <div className="border">
+      <Collapse in={revealed} exit={false} alwaysMounted>
+        <div className="border transition">
           <p className="paragraph">{children}</p>
         </div>
-      </CSSTransition>
+      </Collapse>
       {!revealed && (
         <div className="controls">
           <button

src/components/generics/Details.jsx

@@ -2,14 +2,15 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { TransitionGroup } from 'react-transitioning'
 
 import {
   clearAlteration,
   setAlterationValidationErrors,
   submitAlteration,
 } from 'actions/alterations'
-import Notification from 'components/generics/Notification'
+import NotificationBar from 'components/generics/NotificationBar'
+import Collapse from 'components/transitions/Collapse'
 import {
   alterationResponsePropType,
   Status,
@@ -387,7 +388,7 @@ class FormBlock extends Form {
         {header}
         {fieldsSet}
         <div className="controls compact notifiable">
-          <Notification
+          <NotificationBar
             alterationResponse={alterationResponse}
             successfulMessage={successMessage}
             failedMessage={failedMessage}
@@ -568,15 +569,9 @@ class Field extends Component {
       ))
 
       fieldErrorMessages = (
-        <CSSTransition
-          classNames="error-container"
-          timeout={{
-            enter: 300,
-            exit: 150,
-          }}
-        >
-          <div className="error-container">{fieldErrorContent}</div>
-        </CSSTransition>
+        <Collapse>
+          <div className="error-container transition">{fieldErrorContent}</div>
+        </Collapse>
       )
     }
 
@@ -612,7 +607,9 @@ class Field extends Component {
         </label>
         <div className="input">
           {this.subRender(props)}
-          <TransitionGroup>{fieldErrorMessages}</TransitionGroup>
+          <TransitionGroup enter exit>
+            {fieldErrorMessages}
+          </TransitionGroup>
         </div>
       </div>
     )