treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Rewrite `<LoadGap />` as FC and TS 

Port 7336f3648b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/62/head
たいち ひ 2023-05-24 16:20:39 +09:00 committed by Claire
parent 0e7466717f
commit 017fbc7a74
4 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/javascript/flavours/glitch/components/load_gap.jsx
View File

@ -1,37 +0,0 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { injectIntl, defineMessages } from 'react-intl';
import { Icon } from 'flavours/glitch/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);

36
app/javascript/flavours/glitch/components/load_gap.tsx Normal file
View File

@ -0,0 +1,36 @@
import { useCallback } from 'react';
import type { InjectedIntl } from 'react-intl';
import { injectIntl, defineMessages } from 'react-intl';
import { Icon } from 'flavours/glitch/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>
);
}
);

2
app/javascript/flavours/glitch/components/status_list.jsx
View File

@ -8,7 +8,7 @@ import { debounce } from 'lodash';
import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator';
import StatusContainer from 'flavours/glitch/containers/status_container';
import LoadGap from './load_gap';
import { LoadGap } from './load_gap';
import ScrollableList from './scrollable_list';
export default class StatusList extends ImmutablePureComponent {

2
app/javascript/flavours/glitch/features/notifications/index.jsx
View File

@ -28,7 +28,7 @@ import { compareId } from 'flavours/glitch/compare_id';
import Column from 'flavours/glitch/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header';
import { Icon } from 'flavours/glitch/components/icon';
import LoadGap from 'flavours/glitch/components/load_gap';
import { LoadGap } from 'flavours/glitch/components/load_gap';
import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';