Rewrite Domain component as function component (#24896)
parent
5bc8e2d1fd
commit
9818f34273
3 changed files with 43 additions and 44 deletions
@ -1,43 +0,0 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import IconButton from './icon_button'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
|
||||
const messages = defineMessages({ |
||||
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' }, |
||||
}); |
||||
|
||||
class Account extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
domain: PropTypes.string, |
||||
onUnblockDomain: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
handleDomainUnblock = () => { |
||||
this.props.onUnblockDomain(this.props.domain); |
||||
}; |
||||
|
||||
render () { |
||||
const { domain, intl } = this.props; |
||||
|
||||
return ( |
||||
<div className='domain'> |
||||
<div className='domain__wrapper'> |
||||
<span className='domain__domain-name'> |
||||
<strong>{domain}</strong> |
||||
</span> |
||||
|
||||
<div className='domain__buttons'> |
||||
<IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
|
||||
export default injectIntl(Account); |
@ -0,0 +1,42 @@ |
||||
import React, { useCallback } from 'react'; |
||||
import IconButton from './icon_button'; |
||||
import { InjectedIntl, defineMessages, injectIntl } from 'react-intl'; |
||||
|
||||
const messages = defineMessages({ |
||||
unblockDomain: { |
||||
id: 'account.unblock_domain', |
||||
defaultMessage: 'Unblock domain {domain}', |
||||
}, |
||||
}); |
||||
|
||||
type Props = { |
||||
domain: string; |
||||
onUnblockDomain: (domain: string) => void; |
||||
intl: InjectedIntl; |
||||
}; |
||||
const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => { |
||||
const handleDomainUnblock = useCallback(() => { |
||||
onUnblockDomain(domain); |
||||
}, [domain, onUnblockDomain]); |
||||
|
||||
return ( |
||||
<div className='domain'> |
||||
<div className='domain__wrapper'> |
||||
<span className='domain__domain-name'> |
||||
<strong>{domain}</strong> |
||||
</span> |
||||
|
||||
<div className='domain__buttons'> |
||||
<IconButton |
||||
active |
||||
icon='unlock' |
||||
title={intl.formatMessage(messages.unblockDomain, { domain })} |
||||
onClick={handleDomainUnblock} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export const Domain = injectIntl(_Domain); |
Loading…
Reference in new issue