mirror of https://github.com/mastodon/mastodon
Rewrite `<LoadGap />` as FC and TS (#25042)
This commit is contained in:
parent
d27216dc46
commit
7336f3648b
|
@ -1,37 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { PureComponent } from 'react';
|
|
||||||
|
|
||||||
import { injectIntl, defineMessages } from 'react-intl';
|
|
||||||
|
|
||||||
import { Icon } from 'mastodon/components/icon';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
|
|
||||||
});
|
|
||||||
|
|
||||||
class LoadGap extends PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
disabled: PropTypes.bool,
|
|
||||||
maxId: PropTypes.string,
|
|
||||||
onClick: PropTypes.func.isRequired,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleClick = () => {
|
|
||||||
this.props.onClick(this.props.maxId);
|
|
||||||
};
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { disabled, intl } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}>
|
|
||||||
<Icon id='ellipsis-h' />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default injectIntl(LoadGap);
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
|
import type { InjectedIntl } from 'react-intl';
|
||||||
|
import { injectIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
|
||||||
|
});
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
disabled: boolean;
|
||||||
|
maxId: string;
|
||||||
|
onClick: (maxId: string) => void;
|
||||||
|
intl: InjectedIntl;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LoadGap = injectIntl<Props>(
|
||||||
|
({ disabled, maxId, onClick, intl }) => {
|
||||||
|
const handleClick = useCallback(() => {
|
||||||
|
onClick(maxId);
|
||||||
|
}, [maxId, onClick]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className='load-more load-gap'
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={handleClick}
|
||||||
|
aria-label={intl.formatMessage(messages.load_more)}
|
||||||
|
>
|
||||||
|
<Icon id='ellipsis-h' />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
|
@ -9,7 +9,7 @@ import RegenerationIndicator from 'mastodon/components/regeneration_indicator';
|
||||||
|
|
||||||
import StatusContainer from '../containers/status_container';
|
import StatusContainer from '../containers/status_container';
|
||||||
|
|
||||||
import LoadGap from './load_gap';
|
import { LoadGap } from './load_gap';
|
||||||
import ScrollableList from './scrollable_list';
|
import ScrollableList from './scrollable_list';
|
||||||
|
|
||||||
export default class StatusList extends ImmutablePureComponent {
|
export default class StatusList extends ImmutablePureComponent {
|
||||||
|
|
|
@ -28,7 +28,7 @@ import {
|
||||||
} from '../../actions/notifications';
|
} from '../../actions/notifications';
|
||||||
import Column from '../../components/column';
|
import Column from '../../components/column';
|
||||||
import ColumnHeader from '../../components/column_header';
|
import ColumnHeader from '../../components/column_header';
|
||||||
import LoadGap from '../../components/load_gap';
|
import { LoadGap } from '../../components/load_gap';
|
||||||
import ScrollableList from '../../components/scrollable_list';
|
import ScrollableList from '../../components/scrollable_list';
|
||||||
|
|
||||||
import NotificationsPermissionBanner from './components/notifications_permission_banner';
|
import NotificationsPermissionBanner from './components/notifications_permission_banner';
|
||||||
|
|
Loading…
Reference in New Issue