gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Remove react-motion library (#34293)

Browse source
This commit is contained in:
Echo 2025-03-28 13:34:51 +01:00 • committed by GitHub
parent 97b9994743
commit 902aab1245
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 692 additions and 670 deletions
Download patch file Download diff file Expand all files Collapse all files

55
app/javascript/mastodon/features/ui/components/upload_area.jsx
View file

@ -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>
);
}
}

78
app/javascript/mastodon/features/ui/components/upload_area.tsx Normal file
View file

@ -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 'mastodon/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>
);
};

2
app/javascript/mastodon/features/ui/index.jsx
View file

@ -30,7 +30,7 @@ import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding
import BundleColumnError from './components/bundle_column_error';
import Header from './components/header';
import UploadArea from './components/upload_area';
import { UploadArea } from './components/upload_area';
import ColumnsAreaContainer from './containers/columns_area_container';
import LoadingBarContainer from './containers/loading_bar_container';
import ModalContainer from './containers/modal_container';

7
app/javascript/mastodon/features/ui/util/optional_motion.js
View file

@ -1,7 +0,0 @@
import Motion from 'react-motion/lib/Motion';
import { reduceMotion } from '../../../initial_state';
import ReducedMotion from './reduced_motion';
export default reduceMotion ? ReducedMotion : Motion;

45
app/javascript/mastodon/features/ui/util/reduced_motion.jsx
View file

@ -1,45 +0,0 @@
// Like react-motion's Motion, but reduces all animations to cross-fades
// for the benefit of users with motion sickness.
import PropTypes from 'prop-types';
import { Component } from 'react';
import Motion from 'react-motion/lib/Motion';
const stylesToKeep = ['opacity', 'backgroundOpacity'];
const extractValue = (value) => {
// This is either an object with a "val" property or it's a number
return (typeof value === 'object' && value && 'val' in value) ? value.val : value;
};
class ReducedMotion extends Component {
static propTypes = {
defaultStyle: PropTypes.object,
style: PropTypes.object,
children: PropTypes.func,
};
render() {
const { style, defaultStyle, children } = this.props;
Object.keys(style).forEach(key => {
if (stylesToKeep.includes(key)) {
return;
}
// If it's setting an x or height or scale or some other value, we need
// to preserve the end-state value without actually animating it
style[key] = defaultStyle[key] = extractValue(style[key]);
});
return (
<Motion style={style} defaultStyle={defaultStyle}>
{children}
</Motion>
);
}
}
export default ReducedMotion;