gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-10-05 16:42:47 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Convert InlineAlert to functional component

Browse Source
This commit is contained in:
Claire 2025-03-13 10:27:38 +01:00
parent 547658f086
commit 3b3f3787d7
1 changed files with 18 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/mastodon/features/account/components/account_note.jsx
View File

@ -1,5 +1,5 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { useEffect, useState } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@ -12,38 +12,27 @@ const messages = defineMessages({
placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' }, placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' },
}); });
class InlineAlert extends PureComponent { const InlineAlert = ({ show }) => {
const [mountMessage, setMountMessage] = useState(false);
static propTypes = { useEffect(() => {
show: PropTypes.bool, if (show) {
}; setMountMessage(true);
} else {
state = { setTimeout(() => setMountMessage(false), 200);
mountMessage: false,
};
static TRANSITION_DELAY = 200;
UNSAFE_componentWillReceiveProps (nextProps) {
if (!this.props.show && nextProps.show) {
this.setState({ mountMessage: true });
} else if (this.props.show && !nextProps.show) {
setTimeout(() => this.setState({ mountMessage: false }), InlineAlert.TRANSITION_DELAY);
} }
} }, [show, setMountMessage]);
render () { return (
const { show } = this.props; <span aria-live='polite' role='status' className='inline-alert' style={{ opacity: show ? 1 : 0 }}>
const { mountMessage } = this.state; {mountMessage && <FormattedMessage id='generic.saved' defaultMessage='Saved' />}
</span>
);
};
return ( InlineAlert.propTypes = {
<span aria-live='polite' role='status' className='inline-alert' style={{ opacity: show ? 1 : 0 }}> show: PropTypes.bool,
{mountMessage && <FormattedMessage id='generic.saved' defaultMessage='Saved' />} };
</span>
);
}
}
class AccountNote extends ImmutablePureComponent { class AccountNote extends ImmutablePureComponent {