Rewrite Icon and IconWithBadge with typescript (#24747)
parent
c53fe9b753
commit
81f75b1e0e
4 changed files with 34 additions and 43 deletions
@ -1,21 +0,0 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import classNames from 'classnames'; |
||||
|
||||
export default class Icon extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
id: PropTypes.string.isRequired, |
||||
className: PropTypes.string, |
||||
fixedWidth: PropTypes.bool, |
||||
}; |
||||
|
||||
render () { |
||||
const { id, className, fixedWidth, ...other } = this.props; |
||||
|
||||
return ( |
||||
<i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} /> |
||||
); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,14 @@ |
||||
import React from 'react'; |
||||
import classNames from 'classnames'; |
||||
|
||||
type Props = { |
||||
id: string; |
||||
className?: string; |
||||
fixedWidth?: boolean; |
||||
children?: never; |
||||
[key: string]: any; |
||||
} |
||||
export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) => |
||||
<i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />; |
||||
|
||||
export default Icon; |
@ -1,22 +0,0 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Icon from 'mastodon/components/icon'; |
||||
|
||||
const formatNumber = num => num > 40 ? '40+' : num; |
||||
|
||||
const IconWithBadge = ({ id, count, issueBadge, className }) => ( |
||||
<i className='icon-with-badge'> |
||||
<Icon id={id} fixedWidth className={className} /> |
||||
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>} |
||||
{issueBadge && <i className='icon-with-badge__issue-badge' />} |
||||
</i> |
||||
); |
||||
|
||||
IconWithBadge.propTypes = { |
||||
id: PropTypes.string.isRequired, |
||||
count: PropTypes.number.isRequired, |
||||
issueBadge: PropTypes.bool, |
||||
className: PropTypes.string, |
||||
}; |
||||
|
||||
export default IconWithBadge; |
@ -0,0 +1,20 @@ |
||||
import React from 'react'; |
||||
import { Icon } from './icon'; |
||||
|
||||
const formatNumber = (num: number): number | string => num > 40 ? '40+' : num; |
||||
|
||||
type Props = { |
||||
id: string; |
||||
count: number; |
||||
issueBadge: boolean; |
||||
className: string; |
||||
} |
||||
const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => ( |
||||
<i className='icon-with-badge'> |
||||
<Icon id={id} fixedWidth className={className} /> |
||||
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>} |
||||
{issueBadge && <i className='icon-with-badge__issue-badge' />} |
||||
</i> |
||||
); |
||||
|
||||
export default IconWithBadge; |
Loading…
Reference in new issue