[Glitch] Remove react-motion library

Port 902aab1245 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2025-03-29 17:15:52 +01:00
1 parent f8b0f38636
commit e673e6c993
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import spring from 'react-motion/lib/spring';
-
-import Motion from '../util/optional_motion';
-
-export default class UploadArea extends PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    onClose: PropTypes.func,
-  };
-
-  handleKeyUp = (e) => {
-    const keyCode = e.keyCode;
-    if (this.props.active) {
-      switch(keyCode) {
-      case 27:
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose();
-        break;
-      }
-    }
-  };
-
-  componentDidMount () {
-    window.addEventListener('keyup', this.handleKeyUp, false);
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('keyup', this.handleKeyUp);
-  }
-
-  render () {
-    const { active } = this.props;
-
-    return (
-      <Motion defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }} style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}>
-        {({ backgroundOpacity, backgroundScale }) => (
-          <div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
-            <div className='upload-area__drop'>
-              <div className='upload-area__background' style={{ transform: `scale(${backgroundScale})` }} />
-              <div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
-            </div>
-          </div>
-        )}
-      </Motion>
-    );
-  }
-
-}
@@ -0,0 +1,78 @@
+import { useCallback, useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { animated, config, useSpring } from '@react-spring/web';
+
+import { reduceMotion } from 'flavours/glitch/initial_state';
+
+interface UploadAreaProps {
+  active?: boolean;
+  onClose: () => void;
+}
+
+export const UploadArea: React.FC<UploadAreaProps> = ({ active, onClose }) => {
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent) => {
+      if (active && e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    },
+    [active, onClose],
+  );
+
+  useEffect(() => {
+    window.addEventListener('keyup', handleKeyUp, false);
+
+    return () => {
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [handleKeyUp]);
+
+  const wrapperAnimStyles = useSpring({
+    from: {
+      opacity: 0,
+    },
+    to: {
+      opacity: 1,
+    },
+    reverse: !active,
+    immediate: reduceMotion,
+  });
+  const backgroundAnimStyles = useSpring({
+    from: {
+      transform: 'scale(0.95)',
+    },
+    to: {
+      transform: 'scale(1)',
+    },
+    reverse: !active,
+    config: config.wobbly,
+    immediate: reduceMotion,
+  });
+
+  return (
+    <animated.div
+      className='upload-area'
+      style={{
+        ...wrapperAnimStyles,
+        visibility: active ? 'visible' : 'hidden',
+      }}
+    >
+      <div className='upload-area__drop'>
+        <animated.div
+          className='upload-area__background'
+          style={backgroundAnimStyles}
+        />
+        <div className='upload-area__content'>
+          <FormattedMessage
+            id='upload_area.title'
+            defaultMessage='Drag & drop to upload'
+          />
+        </div>
+      </div>
+    </animated.div>
+  );
+};