Rewrite `<LoadGap />` as FC and TS (#25042)
parent
d27216dc46
commit
7336f3648b
4 changed files with 38 additions and 39 deletions
@ -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> |
||||||
|
); |
||||||
|
} |
||||||
|
); |
Loading…
Reference in new issue